@charset "UTF-8";
/* CSS Document */

html{}
body{ width:100%;}
h1, h1 a{ line-height:0;}

/* フォント スタイル */
.f-large{ font-size:26px;}
.f-middle{ font-size:18px }
.f-bold{ font-weight:400;}
.f-heavy{ font-weight:500;}

.row{ display:block;margin: auto;font-size: 0; width:90%;}
.contents{ padding:10;}

/* 横並びにしたいli要素に付与 */
.col{ display:inline-block; width:100%;vertical-align: top;}
/* 幅指定 */
.colx2{ width:50%;}
.col_w1{ width:10%;}
.col_w2{ width:20%;}
.col_w3{ width:30%;}
.col_w7{ width:70%;}


/* TOPボタン位置設定の親要素となる  */
.main_body {
	width: 100%;
	height:100%;
	position:relative;
}

/* Adobe Tylekit - DIN */
.web-f{
	font-family: din-condensed-web;
	font-size:24px;
	line-height: 24px;
}
.web-f-la{
	font-family: din-condensed-web;
	font-size:30px;
	line-height: 24px;
	margin-bottom: 30px;
}


/* 幅980px、中央寄せするとき以下を付与 */
.wrapper_box{
	max-width: 1020px;
	margin:auto;
	box-sizing: border-box;
}

.wrapper_box_m{
	max-width: 640px;
	margin: auto;
	padding: 0 20px;
	text-align: justify;
	box-sizing: content-box;
}
.wrapper_box_m_2{
	max-width: 980px;
	margin: auto;
	padding: 0 20px;
	text-align: center;
	box-sizing: content-box;
}

/* 縦横中央 - 親子で使用 */
/*親*/
.tbl_base{
	width:100%;
	height: 100%;
	display: table;
	margin: auto;
}
/* 子 */
.tbl{
	padding:0 20px;
	vertical-align:middle;
	display:table-cell;
}

.tbl_top{
	padding:20px;
	vertical-align:top;
	display:table-cell;
}

/*———————————–———————————–
　　見出しスタイル
———————————–———————————–*/
.section h3 {
    text-align: center;
	font-size: 1.3em;
	font-weight: 400;
	letter-spacing: 0.06em;
}
.section h4 {
	font-weight:400;
	font-size: 1.3em;
	font-weight: 400;
	letter-spacing: 0.06em;
}

/* 見出し背景 */
.sec_bgclr{
	background:#f2f3f3;
}

.sec_bgclr_orange{
	background:#FFD000;
}

.sec_title{
	text-align: center;
	padding:0;
	font-size: 2em;
	font-weight: 400;
	letter-spacing: 0.08em;
}

.sec_title_s{
text-align: center;
padding: 0px 0 25px 0;
font-size: 24px;
}

/*———————————–———————————–
　　ページ下部　お問い合わせ
———————————–———————————–*/

.info{
	background:url('../images/contact_bg.jpg');
	background-size:cover;
	background-position:center;
	transform:translate3d(0px, 0px, 0px);
	text-align:center;
	color:#fff;
}

.info .wrapper_box{
	padding:50px 20px;
}

/*———————————–———————————–
　　ボタン　スタイル
———————————–———————————–*/

/* 共通 */
.btn-base{
	text-align: center;
	vertical-align:middle;
	height:150px;
	padding:0;
}
.btn-box{
	display: block;
	border-radius: 5px;
	height: 40px;
	line-height: 40px;
	margin:auto;
}

/* 任意 */
.btn-more {
	background: none;
	color:#111;
	max-width:200px;
	border:1px solid #111;
}
/* お問い合わせボタン */
.info .btn-base{ height:100px;}
.btn-info{
	background: #CFCFCF;
	max-width: 400px;
	height: 48px;
	line-height: 48px;
}


.btn-info{
max-width: 400px;
height: 48px;
background: #CFCFCF;
color:#ffffff;
border-radius: 24px;
}



/*———————————–———————————–
　　 IcoMoonアイコン　スタイル
———————————–———————————–*/
.fs1 {
    font-size: 50px;
    text-align: center;
	display: block;
}

/*———————————–———————————–
　　 スライダー　スタイル
———————————–———————————–*/

#theTarget{
	height:500px;
	position:relative;
	/*background:#FFE3BB;*/
	}

.slider_img img{
	width:100%;
	max-width:800px;
}

.top_tel_num{
	font-size: 26px;
line-height: 48px;
font-weight: 600;
}

#page_box {
    padding-bottom: 30px;
}

#slider01-bg {
	/*background-image: url('../images/ylw_line_bg_01.png');*/
	background-image: url('../images/slider_bg_01.png');
	background-repeat: no-repeat;
	background-size:cover;
}
#slider02-bg {
	background-image: url('../images/slider4_bg.jpg');
	background-repeat: no-repeat;
	background-size:cover;
}
#slider03-bg {
	background-image: url('../images/slider2_bg.jpg');
	background-repeat:no-repeat;
	background-size:cover;
}
#slider04-bg {
	background-image: url('../images/slider_bg_02.png');
	background-repeat: no-repeat;
	background-size:cover;
}
#slider04-bg .btn-more{
	background:#FA6B00;
	color:#fff;
	border:0;
}

#slider05-bg {
	background-image: url('../images/slider5_bg.jpg');
	background-repeat: no-repeat;
	background-size:cover;
}
#slider05-bg .btn-more{
	background:firebrick;
	color:#fff;
	border:0;
}



.slider_img01{
	width:100%;
	max-width:150px;
	}
.slider_img02{
	width:100%;
	max-width:500px;
}
.slider_img03{
	width:100%;
	max-width:595px;
}

.slider_img04 {
    width: 100%;
    margin-top: 20px;
}
.slider_img05{
	width:100%;
	max-width:250px;
	}


#slider01-bg .wrapper_box_m{
	text-align:center;
}

#slider04-bg .wrapper_box_m{
	text-align:center;
}


#slider05-bg .wrapper_box_m{
	text-align:center;
}



/*———————————–———————————–
　　下層アイキャッチ
———————————–———————————–*/

.eye_catch{
	height:200px;
	display:table;
	width:100%;
}

.eye_catch .mdl_cell{
    text-align: center;
    font-size: 19px;
    font-weight: 200;
	text-shadow: -1px 1px 0 #fff;
}

/*———————————–———————————–
　　下層タイトル
———————————–———————————–*/

.content_head{
	text-align:center;
	height:300px;

}
.content_head h4{
	font-size:22px;
}
.content_head p{
	font-weight:400;
}

.main_head{
	max-width:300px;
	position:relative;
	height:100px;
	color:#fff;
	margin:auto;
}

.main_head h2,
.main_head hr,
.main_head h3{
	position:absolute;
}
.main_head h2,
.main_head h3{
	left: 0;
	right: 0;
	display:block;
}
.main_head h2{
	top: 0;
	font-size:36px;
}
.main_head h3{
	bottom: 0;
	font-size: 16px;
}

/* 下層　下線スタイル */
.head_hr_solid{
	bottom: 50%;
	left: 120px;
	right: 120px;
	border-style:solid;
	border-width:1px;
	margin: 0;
}
.hr_solid{
	border:none;
	border-top:2px solid #111;
	width:60px;
}


/*———————————–———————————–
　　TOPコンテンツ
———————————–———————————–*/

/* コンテンツ　上下余白 */
#top_news,
#top_works,
#top_plan,
#top_flow,
#top_service{
    padding: 60px 20px;
}

#top_news h2,
#top_works h2,
#top_plan h2,
#top_flow h2,
#top_service h2,
#top_works h2{
    padding-bottom: 60px;
}


/* スライダー */
#theTarget .mdl_cell{ width:600px;}

.circle{
	width:200px;
	height:200px;
	border-radius:200px;
	background:#fff;
	display:table;
	text-align:center;
}

.circle>p{
	display:table-cell;
	vertical-align:middle;
}
#theTarget .wrapper_box_m{
	height:410px;
}
#slider01 .wrapper_box_m{
	position:relative;
}
/*#slider01 .wrapper_box_m img:nth-of-type(1){
	position:absolute;
	top:0;
	z-index:2;
}
#slider01 .wrapper_box_m img:nth-of-type(2){
	position:absolute;
	bottom:0;
	right:0;
}*/

#slider02 .circle{
	background:#FFD000;
	margin: auto;
}

/* TOP フロー */
#top_flow_row .top_flow_icon { width:10%; position:relative;}
#top_flow_row li:nth-child(2).col{width:20%;}
#top_flow_row li:nth-child(3).col{width:70%; padding-bottom:30px;}
.top_flow_icon .fs1{ position:absolute; top:0;}
.top_flow_icon span{ position:absolute;}

#top_flow_row .top_flow_icon img{ width:50%;}

/* TOP サービス */
#top_service ul li{ width:32%;}
#top_service ul li:nth-child(3n-1) {
  margin: 0 2%;
}

/* TOP 制作プラン */
#top_plan .tbl_base>.wrapper_box_m{
	text-align:center;
	padding:0;
	padding-bottom:40px;
}
#top_plan ul{
	padding:0;
}
#top_plan ul li{
  width: 20%;
  text-align:center;
  vertical-align:top;
  display: inline-table;
}
#top_plan img{ 
	width:100%;
	max-width:112px;
}

/* 制作実績 */
#top_works img{ width:100%; max-width:210px;}
#top_works li{
	display:inline-block;
	width: 33.3%;
	text-align: center;
}

.innerbox{display: table-cell;
vertical-align: middle;}



/* 新着情報 */
.top_news_list .row{
	padding:5px 0;
}



#top_news #page_box a{
	color:#999;
}
#top_news #page_box a:hover{
	color:#bebebe;
}