@charset "utf-8";

.services-wrap{
	position: relative;
	max-width: var(--wide-wrap);
	width: 100%;
	margin-top: var(--base-top-margin);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--base-padding);
	padding-right: var(--base-padding);
}

h1.category{
	max-width: 285px;
	width: 100%;
	max-height: 35px;
	height:auto;
	margin-left: -2px;
	margin-bottom: 30px;
}
.category img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -----------------------------
	a-Block クラウドエイトについて */
	
.a-block{
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
}

.a-block .catch{
	font-size: calc(var(--base-fontsize)*1.75);
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.05em;
	margin-left: -3px;
	text-align: center;
}

.a-block .services-img01{
	max-width: 900px;
	width: 100%;
	margin-top: 28px;
	margin-right: auto;
	margin-left: auto;
}
.a-block .services-img01 img{
	width: 100%;
}
.a-block .caption{
	max-width: 700px;
	width: 100%;
	margin-top: 26px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	line-height: 1.5;
}


/* ------------------
	b-Block サービス */

/* タブ非表示 */
.tabs {
  display: none;
}

.b-block {
  max-width: var(--wide-wrap);
  margin: 74px auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

/* 各カラム */
.detail h2 {
  font-size: calc(var(--base-fontsize) * 1.45);
  margin-bottom: 30px;
  font-weight: 600;
}

/* セクション */
.detail section {
  border-top: 2px solid #aaa;
  padding: 18px 0;
}

.detail h3 {
  font-size: 16px;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

/* リスト */
.detail ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 5px;
}

.detail li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 5px;
  font-size: 10px;
}
.detail ul.single{
	margin-bottom: 30px;
}


/* ----------------------------------
	c-Block 戦略と感覚を、デザインする。 */
	
.c-block{
	position: relative;
	display: grid;
	grid-template-areas: "ct ci";
	margin-top: 200px;
	/* border: 1px solid #000; */
}


.text-block h2{
	font-size: calc(var(--base-fontsize)*1.75);
	font-weight: 500;
}
.text-block h3{
	margin-top: 22px;
}
.text-block p{
	margin-top: 46px;
	line-height: 2;
}
.c-block text-block{
	grid-area: ct;
}
.services-img02{
	display: grid;
	place-items: end center;
	grid-area: ci;
}
.services-img02 img{
	width: 100%;
}

/* ---------------------------
	d-Block アイデアの「秘密」  */
.d-block{
	position: relative;
	display: grid;
	grid-template-areas:
		"di dt";
	margin-top: 200px;
}
.d-block .text-block{
	display: grid;
	place-items: end start;
	grid-area: dt;
}
.services-img03{
	display: grid;
	place-items: center;
	grid-area: di;
}
.services-img03 img{
	width: 72%;
}


/* --------------
	e Block  ブランドマネジャーをひとりにしない */
	
.e-block{
	position: relative;
	display: grid;
	grid-template-areas:
		"et"
		"ei";
	margin-top: 178px;
	text-align: center;
	max-width: 100%;
}
.e-block .text-block{
	grid-area: et;
}
.services-img04{
	display: grid;
	place-items: center;
	margin-top: 26px;
	grid-area: ei;
}
.services-img04 img{
	width: 55%;
}

/* ----------------------
	end キャプション */
	
.end-caption{
	margin: 132px auto 24px;
	text-align: center;
}



/* ----------------------
  PC版 960px 以下
---------------------- */
@media (width <=960px) {

	/* -----------------------------
		b-Block サービス (PC <=960) */
	
	/* TABオン */
	.tabs {
		display: flex;
		margin-top: 94px;
		margin-bottom: 20px;
	 }
	.tab {
		flex: 1;
		padding: 12px;
		border: 1px solid #ccc;
		background: #eee;
		font-size: 12px;
		font-weight: 600;
		text-align: center;
		cursor: pointer;
	}
	
	.tab.active {
		background: #333;
		color: #fff;
	}
	.b-block{
		position: relative;
		max-width: 1920px;
		width: 200%;
		gap: 0;
		place-items: end center;
	}
	
	.content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s ease;
	}
	
	.content.active {
		opacity: 1;
		visibility: visible;
		position: relative; /* 高さ確保用 */
	}
	
	/* ----------------------------------------------
		c-Block 戦略と感覚を、デザインする。 (PC <=960) */

	.c-block{
		position: relative;
		display: grid;
		grid-template-areas:
			"ct"
			"ci";
		gap: 60px 0;
		place-items: center;
		margin-top: 200px;
		width: 100%;
	}
	.c-block .text-block{
		width: 500px;
	}
	.services-img02{
		width: 500px;
	}
	
	/* ---------------------------------------
		d-Block アイデアの「秘密」 (PC <=960) */
		
	.d-block{
		grid-template-areas:
			"dt"
			"di";
		place-items: center;
		gap: 60px 0;
		width: 100%;
	}
	.d-block .text-block{
		width: 500px;
		grid-area: dt;
	}
	.services-img03{
		width: 500px;
		grid-area: di;
	}
	
	/* --------------
		e Block  ブランドマネジャーをひとりにしない  (PC <=960)*/

	.e-block{
		place-items: center;
		gap: 60px 0;
		width: 100%;
	}
	.e-block .text-block{
		width: 78%;
	}
	.services-img04{
		width: 700px;
	}

}


/* -------------------
	iPhone Setting
------------------- */
@media (min-width: 320px)
and (max-width: 767px) {
	
	/* -------------------
		Top (iPhone)*/

	.services-wrap{
		max-width: 100%;
		padding-left: 4%;
		padding-right: 4%;
	}
	h1.category{
		max-width: 226px;
		width: 100%;
		max-height: 35px;
		height:auto;
		margin-left: -2px;
		margin-bottom: 50px;
	}
	
	/* -------------------
		a-Block クラウドエイトとは (iPhone) */

	.a-block .catch{
		font-size: calc(var(--base-fontsize)*1.2);
		letter-spacing: -0.03em;
		line-height: 2.3;
	}
	
	/* ----------------------------------------------
		c-Block 戦略と感覚を、デザインする。 (iPhone) */
	.c-block{
		gap: 30px 0;
	}
	.c-block .text-block{
		width: 95%;
	}
	.text-block h3{
		margin-top: 14px;
	}
	.text-block p{
		margin-top: 30px;
	}
	.services-img02{
		width: 90%;
	}
	
	
	/* ---------------------------------------
		d-Block アイデアの「秘密」 (iPhone) */
	.d-block{
		margin-top: 100px;
		gap: 30px 0;
	}
	.d-block .text-block{
		width: 96%;
	}
	.services-img03{
		width: 96%;
	}
	
	/* --------------
		e Block  ブランドマネジャーをひとりにしない (iPhone) */
	.e-block{
		width: 95%;
		margin-top: 100px;
		margin-left: auto;
		margin-right: auto;
		place-items: initial;
		gap: 30px 0;
	}
	.e-block .text-block{
		width: 100%;
		text-align: justify;
		word-break: break-all;
	}
	.services-img04{
		width: 100%;
	}
	.services-img04 img{
		width: 100%;
	}


	/* ----------------------
		end キャプション */
		
	.end-caption{
		margin: 110px auto 44px;
		text-align: center;
		line-height: 1.7;
	}
	

}