@charset "utf-8";
/* -------------------------------------------------------------

	メインエリアを中心にコンテンツを定義します
	last-mod:00-00-00 name

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


/* ---------------- アクセス補助 ------------- */
/* hr要素によるセパレーターを表示させない ------------- */

@font-face{
   font-family: 'mikachan';
/*   src : url( "mikachan.eot") ;*/
   src : local( "mikachan.otf" ) ,
         url( "mikachan.otf") format( "opentype" );
   }
*{
font-family:mikachan;
}
hr.separator {
	display: none;
}

/* アクセス補助を一旦すべてのメディアに対し非表示とする ------------- */
.Shortcut,
.LabelSummaries,
.UserSupportInstruction	{
	display:none;
}

/* アクセス補助が必要なメディアに対しては再定義し表示させる(speechはCSS3先取り) ------------- */
@media aural,speech,braille {
	.Shortcut,
	.LabelSummaries,
	hr.separator,
	.UserSupportInstruction	{
   		display:block;
	}
}

/* floatの解除 ------------- */

.fbox{
	clear:both;
	_display: inline-block;
	min-height: 1%;
}
.fbox:after {
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	content: ".";
	line-height: 0;
}

/* ---------------- 上書き ------------- */
strong {
	font-weight:bold;
}
p,li,dl,dt,dd {
	line-height:1.5;
}
.red{
	color:red;
}
.red2{
	color:#DC0000;
}
.blue{
	color:blue;
}

.txt-left {
	text-align:left;
}
.txt-right {
	text-align:right;
}


.sprite {
	display:block;
	text-indent:100%;
	white-space: nowrap;
	overflow: hidden;
}





/* ===================================================================
	bodyの設定
=================================================================== */
html{height:100%;}
body{
	font-size:16px;
	color:#444444;
	_text-align:center;
	line-height:1.4;
	margin:0;
	background:#f8f4f0 url(../img/bk.gif) repeat left top;
}
div#Contents {
	width:1000px;
	margin:0 auto;
}
#Contents *{
	box-sizing:border-box;
}



/* ===================================================================
	通常のリンク
=================================================================== */
a:link {
	color: #333333;
	text-decoration: underline;
}
a:visited {
	color: #333333;
	text-decoration: underline;
}
a:hover {
	color: #696969;
	text-decoration: underline;
}
a:active {
	color: #696969;
	text-decoration: underline;
}



/* ===================================================================
	#header
	ヘッダー
=================================================================== */
#header {
	margin:0 auto;
	position:relative;
	display: flex;
	justify-content: space-between;
}


/*	ロゴ
------------------------------------------------------------------ */
#header h1#top,
#header p#top {
	margin:10px 0;
	padding:0;
}
#header h1#top a,
#header p#top a {
	display:block;
	width:262px;
	height:40px;
	background:url(../img/logo.png) no-repeat;
	text-indent:100%;
	white-space: nowrap;
	overflow: hidden;
}


.header_logo {
	padding:20px 0 0;
/*	float:left;*/
}
.header_sub {
/*	width:392px;
	float:right;*/
	padding:10px 0 0;
}
.copy {
	font-size:12px;
}


/*	ヘッダーボタン
------------------------------------------------------------------ */
#sns_btn {
/*	width:70px;*/
/*	float:right;*/
	margin-bottom:15px;
	display: flex;
	justify-content: flex-end;
}
#sns_btn li {
	margin-right:10px;
}
#sns_btn li:last-child {
	margin-right:0;
}


.btn_sp_menu {
	display:none;
}



/*	メインメニュー
------------------------------------------------------------------ */
#gmenu {
	width:495px;
/*	float:right;*/
	display: flex;
}
#gmenu li {
	margin-left:20px;
}
#gmenu li a {
	height:30px;
	text-decoration:none;
	display:block;
	background:url(../img/gmenu.png) no-repeat;
	text-indent:100%;
	white-space: nowrap;
	overflow: hidden;
}
#gmenu li a.gmenu_home {	width:54px;background-position:0 -30px;}
#gmenu li a.gmenu_home:hover {	width:54px;background-position:0 0;}
#gmenu li a.gmenu_jirei {	width:81px;background-position:-83px -30px;}
#gmenu li a.gmenu_jirei:hover {	width:81px;background-position:-83px 0;}
#gmenu li a.gmenu_company {	width:78px;background-position:-192px -30px;}
#gmenu li a.gmenu_company:hover {	width:78px;background-position:-192px 0;}
#gmenu li a.gmenu_contact {	width:98px;background-position:-295px -30px;}
#gmenu li a.gmenu_contact:hover {	width:98px;background-position:-295px 0;}
#gmenu li a.gmenu_recruit {	width:83px;background-position:-422px -30px;}
#gmenu li a.gmenu_recruit:hover {	width:83px;background-position:-422px 0;}





/* ===================================================================
	#main
	メイン
=================================================================== */
#main {
	margin:0 auto;
	padding:10px 0 80px;
}



/*	ページトップへ戻る
------------------------------------------------------------------ */
.rtb {
	text-align:right;
	margin:20px 0 0;
}

/* ===================================================================
	#footer
	フッター
=================================================================== */
#footer {
	padding:20px 0;
	margin:0 auto;
	font-size:14px;
}
#footer a {
}
#footer_menu {
	margin:0 0 10px;
	text-align:center;
}
#footer_menu li {
	display:inline;
	padding:0 10px;
}
address {
	margin:0;
	padding:0;
	text-align:center;
}







/* ===================================================================
	共通
=================================================================== */

/* 見出し */
#main h1 {
	margin:50px 0;
	overflow:hidden;
}

.h_page {
	margin:40px 0 20px;
	padding-left:35px;
	font-size:24px;
	background:url(../img/h2_icon.png) no-repeat left 0.1em;
}
.h_page:first-child {
	margin-top:0;
}



/* テーブル　一覧 */
table tr th{
	font-weight:bold;
}
table.tbl_list {
	width:100%;
	margin:0 0 20px;
	border-collapse: collapse;
	border: none;
	border-spacing: 0;
	border:1px solid #e6e6e6;
}
table.tbl_list th {
	background:#005292;
	padding:10px;
	color:#fff;
	font-weight:bold;
	text-align:center;
	border-right:1px solid #e6e6e6;
}

table.tbl_list td {
	padding:20px;
	border-right:1px solid #e6e6e6;
}
table.tbl_list tr:nth-child(odd) td {
	background:#f6f6f6;
}
.tbl_center {
	text-align:center;
}


.tbl_form {
	width:100%;
	margin:0 0 30px;
	border-collapse: collapse;
	border: none;
	border-spacing: 0;
	border:1px solid #e6e6e6;
}

.tbl_form th,
.tbl_form td {
	padding:15px 10px;
	border-bottom:1px solid #e6e6e6;
}
.tbl_form th {
	width:200px;
	font-weight:bold;
	background:#f6f6f6;
}
.tbl_form td.tbl_hissu {
	width:46px;
}

.icon_hissu {
	width:46px;
	display:block;
	background:#FF6D61;
	color:#fff;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	text-align:center;
	font-size:14px;
}
.tbl_txt {
	margin-bottom:10px;
}
.form_notice {
	font-size:14px;
}








/*	トップ
------------------------------------------------------------------ */
#main_img {
	margin:0 0 40px;
}
#main_img li {
	padding:5px;
}
#main_img li p  {
	padding:5px;
	background:#fff;
	box-shadow:0px 0px 3px 0px rgba(0,0,0,0.4);
	-moz-box-shadow:0px 0px 3px 0px rgba(0,0,0,0.4);
	-webkit-box-shadow:0px 0px 3px 0px rgba(0,0,0,0.4);
}

#home_intro {
	margin:0 0 80px;
}

#home_intro dl {
	width:310px;
	float:left;
	margin-right:30px;
}
#home_intro dl:last-child {
	margin-right:0;
}
#home_intro dl dt {
	margin:0 0 30px;
	text-align:center;
}
#home_intro dl dd {
	text-align:center;
}
.home_intro_img {
	min-height:108px;
	margin:0 0 30px;
}


/*	ブログ ------------------------------- */
#blog_info {
	margin:0 0 80px;
}
#blog_info h2 {
	margin:0 0 30px;
	overflow: hidden;
}
#blog_info h2 img {
	width:100%;
	max-width:1000px;
}
#blog_list {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
}
#blog_list li {
	width: 30%;
	margin:0 1.5% 20px;
}
#blog_list li:last-child {
	margin-right:0;
}
#blog_list li a {
	font-weight: bold;
}

.blog_img {
	width:100%;
	margin:0 0 10px;
	overflow:hidden;
	position: relative;
	background:#fff;
	box-shadow:0px 0px 3px 0px rgba(0,0,0,0.2);
	-moz-box-shadow:0px 0px 3px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow:0px 0px 3px 0px rgba(0,0,0,0.2);
}
.blog_img:before {
	content: "";
	display: block;
	padding-top:60%;
}
.blog_img span {
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	overflow: hidden;
}
.blog_img img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	max-width: 150%;
	max-height: 210%;
	
	transform-origin: center;
	transition-duration: 0.5s;
}
.blog_img img:hover {
	-webkit-transform: scale(1.2,1.2) translate(-40%, -40%);
	-ms-transform: scale(1.2,1.2) translate(-40%, -40%);
	transform: scale(1.2,1.2) translate(-40%, -40%);
	
	/* 
	transform: scale(1.2,1.2);*/
}


/* 
.pan li {
	width:360px;
	height:240px;
	overflow:hidden;
	display:block;
	margin-bottom:10px;
}
.pan li p a img {
	-moz-transition: -moz-transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-o-transition: -o-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear;
	transition: transform 0.5s linear;
}
.pan li p a img:hover {
	transform: scale(1.5);
	cursor:pointer;
}*/


/*
.blog_img {
	width:220px;
	margin:0 0 10px;
	background:#fff;
	box-shadow:0px 0px 3px 0px rgba(0,0,0,0.4);
	-moz-box-shadow:0px 0px 3px 0px rgba(0,0,0,0.4);
	-webkit-box-shadow:0px 0px 3px 0px rgba(0,0,0,0.4);
}
.blog_img a {
	display:block;
}
.blog_img span {
	display:block;
	width:210px;
	height:150px;
	margin:5px;
	overflow: hidden;
}

.blog_img img {
	position: relative;
	top: 50%;
	left: 50%;
	width: auto;
	max-width:100%;
	height: auto;
	max-height:100%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}*/

.blog_date {
	font-size:14px;
	font-weight:bold;
}


/*	自社製品・サービス ------------------------------- */
#home_service {
	width:460px;
	float:left;
	margin-bottom:80px;
}
#home_service h2 {
	margin:0 0 30px;
	overflow: hidden;
/*	height:61px;
	margin:0 0 30px;
	text-decoration:none;
	display:block;
	background:url(../img/h_service.png) no-repeat left top;
	text-indent:100%;
	white-space: nowrap;
	overflow: hidden;*/
}
#service_list li {
	float:left;
	margin:0 6px 12px;
}


/*	お知らせ ------------------------------- */
#news {
	width:460px;
	float:right;
	margin-bottom:80px;
}
#news h2 {
	margin:0 0 30px;
	overflow: hidden;
/*	height:61px;
	margin:0 0 30px;
	text-decoration:none;
	display:block;
	background:url(../img/h_news.png) no-repeat left top;
	text-indent:100%;
	white-space: nowrap;
	overflow: hidden;*/
}
#news_list {

}
#news_list li {
	margin:0 0 10px;
}
.news_date {
	font-size:14px;
	font-weight:bold;
}



/*	facebook ------------------------------- */
#home_fb {
	width:460px;
	float:left;
	margin-bottom:80px;
}
#home_fb h2 {
	margin:0 0 30px;
	overflow: hidden;
/*	height:60px;
	margin:0 0 30px;
	text-decoration:none;
	display:block;
	background:url(../img/h_fb.png) no-repeat left top;
	text-indent:100%;
	white-space: nowrap;
	overflow: hidden;*/
}
.fb-page {
	width:100% !important;
}
  

/*	Twitter ------------------------------- */
#home_twitter {
	width:460px;
	float:right;
	margin-bottom:80px;
}
#home_twitter h2 {
	margin:0 0 30px;
	overflow: hidden;
/*	height:60px;
	margin:0 0 30px;
	text-decoration:none;
	display:block;
	background:url(../img/h_twitter.png) no-repeat left top;
	text-indent:100%;
	white-space: nowrap;
	overflow: hidden;*/
}



/* LINEスタンプムービー */
.bn_stamp {
	margin:20px auto 40px;
	text-align:center;
}
#stampmovie {
	display:none;
	margin:0;
	padding:0;
}


/* ===================================================================
	企業概要
=================================================================== */

#company_profile {
	margin:0 0 60px;
}
.tbl_company {
	width:420px;
	float:left;
	margin:0 0 20px;
	border-collapse: collapse;
	border: none;
	border-spacing: 0;
	border-top:1px solid #CDCECE;
}
.tbl_company td,
.tbl_company th {
	padding:10px;
	border-bottom:1px solid #CDCECE;
	text-align:left;
}

#map_box {
	width:500px;
	float:right;
}
.map_big {
	margin-top:10px;
	text-align:right;
}
.map_big a {
	display: inline-block;
	margin-bottom: 0.3em;
}

#company_enkaku {
	margin:0 0 60px;
}
.tbl_enkaku {
	width:auto;
	margin:0 0 20px;
	border-collapse: collapse;
	border: none;
	border-spacing: 0;
	border-top:1px solid #CDCECE;
}
.tbl_enkaku td,
.tbl_enkaku th {
	padding:10px;
	border-bottom:1px solid #CDCECE;
	text-align:left;
}


/* 各企業 */
.affiliations_txt {
	margin:0 0 30px;
}
.affiliations_list {
	margin:0 0 40px;
}
.affiliations {
	width:290px;
	margin:0 20px;
	float:left;
}
.affiliations dt {
	text-align:center;
	margin:0 0 30px;
}
.affiliations_name {
	text-align:center;
	font-size:20px;
	margin:0 0 20px;
}
.affiliations_intro {
	font-size:14px;
}



/* ===================================================================
	プライバシーポリシー
=================================================================== */
#privacy .h_page {
	margin-top:40px;
}
.privacy_intro {
	margin:0 0 30px;
}
.privacy_list {
	counter-reset:num;
	margin:0 10px 50px;
}
.privacy_list li {
	margin:0 0 10px;
}
.privacy_list li:before {
	counter-increment:num;
	content: counter(num);
	background:#FF8E02;
	color:#fff;
	display:inline-block;
	margin-right:10px;
	width:22px;
	height:22px;
	text-align:center;
	border-radius: 50%;
}
.privacy_text {
	margin:0 10px 10px;
}

#about_site {
	padding-top:30px;
	border-top:1px solid #CDCECE;
}
#about_site h3 {
	font-weight:bold;
	margin:0 10px 10px;
}
#about_site p {
	margin:0 10px 30px;
}




/* ===================================================================
	制作料金
=================================================================== */
.price_txt {
	margin:0 0 40px;
}
.tbl_price {
	width:100%;
	margin:20px 0 20px;
	border-collapse: collapse;
	border: none;
	border-spacing: 0;
	border-top:1px solid #CDCECE;
}
.tbl_price caption {
	text-align:left;
	font-size:130%;
	margin-bottom:5px;
}
.tbl_price td,
.tbl_price th {
	padding:10px;
	border-bottom:1px solid #CDCECE;
	text-align:left;
	background: rgba(255,255,255,0.6);
	font-size:14px;
}
.tbl_price tr td.price {
	width:12em;
	font-weight:bold;
	text-align:right;
	border-left:1px dotted #CDCECE;
}
.tbl_price tr td.unit {
	width:6em;
	text-align:center;
	border-left:1px dotted #CDCECE;
}

.tbl_price tr.tbl_price_h th {
	background: rgba(205,206,206,0.6);
	text-align:center;
}

.price_notice {
	margin:0 0 5px;
	font-size:80%;
}


/* 制作の流れ */
.flow_img {
	margin:0 auto 40px;
}
.flow_img img {
	width:100%;
}
#flow_list li {
	min-height:30px;
	margin:0 0 40px;
	padding-left:40px;
}
#flow_list li.flow01 {	background:url(../img/flow_icon_01.png) no-repeat left top;}
#flow_list li.flow02 {	background:url(../img/flow_icon_02.png) no-repeat left top;}
#flow_list li.flow03 {	background:url(../img/flow_icon_03.png) no-repeat left top;}
#flow_list li.flow04 {	background:url(../img/flow_icon_04.png) no-repeat left top;}
#flow_list li.flow05 {	background:url(../img/flow_icon_05.png) no-repeat left top;}
#flow_list li.flow06 {	background:url(../img/flow_icon_06.png) no-repeat left top;}
#flow_list li.flow07 {	background:url(../img/flow_icon_07.png) no-repeat left top;}
#flow_list li.flow08 {	background:url(../img/flow_icon_08.png) no-repeat left top;}
#flow_list li.flow09 {	background:url(../img/flow_icon_09.png) no-repeat left top;}
#flow_list li.flow10 {	background:url(../img/flow_icon_10.png) no-repeat left top;}
#flow_list li.flow11 {	background:url(../img/flow_icon_11.png) no-repeat left top;}
#flow_list li.flow12 {	background:url(../img/flow_icon_12.png) no-repeat left top;}

#flow_list li h2 {
	font-size: 24px;
}



.works_box {
	width:30%;
	margin:0 1.6% 1.6%;
	float:left;
}
.works_box dl dt {
	margin-bottom:10px;
	text-align:center;
}
.works_box dl dt img {
	width:100%;
	max-width:300px;
}



/* ===================================================================
	採用情報
=================================================================== */
.recruit_h {
	font-size:1.5rem;
}
.recruit_img {
	margin:0 0 20px;
}
.recruit_img img {
	max-width: 100%;
}
.tbl_recruit {
	width:90%;
	margin:0 0 20px;
	border-collapse: collapse;
	border: none;
	border-spacing: 0;
	border-top:1px solid #CDCECE;
}
.tbl_recruit td,
.tbl_recruit th {
	padding:10px 20px;
	border-bottom:1px solid #CDCECE;
	text-align:left;
}


.recruit_list {
	display: flex;
	margin:20px 0 ;
	justify-content: center;
	flex-wrap: wrap;
}
.recruit_list li {
	width:24%;
	margin: 0 2% 4%;
/*	padding:10px;*/
	text-align:center;
}
.recruit_list li a {
	text-decoration:none;
}
.recruit_list li a img {
	width: 100%;
}
.recruit_list li .recruit_list_name {
	display:block;
	background:#00913a;
	color:#fff;
	padding:8px;
}


/* ------ ～1000px ------ */
@media screen and ( max-width : 1000px ){
	div#Contents {
		width:auto;
		margin:0 10px;
	}
	/*	ヘッダー
	------------------------------------------------------------------ */
	#header {
	}
	#header h1#top,
	#header p#top {
	}

	
	#home_service,
	#news,
	#home_fb,
	#home_twitter {
		width:48%;
	}
	
	#home_intro dl {
		width:30%;
		margin:0 5% 0 0;
		font-size:14px;
	}
	#home_intro dl dt img {
		width:100%;
		max-width:310px;
	}
	.home_intro_img img {
		width:100%;
		max-width:170px;
	}
	
	#service_list li {
		width:48%;
		margin:0 1% 2%;
	}
	#service_list li img {
		width:100%;
	}
	
	.bn_stamp img {
		width:100%;
		max-width:700px;
	}
	
	.tbl_company {
		float:none;
	}
	#map_box {
		width:100%;
		float:none;
	}
	.affiliations {
		width:29%;
		margin:0 2%;
	}
	.affiliations dt img {
		width:90%;
		max-width:230px;
	}
}



/* ------ ～780px ------ */
@media screen and (max-width: 780px) {
	#header {
		display: block;
		margin:0 auto 10px;
	}
	.header_logo {
		padding:10px 0 0;
		float:none;
	}
	#header h1#top,
	#header p#top {
		margin:5px 0;
	}
	#header h1#top a,
	#header p#top a {
		width:197px;
		height:30px;
		background:url(../img/logo.png) no-repeat;
		background-size:197px 30px;
	}

	.header_sub {
		width:auto;
		float:none;
		overflow:hidden;
	}
	#sns_btn {
		float:none;
		position:absolute;
		top:10px;
		right:0px;
	}
	#gmenu {
		justify-content: center;
		width:auto;
		float:none;
		margin-bottom:20px;
	}
	#gmenu li {
		margin:0 2px;
	}
	
	.recruit_list {
		flex-wrap: wrap;
	}
	.recruit_list li {
		width:46%;
		margin:0 2% 4%;
	}
	
	#home_service,
	#news,
	#home_fb,
	#home_twitter {
		width:auto;
		float:none;
	}
}




/* ------ ～479px ------ */
@media screen and (max-width: 479px) {
	
	#gmenu li:first-child {
		display:none;
	}

	#home_intro dl,
	#home_intro dl:last-child {
		width:auto;
		float:none;
		margin:0 auto 30px;
	}
	#home_intro dl dt {
		margin-bottom:10px;
	}
	#home_intro dl dt img {
		width:100%;
		max-width:310px;
	}
	.home_intro_img {
		margin-bottom:10px;
	}

	
	
	#blog_list li,
	#blog_list li:last-child {
		float:none;
		margin:0 auto 10px;
	}
	
	#blog_info h2 img {
		width:700px;
		max-width:700px;
	}
	
	#home_service h2,
	#news h2,
	#home_fb h2,
	#home_twitter h2 {
		margin-bottom:20px;
	}
	
	#home_service h2 img,
	#news h2 img,
	#home_fb h2 img,
	#home_twitter h2 img {
		width:700px;
	}
	
	.affiliations {
		width:100%;
		margin:0 0 30px;
		float:none;
	}
	
	.tbl_price {
		font-size:12px;
	}
	.tbl_price td,
	.tbl_price th {
		padding:5px;
		font-size:12px;
	}
	.tbl_price tr td.price {
		width:8em;
	}
	
	
		
	.works_box {
		width:auto;
		margin:0 0 20px;
		float:none;
		clear:both;
		overflow:hidden;
	}
	.works_box dl dt {
		width:35%;
		text-align:center;
		float:left;
	}
	.works_box dl dd {
		width:60%;
		float:right;
	}
	.works_box dl dt img {
		width:100%;
		max-width:300px;
	}
}