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

/*------------- 【 共通 】タイトル＆ビジュアル  -------------*/

/* タイトル＆ビジュアルエリア 【 PC表示時 】 */
.sub_visual_pc {
	width: 1080px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

/* 左 青ボックス */
.sub_visual_box_pc {
	width: 400px;
	height: 320px;
	margin: 0 auto;
	text-align: center;
	background-color: #4d76a3;
	position: relative;
}

/* 左 青ボックス内 */
.icon_pc_warp {
	position: absolute;
	top: 50%;
 	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
}

/* アイコン */
.icon_pc {
	margin: 0 auto;
}

/*------------- アイコンの大きさ 各ページ別指定  -------------*/

/* 【 制作実績 】画像*/
.icon_works {
	width: 60%;
	margin: 0 auto 15px auto;
}

/* 【 制作の流れ 】画像*/
.icon_order {
	width: 30%;
	margin: 0 auto 15px auto;
}

/* 【 ホームページ制作 】画像*/
.icon_website {
	width: 30%;
	margin: 0 auto 15px auto;
}

/* 【 各種広告提案・運用サポート 】画像*/
.icon_ad {
	width: 22%;
	margin: 0 auto 15px auto;
}

/* 【 通販サイト・実店舗運営 】画像*/
.icon_shop {
	width: 45%;
	margin: 0 auto 15px auto;
}

/* 【 企業情報 】画像*/
.icon_company {
	width: 35%;
	margin: 0 auto 15px auto;
}

/* 【 求人募集 】画像*/
.icon_recruit {
	width: 40%;
	margin: 0 auto 15px auto;
}

/* 【 お問い合わせ 】画像*/
.icon_contact {
	width: 35%;
	margin: 0 auto 15px auto;
}

/* 【 システム開発 】画像*/
.icon_system {
	width: 30%;
	margin: 0 auto 15px auto;
}

/* タイトル名 */
.sub_visual_box_pc h2 {
	margin: 10px auto 6px auto;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;
}

/* 英文字のルビ */
.sub_visual_box_pc p {
	font-weight: bold;
	color: #fff;
}

/* 右 画像エリア*/
.sub_visual_img {
	width: 680px;
	height: 320px;
}

/*------------- 【 共通 】各表示時に隠す  -------------*/

/* タイトル＆ビジュアルエリア 【 タブレット表示時 】 */
.sub_visual_works_tb {
	display: none;
}

.sub_visual_order_tb {
	display: none;
}

.sub_visual_website_tb {
	display: none;
}

.sub_visual_ad_tb {
	display: none;
}

.sub_visual_shop_tb {
	display: none;
}

.sub_visual_company_tb {
	display: none;
}

.sub_visual_recruit_tb {
	display: none;
}

.sub_visual_contact_tb {
	display: none;
}

.sub_visual_system_tb {
	display: none;
}

/* タイトル＆ビジュアルエリア 【 SP表示時 】 */
.sub_visual_works_sp {
	display: none;
}

.sub_visual_order_sp {
	display: none;
}

.sub_visual_website_sp {
	display: none;
}

.sub_visual_ad_sp {
	display: none;
}

.sub_visual_shop_sp {
	display: none;
}

.sub_visual_company_sp {
	display: none;
}

.sub_visual_recruit_sp {
	display: none;
}

.sub_visual_contact_sp {
	display: none;
}

.sub_visual_system_sp {
	display: none;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* タイトル＆ビジュアルエリア 【 タブレット表示時 】 */
	
/* 【 制作実績 】 ページ */
.sub_visual_works_tb {
	width: 100%;
	height: 290px;
	margin: 70px auto 0 auto;
	background: url(../img/head_works_tb.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
	position: relative;
	display: block;
}
	
/* 【 制作の流れ 】 ページ */
.sub_visual_order_tb {
	width: 100%;
	height: 290px;
	margin: 70px auto 0 auto;
	background: url(../img/head_order_tb.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
	position: relative;
	display: block;	
}

/* 【 ホームページ制作 】 ページ */
.sub_visual_website_tb {
	width: 100%;
	height: 290px;
	margin: 70px auto 0 auto;
	background: url(../img/head_website_tb.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
	position: relative;
	display: block;	
}
	
/* 【 各種広告提案・運用サポート 】 ページ */
.sub_visual_ad_tb {
	width: 100%;
	height: 290px;
	margin: 70px auto 0 auto;
	background: url(../img/head_ad_tb.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
	position: relative;
	display: block;	
}
	
/* 【 通販サイト・実店舗運営 】 ページ */
.sub_visual_shop_tb {
	width: 100%;
	height: 290px;
	margin: 70px auto 0 auto;
	background: url(../img/head_shop_tb.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
	position: relative;
	display: block;	
}
	
/* 【 企業情報 】 ページ */
.sub_visual_company_tb {
	width: 100%;
	height: 290px;
	margin: 70px auto 0 auto;
	background: url(../img/head_company_tb.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
	position: relative;
	display: block;	
}
	
/* 【 求人募集 】 ページ */
.sub_visual_recruit_tb {
	width: 100%;
	height: 290px;
	margin: 70px auto 0 auto;
	background: url(../img/head_recruit_tb.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
	position: relative;
	display: block;	
}
	
/* 【 お問い合わせ 】 ページ */
.sub_visual_contact_tb {
	width: 100%;
	height: 290px;
	margin: 70px auto 0 auto;
	background: url(../img/head_contact_tb.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
	position: relative;
	display: block;	
}
	
/* 【 システム開発 】 ページ */
.sub_visual_system_tb {
	width: 100%;
	height: 290px;
	margin: 70px auto 0 auto;
	background: url(../img/head_system_tb.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
	position: relative;
	display: block;	
}
	
/* ビジュアル内 */
.icon_tb_warp {
	position: absolute;
	top: 50%;
 	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
}

/* ビジュアル画像 */
.icon_tb_warp img {
	margin: 0 auto;	
}
	
/* 【 制作実績 】タイトル名 */
.sub_visual_works_tb h2 {
	margin: 10px auto 6px auto;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 制作の流れ 】タイトル名 */
.sub_visual_order_tb h2 {
	margin: 10px auto 6px auto;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 ホームページ制作 】タイトル名 */
.sub_visual_website_tb h2 {
	margin: 10px auto 6px auto;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 各種広告提案・運用サポート 】タイトル名 */
.sub_visual_ad_tb h2 {
	margin: 10px auto 6px auto;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 通販サイト・実店舗運営 】タイトル名 */
.sub_visual_shop_tb h2 {
	margin: 10px auto 6px auto;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 企業情報 】タイトル名 */
.sub_visual_company_tb h2 {
	margin: 10px auto 6px auto;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 求人募集 】タイトル名 */
.sub_visual_recruit_tb h2 {
	margin: 10px auto 6px auto;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 お問い合わせ 】タイトル名 */
.sub_visual_contact_tb h2 {
	margin: 10px auto 6px auto;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 システム開発 】タイトル名 */
.sub_visual_system_tb h2 {
	margin: 10px auto 6px auto;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
								
/* 【 制作実績 】英文字のルビ */
.sub_visual_works_tb p {
	font-weight: bold;
	color: #fff;
}
	
/* 【 制作の流れ 】英文字のルビ */
.sub_visual_order_tb p {
	font-weight: bold;
	color: #fff;
}

/* 【 ホームページ制作 】英文字のルビ */
.sub_visual_website_tb p {
	font-weight: bold;
	color: #fff;
}
	
/* 【 各種広告提案・運用サポート 】英文字のルビ */
.sub_visual_ad_tb p {
	font-weight: bold;
	color: #fff;
}

/* 【 通販サイト・実店舗運営 】英文字のルビ */
.sub_visual_shop_tb p {
	font-weight: bold;
	color: #fff;
}

/* 【 企業情報 】英文字のルビ */
.sub_visual_company_tb p {
	font-weight: bold;
	color: #fff;
}

/* 【 求人募集 】英文字のルビ */
.sub_visual_recruit_tb p {
	font-weight: bold;
	color: #fff;
}
	
/* 【 お問い合わせ 】英文字のルビ */
.sub_visual_contact_tb p {
	font-weight: bold;
	color: #fff;
}
	
/* 【 システム開発 】英文字のルビ */
.sub_visual_system_tb p {
	font-weight: bold;
	color: #fff;
}
	
/*------------- 【 共通 】各表示時に隠す  -------------*/	
	
/* タイトル＆ビジュアルエリア 【 PC表示時 】 */	
.sub_visual_pc {
	display: none;
}

/* タイトル＆ビジュアルエリア 【 SP表示時 】 */
.sub_visual_works_sp {
	display: none;
}
	
.sub_visual_order_sp {
	display: none;
}

.sub_visual_website_sp {
	display: none;
}

.sub_visual_ad_sp {
	display: none;
}
	
.sub_visual_shop_sp {
	display: none;
}
	
.sub_visual_company_sp {
	display: none;
}
	
.sub_visual_recruit_sp {
	display: none;
}
	
.sub_visual_contact_sp {
	display: none;
}
	
.sub_visual_system_sp {
	display: none;
}
}

@media screen and (max-width:599px) {
/* タイトル＆ビジュアルエリア 【 SP表示時 】 */

/* 【 制作実績 】 ページ */
.sub_visual_works_sp {
	width: 100%;
	height: 300px;
	margin: 70px auto 0 auto;
	background: url(../img/head_works_sp.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	display: block;	
}

/* 【 制作の流れ 】 ページ */
.sub_visual_order_sp {
	width: 100%;
	height: 300px;
	margin: 70px auto 0 auto;
	background: url(../img/head_order_sp.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	display: block;	
}
	
/* 【 ホームページ制作 】 ページ */
.sub_visual_website_sp {
	width: 100%;
	height: 300px;
	margin: 70px auto 0 auto;
	background: url(../img/head_website_sp.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	display: block;	
}
	
/* 【 各種広告提案・運用サポート 】 ページ */
.sub_visual_ad_sp {
	width: 100%;
	height: 300px;
	margin: 70px auto 0 auto;
	background: url(../img/head_ad_sp.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	display: block;
}
	
/* 【 通販サイト・実店舗運営 】 ページ */
.sub_visual_shop_sp {
	width: 100%;
	height: 300px;
	margin: 70px auto 0 auto;
	background: url(../img/head_shop_sp.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	display: block;
}
	
/* 【 企業情報 】 ページ */
.sub_visual_company_sp {
	width: 100%;
	height: 300px;
	margin: 70px auto 0 auto;
	background: url(../img/head_company_sp.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	display: block;
}
	
/* 【 求人募集 】 ページ */
.sub_visual_recruit_sp {
	width: 100%;
	height: 300px;
	margin: 70px auto 0 auto;
	background: url(../img/head_recruit_sp.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	display: block;
}
	
/* 【 お問い合わせ 】 ページ */
.sub_visual_contact_sp {
	width: 100%;
	height: 300px;
	margin: 70px auto 0 auto;
	background: url(../img/head_contact_sp.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	display: block;
}
	
/* 【 システム開発 】 ページ */
.sub_visual_system_sp {
	width: 100%;
	height: 300px;
	margin: 70px auto 0 auto;
	background: url(../img/head_system_sp.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	display: block;
}
	
/* ビジュアル内 */
.icon_sp_warp {
	position: absolute;
	top: 50%;
 	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	text-align: center;
}

/* ビジュアル画像 */
.icon_sp_warp img {
	margin: 0 auto;	
}

/* 【 制作実績 】タイトル名 */
.sub_visual_works_sp h2 {
	margin: 10px auto 4px auto;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 制作の流れ 】タイトル名 */
.sub_visual_order_sp h2 {
	margin: 10px auto 4px auto;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 ホームページ制作 】タイトル名 */
.sub_visual_website_sp h2 {
	margin: 10px auto 4px auto;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 各種広告提案・運用サポートページ 】タイトル名 */
.sub_visual_ad_sp h2 {
	margin: 10px auto 4px auto;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 通販サイト・実店舗運営 】タイトル名 */
.sub_visual_shop_sp h2 {
	margin: 10px auto 4px auto;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 企業情報 】タイトル名 */
.sub_visual_company_sp h2 {
	margin: 10px auto 4px auto;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}

/* 【 求人募集 】タイトル名 */
.sub_visual_recruit_sp h2 {
	margin: 10px auto 4px auto;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 お問い合わせ 】タイトル名 */
.sub_visual_contact_sp h2 {
	margin: 10px auto 4px auto;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
	
/* 【 システム開発 】タイトル名 */
.sub_visual_system_sp h2 {
	margin: 10px auto 4px auto;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;	
}
				
/* 【 制作実績 】英文字のルビ */
.sub_visual_works_sp p {
	font-weight: bold;
	color: #fff;
}
	
/* 【 制作の流れ 】英文字のルビ */
.sub_visual_order_sp p {
	font-weight: bold;
	color: #fff;
}
	
/* 【 ホームページ制作 】英文字のルビ */
.sub_visual_website_sp p {
	font-weight: bold;
	color: #fff;
}
	
/* 【 各種広告提案・運用サポート 】英文字のルビ */
.sub_visual_ad_sp p {
	font-weight: bold;
	color: #fff;
}
	
/* 【 通販サイト・実店舗運営 】英文字のルビ */
.sub_visual_shop_sp p {
	font-weight: bold;
	color: #fff;
}
	
/* 【 企業情報 】英文字のルビ */
.sub_visual_company_sp p {
	font-weight: bold;
	color: #fff;
}

/* 【 求人募集 】英文字のルビ */
.sub_visual_recruit_sp p {
	font-weight: bold;
	color: #fff;
}
	
/* 【 お問い合わせ 】英文字のルビ */
.sub_visual_contact_sp p {
	font-weight: bold;
	color: #fff;
}
	
/* 【 システム開発 】英文字のルビ */
.sub_visual_system_sp p {
	font-weight: bold;
	color: #fff;
}
	
/*------------- 【 共通 】各表示時に隠す  -------------*/	
	
/* タイトル＆ビジュアルエリア 【 PC表示時 】 */	
.sub_visual_pc {
	display: none;
}

/* タイトル＆ビジュアルエリア 【 タブレット表示時 】 */
.sub_visual_works_tb {
	display: none;
}
	
.sub_visual_order_tb {
	display: none;
}
	
.sub_visual_website_tb {
	display: none;
}
	
.sub_visual_ad_tb {
	display: none;
}

.sub_visual_shop_tb {
	display: none;
}
	
.sub_visual_company_tb {
	display: none;
}

.sub_visual_recruit_tb {
	display: none;
}
	
.sub_visual_contact_tb {
	display: none;
}
	
.sub_visual_system_tb {
	display: none;
}
}

/*------------------ 【 共通 】スペース  ------------------*/

/* スペース*/
.space {
	width: 100%;
	margin: 0 auto;
	padding: 25px 0;
}

/* スペース*/
.space_pc {
	width: 100%;
	margin: 0 auto;
	padding: 25px 0;
}

@media screen and (min-width:600px) and (max-width:979px) {
}

@media screen and (max-width:599px) {
/* スペース */
.space {
	width: 100%;
	margin: 0 auto;
	padding: 15px 0;
}
	
/* スペース*/
.space_pc {
	display: none;
}
}

/*------------------ 【 共通 】見出し  ------------------*/

/* 見出し */
.title_common {
	width: 1080px;
	margin: 0 auto;
	text-align: center;
}

/* 見出しテキスト*/
.title_common h2 {
	margin: 0 auto 20px auto;
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1.45em;
	color: #4d76a3;
}

/* テキスト */
.title_common p {
	margin: 0 auto;
	line-height: 1.5em;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* 見出し */
.title_common {
	width: 95%;
}	
}

@media screen and (max-width:599px) {
/* 見出し */
.title_common {
	width: 95%;
}

/* 見出し */
.title_common h2 {
	font-size: 1.3em;
	line-height: 1.4em;
}
	
/* テキスト */
.title_common p {
	font-size: 0.8em;
}
}

/*------------------ 【 共通 】各コンテンツのイメージ画像  ------------------*/

/* イメージ画像エリア */
.content_img {
	width: 1080px;
	margin: 0 auto;
}

/* イメージ画像 */
.content_img img {
	width: 80%;
	margin: 80px auto;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* イメージ画像エリア */
.content_img {
	width: 95%;
}	
}

@media screen and (max-width:599px) {
/* イメージ画像エリア */
.content_img {
	width: 95%;
}

/* イメージ画像 */
.content_img img {
	width: 90%;
	margin: 40px auto;
}
}

/*----------------- 【 共通 】制作事例への画像紹介 ----------------*/

/* 制作事例への画像紹介 */
.work_site {
	width: 90%;
	margin: 0 auto;
}

.work_site_warp {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	text-align: center;
}

.work_site_warp li {
	width: 30%;
	margin: 0 10px 60px 10px;
}

/* 画像 */
.work_site_warp li a img {
	width: 100%;
	margin: 0 auto 15px auto;
}

/* テキスト */
.work_site_warp li a {
	text-decoration: none;
	font-size: 1.1em;
	font-weight: bold;
	color: #4d76a3;
	transition: 0.3s ease-in-out;
	display: block;
}


/* ホバー時 */
.work_site_warp li a:hover {
	opacity: 0.7;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* 制作事例への画像紹介 */
.work_site {
	width: 95%;
}
	
.work_site_warp li {
	width: 45%;
	margin: 0 10px 50px 10px;
}
	
/* テキスト */
.work_site_warp li a {
	font-size: 0.95em;
}
}

@media screen and (max-width:599px) {
/* 制作事例への画像紹介 */
.work_site {
	width: 95%;
}
	
.work_site_warp li {
	width: 100%;
	display: block;
	margin: 0 10px 40px 10px;
}	
}

/*---------------- 【 共通 】制作事例を見るボタン -----------------*/

/* 制作事例を見るボタン */
.btn_works {
	width: 1080px;
	margin: 10px auto 100px auto;
}

/* 画像 */
.btn_works img {
	width: 28%;
	margin: 0 auto;
}

.btn_works a {
	text-decoration: none;
	transition: 0.3s ease-in-out;
	display: block;
}

/* ホバー時 */
.btn_works a:hover {
	opacity: 0.7;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* 制作事例を見るボタン */
.btn_works {
	width: 90%;
}
	
/* 画像 */
.btn_works a img {
	width: 35%;
	margin: 0 auto;
}
}

@media screen and (max-width:599px) {
/* 制作事例を見るボタン */
.btn_works {
	width: 95%;
	margin: 10px auto 70px auto;
}
	
/* 画像 */
.btn_works a img {
	width: 80%;
	margin: 0 auto;
}
}

/*---------------- 【 共通 】制作の流れを見るボタン -----------------*/

/* 制作事例を見るボタン */
.btn_order {
	width: 1080px;
	margin: 10px auto 100px auto;
}

/* 画像 */
.btn_order img {
	width: 28%;
	margin: 0 auto;
}

.btn_order a {
	text-decoration: none;
	transition: 0.3s ease-in-out;
	display: block;
}

/* ホバー時 */
.btn_order a:hover {
	opacity: 0.7;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* 制作事例を見るボタン */
.btn_order {
	width: 90%;
}
	
/* 画像 */
.btn_order a img {
	width: 35%;
	margin: 0 auto;
}
}

@media screen and (max-width:599px) {
/* 制作事例を見るボタン */
.btn_order {
	width: 95%;
	margin: 10px auto 70px auto;
}
	
/* 画像 */
.btn_order a img {
	width: 80%;
	margin: 0 auto;
}
}

/*------------------ 【 order 】制作の流れページ  ------------------*/

/* 制作の流れ説明エリア */
.order_site {
	width: 900px;
	margin: 60px auto 100px auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* STEP */
.order_site_warp1 {
	width: 20%;
	margin: 0 auto;
}

/* STEP 画像 */
.step img {
	width: 40%;
	margin: 0 auto;	
}

/* テキストエリア */
.order_site_warp2 {
	width: 80%;
	margin: 0 auto 0 0 ;
}

/* 見出し */
.order_site_warp2 h3 {
	margin: 0 auto;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.45em;
	color: #4d76a3;
}

/* ボーダー */
.border {
	margin: 0 auto;
	border: 1px solid #4d76a3;
}

/* 本文 */
.order_site_warp2 p {
	margin: 10px auto 0 auto;
	line-height: 1.5em;
}

/* 矢印 */
.arrow {
	width: 900px;
	margin: 0 auto;
}

/* 矢印 画像 */
.arrow img {
	width: 5%;
	margin: 0 auto;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* 制作の流れ説明エリア */
.order_site {
	width: 95%;
	margin: 0 auto 100px auto;
	display: block;
}
	
/* STEP */
.order_site_warp1 {
	width: 100%;
	margin: 30px auto 20px auto;
}
	
/* STEP 画像 */
.step img {
	width: 10%;
	margin: 0 auto;	
}

/* テキストエリア */
.order_site_warp2 {
	width: 95%;
	margin: 0 auto;
	text-align: center;
}

/* 矢印 */
.arrow {
	width: 95%;
	margin: 20px auto;
}

/* 矢印 画像 */
.arrow img {
	width: 7%;
}
}

@media screen and (max-width:599px) {
/* 制作の流れ説明エリア */
.order_site {
	width: 95%;
	margin: 0 auto 80px auto;
	display: block;
}
	
/* STEP */
.order_site_warp1 {
	width: 100%;
	margin: 30px auto 20px auto;
}
	
/* STEP 画像 */
.step img {
	width: 15%;
	margin: 0 auto;	
}

/* テキストエリア */
.order_site_warp2 {
	width: 95%;
	margin: 0 auto;
	text-align: center;
}

/* 見出し */
.order_site_warp2 h3 {
	font-size: 1.2em;
	line-height: 1.4em;
}
	
/* 本文 */
.order_site_warp2 p {
	font-size: 0.8em;
	line-height: 1.5em;
}
	
/* 矢印 */
.arrow {
	width: 95%;
	margin: 10px auto;
}

/* 矢印 画像 */
.arrow img {
	width: 10%;
}
}

/*------------------ 【 website 】ホームページ制作ページ  ------------------*/

/* ビジュアル（イラスト）エリア */
.website_visual {
	width: 1080px;
	margin: 0 auto;
}

/* イラスト画像 */
.website_visual img {
	width: 696px;
	height: 447px;
	margin: 0 auto;
}

/* 制作事例を見る・制作の流れを見る ボタンエリア */
.btn_works_order {
	width: 940px;
	margin: 20px auto 120px auto;
	display: flex;
	justify-content: space-between;
}

/* 制作事例を見る ボタンエリア */
.btn_works_works_yoko {
	width: 50%;
	margin: 0 auto;
}

/* 制作の流れを見る ボタンエリア */
.btn_works_order_yoko {
	width: 50%;
	margin: 0 auto;
}

/* 制作事例を見る ボタン画像 */
.btn_works_yoko img {
	width: 70%;
	margin: 0 auto;
}

.btn_works_yoko a {
	text-decoration: none;
	transition: 0.3s ease-in-out;
	display: block;
}

/* 制作の流れを見る ボタン画像 */
.btn_order_yoko img {
	width: 70%;
	margin: 0 auto;
}

.btn_order_yoko a {
	text-decoration: none;
	transition: 0.3s ease-in-out;
	display: block;
}

/* ホバー時 */
.btn_works_yoko a:hover {
	opacity: 0.7;
}

/* ホバー時 */
.btn_order_yoko a:hover {
	opacity: 0.7;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* ビジュアル（イラスト）エリア */
.website_visual {
	width: 95%;
}

/* イラスト画像 */
.website_visual img {
	width: 80%;
	height: auto;
}
	
/* 制作事例を見る・制作の流れを見る ボタンエリア */
.btn_works_order {
	width: 95%;
	margin: 20px auto 100px auto;
}	
	
/* 制作事例を見る ボタンエリア */
.btn_works_works_yoko {
	width: 100%;
	margin: 0 auto;
}

/* 制作の流れを見る ボタンエリア */
.btn_works_order_yoko {
	width: 100%;
	margin: 0 auto;
}		
}

@media screen and (max-width:599px) {
/* ビジュアル（イラスト）エリア */
.website_visual {
	width: 95%;
	height: auto;
	margin: 0 auto;
}
	
/* イラスト画像 */
.website_visual img {
	width: 100%;
	height: auto;
}
	
/* 制作事例を見る・制作の流れを見る ボタンエリア */
.btn_works_order {
	width: 90%;
	margin: 20px auto 80px auto;
	display: block;
}
	
/* 制作事例を見る ボタン画像 */
.btn_works_yoko img {
	width: 80%;
	margin: 0 auto 20px auto;
}
	
/* 制作の流れを見る ボタン画像 */
.btn_order_yoko img {
	width: 80%;
	margin: 0 auto;
}
}

/*------------------ 【 ad 】各種広告提案・運用サポートページ  ------------------*/

/* 広告の種類のBOX */
.ad_box {
	width: 600px;
	margin: 0 auto;
}

.ad_box_warp {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

/* BOX */
.ad_box_warp li {
	width: 25%;
	height: 0;
	margin: 20px;
	padding-bottom: 20%;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	border: 2.5px solid #4d76a3;
	border-radius: 20px;
	background-color: #fff;
	position: relative;
}

/* テキスト */
.ad_box_warp li a {
	width: 100%;
	display: block;
	position: absolute;
	top: 50%;
 	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	color: #4d76a3;	
}

/* ビジュアル（イラスト）エリア */
.ad_visual {
	width: 1080px;
	margin: 80px auto;
}

/* イラスト画像 */
.ad_visual img {
	width: 705px;
	height: 620px;
	margin: 0 auto;
}

/* ご依頼やご相談など、お気軽にお問い合わせください。 */
.ad_txt {
	width: 600px;
	margin: 0 auto;
	text-align: center;
	background-color: #4d76a3;
	border-radius: 20px;
}

.ad_txt h3 {
	margin: 0 auto;
	padding: 10px 30px;
	font-size: 1.1em;
	line-height: 1.3em;
	font-weight: bold;
	color: #fff;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* 広告の種類のBOX */
.ad_box {
	width: 95%;
}

/* ビジュアル（イラスト）エリア */
.ad_visual {
	width: 95%;
	margin: 80px auto;
}

/* イラスト画像 */
.ad_visual img {
	width: 100%;
	height: auto;
}

/* ご依頼やご相談など、お気軽にお問い合わせください。 */
.ad_txt {
	width: 75%;
}
}

@media screen and (max-width:599px) {
/* 広告の種類のBOX */
.ad_box {
	width: 90%;
}
	
/* BOX */
.ad_box_warp li {
	width: 30%;
	margin: 10px 5px;
	padding-bottom: 25%;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.2em;
}
	
/* ビジュアル（イラスト）エリア */
.ad_visual {
	width: 95%;
	margin: 80px auto;
}

/* イラスト画像 */
.ad_visual img {
	width: 100%;
	height: auto;
}
	
/* ご依頼やご相談など、お気軽にお問い合わせください。 */
.ad_txt {
	width: 95%;
	border-radius: 10px;
}
}

/*------------------ 【 shop 】通販サイト・実店舗運営ページ  ------------------*/

/* shopエリア */
.shop {
	width: 1080px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

/* テキストエリア */
.shop_txt {
	width: 50%;
	margin: 0 auto;
}

.shop_txt_warp {
	width: 100%;
	margin: 0 auto 50px auto;
}

/* 店名 */
.shop_txt_warp h3 {
	font-size: 1em;
	font-weight: bold;
	line-height: 2.4em;
}

.shop_txt_warp h3 a {
	text-decoration: none;
	color: #4d76a3;
	border-bottom: 1px solid #4d76a3;
	transition: 0.3s ease-in-out;
}

/* ホバー時 */
.shop_txt_warp h3 a:hover{
	color: #c0e4f9;
	border-bottom: 1px solid #c0e4f9;
}

/* 本文 */
.shop_txt_warp p {
	line-height: 1.55em;
}

/* ビジュアル（イラスト）エリア */
.shop_visual {
	width: 45%;
	height: 100%;
	margin: 0 auto 0 5%;
}

/* イラスト画像 */
.shop_visual img {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* shopエリア */
.shop {
	width: 95%;
	margin: 0 auto;
	display: block;
}
	
/* テキストエリア */
.shop_txt {
	width: 100%;
	margin: 0 auto;
}
	
/* ビジュアル（イラスト）エリア */
.shop_visual {
	width: 70%;
	margin: 0 auto;
}
	
/* イラスト画像 */
.shop_visual img {
	width: 100%;
	margin: 0 auto;
}
}

@media screen and (max-width:599px) {
/* shopエリア */
.shop {
	width: 90%;
	margin: 0 auto;
	display: block;
}
	
/* テキストエリア */
.shop_txt {
	width: 100%;
	margin: 0 auto;
}
	
/* 店名 */
.shop_txt_warp p {
	font-size: 0.8em;
	line-height: 1.5em;
}
	
/* ビジュアル（イラスト）エリア */
.shop_visual {
	width: 80%;
	margin: 0 auto;
}
	
/* イラスト画像 */
.shop_visual img {
	width: 100%;
	margin: 0 auto;
}
}

/*------------------ 【 company 】企業情報ページ  ------------------*/

/* 会社概要のテーブル */
.company_table {
	width: 940px;
	margin: 0 auto;
}

.company_table table {
	width: 100%;
	margin: 0 auto;
	font-size: 0.8em;
	line-height: 1.6em;
}

.company_table table th {
	width: 30%;
	padding: 15px 45px;
	font-weight: bold;
	border: 0.5px solid #fff;
	text-align: center;
	background-color: #c0e4f9;
	color: #4d76a3;
	vertical-align: middle;
}

.company_table table td {
	width: 70%;
	padding: 15px;
	border: 0.5px solid #4d76a3;
	text-align: left;
	vertical-align: middle;
	background-color: #fff;
}

/* GoogleMap */
.ggmap {
	width: 100%;
	height: 450px;
	margin: 80px auto 50px auto;
	overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {	
	width: 100%;
	height: 450px;
	margin: 0 auto;
}

/* 最寄り駅エリア */
.kotsu {
	width: 940px;
	margin: 0 auto;
	display: flex;
	justify-content: flex-start;
}

.kotsu_warp1 {
	margin: 0;
}

.kotsu_warp2 {
	margin: 0 auto 0 0;
}

.kotsu h3 {
	padding: 0 10px 0 0;
	font-size: 1.2em;
	font-weight: bold;
}

.kotsu p {
	padding: 0 0 0 10px;
	font-size: 0.8em;
	font-weight: bold;
	line-height: 1.5em;
	border-left: 1.5px solid #3c3c3c;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* 会社概要のテーブル */
.company_table {
	width: 95%;
}
	
.company_table table th {
	padding: 15px 20px;
}

.company_table table td {
	padding: 15px;
}
	
/* 最寄り駅エリア */
.kotsu {
	width: 95%;
}
}

@media screen and (max-width:599px) {
/* 会社概要のテーブル */
.company_table {
	width: 95%;
}
	
.company_table table th {
	padding: 12px;
}

.company_table table td {
	padding: 12px;
}

/* GoogleMap */
.ggmap {
	margin: 60px auto 30px auto;
}
	
/* 最寄り駅エリア */
.kotsu {
	width: 95%;
}
}

/*------------------ 【 個別・制作実績 】ページ  ------------------*/

/* 個別・制作実績 */
.jitsurei {
	width: 1080px;
	margin: 0 auto 50px auto;
	display: flex;
	justify-content: space-between;
}

/* タイトル名エリア */
.jitsurei_txt {
	width: 35%;
	margin: 0 auto 0 0 ;
}

/* タイトル名 */
.jitsurei_txt h3 {
	margin: 0 auto;
	font-size: 1em;
	font-weight: bold;
	line-height: 2em;
	color: #4d76a3;
}

/* 点線 */
.border_dotted {
	margin: 4px auto 12px auto;
	border: 1px dotted #4d76a3;
}

/* コンセプト */
.jitsurei_txt p {
	margin: 0 auto;
	line-height: 1.65em;
}

/* サイト画像エリア */
.jitsurei_img {
	width: 60%;
	margin: 0 0 0 auto;
	border: 1px solid #cccccc;
}

/* サイト画像エリア */
.jitsurei_img img {
	width: 100%;
}

/* ホームページへリンク */
.homepage_link1 {
	margin: 50px auto 3px auto;
	font-size: 1.0em;
	line-height: 1.6em;
	font-weight: bold;
}

.homepage_link2 a {
	text-decoration: none;
	color: #3c3c3c;
	border-bottom: 1px solid #3c3c3c;
}

/* ホバー時 */
.homepage_link2 a:hover {
	opacity: 0.7;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* 個別・制作実績 */
.jitsurei {
	width: 95%;
	margin: 0 auto 50px auto;
	display: flex;
	justify-content: space-between;
}	
}

@media screen and (max-width:599px) {
/* 個別・制作実績 */
.jitsurei {
	width: 95%;
	margin: 0 auto;
	display: block;
}
	
/* タイトル名エリア */
.jitsurei_txt {
	width: 100%;
	margin: 0 auto 40px auto;
}
	
/* コンセプト */
.jitsurei_txt p {
	font-size: 0.8em;
	line-height: 1.6em;
}
	
/* サイト画像エリア */
.jitsurei_img {
	width: 100%;
	margin: 0 auto 40px auto;
}
}

/*------------------ 【 system 】システム開発ページ  ------------------*/

/* ビジュアル（イラスト）エリア */
.system_visual {
	width: 1080px;
	margin: 100px auto 50px auto;
}

/* イラスト画像 */
.system_visual img {
	width: 35%;
	height: 35%;
	margin: 0 auto;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* ビジュアル（イラスト）エリア */
.system_visual {
	width: 95%;
}

/* イラスト画像 */
.system_visual img {
	width: 50%;
	height: auto;
}
}

@media screen and (max-width:599px) {
/* ビジュアル（イラスト）エリア */
.system_visual {
	width: 95%;
	height: auto;
	margin: 70px auto 30px auto;
}
	
/* イラスト画像 */
.system_visual img {
	width: 70%;
	height: auto;
}
}

/*------------------ 【 recruit 】求人情報ページ  ------------------*/

/* ビジュアル（イラスト）エリア */
.recruit_visual {
	width: 1080px;
	margin: 100px auto 140px auto;
}

/* イラスト画像 */
.recruit_visual img {
	width: 10%;
	height: 10%;
	margin: 0 auto;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* ビジュアル（イラスト）エリア */
.recruit_visual {
	width: 95%;
	margin: 80px auto 120px auto;
}

/* イラスト画像 */
.recruit_visual img {
	width: 18%;
	height: auto;
}
}

@media screen and (max-width:599px) {
/* ビジュアル（イラスト）エリア */
.recruit_visual {
	width: 95%;
	margin: 60px auto 80px auto;
}
	
/* イラスト画像 */
.recruit_visual img {
	width: 20%;
	height: auto;
}
}

/*------------------ 【 contact 】お問い合わせページ  ------------------*/

/* お問い合わせ */
.contact {
	width: 900px;
	margin: 0 auto;
}

.formTable {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

/* 必須 */
.hissu::after {
    display: inline-block;
    margin-left: 10px;
    vertical-align: 2px;
    font-size: 11px;
    color: #fff;
    background: #d34e4e;
    padding: 2px 6px;
    content: "必須";
}

/* 任意 */
.nini::after {
    display: inline-block;
    margin-left: 10px;
    vertical-align: 2px;
    font-size: 11px;
    color: #fff;
    background: #888;
    padding: 2px 6px;
    content: "任意";
}

.formTable tr {
	border-bottom: 1px #ddd solid;	
}

.formTable tr:last-child {
	border-bottom: none;	
} 

.formTable th {
	width: 35%;
	padding: 15px 0;
	font-size: 0.85em;
	font-weight: bold;
	line-height: 1.8em;
} 

.formTable td {
	padding: 15px 0;  
}  

.formTable th,.formTable td {
	vertical-align: middle;
}

/* 確認ボタン */
.submit {
	width: 100%;
	margin: 60px auto 0 auto;
	text-align: center;
}

.btn_submit {
	width: 40%;
	margin: 0 auto;
	padding: 15px 30px;
	font-size: 1.2em;
	font-weight: bold;
	background-color: #4d76a3;
	color: #fff;
	border-radius: 100px;
	transition: 0.3s ease-in-out;
}

/* ホバー時 */
.btn_submit:hover {
	opacity: 0.7;
}

select {
	font-size: 1.0em;
}

input[type="text"] {	
	margin: 0 auto;
    padding: 10px;
	font-size: 1em;
    border: 1px solid #d5d5d5;
}

textarea {
	width: 100%;
	margin: 0 auto;
	font-size: 1em;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}

input[type="submit"] {
  -webkit-appearance: none;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* お問い合わせ */
.contact {
	width: 90%;
}	
}

@media screen and (max-width:599px) {
/* お問い合わせ */
.contact {
	width: 90%;
}
	
.formTable th {
	width: 100%;
	padding: 15px 0 0 0;
	display: block;
}
	
.formTable td {
	width: 100%;
	padding: 15px 0;  
	display: block;
}
	
.submit {
	margin: 30px auto 0 auto;
}
	
.btn_submit {
	width: 80%;
	margin: 0 auto;
}

input[type="text"] {
	width: 100%;
}
}

/*------------------ 【 thank 】サンクスページ  ------------------*/

/* サンクスページ */
.thank {
	width: 1080px;
	margin: 0 auto;
}

.thank_warp {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	top: 50%;
}

/* サンクス画像 */
.thank_warp img {
	width: 293px;
	height: 288px;
	margin: 20% auto 4% auto;
}

/* テキスト */
.thank_warp h3 {
	margin: 0 auto 10px auto;
	font-size: 1.4em;
	font-weight: bold;
	color: #4d76a3;
}

.thank_warp p {
	margin: 0 auto 40px auto;
	line-height: 1.4em;
}

/* TOPへ戻る */
.thank_warp a {
	margin: 0 auto;
	text-decoration: none;
	font-size: 1.8em;
	font-weight: bold;
	border-bottom: 1px solid #4d76a3;
	color: #4d76a3;
	transition: 0.3s ease-in-out;
}

.thank_warp a:hover {
	opacity: 0.7;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* サンクスページ */
.thank {
	width: 90%;
}
}

@media screen and (max-width:599px) {
/* サンクスページ */
.thank {
	width: 90%;
}
	
.thank_warp img {
	width: 50%;
	height: 50%;
	margin: 30% auto 5% auto;
}
	
.thank_warp p {
	font-size: 0.8em;
	line-height: 1.6em;
}
	
.thank_warp a {
	font-size: 1.4em;
}
}

/*----------------------- 【 共通 】 -----------------------*/

/* ホームページ（各ジャンル囲みテキスト） */
.hp_i {
	width: 40%;
	padding: 7px 0;
	font-size: 0.6em;
	font-weight: bold;
	background-color: #4d76a3;
	color: #fff;
	border-radius: 4px;
}

.hp_i2 {
	width: 40%;
	margin: 0 0 5px 0;
	padding: 7px 0;
	font-size: 0.6em;
	font-weight: bold;
	text-align: center;
	background-color: #4d76a3;
	color: #fff;
	border-radius: 4px;
}

/* ヤフーショップ（各ジャンル囲みテキスト） */
.yh_i {
	width: 40%;
	padding: 7px 0;
	font-size: 0.6em;
	background-color: #ff7f03;
	color: #fff;
	border-radius: 4px;
}

.yh_i2 {
	width: 40%;
	margin: 0 0 5px 0;
	padding: 7px 0;
	font-size: 0.6em;
	font-weight: bold;
	text-align: center;
	background-color: #ff7f03;
	color: #fff;
	border-radius: 4px;
}

/* 楽天ショップ（各ジャンル囲みテキスト） */
.rk_i {
	width: 40%;
	padding: 7px 0;
	font-size: 0.6em;
	background-color: #bf0000;
	color: #fff;
	border-radius: 4px;
}

.rk_i2 {
	width: 40%;
	margin: 0 0 5px 0;
	padding: 7px 0;
	font-size: 0.6em;
	font-weight: bold;
	text-align: center;
	background-color: #bf0000;
	color: #fff;
	border-radius: 4px;
}

@media screen and (min-width:600px) and (max-width:979px) {
}

@media screen and (max-width:599px) {
/* ホームページ（各ジャンル囲みテキスト） */
.hp_i {
	width: 30%;
}

.hp_i2 {
	width: 30%;
}

/* ヤフーショップ（各ジャンル囲みテキスト） */
.yh_i {
	width: 30%;
}

.yh_i2 {
	width: 30%;
}

/* 楽天ショップ（各ジャンル囲みテキスト） */
.rk_i {
	width: 30%;
}

.rk_i2 {
	width: 30%;
}
}