@charset "UTF-8";
/* サービスページLP用に改変: 20230831 */
section {
    padding: 2em 0;
}
div.inner {
    width: 80%;
}
/* ヘッダー */
header {
	background: #fff;
}
header > div.inner {
	width: 100%;
	max-width: unset;
	border-radius: unset;
}
div.inner nav {
    width: 100%;
}
ul.lp-menu {
    display: flex;
	width: 100%;
    margin: auto;
    align-items: center;
    justify-content: center;
}
ul.lp-menu li {
    font-size: clamp(0.5em, 1vw, Calc(100vw / 82));
    font-weight: bold;
    padding: clamp(5px, 1vw, 10px);
    white-space: nowrap;
}
ul.lp-menu li:after {
    content: "|";
    color: #a6a6a6;
    padding-left: clamp(5px, 1vw, 10px);
}
ul.lp-menu li:last-child {
    background-color: #f8b500;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    margin-left: 10px;
    padding: 5px 10px;
    border-radius: 5px;
}
ul.lp-menu li:last-child:after, ul.lp-menu li:nth-last-child(2):after {
    content: "";
	padding: 0;
}
ul.lp-menu li:last-child:hover {
    background-color: #00a6c2;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
ul.lp-menu li:last-child a:hover {
	color: #fff;
}
#main-menu > li:last-child:hover > a:before {
    background: none;
}
@media(max-width:599px) {
    header {
        display: none;
    }
}
/* 電話ポップアップ用 */
/* PC */
.open {
    cursor: pointer;
}
#pop_up ,#pop_up_1 ,#pop_up_2 {
    display: none;
}
.overlay {
    display: none;
}
#pop_up:checked + .overlay {
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
}
#pop_up_1:checked + .overlay {
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
}
#pop_up_2:checked + .overlay {
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
}
.window {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90vw;
    max-width: 500px;
    padding: 20px;
    height: fit-content;
    background-color: #fff;
    border-radius: 4px;
    align-items: center;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    color: #000;
    justify-content: center;
	font-weight: normal;
}
.window h3 {
	width: 100%;
}
.window a {
    color: #000!important;
    font-size: 2em;
}
.window ul {
    margin-top: 2em;
    text-align: left;
    display: inline-block;
}
.window ul li {
    font-size: unset;
    list-style: none;
}
.window ul li::before {
    content: "※";
}
label.open {
	font-size: larger;
}
.close {
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
}
/* SP */
.open_sp {
    cursor: pointer;
}
#pop_up_sp ,#pop_up_sp_1 ,#pop_up_sp_2 {
    display: none;
}
.overlay_sp {
    display: none;
}
#pop_up_sp:checked + .overlay_sp {
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
}
#pop_up_sp_1:checked + .overlay_sp {
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
}
#pop_up_sp_2:checked + .overlay_sp {
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
}
.window_sp {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90vw;
    max-width: 360px;
    padding: 20px;
    height: 300px;
    background-color: #fff;
    border-radius: 4px;
    align-items: center;
    transform: translate(-50%, -50%);
    color: #000;
}
@media(max-width:959px) and (min-width:600px) {
	.window_sp {
		white-space: normal;
	}
	.window_sp ul li {
		font-size: unset!important;
	}
}
.window_sp ul {
    margin-top: 1.5em;
    text-align: left;
    display: inline-block;
}
.window_sp ul li {
    font-size: medium;
    list-style: none;
}
.window_sp ul li::before {
    content: "※";
}
.close_sp {
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
}
/* イントロ */
section#intro {
    padding: 0;
}
div.header_img, div.header_img_sp {
    height: 100vh;
}
div.header_img {
    width: 100%;
    margin: auto;
    background: linear-gradient(45deg, #59e2a7, #01878a);
    position: relative;
}
.header_cta {
    display: flex;
}
.header_cta div.left {
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    background-color: #f8b500;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    vertical-align: middle;
}
.header_cta div.left:hover {
	background-color: #ffffff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.header_cta div.left:hover a {
	color: #00a6c2;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.header_cta div.right {
    padding: 10px;
    margin: 10px;
    color: #fff;
    vertical-align: middle;
}
h1.lp_title {
    font-size: 2em;
    padding: 1em;
}
@media (min-width:960px) {
    div.header_img {
        height: 80vh;
    }
    div.header_img div.sp_images {
        display: none;
    }
    div.header_img div.pc_images {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        margin: auto;
    }
    div.header_img div.pc_images > div {
        width: 50%;
		height: 100%;
        flex: 0 1 auto;
        margin: auto;
    }
    div.header_img div.pc_images > div h1 {
        width: 100%;
		height: 100%;
        flex: 0 1 auto;
        margin: auto;
    }
    div.header_img div.pc_images div img {
        height: calc(100% - 2em);
        object-fit: contain;
    }
	.image_right img {
		height: calc(100% - 7em)!important;
	}
    div.header_img_sp, div.cta_sp, div.demo_sp {
        display: none;
    }
	.header_cta {
	    font-size: clamp(0.7em, 1vw, 1.5em);
		font-weight: bold;
		justify-content: center;
	}
}
@media(max-width:959px) and (min-width:600px) {
    div.header_img {
        height: 50vh;
    }
    div.header_img div.sp_images {
        display: none;
    }
    div.header_img div.pc_images {
        display: flex;
        align-items: center;
		justify-content: center;
        height: 90%;
        width: 100%;
        margin: auto;
    }
	.pc_images > div {
		height: 100%;
		width: 50%;
    	padding: 1em;
	}
	.pc_images > div h1{
		height: 100%;
		width: 100%;
	}
    div.header_img div.pc_images div img {
        max-width: 100%;
		height: 100%;
		width: auto;
		object-fit: contain;
    }
    div.header_img_sp, div.header_cta {
        display: none;
    }
	div.cta_sp {
		float: left;
		width: 50%;
		top: -1em;
		position: relative;
	}
	a.cta_banner {
		display: block;
		background: #f8b500;
		padding: 0.5em;
		border-radius: 10px;
		width: fit-content;
		margin: auto;
		color: #fff;
		position: relative;
    	z-index: 100;
	}
	.demo_sp {
		top: -1em;
		position: relative;
		padding: 0.5em;
	}
	a.cta_banner div, div.demo_sp {
		font-weight: bold;
		white-space: nowrap;
	}
}
@media (max-width:599px) {
    section#intro {
        padding: 0 0 1em 0;
    }
    div.header_img {
        height: 100vh;
    }
    div.header_img div.pc_images, div.header_img div.header_cta {
        display: none;
    }
    div.header_img div.sp_images {
        display: block;
        padding: 1em;
        height: 100vh;
    }
    div.header_img div.sp_images div {
        height: 15vh;
    }
    div.header_img div.sp_images div:first-child {
        height: 40vh;
    }
    div.header_img div.sp_images div:last-child {
        height: 30vh;
		margin-top: 10%;
    }
    div.header_img div.sp_images div h1 {
        height: 100%;
    }
    div.header_img div.sp_images div img {
        max-height: 100%;
        width: auto;
    }
    .cta_sp {
        position: fixed;
        bottom: -10px;
        width: 100%;
        background-color: #f8b500;
        border-radius: 10px;
		z-index: 10000;
    }
    a.cta_banner {
        font-weight: bold;
        padding: 1em;
        display: block;
    }
    div.header_img div.demo_sp {
        display: block;
        padding: 1em;
        margin: 1em;
        font-size: larger;
        background-color: #f8b500;
        border-radius: 10px;
    }
    h1.lp_title {
        position: relative;
        top: 2.5em;
    }
}
/* 高い継続率の理由 */
ul.effectList {
    margin: auto;
    width: 100%;
}
@media(min-width:960px) {
    ul.effectList li {
        display: flex;
        margin: auto;
        width: 80%;
    }
    ul.effectList li.sp {
        display: none;
    }
    ul.effectList li div {
        display: table-cell;
        padding: 2em 1em;
    }
    ul.effectList li div.effectImg {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    ul.effectList li div.effectImg img {
        width: 80%;
        height: auto;
    }
    ul.effectList li div.effectBox {
        width: 50%;
        text-align: left;
    }
}
@media(max-width:959px) {
	section#service_lp_reason{
		top: 3em;
    	position: relative;
	}
    ul.effectList li {
        display: block;
        margin: auto
    }
    ul.effectList li.pc {
        display: none;
        margin: auto
    }
    ul.effectList li.sp {
        display: block;
        margin: auto
    }
}
/* CTA */
@media(min-width:960px) {
    div.service_lp_cta {
        padding: 1.5em;
        display: table;
        margin: auto;
        width: 100%;
		font-size: clamp(0.7em, 1vw, 1.5em);
		justify-content: center;
    }
    div.service_lp_cta_sp {
        display: none;
    }
    div.service_lp_cta div.left, div.service_lp_cta div.right {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
		padding: 0.5em;
    }
    div.service_lp_cta div.left a.cta_banner div {
        background: #f8b500;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
        padding: 1em;
        border-radius: 10px;
        width: fit-content;
        margin: auto;
        font-size: larger;
        font-weight: bold;
		white-space: nowrap;
    }
    div.service_lp_cta div.left a.cta_banner div:hover {
        background: #00a6c2;
		color: #fff;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	div.service_lp_cta div.right label.open {
        font-size: 24px;
    }
    div.demo_notice {
        padding-top: 1em;
        margin: auto;
    }
    div.demo_notice ul {
        text-align: left;
        display: inline-block;
    }
    div.demo_notice ul li {
        font-size: medium;
        list-style: none;
    }
    div.demo_notice ul li::before {
        content: "※";
    }
}
@media(max-width:959px) and (min-width:600px) {
    div.service_lp_cta {
        display: none;
    }
    div.service_lp_cta_sp {
        display: block;
        padding: 1.5em;
        margin: auto;
        width: 100%;
    }
    div.service_lp_cta_sp div.left, .service_lp_cta_sp div.right {
        display: block;
        padding: 1em;
    }
    div.service_lp_cta_sp div.left {
        padding: 1em;
    }
    div.service_lp_cta_sp div.left a.cta_banner div {
        background: #f8b500;
        padding: 1em;
        border-radius: 10px;
        width: fit-content;
        margin: auto;
        font-weight: bold;
        color: #fff;
    }
}
@media(max-width:599px) {
    div.inner {
        width: 100%;
    }
    .service_lp_cta {
        display: none;
    }
    div.service_lp_cta_sp {
        display: block;
        margin: auto;
        width: 100%;
    }
    div.service_lp_cta_sp > div.right {
        display: block;
        padding: 1em;
        background-color: #22a4ab;
        color: #fff;
        border-radius: 10px;
    }
    div.service_lp_cta_sp div.left {
        display: none;
    }
    div.service_lp_cta_sp div.left a.cta_banner div {
        background: #f8b500;
        padding: 1em;
        border-radius: 10px;
        width: fit-content;
        margin: auto;
        font-weight: bold;
        color: #fff;
    }
}
/* 機能紹介 */
ul.functions_list li div.functions_text h3 {
    display: block;
    height: 2em;
	text-align: center;
}
@media (min-width:960px) {
    ul.functions_list {
        display: table;
    }
    ul.functions_list li {
        display: table-cell;
        width: 25%;
        padding: 0 1em;
		text-align: left;
    }
}
@media (max-width:959px) and (min-width:600px) {
    ul.functions_list {
        display: flex;
        flex-wrap: wrap;
		justify-content: center;
    }
    ul.functions_list li {
        margin: 10px;
        width: Calc(50% - 40px);
    }
    ul.functions_list li div.functions_text p {
		text-align: left;
	}
}
@media(max-width:599px) {
    ul.functions_list {
        display: flex;
        flex-wrap: wrap;
    }
    ul.functions_list li {
        margin: 5px;
        width: 100%;
    }
}
/* 申し込みの流れ */
ul.flow_list li.pc div.flow_icon {
    color: #fff;
    background: linear-gradient(45deg, #59e2a7, #01878a);
    border-radius: 10px;
    text-align: center;
    vertical-align: middle;
}
div.flow_icon p {
    display: inline;
}
div.flow_text {
    background-color: #f8f8f8;
    border-radius: 10px;
}
@media(min-width:960px) {
    ul.flow_list li.pc {
        display: table;
        padding-bottom: 1em;
        border-spacing: 1em 0;
    }
    ul.flow_list li.sp {
        display: none;
    }
    ul.flow_list li.pc div {
        display: table-cell;
        vertical-align: top;
        text-align: left;
        padding: 0.5em 1em;
    }
    ul.flow_list li.pc div.flow_icon {
        width: 25%;
    }
    ul.flow_list li.pc div.flow_icon p {
        font-weight: bold;
    }
    ul.flow_list li.pc div.flow_text h3 {
        margin: 0;
    }
}
@media(max-width:959px) {
    ul.flow_list li.sp {
        display: table;
    }
    ul.flow_list li.sp div.flow_text {
        padding: 1em;
        text-align: left;
    }
    ul.flow_list li.sp div.flow_text h3 {
        padding-bottom: 0;
    }
    ul.flow_list li.sp div.flow_text h3 span {
        padding-right: 1em;
    }
    ul.flow_list li.sp::after {
        content: "▼";
        font-size: 2em;
        line-height: 2em;
        background: linear-gradient(45deg, #59e2a7, #01878a);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
    ul.flow_list li.sp:last-child::after {
        content: "";
    }
    ul.flow_list li.pc {
        display: none;
    }
}

/* 代表電話受付自動化イメージ */
section#service_lp_explanation_image .inner picture img {
    width: 100%;
    height: auto;
}

/* 料金プラン */
h3.lp_title_gradient {
    color: #fff;
    background: linear-gradient(45deg, #59e2a7, #01878a);
    padding: 1em;
    border-radius: 10px;
}
span.price {
    font-size: 2em;
    font-weight: bold;
}
div.price_area {
    padding: 1em;
    background-color: #f8f8f8;
    border-radius: 10px;
}
div.price_area ul {
    text-align: left;
    padding: 1em;
}
div.price_area ul li::before {
    content: "◆";
    padding-right: 1em;
}
/* 関連コラム */
@media(min-width:960px) {
    div.lp_column {
        display: flex;
        margin: auto;
    }
    div.lp_column div {
        width: 50%;
        padding: 0 1em;
    }
	div.lp_column div.image {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
    div.lp_column div.text {
        text-align: left;
    }
}
@media(max-width:959px) {
    div.lp_column {
        display: block;
        width: 100%;
        margin: auto;
    }
    div.lp_column div {
        width: 100%;
        padding: 1em 0;
    }
    div.lp_column div.text {
        text-align: left;
    }
}
/* 事例紹介 */
#casestudy {
    background:
        url('../img/index-post/case-stydy-bg.png') no-repeat top 121px center, url(../img/index-post/casestudy-bg.png) repeat-x top left;
    border-bottom: none;
}
#casestudy .listCase {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
}
#casestudy .listCase a {
    display: block;
    padding: 30px;
}
#casestudy .listCase .logocase {
    text-align: center;
    margin-bottom: 20px;
}
#casestudy .listCase .logocase img {
    display: inline-block;
    object-fit: cover;
    width: 100%;
}
#casestudy .listCase .info {
    margin-bottom: 8px;
	text-align: left;
}
#casestudy .listCase .info:nth-child(3) {
    margin-bottom: 12px;
}
#casestudy .listCase .info .label {
    font-size: 15px;
}
#casestudy .listCase .info .textInfo {
    font-size: 16px;
    font-weight: 600;
}
#casestudy .listCase .info .textInfo b {
    color: #00a6c2;
    display: block;
    margin-top: 6px;
    position: relative;
}
#casestudy .listCase .info .textInfo b:nth-child(1) {
    top: 1px;
}
a.btn.type01 {
	font-size: 1em!important;
}
@media(min-width: 960px) {
    #casestudy .listCase > li {
        background: #fff;
        width: 30%;
        position: relative;
        margin: 2.5%
    }
    #casestudy .listCase > li:after {
        content: "";
        width: 100%;
        height: 1px;
        display: block;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: bottom;
        position: absolute;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to right, #c5c5c5, #c5c5c5);
    }
    #casestudy .hoverLine:before {
        height: 1px;
        bottom: 0;
    }
    #casestudy .listCase > li a {
        position: relative;
        height: 100%;
    }
    #casestudy .listCase > li a:after {
        content: "";
        width: 6px;
        height: 6px;
        display: block;
        background: #c5c5c5;
        position: absolute;
        bottom: 19px;
        right: 22px;
    }
    #casestudy .listCase > li:nth-child(3n+1) {
        margin-left: 0;
    }
    #casestudy .listCase > li:nth-child(3n) {
        margin-right: 0;
    }
}
@media(max-width:959px) {
    #casestudy .listCase > li {
        background: #fff;
        width: 90%;
        position: relative;
        margin: 5%
    }
    #casestudy .listCase a p.info {
        text-align: left;
    }
}
/* よくある質問 */
div.questionItem {
    margin-bottom: 1em;
    text-align: left;
}
h3.questionMain {
    font-size: 1.2em;
}
h3.questionMain.show span.txtQ::before {
    content: "＋";
    background-color: #696969;
    color: #fff;
    margin-right: 1em;
}
h3.questionMain.hide span.txtQ::before {
    content: "－";
    background-color: #696969;
    color: #fff;
    margin-right: 1em;
}
div.questionContent {
    margin-top: 1em;
}
/* フッター */
footer {
	margin: auto;
}
footer div#wrapCopyright {
	width: 80%;
	margin: auto;
}
@media (max-width: 600px){
	footer {
		padding-bottom: 3em;
	}
}
/* フォーム */
form > div {
    margin-bottom: 1rem;
}
form > div input, form > div select, form > div textarea {
    width: 100%;
}
form > div > div.hs-richtext > div {
	width:60%!important;
}
div.hs-richtext {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}
div.hs-richtext h4 {
	font-weight: normal;
}
form input[type=checkbox] {
	width:1rem!important;
	margin-right: 0.5rem;
}
.hs-richtext div {
	overflow: auto!important;
}
form .hs_submit input {
    background-color: #f8b500;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    margin-left: 10px;
    padding: 5px 10px;
    border-radius: 5px;
	width: 8rem;
}
form .hs_submit input:hover {
    background-color: #00a6c2;
	color: #fff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
div.hbspt-form {
    display: flex;
    justify-content: center;
}
.hs-form-field {
    text-align: left;
    padding-bottom: 1rem;
    margin: auto;
    width: 100%;
}
.input input, .input textarea, .input select, .hs-richtext div {
	border: 1px solid #696969;
}
.input input, .input select, .input textarea {
	background-color: #f0f0f0;
}
.input input:focus, .input select:focus, .input textarea:focus {
	background-color: #fff;
}
legend.hs-field-desc {
    font-size: small;
}
.hs-form-required {
	color:red;
}
.hs-form-required::after{
	content:"必須";
}
.input .hs-fieldtype-textarea {
    font-size: 10pt;
	height: 5rem!important;
    line-height: 1.2rem;
}
::placeholder {
	color:#ccc;
}
.input input, .input select, .input textarea {
    font-size: 10pt;
    height: 1.5rem;
	width:100%!important;
}
form label, form legend {
    cursor: default;
}
label.hs-form-booleancheckbox-display {
    display: flex;
    align-items: flex-start;
}
label.hs-error-msg {
    font-size: 10pt;
	color: red;
}
/* 新LP用CSS追加: 20231218 */
.lp2 h2 {
	padding-top: 1rem;
	text-shadow: 2px 2px 2px #0000004d;
}

/* イントロ */
.intro {
    display: flex;
	align-items: center;
    background: linear-gradient(180deg, rgb(0 166 194), rgb(255 255 255));
}
.intro > div {
	width: 50%;
	margin: 2rem;
}
.left div {
	display: flex;
	width: 100%;
	justify-content: space-around;
}
.intro .left h1 {
    font-size: 48px;
    text-shadow: 2px 2px 2px #0000004d;
    margin-bottom: 1rem;
}
.intro .left p {
	text-align: left;
}
.intro .left img {
	width: 49%;
	max-width: 200px;
}
.intro .right .introCta {
    display: flex;
    justify-content: center;
}
.intro .right .button {
	display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8b500;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    margin-left: 10px;
    padding: 10px 18px;
    border-radius: 20px;
    color: #fff;
	width: 100%;
	font-size: clamp(13px, 1vw, 20px);
}
.intro .right .button::after {
	content: "⇨";
	display: inline-block;
	width: 30px;
	height: 30px;
	background-color: #fbdb58;
	border-radius: 50%;
	line-height: 30px;
}
.intro .right .button:hover {
    background-color: #00a6c2;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

@media(max-width:599px){
	.intro {
		flex-wrap: wrap;
	}
	.intro > div {
		width: 100%;
		margin: 1rem 2rem;
	}
	.left div img {
		width: 49%;
	}
}

@media(min-width:600px) and (max-width:959px){
	.intro .right .introCta {
		flex-wrap: wrap;
	}
	.intro .right .button {
		margin: 10px 0;
	}
}

/* フォームのポップアップ */
.open {
    cursor: pointer;
}
#popUp, #popUp1 ,#popUp2 ,#popUp3 {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
}
.lp2 button {
	background: none;
}
.lp2 .window {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90vw;
    max-width: 1500px;
    padding: 20px;
    height: 70%;
    background-color: #fff;
    border-radius: 4px;
    align-items: center;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    color: #000;
    justify-content: center;
	font-weight: normal;
	overflow: scroll;
}

.close, .closeForm {
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
}
.closeBanner {
    background: none;
    border: none;
    font-size: 16px;
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
}


/* こんなお悩みありませんか */
#issues h2 {
	text-shadow: 2px 2px 2px #0000004d;
}
ul.issues {
    display: flex;
	justify-content: center;
	margin-bottom: 2rem;
}
ul.issues li {
    width: 30%;
    padding: 1rem;
}
ul.issues li div:first-child {
    background-color: #f5f5f5;
    padding: 1rem;
}
ul.issues li div:first-child::after {
    content: "▼";
	font-size: 40px;
    color: #f5f5f5;
    top: 40px;
    padding-top: 0;
    position: relative;
}
.circleIcon {
    height: 200px;
    width: 200px;
    background-size: cover;
    border-radius: 50%;
    margin: 10px auto;
    position: relative;
    top: 10px;
	border: 3px solid #f5f5f5;
}
@media(max-width:959px){
	ul.issues {
		flex-wrap: wrap;
	}
	ul.issues li {
		width: 90%;
	}
}

/* タブ切り替え全体のスタイル */
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 90%;
  margin: 0 auto;
}

@media(max-width:599px){
	.tabs {
		display: grid;
	}
}

/* タブのスタイル */
.tabItem {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #cccccc;
  background-color: #eeeeee;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tabItem:hover {
  opacity: 0.75;
}

@media(max-width:599px){
	.tabItem {
		width: 100%;
	}
}

/* ラジオボタンを全て消す */
input[name="tabItem"] {
  display: none;
}

/* タブ切り替えの中身のスタイル */
.tabContent {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
	text-align: left;
}
.tabContent .image {
	margin: auto;
}

/* 選択されているタブのコンテンツのみを表示 */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

/* 選択されているタブのスタイルを変える */
.tabs input:checked + .tabItem {
  background-color: #fff;
  border-bottom: 3px solid #000;
}

/* その課題を解消できます */
.solutions {
	background: linear-gradient(270deg, rgb(0 166 194), rgb(255 255 255));
}
.solutions > div {
	display: flex;
	align-items: flex-start;
}
.solutions > div .issue {
    width: 60%;
    background-color: #007792;
    padding: 1rem;
    margin: 1rem;
	position: relative;
	left: 1rem;
}
.issueText {
	display: flex;
    align-items: center;
	text-align: left;
	padding: 0 2rem 0 0;
}
.issueText::before {
	content: url(../../../uploads/2024/01/issue_before.png);
}
.issueText::after {
	content: url(../../../uploads/2024/01/issue_after.png);
}
.issueText p {
	display: block;
	margin: 1rem;
	padding: 1rem;
    background-color: #fff;
    border: 1px solid #00a6c2;
    color: #00a6c2;
}
.solutions > div .solution {
	width: 60%;
	position: relative;
	left: -2rem;
	text-align: left;
	padding-top: 1rem;
}
.solution h3 {
	color: #fff;
	text-shadow: 2px 2px 2px #0000004d;
}
.solutionText {
	background-color: #545454;
	color: #fff;
	padding: 1rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
@media(max-width:959px){
	.solutions > div {
		flex-wrap: wrap;
	}
	.solutions > div .issue {
		width: 100%;
		left: 0;
	}
	.issueText{
		padding: 0;
	}
	.issueText::after {
		content: "";
	}
	.solutions > div .solution::before {
		content: url(../../../uploads/2024/01/issue_after.png);
		transform: rotate(90deg);
    	display: inline-block;
	}
	.solutions > div .solution {
		left: 0;
		width: 100%;
		margin: 1rem;
		text-align: center;
	}
	.solutionText {
		text-align: left;
	}
}

/* CTA */
.stickyBanner {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: #f8b500;
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	margin: 0;
    padding: 0 1rem;
    z-index: 999;
}
.stickyBanner h2 {
    font-size: 1em!important;
    margin-block-start: 0!important;
	line-height: 1em;
}
.stickyBanner .button {
    padding: 0.5rem;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 1rem;
    color: #00a6c2;
}
.stickyBanner .button label.open {
	font-size:20px;
}
/* 主な特長 */
ul.functionList {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 90%;
    margin: auto;
}
ul.functionList li {
    text-align: left;
    margin: 0.5rem;
}
ul.functionList li h3 {
    border-bottom: 2px solid #1b191a;
}

@media(max-width:599px){
	ul.functionList {
		display: block;
	}
}

/* 導入・サポート事例 */
.lp2 section#casestudy {
	background: linear-gradient(270deg, rgb(0 166 194), rgb(255 255 255));
}
.lp2 section#casestudy p.btnmore {
	display: none;
}

/* 利用料金例 */
ul.priceList {
    display: flex;
    width: 90%;
    justify-content: center;
    margin: auto;
}
ul.priceList li {
    width: 50%;
}
ul.priceList li h3 {
    background-color: #00a6c2;
    width: 90%;
    margin: auto;
}
ul.priceList li p {
    font-size: 40pt;
    line-height: 80pt;
}

@media(max-width:599px){
	ul.priceList {
		display:block;
	}
	ul.priceList li {
		width: 100%;
	}
	ul.priceList li p {
		font-size: 30pt;
	}
}
/* ナレッジマネジメントLP追加: 20240304 */
.lp3 {
	background-color: #141414;
	color: #fcfcfc;
}
.lp3 section {
	width: 90%;
	max-width: 960px;
	margin: auto;
	padding-bottom: 1rem;
}
.lp3 section h2, .lp3 section h3{
	margin-bottom: 0.5em;
}
.lp3 p {
	padding: 0 1rem;
	font-size: 24px;
}
/* スライドイン */
.slideright_trigger, .slideup_trigger {
	opacity: 0;
}
.slideright {
    animation-name: slideRightAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideRightAnime{
	from {
		opacity: 0;
		transform: translateX(-100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
.slideup {
    animation-name: slideUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* メニュー */
header.knowledge-lp-header {
    position: static;
    background-color: #141414;
}
.knowledge-lp-header ul#menu {
    display: flex;
    justify-content: center;
	padding-top: 1rem;
}
.knowledge-lp-header ul#menu li{
	margin-right: 1rem;
	display: flex;
    align-items: center;
}
.knowledge-lp-header ul#menu li:last-child {
	margin-right: 0;
}
.knowledge-lp-header ul#menu li:last-child a {
	background-color: #00bf63;
    padding: 5px;
    border-radius: 5px;
	border: 2px solid #00bf63;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.knowledge-lp-header ul#menu li:last-child a:hover {
	background-color: #fcfcfc;
	color: #00bf63;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.knowledge-lp-header ul#menu li a {
	color: #fcfcfc;
	font-size: 16px;
	white-space: nowrap;
}
.knowledge-lp-header ul#menu li img {
	height: 1.5em;
	width: auto;
    max-inline-size: fit-content;
}
/* ヒーロー */
section#hero {
	width: 100%;
	max-width: 100%;
    background: url(../../../uploads/2024/02/hero-bg.png) right bottom /50% no-repeat;
    height: 100vh;
}
section#hero h1 {
    font-size: 18vh;
}
@media (max-width: 599px) {
	section#hero {
		height: 100vh;
		padding: 0;
	}
	section#hero h1 {
		font-size: 30pt;
		text-wrap: nowrap;
	}
}
@media (min-width: 560px) and (max-width: 959px) {
	section#hero {
		height: 100vh;
		padding: 0;
	}
	section#hero h1 {
		font-size: 60pt;
		text-wrap: nowrap;
	}
}
@media (min-width: 960px) {
    section#hero {
        background: url(../../../uploads/2024/02/hero-bg.png) right 40vh /50% no-repeat;
        height: 100vh;
    }
}
/* メリット */
.merit-images {
    margin-top: 1rem;
    display: flex;
    width: 100%;
}
.merit-images div {
    margin: 1rem 1rem 0;
	padding: 1rem;
}
.merit-images div img {
    width: 100%;
	margin: auto;
}
.merit-images div h3 {
    margin-top: 1rem;
}
.merit-images div p {
    padding: 0;
}
@media (min-width: 600px) {
	.merit-images {
		display: table;
	}
	.merit-images div {
		display: table-cell;
		width: 50%;
	}
	.merit-images div:first-child {
		margin-left: 0;
	}
	.merit-images div:last-child {
		margin-right: 0;
	}
}
@media (max-width: 599px) {
	section#merit h2 {
		text-align: center;
	}
	.merit-images {
		flex-wrap: wrap;
		justify-content: center;
	}
	.merit-images div {
		margin: 1rem 0 0 0;
	}
}
/* DCCのナレッジマネジメントとは */
section#dcc-km {
    display: flex;
	flex-wrap: wrap;
	flex-direction: row;
    align-items: center;
}
div#dccKmImg {
	background-size: contain;
	background-repeat: no-repeat;
}
div#dccKmImg img {
	display: none;
}
div#dccKmText h2 {
	margin-bottom: 1rem;
}
section#dcc-km div img {
    padding: 1rem;
    width: 80%;
    margin: auto;
}
@media(min-width:960px){
	section#dcc-km {
		align-items: stretch;
	}
	section#dcc-km div {
		margin: 1rem 0;
	}
	div#dccKmImg {
		margin: 1rem 1rem 1rem 0;
		width: 60%;
	}
	div#dccKmText {
		margin: 1rem 0 1rem 1rem;
		width: 40%;
	}
    div#dccKmImg {
        background-color: #fcfcfc;
        background-position: center;
    }
}
@media (max-width: 959px) {
	section#dcc-km {
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}
	section#dcc-km h2 {
		text-align: center
	}
	div#dccKmImg {
		display: flex;
		justify-content: center;
	}
	div#dccKmImg img {
		display: block;
	}
}
/* ナレッジマネジメントとは */
/*
section#km {
    display: flex;
}
@media(min-width: 960px){
	section#km {
		flex-direction: row-reverse;
		align-items: stretch;
	}
	section#km > div {
		width: 50%;
		height: 100%;
	}
	section#km div:first-child {
		position: relative;
	}
	section#km div:first-child h2 {
		position: relative;
		padding: 0 1rem;
	}
	section#km div:nth-child(2) {
		position: relative;
		padding: 1rem 2rem;
	}
	div#kmImg {
		width: 100%;
		height: 100%;
		min-height: 500px;
		background-size: cover;
	}
	div#kmImg img {
		display: none;
	}
	div#kmText {
		background-color: #9b9b9b;
	}
}
@media (max-width: 959px) {
	section#km {
		flex-wrap: wrap;
	}
	section#km div:first-child {
		left: unset;
	}
	section#km div:first-child h2 {
		left: unset;
		margin: auto;
		text-align: center;
	}
	section#km div:nth-child(2) {
		left: unset;
	}
}
*/
/* 下部キャッチコピー */
section#copy {
    display: flex;
	align-items: center;
    align-content: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
}
section#copy h2 {
	text-wrap: nowrap;
	font-size: 3.5vw;
}
/* 導入までの流れ */
section#flow {
    display: flex;
	align-items: center;
    align-content: center;
}
section#flow div {
    width: 50%;
    margin: 1rem;
}
section#flow div:first-child {
    position: relative;
    left: 5%;
}
section#flow div:first-child h2 {
    position: relative;
    top: -2rem;
    left: 1rem;
}
section#flow div:nth-child(2) {
    position: relative;
	left: -5%;
    background-color: #9b9b9b;
    padding: 1rem 2rem;
    height: fit-content;
	margin: 1rem auto;
}
section#flow div ol {
    counter-reset: number;
}
section#flow div ol li::before {
    counter-increment: number;
    content: "0"counter(number);
    font-weight: bold;
    color: #000000;
    margin-right: 1rem;
}
section#flow div ol li {
    color: #fcfcfc;
    position: relative;
    display: flex;
}
@media (max-width: 599px) {
	section#flow {
		flex-wrap: wrap;
	}
	section#flow div {
		width: 100%;
	}
	section#flow div:first-child {
		left: unset;
	}
	section#flow div:first-child h2 {
		top: unset;
		left: unset;
		text-align: center;
	}
	section#flow div:nth-child(2) {
		left: unset;
		margin: 1rem;
	}
}
/* お問い合わせ */
section#inquiry {
    display: flex;
    justify-content: center;
}
section#inquiry a.inquiry-button {
    background-color: #00bf63;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    border-radius: 5px;
	border: 2px solid #00bf63;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
section#inquiry a.inquiry-button:hover {
	background-color: #fcfcfc;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
section#inquiry a.inquiry-button div {
    color: #fcfcfc;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
section#inquiry a.inquiry-button:hover div {
	color: #00bf63;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
section#inquiry a.inquiry-button div::after {
    content: ">";
    font-weight: bold;
    margin-left: 0.5rem;
}
/* フッター */
.lp3 footer {
	background-color: #141414;
}
.lp3 footer .copyright {
    color: #999999;
    font-size: 0.6rem;
    padding: 8px 0;
}
@media only screen and (min-width: 960px){
	.lp3 footer div.inner {
		max-width: 1080px;
		width: auto;
		margin: 0 auto;
	}
	.lp3 footer div#wrapCopyright {
		margin-top: 35px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.lp3 footer div#wrapCopyright a img {
		height: 50px;
		width: auto;
	}
}