@charset "utf-8";

@import url("/bs/brainrobi/css/slick.css");
@import url("/bs/brainrobi/css/slick-theme.css");

/* ------------------------------------------------------------------------------------------------
 Common
-------------------------------------------------------------------------------------------------*/

body {
	width: 100%;
	color: #000;
	font-weight: 400;
}

.main-visual { overflow: hidden; }
.btn {}

.animated { opacity: 0; }
.delay200ms { animation-delay: 0.2s; }
.delay400ms { animation-delay: 0.4s; }
.delay600ms { animation-delay: 0.6s; }

.brand {
	
}

ul.banner-area {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 50px 0;
	padding: 0;
}
ul.banner-area li {
	margin: 0;
	padding: 0;
}
h2 {
	border-bottom: none;
}
h2::before {
	background: none;
}

ul.btn.rColor li a {
	color: #fff;
	background-color: #04374f;
}
ul.btn.rColor li a:hover {
	color: #04374f;
	background: #fff;
}

.inquiry ul.btn li a.btnOrange {
	color: #FFF;
	background-color: #C74E50;
	border: 3px solid #C74E50;
}
.inquiry ul.btn li a.btnOrange:hover {
	color: #C74E50;
	background-color: #FFF;
}

.aboutBrainrobi {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px 30px;
	line-height: 1.6;
}

.botAnchor {
	display: flex;
	gap: 30px 20px;
	flex-wrap: wrap;
	
	a {
		font-size: calc(14/16*1rem);
		padding: 5px;
		color: #FFF;
		background-color: #004F72;
		border-radius: 100vmax;
	}
}
@media (560px < width) {
	.botAnchor a {
		font-size: 1rem;
		padding: 5px 1em;
	}
}

/* ------------------------------------------------------------------------------------------------
 Mobile（SP/Tablet）
-------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 959px) {
	
	/* Common
	----------------------------------------------------------------------------------------------*/
	
	.main-visual img {
		width: 100%;
		max-width: 750px;
		margin: auto;
	}
	
	.main-visual h1 img {
		width: 150px;
		margin: 20px auto;
	}
	
	.sticky {
		position: sticky;
		top: 0;
		/*top: 59px;*/
		z-index: 1000;
	}

	nav#anchor {
		width: 100%;
		margin-top: 10px;
		padding: 0 10px;
		background: rgba(255,255,255,0.9);
		position: sticky;
		top: 0;
		/*top: 59px;*/
		z-index: 10;
	}
	nav#anchor ul {
		display: flex;
		justify-content: center;
		width: 100%;
		margin: 0 auto;
		padding: 10px 0;
	}
	nav#anchor ul li {
		width: 25%;
		text-align: center;
		padding: 0px;
		margin: 0px;
		margin-right: 10px;
		background: rgba(255,255,255,1);
	}
	nav#anchor ul li:last-child {
		margin-right: 0;
	}
	nav#anchor ul li a {
		display: block;
		width: 100%;
		text-align: center;
		padding: 12px 0 14px 0;
		margin: 0px;
		border: 1px solid #333;
		background: rgba(255,255,255,1);
		transition: 0.2s;
	}
	nav#anchor ul li a:hover {
		color: #fff;
		background: #eee;
		transition: 0.2s;
	}
	
	section {
		width: 100%;
	}
	section .content {
		position: relative;
		max-width: 960px;
		margin: auto;
	}
	section .content-inner {
		max-width: 870px;
		margin: auto;
	}
	
	section#intro {
		padding-bottom: 100px;
	}
	section#intro .content p {
		font-size: 16px;
		text-align: center;
		line-height: 220%;
		padding: 40px 0;
	}
	
	ul.btn {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	ul.btn li {
		margin-bottom: 20px;
	}
	ul.btn li:last-child {
		margin-bottom: 0;
	}
	ul.btn li a {
		display: block;
		text-align: center;
		font-size: 22px;
		font-weight: 600;
		color: #04374f;
		background: #fff;
		width: 400px;
		margin: 0 auto;
		padding: 30px;
		border: 3px solid #04374f;
		border-radius: 20px;
		transition: 0.2s;
	}
	ul.btn li a:hover {
		color: #fff;
		background: #04374f;
		transition: 0.2s;
	}
	
	/* BOT
	----------------------------------------------------------------------------------------------*/
	
	section#bot {
	}
	section#bot h2 {
		width: 100%;
		color: #fff;
		background: #004f72;
		font-size: 22px;
		line-height: 120%;
		font-weight: 500;
		text-align: center;
		padding: 15px 0;
	}
	section#bot .category-head {
		padding: 50px 0;
		background: linear-gradient(to right,#cbdbe5,#fff 30%,#fff);
		overflow: hidden;
	}
	section#bot img.illust {
		display: block;
		margin: auto;
		width: 50%;
	}
	
	section#bot .content-inner {
		padding: 0 40px;
	}
	
	section#bot .content-inner .text {
		padding: 30px 0;
	}
	section#bot .content-inner .text p.title {
		font-size: 25px;
		font-weight: 500;
		line-height: 150%;
		margin-bottom: 20px;
	}
	section#bot .content-inner .text p {
		font-size: 18px;
		line-height: 180%;
	}
	
	section#bot .features {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 50px auto;
		padding: 10px;
		width: 100%;
		max-width: 550px;
		border: 3px solid #004f72;
		border-radius: 10px;
	}
	section#bot .features p.title {
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.3em;
		color: #004f72;
		padding: 15px 0;
	}
	section#bot .features ul {
		font-size: 18px;
		font-weight: 500;
		margin: 0;
		padding: 0;
	}
	section#bot .features ul li {
		font-weight: 500;
		line-height: 160%;
		margin: 0;
		margin-left: 1.5em;
		margin-bottom: 10px;
		padding: 0;
		color: #000;
	}
	section#bot .features ul li:last-child {
		margin-bottom: 0;
	}
	section#bot .features ul li::before {
		color: #004f72;
		content: "●";
		margin-right: 0.3em;
		margin-left: -1.3em;
	}
	section#bot .summary {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		background: #eff4f7;
		padding: 40px;
		margin: auto;
		margin-bottom: 30px;
	}
	section#bot .summary .text {
		margin-bottom: 20px;
	}
	section#bot .summary .text p.title {
		font-size: 22px;
		font-weight: 500;
		line-height: 150%;
		letter-spacing: 0.1em;
		margin-bottom: 20px;
	}
	section#bot .summary .text p {
		font-size: 16px;
		font-weight: 400;
		line-height: 180%;
	}
	
	.operator {
		text-align: center;
		width: 480px;
		margin: auto;
		margin-bottom: 30px;
	}
	.operator p {
		color: #fff;
		background: #004f72;
		margin: auto;
		margin-bottom: 2px;
		padding: 15px;
		border-radius: 30px;
		font-size: 24px;
	}
	.operator img {
		margin: auto;
	}
	
	
	/* ASSISTANT
	----------------------------------------------------------------------------------------------*/
	
	#assistant {
	}
	#assistant h2 {
		width: 100%;
		color: #fff;
		background: #006824;
		font-size: 22px;
		line-height: 120%;
		font-weight: 500;
		text-align: center;
		padding: 15px 0;
	}
	#assistant .category-head {
		position: relative;
		padding: 50px 0;
		background: linear-gradient(to right,#c4d7c1,#fff 30%,#fff);
		overflow: hidden;
	}
	
	#assistant img.illust {
		margin: auto;
		width: 80%;
	}
	
	#assistant .content-inner {
		padding: 0 40px;
	}
	#assistant .content-inner .text {
		padding: 30px 0;
	}
	#assistant .content-inner .text p.title {
		font-size: 25px;
		font-weight: 500;
		line-height: 150%;
		margin-bottom: 20px;
	}
	#assistant .content-inner .text p {
		font-size: 18px;
		line-height: 180%;
	}
	
	#assistant .features {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 50px auto;
		padding: 10px;
		width: 100%;
		max-width: 550px;
		border: 3px solid #006824;
		border-radius: 10px;
	}
	#assistant .features p.title {
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.3em;
		color: #006824;
		padding: 15px 0;
	}
	#assistant .features ul {
		font-size: 18px;
		font-weight: 500;
		margin: 0;
		padding: 0;
	}
	#assistant .features ul li {
		font-weight: 500;
		line-height: 160%;
		margin: 0;
		margin-left: 1.5em;
		margin-bottom: 10px;
		padding: 0;
		color: #000;
	}
	#assistant .features ul li:last-child {
		margin-bottom: 0;
	}
	#assistant .features ul li::before {
		color: #006824;
		content: "●";
		margin-right: 0.3em;
		margin-left: -1.3em;
	}

	#assistant .summary {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		background: #f2f7f2;
		padding: 40px;
		margin: auto;
		margin-bottom: 30px;
	}
	section#assistant .summary img {
		margin: auto;
		margin-top: 20px;
		width: 80%;
		max-width: 317px;
	}

	#assistant .summary .text {
		margin-bottom: 10px;
	}
	#assistant .summary .text p.title {
		font-size: 22px;
		font-weight: 500;
		line-height: 150%;
		letter-spacing: 0.1em;
		margin-bottom: 20px;
	}
	#assistant .summary .text p {
		font-size: 16px;
		font-weight: 400;
		line-height: 180%;
	}
	#assistant .summary .text p.sup {
		font-size: 16px;
		font-weight: 500;
		line-height: 180%;
		text-align: center;
		color: #c07c00;
		background: #fff;
		border: 3px dotted #c07c00;
		margin-top: 30px;
		padding: 15px;
	}
	
	/* VOICE
	----------------------------------------------------------------------------------------------*/
	
	#voice {
	}
	#voice h2 {
		width: 100%;
		color: #fff;
		background: #b03d00;
		font-size: 22px;
		line-height: 120%;
		font-weight: 500;
		text-align: center;
		padding: 15px 0;
	}
	#voice .category-head {
		position: relative;
		padding: 50px 0;
		background: linear-gradient(to right,#f2dccc,#fff 30%,#fff);
		overflow: hidden;
	}
	
	#voice img.illust {
		margin: auto;
		width: 70%;
		max-width: 527px;
	}
	
	#voice .content-inner {
		padding: 0 40px;
	}
	#voice .content-inner .text {
		padding: 30px 0;
	}
	#voice .content-inner .text p.title {
		font-size: 25px;
		font-weight: 500;
		line-height: 150%;
		margin-bottom: 0px;
	}
	#voice .content-inner .text p {
		font-size: 18px;
		line-height: 180%;
	}
	
	#voice .features {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 50px auto;
		padding: 10px;
		width: 100%;
		max-width: 550px;
		border: 3px solid #b03d00;
		border-radius: 10px;
	}
	#voice .features p.title {
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.3em;
		color: #b03d00;
		padding: 15px 0;
	}
	#voice .features ul {
		font-size: 18px;
		font-weight: 500;
		margin: 0;
		padding: 0;
	}
	#voice .features ul li {
		font-weight: 500;
		line-height: 160%;
		margin: 0;
		margin-left: 1.5em;
		margin-bottom: 10px;
		padding: 0;
		color: #000;
	}
	#voice .features ul li:last-child {
		margin-bottom: 0;
	}
	#voice .features ul li::before {
		color: #b03d00;
		content: "●";
		margin-right: 0.3em;
		margin-left: -1.3em;
	}
	
	#voice ul.voice-step {
		width: 540px;
		margin: auto;
		padding: 40px 0 0 0;
	}
	#voice ul.voice-step li {
		display: flex;
		border-bottom: 2px solid #b03d00;
		padding-bottom: 30px;
		margin-bottom: 30px;
	}
	#voice ul.voice-step li:last-child {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	#voice ul.voice-step li .step {
		font-size: 24px;
		line-height: 120%;
		color: #fff;
		text-align: center;
		background: #b03d00;
		border-radius: 15px;
		margin: 0;
		padding: 25px;
	}
	#voice ul.voice-step li .text {
		margin-left: 30px;
	}
	#voice ul.voice-step li .text p.title {
		font-size: 32px;
		font-weight: 600;
		color: #b03d00;
		line-height: 100%;
		margin-bottom: 15px;
	}
	#voice ul.voice-step li .text p {
		font-size: 22px;
		line-height: 130%;
	}
	
	#voice .usecases {
		box-sizing: border-box;
		width: 100%;
		max-width: 960px;
		margin: auto;
		text-align: center;
		margin-bottom: 20px;
	}
	#voice .usecases img {
		margin: auto;
	}
	#voice .usecases p.title {
		font-size: 24px;
		font-weight: 600;
		color: #b03d00;
		margin-bottom: 10px;
	}
	#voice .usecases p {
		font-size: 18px;
		font-weight: 500;
		line-height: 150%;
		color: #000;
		margin-bottom: 30px;
	}
	
	#voice .usecases > ul {
		display: flex;
		flex-direction: column;
		padding: 0 40px;
		
	}
	#voice .usecases > ul li {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin-bottom: 30px;
		padding: 20px;
		background: #f9efe7;
	}
	#voice .usecases > ul li .text {
		width: 100%;
		margin-left: 20px;
	}
	#voice .usecases > ul li .text p.title {
		font-size: 24px;
		font-weight: 600;
		text-align: left;
		color: #333;
		margin-bottom: 10px;
	}
	
	#voice .usecases ul ul {
		margin: 0;
		padding: 0;
		padding-right: 20px;
	}
	#voice .usecases ul ul li {
		margin: 0;
		margin-bottom: 10px;
		padding: 0;
		padding-left: 1em;
		width: auto;
		text-align: left;
		text-indent: -1em;
		line-height: 140%;
	}
	#voice .usecases ul ul li::before {
		content: "●";
		color: #b03d00;
		font-size: 12px;
		vertical-align: 1px;
		margin-right: 5px;
	}
	#voice .usecases ul ul li:last-child {
		margin-bottom: 0;
	}
	
	
	/* KNOWLEDGE
	----------------------------------------------------------------------------------------------*/
	
	#knowledge {
	}
	#knowledge h2 {
		width: 100%;
		color: #fff;
		background: #c07c00;
		font-size: 22px;
		line-height: 120%;
		font-weight: 500;
		text-align: center;
		padding: 15px 0;
	}
	#knowledge .category-head {
		position: relative;
		padding: 50px 0;
		background: linear-gradient(to right,#f1e0c5,#fff 30%,#fff);
		overflow: hidden;
	}
	
	#knowledge img.illust {
		margin: auto;
		width: 70%;
	}
	
	#knowledge .content-inner {
		padding: 0 40px;
	}
	#knowledge .content-inner .text {
		padding: 30px 0;
	}
	#knowledge .content-inner .text p.title {
		font-size: 25px;
		font-weight: 500;
		line-height: 150%;
		margin-bottom: 20px;
	}
	#knowledge .content-inner .text p {
		font-size: 18px;
		line-height: 180%;
	}
	
	#knowledge .features {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 50px auto;
		padding: 10px;
		width: 100%;
		max-width: 550px;
		border: 3px solid #c07c00;
		border-radius: 10px;
	}
	#knowledge .features p.title {
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.3em;
		color: #c07c00;
		padding: 15px 0;
	}
	#knowledge .features ul {
		font-size: 18px;
		font-weight: 500;
		margin: 0;
		padding: 0;
	}
	#knowledge .features ul li {
		font-weight: 500;
		line-height: 160%;
		margin: 0;
		margin-left: 1.5em;
		margin-bottom: 10px;
		padding: 0;
		color: #000;
	}
	#knowledge .features ul li:last-child {
		margin-bottom: 0;
	}
	#knowledge .features ul li::before {
		color: #c07c00;
		content: "●";
		margin-right: 0.3em;
		margin-left: -1.3em;
	}
	
	#knowledge .cycle {
		width: 100%;
		max-width: 960px;
		margin: auto;
		margin-bottom: 50px;
		padding: 0;
		text-align: center;
	}
	#knowledge .cycle p.title {
		font-size: 24px;
		font-weight: 600;
		color: #c07c00;
		margin-bottom: 10px;
	}
	#knowledge .cycle p {
		font-size: 18px;
		font-weight: 500;
		line-height: 150%;
		color: #000;
		margin-bottom: 30px;
	}
	#knowledge .cycle img {
		width: 100%;
		max-width: 959px;
		margin: 0 auto;
		padding: 0;
	}
	
	
	/* OPTION
	----------------------------------------------------------------------------------------------*/
	
	#option {
		text-align: center;
	}
	#option h2 {
		display: block;
		width: 100%;
		color: #003b54;
		font-size: 26px;
		font-weight: 500;
		padding: 20px 0;
	}
	#option h2::after {
		background-color: #003b54;
		border-radius: 5px;
		content: "";
		display: block;
		height: 5px;
		width: 50px;
		margin: auto;
		margin-top: 40px;
		margin-bottom: 10px;
	}
	#option p {
		font-size: 18px;
		font-weight: 500;
		line-height: 200%;
		margin-bottom: 60px;
		padding: 0 40px;
	}
	#option .option-area {
		width: 100%;
		background: #e8ecee;
		padding: 50px 0;
	}
	#option .option-area .content {
		width: 100%;
		max-width: 959px;
		padding: 0 40px;
	}
	#option .option-area .content p.title {
		color: #003b54;
		font-size: 21px;
		font-weight: 500;
		text-align: center;
		line-height: 100%;
		margin: 30px 0;
		padding: 0;
	}
	#option .option-area .content p {
		font-size: 15px;
		font-weight: 400;
		text-align: left;
		line-height: 150%;
		margin: 0;
		padding: 0;
	}
	#option .option-area .content .dashboard {
		width: 100%;
		border-radius: 4px;
		background: #fff;
		padding: 40px;
		margin-bottom: 30px;
	}
	#option .option-area .content .dashboard ul {
		text-align: left;
		font-size: 13px;
		line-height: 160%;
		margin: 0;
		margin-top: 10px;
		padding: 0;
	}
	#option .option-area .content .tuning {
		width: 100%;
		border-radius: 4px;
		background: #fff;
		padding: 40px;
		margin-bottom: 30px;
	}
	#option .option-area .content .questionnaire {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		width: 100%;
		border-radius: 4px;
		background: #fff;
		padding: 40px;
		margin-top: 40px;
	}
	#option .option-area .content .questionnaire .text {
		width: 100%;
		margin-top: 30px;
		order: 1;
	}
	#option .option-area .content .questionnaire .text p.title {
		margin-top: 0;
		margin-bottom: 20px;
	}
	#option .option-area .content .questionnaire .text p {
		line-height: 160%;
	}
	
	
	/* FLOW
	----------------------------------------------------------------------------------------------*/
	
	#flow {
		text-align: center;
		/*margin: 0;*/
		/*padding-bottom: 10px;*/
	}
	#flow h2 {
		display: block;
		width: 100%;
		color: #003b54;
		font-size: 26px;
		font-weight: 500;
		padding: 70px 0 20px 0;
	}
	#flow h2::after {
		background-color: #003b54;
		border-radius: 5px;
		content: "";
		display: block;
		height: 5px;
		width: 50px;
		margin: auto;
		margin-top: 40px;
		margin-bottom: 10px;
	}
	#flow p {
		font-size: 18px;
		font-weight: 500;
		line-height: 200%;
		margin-bottom: 60px;
		padding: 0 40px;
	}
	
	#flow ul.step {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		margin: auto;
		padding: 0 40px;
	}
	#flow ul.step p.num {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 17px;
		line-height: 100%;
		letter-spacing: 0.1em;
		margin: 0 auto;
		padding: 5px 0 7px 0;
		width: 185px;
		color: #fff;
		background: #04374f;
		border-radius: 15px;
	}
	#flow ul.step p.title {
		font-size: 26px;
		font-weight: 500;
		line-height: 140%;
		color: #04374f;
		margin: 10px 0 20px 0;
		padding: 0;
	}
	#flow ul.step p {
		margin: 0;
		padding: 0;
	}
	#flow ul.step li {
		position: relative;
		width: 100%;
		margin-bottom: 100px;
		padding: 20px;
		border: 3px solid #04374f;
		border-radius: 5px;
	}
	#flow ul.step > li::after {
		content: url("/bs/brainrobi/images/img-triangle.webp");
		position: absolute;
		bottom: -70px;
		left: 48%;
		transform: translate(-50%, -50%);
		transform: rotate(90deg);
	}
	#flow ul.step > li:last-child::after {
		content: none;
	}
	#flow ul.step li ul li {
		width: 85%;
		margin: 0;
		margin-left: 2em;
		margin-bottom: 15px;
		padding: 0;
		border: none;
		text-align: left;
		line-height: 150%;
		font-size: 14px;
	}
	#flow ul.step li ul li::before {
		content: url("/bs/brainrobi/images/img-check.webp");
		margin-right: 8px;
		margin-left: -2em;
	}
	#flow ul.step li ul li:last-child {
		margin-bottom: 0px;
	}
	
	
	/* CASE
	----------------------------------------------------------------------------------------------*/
	
	#case {
		text-align: center;
		/*margin: 0;*/
		padding-bottom: 10px;
	}
	#case h2 {
		display: block;
		width: 100%;
		color: #003b54;
		font-size: 26px;
		font-weight: 500;
		padding: 0px 0 20px 0;
	}
	#case h2::after {
		background-color: #003b54;
		border-radius: 5px;
		content: "";
		display: block;
		height: 5px;
		width: 50px;
		margin: auto;
		margin-top: 40px;
		margin-bottom: 10px;
	}
	
	#case ul {
		width: 90%;
		margin: auto;
		margin-bottom: 100px;
	}
	#case ul li {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 40px;
	}
	#case ul li p {
		margin-bottom: 20px;
		font-size: 14px;
		line-height: 140%;
	}
	#case ul li p.title {
		color: #003b54;
		margin-bottom: 10px;
		font-size: 16px;
		font-weight: 500;
	}
	#case ul li img {
		margin: 0 auto;
		margin-bottom: 15px;
	}
	#case ul li .btn {
		margin-top: 20px;
		font-size: 14px;
		font-weight: 600;
		line-height: 100%;
		text-align: center;
		max-width: 480px;
		margin: auto;
	}
	#case ul li .btn a {
		display: block;
		color: #003b54;
		padding: 15px;
		background: #fff;
		border: 2px solid #003b54;
		border-radius: 10px;
		transition: 0.2s;
	}
	#case ul li .btn a:hover {
		color: #fff;
		background: #003b54;
		font-weight: 500;
		transition: 0.2s;
	}
	#case ul li .btn.file {
		margin-top: 10px;
	}
	#case ul li .btn.file a {
		color: #543b00;
		background: #fff;
		border: 2px solid #543b00;
		transition: 0.2s;
	}
	#case ul li .btn.file a:hover {
		color: #fff;
		background: #543b00;
		font-weight: 500;
		transition: 0.2s;
	}
	
	
	/* INQUIRY
	----------------------------------------------------------------------------------------------*/
	
	.inquiry {
		text-align: center;
		padding: 0;
	}
	
	
	/* OUTRO
	----------------------------------------------------------------------------------------------*/
	
	#outro {
		padding: 150px 0;
	}
	#outro img {
		margin: auto;
	}
	
}


/* ------------------------------------------------------------------------------------------------
 Smart Phone
-------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 559px) {
	
	/* Common
	----------------------------------------------------------------------------------------------*/
	
	#bot, #assistant, #voice, #knowledge, #option {
		position: relative;
		/*z-index: -1;*/
		margin-top: -60px;
		padding-top: 60px;
		/*margin-top: -107px;
		padding-top: 107px;*/
	}
	#flow, #case {
		margin-top: -60px;
		padding-top: 60px;
		/*margin-top: -107px;
		padding-top: 107px;*/
	}
	
	nav#anchor ul {
		font-size: 10px;
	}
	nav#anchor ul li {
		margin-right: 5px;
	}
	nav#anchor ul li a {
		padding: 10px 5px;
	}
	
	section#intro {
		padding-bottom: 50px;
	}
	section#intro .content p {
		font-size: 14px;
		text-align: center;
		line-height: 190%;
		padding: 20px 10px 40px 10px;
	}
	
	ul.btn li {
		width: 100%;
		padding: 0 20px;
	}
	ul.btn li a {
		display: block;
		text-align: center;
		font-size: 16px;
		font-weight: 600;
		color: #04374f;
		background: #fff;
		width: 100%;
		margin: 0;
		padding: 15px;
		border: 3px solid #04374f;
		border-radius: 15px;
		transition: 0.2s;
	}
	
	
	/* BOT
	----------------------------------------------------------------------------------------------*/
	
	section#bot {
	}
	section#bot h2 {
		font-size: 18px;
		padding: 10px 0;
	}
	section#bot .category-head {
		padding: 30px 0 50px 0;
	}
	section#bot .content-inner {
		padding: 0 20px;
	}
	section#bot .content-inner .text {
		padding: 20px 0;
	}
	section#bot .content-inner .text p.title {
		font-size: 18px;
		font-weight: 600;
		margin-top: 10px;
	}
	section#bot .content-inner .text p {
		font-size: 14px;
		line-height: 160%;
	}
	section#bot img.illust {
		width: 70%;
	}
	section#bot .features {
		margin: 30px auto;
		padding: 10px;
		width: 95%;
		max-width: 100%;
	}
	section#bot .features ul {
		font-size: 14px;
	}
	section#bot .features p.title{
		font-size: 20px;
		line-height: 100%;
		margin: 0 0 5px 0;
		padding: 5px 0;
	}
	
	section#bot .summary {
		padding: 20px;
	}
	section#bot .summary .text p.title {
		font-size: 16px;
		font-weight: 600;
		letter-spacing: normal;
		margin-bottom: 15px;
	}
	section#bot .summary .text p {
		font-size: 13px;
		line-height: 150%;
	}
	.operator {
		width: 95%;
	}
	.operator p {
		font-size: 16px;
		line-height: 120%;
	}

	
	/* ASSISTANT
	----------------------------------------------------------------------------------------------*/
	
	section#assistant {
	}
	section#assistant h2 {
		font-size: 18px;
		padding: 10px 8px;
	}
	section#assistant .category-head {
		padding: 30px 0 50px 0;
	}
	section#assistant .content-inner {
		padding: 0 20px;
	}
	section#assistant .content-inner .text {
		padding: 20px 0;
	}
	section#assistant .content-inner .text p.title {
		font-size: 18px;
		font-weight: 600;
		margin-top: 10px;
	}
	section#assistant .content-inner .text p {
		font-size: 14px;
		line-height: 160%;
	}
	
	section#assistant .features {
		margin: 30px auto;
		padding: 10px;
		width: 95%;
		max-width: 100%;
	}
	section#assistant .features ul {
		font-size: 14px;
	}
	section#assistant .features p.title{
		font-size: 20px;
		line-height: 100%;
		margin: 0 0 5px 0;
		padding: 5px 0;
	}
	section#assistant .summary {
		padding: 20px;
	}
	section#assistant .summary .text p.title {
		font-size: 16px;
		font-weight: 600;
		letter-spacing: normal;
		margin-bottom: 15px;
	}
	section#assistant .summary .text p {
		font-size: 13px;
		line-height: 150%;
	}
	
	#assistant .summary .text p.sup {
		font-size: 12px;
		font-weight: 600;
		line-height: 180%;
		text-align: center;
		color: #c07c00;
		background: #fff;
		border: 3px dotted #c07c00;
		margin-top: 30px;
		padding: 10px;
	}
	
	
	/* VOICE
	----------------------------------------------------------------------------------------------*/
	
	section#voice {
	}
	section#voice h2 {
		font-size: 18px;
		padding: 10px 8px;
	}
	section#voice .category-head {
		padding: 30px 0 50px 0;
	}
	section#voice .content-inner {
		padding: 0 20px;
	}
	section#voice .content-inner .text {
		padding: 20px 0;
	}
	section#voice .content-inner .text p.title {
		font-size: 18px;
		font-weight: 600;
		margin-top: 10px;
	}
	section#voice .content-inner .text p {
		font-size: 14px;
		line-height: 160%;
	}

	#voice ul.voice-step {
		width: 100%;
		margin: auto;
		padding: 20px;
	}
	#voice ul.voice-step li {
		display: flex;
		align-items: center;
		border-bottom: 2px solid #b03d00;
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
	#voice ul.voice-step li .step {
		font-size: 20px;
		padding: 20px;
	}
	#voice ul.voice-step li .text {
		margin-left: 20px;
	}
	#voice ul.voice-step li .text p.title {
		font-size: 22px;
		font-weight: 600;
		color: #b03d00;
		line-height: 100%;
		margin-bottom: 10px;
	}
	#voice ul.voice-step li .text p {
		font-size: 14px;
		font-weight: 500;
		line-height: 130%;
	}
	
	section#voice .features {
		margin: 30px auto;
		margin-top: 10px;
		padding: 10px;
		width: 95%;
		max-width: 100%;
	}
	section#voice .features ul {
		font-size: 14px;
	}
	section#voice .features p.title{
		font-size: 20px;
		line-height: 100%;
		margin: 0 0 5px 0;
		padding: 5px 0;
	}
	
	#voice .usecases {
		box-sizing: border-box;
		width: 100%;
		max-width: 559px;
		margin: auto;
		text-align: center;
		margin-bottom: 20px;
	}
	#voice .usecases img {
		margin: auto;
	}
	#voice .usecases p.title {
		font-size: 24px;
		font-weight: 600;
		color: #b03d00;
		margin-bottom: 10px;
		padding: 0;
	}
	#voice .usecases p {
		font-size: 18px;
		font-weight: 500;
		line-height: 150%;
		color: #000;
		margin-bottom: 30px;
		padding: 0 10px;
	}
	
	#voice .usecases > ul {
		display: flex;
		flex-direction: column;
		padding: 0 20px;
		
	}
	#voice .usecases > ul li {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin-bottom: 20px;
		padding: 10px;
		background: #f9efe7;
	}
	#voice .usecases > ul li .text {
		width: 100%;
		margin-left: 10px;
	}
	#voice .usecases > ul li .text p.title {
		font-size: 16px;
		font-weight: 600;
		text-align: left;
		color: #000;
		margin-bottom: 10px;
	}
	
	#voice .usecases ul ul {
		margin: 0;
		padding: 0;
		padding-right: 10px;
	}
	#voice .usecases ul ul li {
		margin: 0;
		margin-bottom: 5px;
		padding: 0;
		padding-left: 1em;
		width: auto;
		font-size: 12px;
		font-weight: 500;
		text-align: left;
		text-indent: -1em;
		line-height: 140%;
	}
	#voice .usecases ul ul li::before {
		content: "●";
		color: #b03d00;
		font-size: 12px;
		vertical-align: 1px;
		margin-right: 5px;
	}
	#voice .usecases ul ul li:last-child {
		margin-bottom: 0;
	}
	#voice .usecases ul li img {
		width: 100%;
		max-width: 60px;
	}
	
	
	/* KNOWLEDGE
	----------------------------------------------------------------------------------------------*/
	
	section#knowledge {
	}
	section#knowledge h2 {
		font-size: 18px;
		padding: 10px 8px;
	}
	section#knowledge .category-head {
		padding: 30px 0 50px 0;
	}
	section#knowledge .content-inner {
		padding: 0 20px;
	}
	section#knowledge .content-inner .text {
		padding: 20px 0;
	}
	section#knowledge .content-inner .text p.title {
		font-size: 18px;
		font-weight: 600;
		margin-top: 10px;
	}
	section#knowledge .content-inner .text p {
		font-size: 14px;
		line-height: 160%;
	}
	section#knowledge .features {
		margin: 30px auto;
		margin-top: 20px;
		padding: 10px;
		width: 95%;
		max-width: 100%;
	}
	section#knowledge .features ul {
		font-size: 14px;
	}
	section#knowledge .features p.title{
		font-size: 20px;
		line-height: 100%;
		margin: 0 0 5px 0;
		padding: 5px 0;
	}
	section#knowledge .cycle p.title {
		font-size: 18px;
	}
	section#knowledge .cycle p {
		font-size: 14px;
		padding: 0 20px;
		font-weight: 600;
	}
	
	
	/* OPTION
	----------------------------------------------------------------------------------------------*/
	
	#option {
		text-align: center;
		margin-bottom: 50px;
	}
	#option h2 {
		display: block;
		width: 100%;
		color: #003b54;
		font-size: 20px;
		font-weight: 600;
		padding: 10px 0;
	}
	#option h2::after {
		background-color: #003b54;
		border-radius: 5px;
		content: "";
		display: block;
		height: 5px;
		width: 50px;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 5px;
	}
	#option p {
		font-size: 13px;
		font-weight: 500;
		line-height: 180%;
		margin-bottom: 30px;
		padding: 0 20px;
	}
	#option .option-area {
		width: 100%;
		background: #e8ecee;
		padding: 20px 0;
	}
	#option .option-area .content {
		/*display: flex;
		flex-wrap: wrap;
		justify-content: space-between;*/
		width: 100%;
		max-width: 959px;
		padding: 0 20px;
	}
	#option .option-area .content p.title {
		color: #003b54;
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		line-height: 100%;
		margin: 15px 0;
		padding: 0;
	}
	#option .option-area .content p {
		font-size: 12px;
		font-weight: 400;
		text-align: left;
		line-height: 150%;
		margin: 0;
		padding: 0;
	}
	#option .option-area .content .dashboard {
		width: 100%;
		border-radius: 4px;
		background: #fff;
		padding: 20px;
		margin-bottom: 20px;
	}
	#option .option-area .content .dashboard ul {
		text-align: left;
		font-size: 10px;
		line-height: 160%;
		margin: 0;
		margin-top: 10px;
		padding: 0;
	}
	#option .option-area .content .tuning {
		width: 100%;
		border-radius: 4px;
		background: #fff;
		padding: 20px;
		margin-bottom: 20px;
	}
	#option .option-area .content .questionnaire {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		width: 100%;
		border-radius: 4px;
		background: #fff;
		padding: 20px;
		margin-top: 20px;
	}
	#option .option-area .content .questionnaire .text {
		width: 100%;
		margin-top: 15px;
		order: 1;
	}
	#option .option-area .content .questionnaire .text p.title {
		margin-top: 0;
		margin-bottom: 10px;
	}
	#option .option-area .content .questionnaire .text p {
		line-height: 160%;
	}
	
	
	/* FLOW
	----------------------------------------------------------------------------------------------*/
	
	#flow {
		text-align: center;
		/*margin: 0;*/
		/*padding: 50px 0 10px 0;*/
	}
	#flow h2 {
		display: block;
		width: 100%;
		color: #003b54;
		font-size: 20px;
		font-weight: 600;
		padding: 10px 0;
	}
	#flow h2::after {
		background-color: #003b54;
		border-radius: 5px;
		content: "";
		display: block;
		height: 5px;
		width: 50px;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 5px;
	}
	#flow p {
		font-size: 13px;
		font-weight: 500;
		line-height: 180%;
		margin-bottom: 40px;
		padding: 0 20px;
	}
	
	#flow ul.step {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		margin: auto;
		padding: 0 20px;
	}
	#flow ul.step p.num {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 14px;
		line-height: 100%;
		letter-spacing: 0.1em;
		margin: 0 auto;
		padding: 5px 0 7px 0;
		width: 185px;
		color: #fff;
		background: #04374f;
		border-radius: 15px;
	}
	#flow ul.step p.title {
		font-size: 16px;
		font-weight: 600;
		line-height: 140%;
		color: #04374f;
		margin: 10px 0 10px 0;
		padding: 0;
	}
	#flow ul.step p {
		margin: 0;
		padding: 0;
	}
	#flow ul.step li {
		position: relative;
		width: 100%;
		margin-bottom: 60px;
		padding: 10px;
		border: 3px solid #04374f;
		border-radius: 5px;
	}
	#flow ul.step > li::after {
		content: url("/bs/brainrobi/images/img-triangle.webp");
		position: absolute;
		bottom: -50px;
		left: 45%;
		transform: translate(-50%, -50%);
		transform: rotate(90deg);
	}
	#flow ul.step > li:last-child::after {
		content: none;
	}
	#flow ul.step li ul li {
		width: 90%;
		margin: 0;
		margin-left: 2em;
		margin-bottom: 15px;
		padding: 0;
		border: none;
		text-align: left;
		line-height: 150%;
		font-size: 12px;
		font-weight: 500;
	}
	#flow ul.step li ul li::before {
		content: url("/bs/brainrobi/images/img-check.webp");
		margin-right: 2px;
		margin-left: -2em;
	}
	#flow ul.step li ul li:last-child {
		margin-bottom: 0px;
	}
	
	
	/* CASE
	----------------------------------------------------------------------------------------------*/
	
	#case {
		text-align: center;
		/*margin: 0;*/
		/*padding: 50px 0 10px 0;*/
	}
	#case h2 {
		display: block;
		width: 100%;
		color: #003b54;
		font-size: 20px;
		font-weight: 600;
		padding: 10px 0;
	}
	#case h2::after {
		background-color: #003b54;
		border-radius: 5px;
		content: "";
		display: block;
		height: 5px;
		width: 50px;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 5px;
	}
	
	
	/* INQUIRY
	----------------------------------------------------------------------------------------------*/
	
	.inquiry {
		text-align: center;
		padding: 0;
	}
	.inquiry ul.btn li a {
		padding: 30px 0;
		font-size: 18px;
	}
	
	
	/* OUTRO
	----------------------------------------------------------------------------------------------*/
	
	#outro {
		padding: 150px 0;
	}
	#outro img {
		margin: auto;
		width: 70%;
	}
}


/* ------------------------------------------------------------------------------------------------
 Tablet
-------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 560px) and (max-width: 959px) {
	
	#bot, #assistant, #voice, #knowledge, #option {
		position: relative;
		/*z-index: -1;*/
		margin-top: -60px;
		padding-top: 60px;
		/*margin-top: -123px;
		padding-top: 123px;*/
	}
	#flow {
		margin-top: -30px;
		padding-top: 30px;
		/*margin-top: -123px;
		padding-top: 123px;*/
	}
	#case {
		margin-top: -90px;
		padding-top: 90px;
		/*margin-top: -123px;
		padding-top: 123px;*/
	}
}


/* ------------------------------------------------------------------------------------------------
 PC
-------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 960px) , print{
	
	/* Common
	----------------------------------------------------------------------------------------------*/
	
	.main-visual {
		position: relative;
	}
	.main-visual h1 img {
		position: absolute;
		top: 10;
		left: 10;
		z-index: 10;
		width: 240px;
	}
	
	#bot, #assistant, #voice, #knowledge, #option {
		margin-top: -98px;
		padding-top: 98px;
		/*margin-top: -189px;
		padding-top: 189px;*/
		position: relative;
		/*z-index: -1;*/
	}
	#flow, #case {
		margin-top: -120px;
		padding-top: 120px;
		/*margin-top: -209px;
		padding-top: 209px;*/
	}
	
	.main-visual {
		position: relative;
		width: 100%;
		max-width: 1200px;
		margin: auto;
		padding: 0;
	}
	h1 img {
		position: absolute;
		z-index: 10;
		width: 200px;
		top: 20px;
		left: 30px;
	}
	
	.sticky {
		position: sticky;
		top: 0;
		/*top: 91px;*/
		z-index: 1000;
	}

	nav#anchor {
		width: 100%;
		padding: 0 20px;
		background: rgba(255,255,255,0.9);
		position: sticky;
		top: 0;
		/*top: 91px;*/
		z-index: 10;
	}
	nav#anchor ul {
		display: flex;
		justify-content: center;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px 0;
	}
	nav#anchor ul li {
		width: 25%;
		text-align: center;
		padding: 0px;
		margin: 0px;
		margin-right: 20px;
		background: rgba(255,255,255,1);
	}
	nav#anchor ul li:last-child {
		margin-right: 0;
	}
	nav#anchor ul li a {
		display: block;
		width: 100%;
		text-align: center;
		padding: 10px;
		margin: 0px;
		border: 1px solid #333;
		background: rgba(255,255,255,1);
		transition: 0.2s;
	}
	nav#anchor ul li a:hover {
		color: #fff;
		background: #eee;
		transition: 0.2s;
	}
	nav#anchor ul li a img {
		max-width: calc(100% - 20px);
	}
	section {
		width: 100%;
	}
	section .content {
		position: relative;
		max-width: 960px;
		margin: auto;
	}
	section .content-inner {
		max-width: 870px;
		margin: auto;
	}
	
	section#intro {
		padding-bottom: 100px;
	}
	section#intro .content p {
		font-size: 16px;
		text-align: center;
		line-height: 220%;
		padding: 40px 0;
	}
	
	ul.btn {
		display: flex;
		justify-content: space-around;
	}
	ul.btn li a {
		display: block;
		text-align: center;
		font-size: 22px;
		font-weight: 600;
		color: #04374f;
		background: #fff;
		width: 280px;
		margin: 0;
		padding: 30px 20px;
		border: 3px solid #04374f;
		border-radius: 20px;
		transition: 0.2s;
	}
	ul.btn li a:hover {
		color: #fff;
		background: #04374f;
		transition: 0.2s;
	}
	
	
	/* BOT
	----------------------------------------------------------------------------------------------*/
	
	section#bot {
	}
	section#bot h2 {
		width: 100%;
		color: #fff;
		background: #004f72;
		font-size: 26px;
		font-weight: 400;
		text-align: center;
		padding: 20px 0;
	}
	section#bot .category-head {
		padding: 50px 0;
		/*margin-bottom: 80px;*/
		background: linear-gradient(to right,#cbdbe5,#fff 30%,#fff);
		overflow: hidden;
	}
	section#bot img.illust {
		position: absolute;
		top: 0;
		right: 0;
	}
	
	section#bot .content-inner .text {
		padding: 50px 0;
	}
	section#bot .content-inner .text p.title {
		font-size: 25px;
		font-weight: 500;
		line-height: 150%;
		margin-bottom: 20px;
	}
	section#bot .content-inner .text p {
		font-size: 18px;
		line-height: 180%;
	}
	
	section#bot .features {
		display: flex;
		align-items: center;
		margin: 80px auto;
		padding: 30px;
		width: 870px;
		
		border: 3px solid #004f72;
		border-radius: 10px;
	}
	section#bot .features p.title {
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.3em;
		color: #004f72;
		padding: 0 50px;
	}
	section#bot .features ul {
		font-size: 18px;
		font-weight: 500;
		margin: 0;
		padding: 0;
	}
	section#bot .features ul li {
		font-weight: 500;
		line-height: 200%;
		margin: 0;
		padding: 0;
		color: #000;
	}
	section#bot .features ul li::before {
		color: #004f72;
		content: "●";
		margin-right: 10px;
	}
	
	section#bot .summary {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 870px;
		background: #eff4f7;
		padding: 40px;
		margin: auto;
		margin-bottom: 60px;
	}
	section#bot .summary .text {
		
	}
	section#bot .summary .text p.title {
		font-size: 22px;
		font-weight: 500;
		line-height: 150%;
		letter-spacing: 0.1em;
		margin-bottom: 20px;
	}
	section#bot .summary .text p {
		font-size: 16px;
		font-weight: 400;
		line-height: 180%;
	}
	
	.operator {
		text-align: center;
		width: 480px;
		margin: auto;
		margin-bottom: 80px;
	}
	.operator p {
		color: #fff;
		background: #004f72;
		margin: auto;
		margin-bottom: 2px;
		padding: 10px;
		border-radius: 15px;
	}
	.operator img {
		margin: auto;
	}
	
	
	/* ASSISTANT
	----------------------------------------------------------------------------------------------*/
	
	#assistant {
	}
	#assistant h2 {
		width: 100%;
		color: #fff;
		background: #006824;
		font-size: 26px;
		font-weight: 400;
		text-align: center;
		padding: 20px 0;
	}
	#assistant .category-head {
		position: relative;
		padding: 50px 0;
		background: linear-gradient(to right,#c4d7c1,#fff 30%,#fff);
		overflow: hidden;
	}
	
	#assistant img.illust {
		position: absolute;
		top: -20px;
		right: -150px;
	}
	
	#assistant .content-inner .text {
		padding: 50px 0;
	}
	#assistant .content-inner .text p.title {
		font-size: 25px;
		font-weight: 500;
		line-height: 150%;
		margin-bottom: 20px;
	}
	#assistant .content-inner .text p {
		font-size: 18px;
		line-height: 180%;
	}
	
	#assistant .features {
		display: flex;
		align-items: center;
		margin: 80px auto;
		padding: 30px;
		width: 870px;
		border: 3px solid #006824;
		border-radius: 10px;
	}
	#assistant .features p.title {
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.3em;
		color: #006824;
		padding: 0 50px;
	}
	#assistant .features ul {
		font-size: 18px;
		font-weight: 500;
		margin: 0;
		padding: 0;
	}
	#assistant .features ul li {
		font-weight: 500;
		line-height: 200%;
		margin: 0;
		padding: 0;
		color: #000;
	}
	#assistant .features ul li::before {
		color: #006824;
		content: "●";
		margin-right: 10px;
	}
	
	#assistant .summary {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 870px;
		background: #f2f7f2;
		padding: 40px;
		margin: auto;
		margin-bottom: 60px;
	}
	#assistant .summary .text {
		margin-right: 60px;
	}
	#assistant .summary .text p.title {
		font-size: 22px;
		font-weight: 500;
		line-height: 150%;
		letter-spacing: 0.1em;
		margin-bottom: 20px;
	}
	#assistant .summary .text p {
		font-size: 16px;
		font-weight: 400;
		line-height: 180%;
	}
	#assistant .summary .text p.sup {
		font-size: 14px;
		font-weight: 500;
		line-height: 180%;
		text-align: center;
		color: #c07c00;
		background: #fff;
		border: 3px dotted #c07c00;
		margin-top: 30px;
		padding: 15px;
	}
	
	
	/* VOICE
	----------------------------------------------------------------------------------------------*/
	
	#voice {
	}
	#voice h2 {
		width: 100%;
		color: #fff;
		background: #b03d00;
		font-size: 26px;
		font-weight: 400;
		text-align: center;
		padding: 20px 0;
	}
	#voice .category-head {
		position: relative;
		padding: 50px 0;
		background: linear-gradient(to right,#f2dccc,#fff 30%,#fff);
		overflow: hidden;
	}
	
	#voice img.illust {
		position: absolute;
		top: 0;
		right: -120px;
	}
	
	#voice .content-inner .text {
		padding: 50px 0 0 0;
	}
	#voice .content-inner .text p.title {
		font-size: 25px;
		font-weight: 500;
		line-height: 150%;
		margin-bottom: 20px;
	}
	#voice .content-inner .text p {
		font-size: 18px;
		line-height: 180%;
	}
	#voice .content-inner img {
		margin-top: 40px;
	}
	
	#voice .features {
		display: flex;
		align-items: center;
		margin: 80px auto;
		padding: 30px;
		width: 870px;
		border: 3px solid #b03d00;
		border-radius: 10px;
	}
	#voice .features p.title {
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.3em;
		color: #b03d00;
		padding: 0 50px;
	}
	#voice .features ul {
		font-size: 18px;
		font-weight: 500;
		margin: 0;
		padding: 0;
	}
	#voice .features ul li {
		font-weight: 500;
		line-height: 200%;
		margin: 0;
		padding: 0;
		color: #000;
	}
	#voice .features ul li::before {
		color: #b03d00;
		content: "●";
		margin-right: 10px;
	}
	
	#voice .usecases {
		box-sizing: border-box;
		width: 100%;
		max-width: 960px;
		margin: auto;
		text-align: center;
		/*margin-bottom: 150px;*/
	}
	#voice .usecases img {
		margin: auto;
	}
	#voice .usecases p.title {
		font-size: 24px;
		font-weight: 500;
		color: #b03d00;
		margin-bottom: 30px;
	}
	#voice .usecases p {
		font-size: 18px;
		font-weight: 500;
		color: #000;
		margin-bottom: 50px;
	}
	
	#voice .usecases > ul {
		display: flex;
		justify-content: space-around;
	}
	#voice .usecases > ul li {
		width: 300px;
		padding: 20px;
		background: #f9efe7;
	}
	#voice .usecases ul ul {
		margin: 0;
		padding: 0;
	}
	#voice .usecases ul ul li {
		margin: 0;
		margin-bottom: 15px;
		padding: 0;
		padding-left: 1em;
		width: auto;
		text-align: left;
		text-indent: -1em;
		line-height: 140%;
	}
	#voice .usecases ul ul li::before {
		content: "●";
		color: #b03d00;
		font-size: 12px;
		vertical-align: 1px;
		margin-right: 5px;
	}
	#voice .usecases ul ul li:last-child {
		margin-bottom: 0;
	}
	
	
	/* KNOWLEDGE
	----------------------------------------------------------------------------------------------*/
	
	#knowledge {
	}
	#knowledge h2 {
		width: 100%;
		color: #fff;
		background: #c07c00;
		font-size: 26px;
		font-weight: 400;
		text-align: center;
		padding: 20px 0;
	}
	#knowledge .category-head {
		position: relative;
		padding: 50px 0;
		/*margin-bottom: 80px;*/
		background: linear-gradient(to right,#f1e0c5,#fff 30%,#fff);
		overflow: hidden;
	}
	
	#knowledge img.illust {
		position: absolute;
		top: 0;
		right: -60px;
	}
	
	#knowledge .content-inner .text {
		padding: 50px 0;
	}
	#knowledge .content-inner .text p.title {
		font-size: 25px;
		font-weight: 500;
		line-height: 150%;
		margin-bottom: 20px;
	}
	#knowledge .content-inner .text p {
		font-size: 18px;
		line-height: 180%;
	}
	
	#knowledge .features {
		display: flex;
		align-items: center;
		margin: 80px auto;
		padding: 30px;
		width: 870px;
		border: 3px solid #c07c00;
		border-radius: 10px;
	}
	#knowledge .features p.title {
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.3em;
		color: #c07c00;
		padding: 0 50px;
	}
	#knowledge .features ul {
		font-size: 18px;
		font-weight: 500;
		margin: 0;
		padding: 0;
	}
	#knowledge .features ul li {
		font-weight: 500;
		line-height: 200%;
		margin: 0;
		padding: 0;
		color: #000;
	}
	#knowledge .features ul li::before {
		color: #c07c00;
		content: "●";
		margin-right: 10px;
	}
	
	#knowledge .cycle {
		width: 100%;
		max-width: 960px;
		margin: auto;
		/*margin-bottom: 150px;*/
		padding: 0;
		text-align: center;
	}
	#knowledge .cycle p.title {
		font-size: 24px;
		font-weight: 500;
		color: #c07c00;
		margin-bottom: 30px;
	}
	#knowledge .cycle p {
		font-size: 18px;
		font-weight: 500;
		color: #000;
		margin-bottom: 50px;
	}
	#knowledge .cycle img {
		width: 100%;
		width: 960px;
		margin: 0 auto;
		padding: 0;
	}
	
	
	/* OPTION
	----------------------------------------------------------------------------------------------*/
	
	#option {
		text-align: center;
		/*margin-bottom: 100px;*/
	}
	#option h2 {
		display: block;
		width: 100%;
		color: #003b54;
		font-size: 26px;
		font-weight: 500;
		padding: 20px 0;
	}
	#option h2::after {
		background-color: #003b54;
		border-radius: 5px;
		content: "";
		display: block;
		height: 5px;
		width: 50px;
		margin: auto;
		margin-top: 40px;
		margin-bottom: 10px;
	}
	#option p {
		font-size: 18px;
		font-weight: 500;
		line-height: 200%;
		margin-bottom: 60px;
	}
	#option .option-area {
		width: 100%;
		background: #e8ecee;
		padding: 50px 0;
	}
	#option .option-area .content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#option .option-area .content p.title {
		color: #003b54;
		font-size: 21px;
		font-weight: 500;
		text-align: center;
		line-height: 100%;
		margin: 30px 0;
		padding: 0;
	}
	#option .option-area .content p {
		font-size: 15px;
		font-weight: 400;
		text-align: left;
		line-height: 150%;
		margin: 0;
		padding: 0;
	}
	#option .option-area .content .dashboard {
		width: 465px;
		border-radius: 4px;
		background: #fff;
		padding: 30px;
	}
	#option .option-area .content .dashboard ul {
		text-align: left;
		font-size: 13px;
		line-height: 160%;
		margin: 0;
		margin-top: 10px;
		padding: 0;
	}
	#option .option-area .content .tuning {
		width: 465px;
		border-radius: 4px;
		background: #fff;
		padding: 30px;
	}
	#option .option-area .content .questionnaire {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		width: 100%;
		border-radius: 4px;
		background: #fff;
		padding: 30px;
		margin-top: 40px;
	}
	#option .option-area .content .questionnaire .text {
		width: 250px;
	}
	#option .option-area .content .questionnaire .text p.title {
		margin-top: 0;
		margin-bottom: 20px;
	}
	#option .option-area .content .questionnaire .text p {
		line-height: 160%;
	}
	#option .option-area .content .questionnaire img {
		width: 70%;
	}
	
	
	/* FLOW
	----------------------------------------------------------------------------------------------*/
	
	#flow {
		text-align: center;
		/*margin-bottom: 100px;*/
	}
	#flow h2 {
		display: block;
		width: 100%;
		color: #003b54;
		font-size: 26px;
		font-weight: 500;
		padding: 0 0 20px 0;
		margin: 0;
	}
	#flow h2::after {
		background-color: #003b54;
		border-radius: 5px;
		content: "";
		display: block;
		height: 5px;
		width: 50px;
		margin: auto;
		margin-top: 40px;
		margin-bottom: 10px;
	}
	#flow p {
		font-size: 18px;
		font-weight: 500;
		line-height: 200%;
		margin-bottom: 60px;
	}
	
	#flow ul.step {
		display: flex;
		justify-content: space-between;
		width: 940px;
		margin: auto;
	}
	#flow ul.step p.num {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 17px;
		line-height: 100%;
		letter-spacing: 0.1em;
		margin: 0 auto;
		padding: 5px 0 7px 0;
		width: 185px;
		color: #fff;
		background: #04374f;
		border-radius: 15px;
	}
	#flow ul.step p.title {
		font-size: 23px;
		font-weight: 500;
		line-height: 140%;
		color: #04374f;
		margin: 20px 0;;
		padding: 0;
	}
	#flow ul.step p {
		margin: 0;
		padding: 0;
	}
	#flow ul.step li {
		position: relative;
		width: 280px;
		padding: 20px;
		border: 3px solid #04374f;
		border-radius: 5px;
	}
	#flow ul.step > li::after {
		content: url("/bs/brainrobi/images/img-triangle.webp");
		position: absolute;
		top: 50%;
		right: -55px;
		transform: translate(-50%, -50%);
	}
	#flow ul.step > li:last-child::after {
		content: none;
	}
	#flow ul.step li ul li {
		width: 85%;
		margin: 0;
		margin-left: 2em;
		margin-bottom: 15px;
		padding: 0;
		border: none;
		text-align: left;
		line-height: 150%;
		font-size: 14px;
	}
	#flow ul.step li ul li::before {
		content: url("/bs/brainrobi/images/img-check.webp");
		margin-right: 8px;
		margin-left: -2em;
	}
	#flow ul.step li ul li:last-child {
		margin-bottom: 0px;
	}
	
	
	/* CASE
	----------------------------------------------------------------------------------------------*/
	
	#case {
		text-align: center;
		margin-bottom: 100px;
	}
	#case h2 {
		display: block;
		width: 100%;
		color: #003b54;
		font-size: 26px;
		font-weight: 500;
		padding: 0 0 20px 0;
		margin: 0;
	}
	#case h2::after {
		background-color: #003b54;
		border-radius: 5px;
		content: "";
		display: block;
		height: 5px;
		width: 50px;
		margin: auto;
		margin-top: 40px;
		margin-bottom: 10px;
	}
	
	#case ul {
		display: flex;
		flex-flow: wrap;
		/*justify-content: space-between;*/
		justify-content: center;
		width: 600px;
		margin: auto;
	}
	#case ul li {
		width: 300px;
		padding: 20px;
	}
	
	#case ul li p {
		line-height: 140%;
		font-size: 14px;
		text-align: left;
		vertical-align: middle;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		height: 4em;
		max-height: 4em;
		-webkit-line-clamp: 3;
	}
	#case ul li p.title {
		color: #003b54;
		font-weight: 500;
		/*padding: 15px 0;*/
		padding: 20px 0;
		margin: 0;
		height: auto;
		font-size: 15px;
		line-height: 130%;
		text-align: center;
		/*display: table-cell;
		height: 60px;*/
		width: 100%;
	}
	#case ul li .btn {
		margin-top: 20px;
		font-size: 14px;
		font-weight: 500;
		line-height: 100%;
		text-align: center;
	}
	#case ul li .btn a {
		display: block;
		color: #003b54;
		padding: 15px;
		background: #fff;
		border: 2px solid #003b54;
		border-radius: 10px;
		font-weight: 600;
		transition: 0.2s;
	}
	#case ul li .btn a:hover {
		color: #fff;
		background: #003b54;
		font-weight: 500;
		transition: 0.2s;
	}
	#case ul li .btn.file {
		margin-top: 10px;
	}
	#case ul li .btn.file a {
		color: #543b00;
		background: #fff;
		border: 2px solid #543b00;
		transition: 0.2s;
	}
	#case ul li .btn.file a:hover {
		color: #fff;
		background: #543b00;
		font-weight: 500;
		transition: 0.2s;
	}
	
	
	/* INQUIRY
	----------------------------------------------------------------------------------------------*/
	
	.inquiry {
		text-align: center;
		padding: 0;
	}
	.inquiry ul.btn li a {
		display: block;
		text-align: center;
		font-size: 22px;
		font-weight: 600;
		color: #04374f;
		background: #fff;
		width: 400px;
		margin: 0 auto;
		padding: 30px;
		border: 3px solid #04374f;
		border-radius: 20px;
		transition: 0.2s;
	}
	.inquiry ul.btn li a:hover {
		color: #fff;
		background: #04374f;
		transition: 0.2s;
	}
	
	
	/* OUTRO
	----------------------------------------------------------------------------------------------*/
	
	#outro {
		padding: 100px 0;
	}
	#outro img {
		margin: auto;
	}
	
	.aboutBrainrobi {
		flex-direction: row-reverse;
	}
}

.innerItem {
	max-width: 960px;
	margin-inline: auto;
	font-size: calc(18/16*1rem);
	line-height: 1.6;
}

section#bot h4::before {
	content: "■";
}
#bot h4 {
	
}
#generativeAI h4,
#scenario h4 {
	border-bottom: none;
	color: #004F72;
	font-weight: 700;
	font-size: calc(24/16*1rem);
}
#generativeAI h4 span,
#scenario h4 span {
	display: inline;
	border-left: none;
	font-size: calc(20/16*1rem);
}
.genai,
.scenario {
	display: flex;
	flex-direction: column;
}
.scenario {
	margin-left: 2em;
}

.fluid {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
}
.fluid > *:not(img) {
	max-width: 1200px;
	margin-inline: auto;
}
.breadcrumb {
	display: none;
}
.fontBold {
	font-weight: 700;
}
.fontSize14 {
	font-size: calc(14/16*1rem);
}
.fontSize16 {
	font-size: 1rem;
}
.fontSize24 {
	font-size: calc(24/16*1rem);
}
.fontSize30 {
	font-size: calc(30/16*1rem);
}
a.aInitial {
	color: #0000EE;
	text-decoration: underline;
}
a.aInitial:visited {
	color: #551A8B;
}
a.aInitial:hover {
	text-decoration: none;
}

@media (960px < width) {
	main > nav:has(.breadcrumb) {
		background-color: #ccccd6;
	}
	ol.breadcrumb {
		display: flex;
		margin-block: 0px;
		padding-block: 8px;
		font-size: calc(14/16*1rem);
		font-weight: 400;
	}
	.breadcrumb li::after {
		padding: 0 10px;
		font-family: "Font Awesome 5 Free";
		content: "\f105";
		font-weight: 900;
	}
	.breadcrumb li:last-child::after {
		padding: 0;
		font-family: "Font Awesome 5 Free";
		content: "";
		font-weight: 900;
	}
	.breadcrumb li:first-child::before {
		font-family: "Font Awesome 5 Free";
		content: "\f015";
		font-weight: 900;
		margin-right: 5px;
	}
	.breadcrumb li a {
		border-bottom: 1px solid transparent;
		transition: 0.2s;
	}
	.breadcrumb li a:is(:hover, :focus) {
		border-bottom: 1px solid;
		transition: 0.2s;
	}
	.genai {
		flex-direction: row-reverse
	}
	.scenario {
		flex-direction: row;
	}
}

@media print {
	.breadcrumb {
		width: 100% !important;
		margin-inline: 0;
		padding-inline: 0;
	}
	.breadcrumb {
		padding-inline: 20px;
	}
}