@charset "utf-8";

/********** 【仮】 サイトの定義 **********

使用する文字サイズ：
10px
12px
14px
16px（基本）
18px（中サイズ見出し）
20px（特例:TOPの検索するボタンなど）
24px（特例:TOPのエリア検索・駅検索など）
28px（大サイズ見出し）

空白の使用サイズ：
10px
20px
40px（基本）
60px
120px（大見出しの段落ごと）

*******************************/


/********** メイン画像（ページ見出しタイトル）＋説明文 **********/
#main_Image_SubPage {
	position: relative;
	top: 186px;

	width: 100%;
	height: 300px;

	background-image: url("../../img/main_Image/pc/SubPage.webp");
	background-repeat: no-repeat;
	background-position: center center;
}

#main_Image_SubPage .headline {
	width: 1200px;
	color: #fff;
	text-shadow: 1px 1px 1px #000;

	/* 上下左右の中央寄せ */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);

	z-index: 3;
}

#main_Image_SubPage .headline h2 {
	height: 81px;
	line-height: 81px;
	margin: 0 0 20px 0;
	font-size: 56px;

	font-family: 'Noto Sans JP',system-ui;
	font-weight: 900;

	text-align: center;
}

#main_Image_SubPage .headline p {
	font-weight: bold;
	text-align: center;

	display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 2;
	    overflow: hidden;
}




main {
	padding-top: 186px;
}

main .page {
	width: 100%;
	padding: 80px 0;
	border-bottom: 1px solid #ddd;
}

main .page .pageInner {
	width: 1200px;
	margin: 0 auto;
}


main .page div.Center section div.content .addition {
	margin: 20px auto 0;
	text-align: left;
}


/*** サイドカラム（ 左カラム・右カラム 共通CSS ）***/
main .page aside {

}

main .page aside .item {
	margin-bottom: 20px;
}
main .page aside .item:last-child {
	margin-bottom: 0 !important;
}

main .page aside .item a { color:#333; text-decoration:none; }
main .page aside .item a:hover{ color:#fb24a2; }
main .page aside .item a:active, a:focus { outline:0; }

main .page aside .item img {
	width: 100%;
}

main .page aside .item.boxContent {
	margin: 0 0 20px 0;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #dadada;
	background: #fff;
}

main .page aside .item.boxContent h5 {
	margin: 0 0 10px 0;
	padding-bottom: 10px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid #ddd;
}

main .page aside .item.boxContent h5 strong {
	font-weight: bold;
}

main .page aside .item.boxContent h5 span {
	color: #fb24a2;
}

main .page aside .item.boxContent h5 font {
	font-weight: normal;
}




/*** 中央カラム（ 3カラムの場合 ）***/
main .page div.Center {
	display: inline-block;
	width: 800px;
}

main .page div.Center section {
	margin-bottom: 80px;
	padding-bottom: 80px;
	border-bottom: 1px dashed #ddd;
}

/*
main .page div.Center section:first-child {
	padding-top: 80px;
	border-top: 1px solid #ddd;
}
*/

main .page div.Center section:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}




/*** 左カラム（ 3カラムの場合 ）***/
main .page aside.Left {
	float: left;
	width: 160px;
	margin-right: 20px;
}

main .page aside.Left .item.boxContent ul{

}

main .page aside.Left .item.boxContent ul li {
	margin-bottom: 7.5px;
	padding: 0;
	font-size: 14px;
}

main .page aside.Left .item.boxContent ul li:last-child {
	margin-bottom: 0;
}

main .page aside.Left .item.boxContent ul li a {

}

main .page aside.Left .item.boxContent ul li a:hover {

}

main .page aside.Left .item.boxContent ul li a::before {
	display: inline-block; /* ← 「width」を有効にするために記載 */
	width: 17.5px;

	margin-right: 5px;

	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	/* color: #fb24a2; */
}


main .page aside.Left .item.boxContent ul.menu li:nth-child(1) a::before { content:"\f4be"; }	/* トップページ */
main .page aside.Left .item.boxContent ul.menu li:nth-child(2) a::before { content:"\f09e"; }	/* お知らせ */
main .page aside.Left .item.boxContent ul.menu li:nth-child(3) a::before { content:"\f508"; }	/* 代表挨拶・経歴 */
main .page aside.Left .item.boxContent ul.menu li:nth-child(4) a::before { content:"\f51c"; }	/* SEO導入の流れ */
main .page aside.Left .item.boxContent ul.menu li:nth-child(5) a::before { content:"\e4b7"; }	/* SEO実績一覧 */
main .page aside.Left .item.boxContent ul.menu li:nth-child(6) a::before { content:"\f0c0"; }	/* SEO導入事例 */
main .page aside.Left .item.boxContent ul.menu li:nth-child(7) a::before { content:"\f086"; }	/* SEOお客様の声 */
main .page aside.Left .item.boxContent ul.menu li:nth-child(8) a::before { content:"\f228"; }	/* 風俗SEOの課題 */
main .page aside.Left .item.boxContent ul.menu li:nth-child(9) a::before { content:"\e561"; }	/* 選ばれ続ける理由 */
main .page aside.Left .item.boxContent ul.menu li:nth-child(10) a::before { content:"\40"; }	/* SEO料金プラン */
main .page aside.Left .item.boxContent ul.menu li:nth-child(11) a::before { content:"\f1c1"; }	/* SEOレポート見本 */
main .page aside.Left .item.boxContent ul.menu li:nth-child(12) a::before { content:"\f059"; }	/* よくある質問 */
main .page aside.Left .item.boxContent ul.menu li:nth-child(13) a::before { content:"\f071"; }	/* 規約・禁止事項 */
main .page aside.Left .item.boxContent ul.menu li:nth-child(14) a::before { content:"\f502"; }	/* 個人情報保護方針 */
main .page aside.Left .item.boxContent ul.menu li:nth-child(15) a::before { content:"\f2b5"; }	/* 販売代理店制度 */
main .page aside.Left .item.boxContent ul.menu li:nth-child(16) a::before { content:"\f1d8"; }	/* SEOお問い合わせ */
main .page aside.Left .item.boxContent ul.menu li:nth-child(17) a::before { content:"\e4fd"; }	/* SEOお申し込み */
main .page aside.Left .item.boxContent ul.menu li:nth-child(18) a::before { content:"\f64f"; }	/* 運営会社情報 */


main .page aside.Left .item.boxContent ul.service li:nth-child(1) a::before { content:"\f0f0"; }	/* アダルトSEO診断 */
main .page aside.Left .item.boxContent ul.service li:nth-child(2) a::before { content:"\f3ed"; }	/* アダルトSSL代行 */
main .page aside.Left .item.boxContent ul.service li:nth-child(3) a::before { content:"\f121"; }	/* 内部SEO改善施策 */
main .page aside.Left .item.boxContent ul.service li:nth-child(4) a::before { content:"\f00e"; }	/* 検索エンジン登録 */
main .page aside.Left .item.boxContent ul.service li:nth-child(5) a::before { content:"\f0c1"; }	/* SEOテキスト広告 */
main .page aside.Left .item.boxContent ul.service li:nth-child(6) a::before { content:"\f521"; }	/* ポータルSEO対策 */
main .page aside.Left .item.boxContent ul.service li:nth-child(7) a::before { content:"\e574"; }	/* 月額制SEO管理 */
main .page aside.Left .item.boxContent ul.service li:nth-child(8) a::before { content:"\f802"; }	/* 複数一括SEO管理 */
main .page aside.Left .item.boxContent ul.service li:nth-child(9) a::before { content:"\f5b0"; }	/* 出張SEOコンサル */




/*** 右カラム（ 2カラム・3カラム 共通CSS ）***/
main .page aside.Right {
	float: right;
	display: inline-block;
	width: 200px;
}

main .page aside.Right .item {

}

main .page aside.Right .item h5 {
	margin: 0 0 5px 0;
}

main .page aside.Right .item p {
	font-size: 14px;
	text-align: center;
}

main .page aside.Right .item p i {
	margin-left: 3px;
	color: #fb24a2;
}

main .page aside.Right .item ul.client {

}

main .page aside.Right .item ul.client li {
	margin-bottom: 10px;
}

main .page aside.Right .item ul.client li figure {
	position: relative;
	overflow: hidden;
	width: 200px;
	margin: 0;
}

main .page aside.Right .item ul.client li figure img {
	width: 100%;
}

main .page aside.Right .item ul.client li figure figcaption {
	position: absolute;
	bottom: -60px;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 60px;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
}
main .page aside.Right .item ul.client li figure:hover figcaption {
	bottom: 0;
}

main .page aside.Right .item ul.client li figure figcaption h5 {
	position: absolute;
	right: 0;
	top: 8.5px;
	left: 0;

	line-height: 24px;
	color: #fff;
	font-size: 16px;
	text-align: center;
}
main .page aside.Right .item ul.client li figure figcaption h5::after {
	vertical-align: bottom;
	content: "様";
	margin-left: 5px;
	font-size: 12px;
	font-weight: normal;
}

main .page aside.Right .item ul.client li figure figcaption p {
	position: absolute;
	right: 0;
	bottom: 8.5px;
	left: 0;

	line-height: 18px;
	color: #fff;
	font-size: 12px;
	text-align: center;
}


main .page aside.Right .item ul.Media {

}

main .page aside.Right .item ul.Media li {
	margin-bottom: 10px;
}




/***** テーブル表（サブページ共通CSS） *****/

section:not(#genre) div.content table {
	width: 100%;
	line-height: 1.5;
	font-size: 16px;
	text-align: left;

	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;

	border-collapse: separate;
	border-spacing: 0;
}

section:not(#genre) div.content table a { color: #000; }
section:not(#genre) div.content table a:hover { color: #000; }

section:not(#genre) div.content table th,
section:not(#genre) div.content table td {
	vertical-align: middle;
	padding: 20px;
	/* border: solid 2px #fff; */
}

section:not(#genre) div.content table th span,
section:not(#genre) div.content table td span {
	font-size: 12px;
}

section:not(#genre) div.content table th {
	width: 30%;
	font-weight: normal;
	text-align: center;
	border-top:	1px solid #fff;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #fff;
	background: #eee;
}

section:not(#genre) div.content table td {
	width: 70%;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #fff;
}

section:not(#genre) div.content table td hr {
	width:100%;
	margin:10px 0;
	border:none;
	border-top:dashed 1px #CCC;
	height:1px;
}




/********** サブページ共通：フリースペース（上段・下段） **********/

section#freeSpace .content {
	width: 1200px;
}




/********** サブページ共通：SEO導入事例 **********/

section#genre div.content,
section#contactlink div.content {
	width: 1200px;
}