@charset "utf-8";

.no-view { display: none; }
.sp-view { display: none; }
.pc-view { display: block; }

/* link button  */
.cg-btn a { white-space: normal; }

/* text color  */
.txt-ai { color: #00b7cc; }
.txt-ai-g { color: #00a4cc; }

/* color pallet */
.bgc-ai { background-color: #00b7cc; }

h2, h3, h4 { color: #000; line-height: 1.5; }
h2 > p, h3 > p { font-size: 75%!important; font-weight: normal!important; margin-bottom: 0px!important; opacity: 0.8; }
.txt60p { font-size: 60%; }
.txt80p { font-size: 80%; }
.txt240p { font-size: 240%; font-family: "FP-ヒラギノUD角ゴ StdN W3", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Yu Gothic UI", sans-serif; }
.line-height08{ line-height: 0.8; }
.ttl-bar { display: inline-block; position: relative; padding-bottom: 16px; }
.ttl-bar::before{
	content:'';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 6px;
	*background: #c00;
	background: linear-gradient(90deg, #00ccff71 0%, #009fc771 20%, #66007a71 100%);
}

.ttl-bar > span { font-weight: normal; }

hr.bar-ai { margin: 50px auto; height: 0.1em; width: 50%; background: linear-gradient(90deg, #00ccff71 0%, #009fc771 20%, #66007a71 100%); }
@media (max-width: 767px) {
	hr.bar-ai { margin: 30px auto; width: 75%; }
}

.bg-contact { background-image: linear-gradient(90deg, #00ccff21 0%, #009fc721 20%, #66007a21 100%); }

.bg-arrow-gf3 { padding-top: 64px; background:url("../img/bg-arrow-gf3.png") no-repeat 50% 0%; background-size: 128px auto; background-color: #fff; }

/* =====================
  main text align
===================== */
.txt-align-change { text-align: center; }
@media (max-width: 767px) {
	.txt-align-change { text-align: left; }
}

/* =====================
  list
===================== */
.check-box { width: 100%; background-color: #efefef; border-radius: 6px; }
ul.check-list { width: 62%; list-style: none; margin: 0 auto; padding: 30px; background:url(../img/img-task.png) no-repeat 100% 100%; background-size: auto 160px; }
ul.check-list li { padding: 8px 120px 16px 48px; position: relative; }
ul.check-list li::before { content: ""; display: block; position: absolute; top: 5px; left: 0; width: 32px; height: 32px; background: url(../img/ico-check.png) no-repeat center center; background-size: 32px; }

@media (max-width: 1024px) {
	ul.check-list { width: 72%; }
}
@media (max-width: 767px) {
	ul.check-list { width: 90%; }
}
@media (max-width: 600px) {
	ul.check-list { width: 100%; padding: 20px; background:url(../img/img-task.png) no-repeat 50% 100%; background-size: auto 160px; }
	ul.check-list li { padding: 8px 0px 16px 48px; position: relative; }
	ul.check-list li:last-child { margin-bottom: 140px; }
	ul.check-list li::before { content: ""; display: block; position: absolute; top: 5px; left: 0; width: 32px; height: 32px; background: url(../img/ico-check.png) no-repeat center center; background-size: 32px; }
}

/* =====================
  index key visual
===================== */
#index-keyvisual{ position: relative; min-height: 400px; background:url(../img/index-key-visualp.jpg) no-repeat 50% 50%; background-size: cover; background-color: #f6f6f6; }
/*#index-keyvisual:before {
  content:"";
  display: block;
  padding-top:43%; //画像横÷縦の％
}:*/

#index-keyvisual .txt-key-box { position: absolute; margin: 0 auto; padding: 20px 0px; width: 100%; top: 18%; text-align: center; }
#index-keyvisual img { margin: 0 auto; width: 70%; }

@media (min-width: 1366px) {
	#index-keyvisual{ min-height:480px; background:url(../img/index-key-visualp.jpg) no-repeat 100% 35%; background-size: 100% auto; background-color: #f6f6f6; }
}
@media (min-width: 1600px) {
	#index-keyvisual{ min-height:480px; background:url(../img/index-key-visualp.jpg) no-repeat 100% 40%; background-size: 92% auto; background-color: #f6f6f6; }
	#index-keyvisual img { width: 80%; }
}
@media (min-width: 1920px) {
	#index-keyvisual{ min-height:480px; background:url(../img/index-key-visualp.jpg) no-repeat 100% 45%; background-size: 80% auto; background-color: #f6f6f6; }
}
@media (max-width: 1023px) {
	#index-keyvisual img { width: 88%; }
}
/* SP */
@media (max-width: 767px) {
	#index-keyvisual{ min-height:324px; background:url(../img/index-key-visuals.jpg) no-repeat 50% 40%; background-size: 100% auto; }
	#index-keyvisual .txt-key-box { top: 30%; }
	#index-keyvisual img { margin: 0 auto; width: 95%; }
}
@media (max-width: 480px) {
	#index-keyvisual{ background:url(../img/index-key-visuals.jpg) no-repeat 50% 30%; background-size: 100% auto; }
	#index-keyvisual .txt-key-box { padding: 0px; top: 12%; }
	#index-keyvisual img.pc-view { display: none; }
	#index-keyvisual img.sp-view { display: block; margin: 0 auto; width: 90%; }
}

/* =====================
  image
===================== */
.img-support { width: 100%; margin: 0 auto; }
@media (max-width: 767px) {
	.img-support { width: 90%; }
}
@media (max-width: 480px) {
	.img-support.pc-view { display: none; }
	.img-support.sp-view { display: block; }
}


/* =====================
  solution list
===================== */
.solution-box { background:url("../img/bg-solution.png") no-repeat 0% 50%; background-size: 45% auto; background-color: #f3f3f3; }
@media (max-width: 1280px) {
	.solution-box { background:url("../img/bg-solution.png") no-repeat 0% 0%; background-size: 60% auto; background-color: #f3f3f3; }
}
@media (max-width: 767px) {
	.solution-box { background:url("../img/bg-solution.png") no-repeat 0% 0%; background-size: 80% auto; background-color: #f3f3f3; }
}

#link-s01 { background: url(../img/ico-m01.png) no-repeat left 4px; background-size: 64px; background-color: #f3f3f3; }
#link-s02 { background: url(../img/ico-m02.png) no-repeat left 4px; background-size: 64px; background-color: #f3f3f3; }
#link-s03 { background: url(../img/ico-m03.png) no-repeat left 4px; background-size: 64px; background-color: #f3f3f3; }
#link-s04 { background: url(../img/ico-m04.png) no-repeat left 4px; background-size: 64px; background-color: #f3f3f3; }
#link-s05 { background: url(../img/ico-m05.png) no-repeat left 4px; background-size: 64px; background-color: #f3f3f3; }
.solution-list { border-radius: 6px; cursor: pointer; }
.solution-list:not(first-child) { margin-top: 30px; }
.solution-list dt { position: relative; margin: 0px; cursor: pointer; height: 72px; }
.solution-list dt h4 { padding: 8px 56px 8px 72px; line-height: 1.2; }
.solution-list dt p { padding: 0px 56px 16px 16px; }
.solution-list dd { display: none; position: relative; padding: 1px; padding-bottom: 32px; }

.solution-list-opener { display: block; position: absolute; top: 50%; margin-top: -16px; right: 16px; width: 32px; height: 32px; contents: " "; background: url(../img/ico-open.png) no-repeat center center; background-size: 24px; cursor: pointer; }
.solution-list-opener.active { background-image: url(../img/ico-close.png); }
.solution-list ul { list-style: none; padding: 0 !important; margin: 0 !important; }
.solution-list ul li { padding: 0px 0px 0px 40px; position: relative; }
.solution-list ul li::before { content: ""; display: block; position: absolute; top: -4px; left: 0; width: 32px; height: 32px; background: url(../img/ico-check.png) no-repeat center center; background-size: 32px; }
.solution-list ul li h3 { padding: 0; line-height: 1.2; }
.solution-list ul li small { font-weight: normal; }

.solution-list .rcmnd { background-color: #00b7cc; border-radius: 14px; color: #fff; font-size: 55%; padding: 4px 6px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }

.solution-main-box { background-color: #fff; padding: 24px 32px; display: inline-block; }
.solution-main-box p { font-size: 90%; }
.solution-main-box img { width: 100%; padding-left: 24px; margin: 0 auto; }
.solution-img-box { display: table; }
.solution-img-box-w100 img { width: 100%; padding: 24px 32px 16px 32px; margin: 0 auto; }

@media (max-width: 1023px) {
	.solution-main-box img { padding-left: 16px; }
	.solution-img-box-w100 img { width: 100%; padding: 24px 8px 16px 8px; }
}
@media (max-width: 767px) {
	.solution-main-box img, .solution-img-box-w100 img { padding: 16px; }
	.solution-img-box-w100 img.pc-view { display: none; }
	.solution-img-box-w100 img.sp-view { display: block; }
}
@media (min-width: 481px) and (max-width: 767px) {
	.solution-main-box img { width: 70%; }
}
@media (max-width: 480px) {
	#link-s01 { background: url(../img/ico-m01.png) no-repeat 0px 12px; background-size: 48px; background-color: #f3f3f3; }
	#link-s02 { background: url(../img/ico-m02.png) no-repeat 0px 12px; background-size: 48px; background-color: #f3f3f3; }
	#link-s03 { background: url(../img/ico-m03.png) no-repeat 0px 12px; background-size: 48px; background-color: #f3f3f3; }
	#link-s04 { background: url(../img/ico-m04.png) no-repeat 0px 12px; background-size: 48px; background-color: #f3f3f3; }
	#link-s05 { background: url(../img/ico-m05.png) no-repeat 0px 12px; background-size: 48px; background-color: #f3f3f3; }
	.solution-list dt ol li span { position: absolute; left: 56px; margin: 0; }
	.solution-list dt h4 { padding: 8px 40px 8px 64px; }
    .solution-list-opener { right: 8px; background-size: 16px; }
	.solution-main-box { padding: 16px; }
	.solution-main-box p { font-size: 95%; }
	.solution-main-box img { padding: 16px 0px; }
}

/* =====================
  example
===================== */
.example-box { background:url("../img/bg-example.png") no-repeat 102% -20px; background-size: 45% auto; background-color: #f3f3f3; }
@media (max-width: 1280px) {
	.example-box { background:url("../img/bg-example.png") no-repeat 102% -20px; background-size: 60% auto; background-color: #f3f3f3; }
}
@media (max-width: 767px) {
	.example-box { background:url("../img/bg-example.png") no-repeat 102% -20px; background-size: 88% auto; background-color: #f3f3f3; }
}

/* =====================
  btn-contact
===================== */
.btn-contact { min-width: 360px; padding: 24px 16px; font-size: 20px; font-weight: bold; color: #fff; background-color: #00b7cc; border: 1px solid #00b7cc; border-radius: 8px; }
.btn-contact span { padding-left: 32px; background: url("../img/ico-mail.png") no-repeat 0% 50%;  background-size: 24px auto; }
.btn-contact:hover { opacity: 0.6; }
@media (max-width: 480px) {
    .btn-contact { min-width: 290px; }
}