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

	セクション別　PCの左右余白

*********************************************************************************************************************************/
/* 白背景の幅制御（メインビジュアル & xxxとは & サービス内容 & 対応可能技術) ･････････････････････････････････････ */
#main_visual,
#wpContents #about,/* xxxとは */
#wpContents #service,/* サービス */
#wpContents #technology,/* 対応可能技術 */
#bannerArea,/* お問い合わせ関連 */
#bannerArea + section{/* (共通部分)他のサービス */
	padding-left: 50px;
	padding-right: 50px;
	width: 1100px!important;
    max-width: 1100px;
    text-align: center;
    text-align-last: center;
	box-sizing: content-box;
}

/* グレー背景の幅制御（ページ内遷移リスト & 特徴・強み・選ばれる理由 & 導入メリット・店舗一覧） ･････････････････････････････････････ */
#pLink_list>ul,/* ページ内遷移リスト */
#wpContents #characteristics > div,/* 特徴・強み・選ばれる理由 */
#wpContents #merit-store > div{/* 導入メリット・店舗一覧 */
    width: 1100px;
    max-width: 1100px;
    margin: 0 auto;
}


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

	投稿記事（サービス）

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

/*横幅制限・解除 ････････････････････････････････････････････*/
#contents>article>.baseArea,
#contents>section>.baseArea{
	max-width:100%;
	padding-bottom:0;
}

#contents>section:has(#official){
	padding-bottom:20px;
}

/*メインビジュアル ･･････････････････････････････････････････*/
#main_visual{
	position:relative;
	height:500px;
	overflow:hidden;
	background-color:white;
	margin: 0 auto;
}
	#main_visual>div{/*タイトル*/
		z-index:400;
		position:absolute;
		top:0;
		left:0;
		height:100%;
		width:100%;
	}
		#main_visual>div>p{/*キャッチコピー*/
			z-index:200;
			display:flex;
			place-items:center;
			height:100%;
			width:1100px;
			margin-left:calc((100% - 1100px)/2);
		}
			#main_visual>div>p>span{/*データベース技術顧問サービス*/
				z-index:200;
				display:inline-block;
				margin-left: 0;
			}
				#main_visual>div>p>span>span{/*データベース技術顧問サービス*/
					display:inline-block;
					width:100%;
					margin:0 !important;
					color:black;
					font-size:20px;
				}
				#main_visual>div>p>span>span.catchphrase{/*必要なときに、必要なだけ。データベースの最適解を。*/
					padding-top:25px;
					color:#1D683F;
					font-size:35px;
					font-weight:bold;
				}
					#main_visual>div>p>span>span.catchphrase br{
						display:none;
					}
				#main_visual>div>p>span>span.caption{/*設計から運用・改善までを一貫支援…*/
					padding-top:15px;
					font-size:14px;
				}


/*ページ内遷移リスト ････････････････････････････････････････*/
#pLink_list{/*タイトル*/
	display:inline-block;
	width:100%;
	padding:22px 0 17px 0;
	overflow:hidden;
	background-color:#898989;
}
	#pLink_list>ul{
		display:flex;					/*フレキシブル・コンテナ*/
		flex-direction:row;				/*水平方向*/
		justify-content:center;	/*子要素を均等間隔で並べる*/
		gap: 40px;
		padding: 0 50px;
	}
		#pLink_list>ul>li{
			display:inline-block;
			width:auto;
		}
			#pLink_list>ul>li>a{
				display:inline-block;
				width:auto;
				padding:3px 30px 5px 0;
				color:white;
				line-height:1.0em;
				background:url(../images/ico/ico_submenu_arrow.png) right center no-repeat;
			}

/* バナーエリア(他ページとの差分) ･････････････････････････････････････ */
#bannerArea{
	padding-top: 0!important;
	width: 1100px!important;
}
	#bannerArea .bannerArea01{
		border-top: none;
	}

	#contents:has(#official) #bannerArea .bannerArea01{
		padding-top:0;
	}


/*他のサービス ･･････････････････････････････････････････････*/
#activityReport_title{/*他のサービス*/
	display:inline-block;
	width:1100px;
	max-width:1100px;
	padding-top:110px;
	text-align:left !important;
	text-align-last:left !important;
	border-top:solid 1px black;
	font-size:3.5rem;
}
#activityReport{/*リスト*/
	width:1100px;
	min-width:1100px;
	margin-left:calc((100% - 1100px)/2);
	margin-top:60px !important;
}
#activityReport,
#activityReport *{/*リスト*/
	width:100%;
	font-size:16px;
	text-align:left;
	text-align-last:left;
}
	#activityReport>li{
		width:346px;
		float:left;
	}
	#activityReport>li:nth-of-type(n+2){/*2番目以降*/
		margin-left:31px;
	}
		#activityReport>li img{
			margin-bottom:20px;
		}
		#activityReport>li a{
		}
		#activityReport>li a:hover{
			opacity: 1;
		}
			#activityReport>li a:hover img{
				opacity: 0.7;
			}
			#activityReport>li a:hover p{
				color: var(--Green_01);
			}
			#activityReport>li a p{
				text-align:justify;
				text-align-last:left;
				line-height:1.75em;
			}


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

		メディアクエリ（ ～500px以下：モバイル対応 ）

*********************************************************************************************************************************/
@media(max-width:500px){
	/*メインビジュアル ･･････････････････････････････････････････*/
	#main_visual{
		height:600px;
	}
			#main_visual>div>p{/*キャッチコピー*/
				width:auto;
				margin-left:0;
			}
				#main_visual>div>p>span{/*データベース技術顧問サービス*/
				margin-left:0;
				}

	/*ページ内遷移リスト ････････････････････････････････････････*/
	#pLink_list{/*タイトル*/
		padding: 30px 0;
	}
		#pLink_list>ul{
			flex-wrap: wrap;
			justify-content:flex-start;
			gap: 20px 40px;
			padding: 0;
		}
			#pLink_list>ul>li>a{
				font-size: 1.6rem;
			}
	/*他のサービス ･･････････････････････････････････････････････*/
	#activityReport{/*リスト*/
		min-width: auto;
		margin-left: 0;
	}
	#activityReport>li{
		width: 100%;
	}
	#activityReport>li:nth-of-type(n+2) {
		margin-left: 0;
		margin-top: 40px;
	}
}


/*記事内のCSSはここから･･･････････････････････････････････････････････････････
①セレクタは全て、以下のように「 #wpContents 」から記述。
【例】	 #wpContents h2{ …… }
		#wpContents ul>li{ …… }　　など

②記事内エリア「 #wpContents 」は横幅1100pxで固定。レスポンシブなし。
②フォントサイズやカラーなどの詳細は、イラストレーターのデータから参照。
③ヘッダー・フッター・共通部品（バナーエリアなど）は制作範囲に含まれない。
④スタイルが適用されない場合は「 !important 」を使用。
････････････････････････････････････････････････････････････････････････････*/
#wpContents{
	width:100%;
	min-width:1100px;
}

#wpContents h2.wp-block-heading{/* h2 */
	color: #1d683f;
	font-size: 3.5rem;
	text-align-last: center;
	line-height: 1.7em;
	margin-bottom: 80px;
}

#wpContents h3{/* h3 */
	font-size: 3rem;
	margin-bottom: 25px;
	line-height: 1.55em;
}

#wpContents .wp-block-column.is-layout-flow:not(:first-child) {/* カラム内2つ目のマージンリセット */
	margin:0;
}

#wpContents .wp-block-columns:last-child {/* カラム最終行のマージンリセット */
	margin-bottom: 0;
}

:where(.wp-block-columns.is-layout-flex) {/* カラム間のマージン */
    gap: 40px!important;
}


#wpContents figure.wp-block-image {/* 画像マージンのリセット */
	margin: 0;
}


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

		その他　各セクション毎の設定

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

/*････････････････････････････････････････････････････････････
カスタムプロパティ：
※ 複数の場所で同じ「CSS値」を使い回せる。値の修正も１か所で済む。
　 プロパティ名は文字の大・小を区別するので --my-color と --My-color は別プロパティとして扱われる。
　【宣言】	   :root{//HTMLでは<html>要素がスコープとして定義される
					--TitleColor :#222 ;
					--yohaku	 :5px 42px ;
				}
　【呼び出し】  p{  color		  :var(--TitleColor) ;
					color		 :var(--TitleColor, red) ; //--TitleColorの定義がなければred
					padding		 :var(--yohaku) ;
				}
････････････････････････････････････････････････････････････*/
:root{/*<html>要素をスコープとして定義*/


	/*カスタムプロパティ【宣言】････････		  【呼び出し】････････････････････････････････････････････････････････*/
	--marginTopBottom_pc: 160px;			  /*セクションごとの上下マージン(PC)		color:var(--marginTopBottom_pc); */
	--marginTopBottom_sp: 120px;					/*セクションごとの上下マージン(PS)		color:var(--marginTopBottom_sp); */

	/*･･････････････････････････････････		･･･････････････････････････････････････････････････････････････････*/
}

/* xxxとは & 特徴・強み ･････････････････････････････････････ */
#wpContents #about > div > p,
#wpContents #characteristics *{/* テキスト要素 */
	text-align-last: center;
}

/* xxxとは ･････････････････････････････････････ */
#wpContents #about{
	margin: 0 auto var(--marginTopBottom_pc);
}

/* 特徴・強み & 導入メリット・店舗一覧 の上下マージン ･････････････････････････････････････ */
#wpContents #characteristics > div,/* inner要素　マージン */
#wpContents #merit-store > div{/* inner要素　マージン */
	padding: var(--marginTopBottom_pc) 50px;
}

/* 特徴・強み ･････････････････････････････････････ */
#wpContents #characteristics{/* 背景画像 */
	background: url(../images/logo_w_big.png) center top 170px/965px no-repeat;
}

#wpContents #characteristics h2,/* h2下マージン */
#wpContents #characteristics > div li:not(:last-child){/* list下マージン */
	margin-bottom: 110px;
}

/* サービス内容 & 導入メリット のPCテキスト位置  ･････････････････････････････････････ */
#wpContents .service-column > div > div:first-child,
#wpContents .merit > div:last-child{/* サービス内容 */
	align-self: center;
}

/* サービス内容 ･････････････････････････････････････ */
#wpContents #service{/* マージン */
	margin: var(--marginTopBottom_pc) auto 0;
}

#wpContents #service + #merit-store {/* マージン */
	margin-top: var(--marginTopBottom_pc);
}

#wpContents .service-column + .service-column{/* マージン */
	padding-top: 70px;
	margin-top: 70px;
	border-top: 0.5px solid;
}

#wpContents #service .heading-sub{/* 各サービス見出しの括弧部分 */
	font-size: 0.8em;
	line-height: inherit;
}

/* 導入メリット・店舗一覧 ･････････････････････････････････････ */
#wpContents #merit-store h4,/* 店舗名 */
#wpContents #merit-store p{/* 店舗住所 */
	line-height: 1.75em;
	letter-spacing: 0;
}

/* 店舗一覧 ･････････････････････････････････････ */
#wpContents #merit-store .stores > div{/* 店舗カラム幅 */
	max-width: 348px;
	margin: 0 auto;
}

#wpContents #merit-store .stores h4{/* 店舗名 */
	font-size: 1.6rem;
	margin: 18px 0 10px;
}

/* イラストでのメリット説明 ･････････････････････････････････････ */
#wpContents #merit-store .illustrations > div{/* 背景マージン */
	padding: 45px 15px;
}

#wpContents #merit-store .illustrations figure{/* イラストサイズ */
	width: 123px;
	margin: 0 auto;
}

#wpContents #merit-store .illustrations *{/* 文字設定 */
	text-align-last: center;
}

#wpContents #merit-store .illustrations h4{/* メリットタイトル */
	font-size: 2.1rem;
	margin: 25px 0 10px;
}

/* 対応可能技術 ･････････････････････････････････････ */
#wpContents #technology{/* マージン */
	margin: var(--marginTopBottom_pc) auto 0;
}

#wpContents #technology p{/* 文字揃え */
	text-align-last: center;
}

/* オフィシャルサイト ･････････････････････････････････････ */
#wpContents #official{/* マージン */
	width: 1100px;
	min-height: auto;
	padding: 60px 50px;
    margin: 100px auto 0;
	box-sizing: content-box;
}

#wpContents #official span{/* 背景 */
    margin: 0 50px;
}

#wpContents #official h4{/* xxのオフィシャルサイト */
	font-size: 2.5rem!important;
	text-align-last: center;
	margin-bottom: 30px;
}

#wpContents #official a{/* ボタン */
	border: 2px solid #fff;
	color: #fff;
	font-size: 2rem;
	padding: 20px 50px;
}

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

		メディアクエリ（ ～500px以下：モバイル対応 ）

*********************************************************************************************************************************/
@media(max-width:500px){
	#wpContents{
		min-width: auto;
	}

	#wpContents p{
		font-size: 1.8rem;
		line-height: 1.88em;
	}

	#wpContents .wp-block-columns {/* カラムの改行 */
		flex-wrap: wrap!important;
	}

	:where(.wp-block-columns.is-layout-flex) {/* カラム間のマージン */
		gap: 35px!important;
	}

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

			セクション別　PCの左右余白

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

	/* 白背景の幅制御（メインビジュアル & xxxとは & サービス内容 & 対応可能技術) ･････････････････････････････････････ */
	#main_visual,/* タイトル */
	#wpContents #about,/* xxxとは */
	#wpContents #service,/* サービス */
	#wpContents #technology,/* 対応可能技術 */
	#bannerArea,/* お問い合わせ関連 */
	#bannerArea + section{/* (共通部分)他のサービス */
		padding-left: 0;
		padding-right: 0;
		width: 100%!important;
	}

	/* タイトル & xxxとは & サービス内容 & 対応可能技術･････････････････････････････････････ */
	#main_visual,/* タイトル */
	#wpContents #about > div,/* xxxとは */
	#wpContents #service > div,/* サービス内容 */
	#wpContents #technology > div,/* 対応可能技術 */
	#bannerArea,/* お問い合わせ関連 */
	#bannerArea + section{/* (共通部分)他のサービス */
		width: calc(100% - 50px)!important;
		margin: 0 auto;
		padding: 0;
	}

	/* グレー背景の幅制御（ページ内ナビゲーション & 特徴・強み・選ばれる理由 & 導入メリット・店舗一覧） ･････････････････････････････････････ */
	#pLink_list ul,/* ページ内ナビゲーション */
	#wpContents #characteristics > div,/* 特徴・強み・選ばれる理由 */
	#wpContents #merit-store > div{/* 導入メリット・店舗一覧 */
		width: calc(100% - 50px); /* 左右25px × 2 = 50pxを引いた値 */
		margin: 0 auto;
	}

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

			その他　各セクション毎の設定

	*********************************************************************************************************************************/
	/* xxxとは & 特徴・強み ･････････････････････････････････････ */
	#wpContents #about > div > p,
	#wpContents #characteristics p{/* テキスト要素 */
		text-align-last: left;
	}

	/* xxxとは ･････････････････････････････････････ */
	#wpContents #about{
		margin: 0 0 var(--marginTopBottom_sp);
	}

	/* 特徴・強み ･････････････････････････････････････ */
	#wpContents #characteristics{/* 背景画像 */
		background: url(../images/logo_w_big.png) center top 150px/400px no-repeat;
	}

	#wpContents #characteristics > div{/* inner要素 */
		padding: var(--marginTopBottom_sp) 0;
	}

	#wpContents #characteristics h2,/* h2下マージン */
	#wpContents #characteristics > div li:not(:last-child){/* list下マージン */
		margin-bottom: 90px;
	}

	/* サービス内容 ･････････････････････････････････････ */
	#wpContents #service{
		margin: var(--marginTopBottom_sp) 0 0;
	}

	#wpContents #service + #merit-store{
		margin-top: var(--marginTopBottom_sp);
	}

	/* 導入メリット・店舗一覧 ･････････････････････････････････････ */
	#wpContents #merit-store > div{/* inner要素　マージン */
		padding: var(--marginTopBottom_sp) 0;
	}

	/* 店舗一覧 ･････････････････････････････････････ */
	#wpContents #merit-store .stores > div{/* 店舗カラム幅 */
		max-width: 100%;
	}

	#wpContents #merit-store .stores h4,/* 店舗名 */
	#wpContents #merit-store .stores p{/* 店舗住所 */
		font-size: 1.8rem;
	}

	#wpContents #merit-store .stores h4{/* 店舗名　マージン */
		margin: 10px 0 4px;
	}

	/* サービス内容 画像 ･････････････････････････････････････ */
	#wpContents .service img{/* 画像 */
		width: 100%;
	}

	/* 対応可能技術 ･････････････････････････････････････ */
	#wpContents #technology{
		margin: var(--marginTopBottom_sp) 0 0;
	}
	#wpContents #technology p{/* 文字揃え */
		text-align-last: left;
		text-align: left;
	}
	/* オフィシャルサイト ･････････････････････････････････････ */
	#wpContents #official{/* マージン */
		width: calc(100% - 50px);
		box-sizing: border-box;
	}

	#wpContents #official span{/* 背景 */
		margin: 0;
	}

	#wpContents #official a{/* ボタン */
		padding: 20px 40px;
	}
}