/* ------------------------------------------
                  機能一覧
------------------------------------------ */

.function-group-panel a:hover{
	color: #3c3c3c;
}

/*26リニューアル*/

.function_tabs_button-area{
    padding-top: 150px;
    background: #DBF1FF;
	position: relative;
    z-index: 0;
}

.function_tabs_button-area::after {
    content: '';
    background: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 100px 0 0 0;
}

input[name="function_tab_item"] {
    display: none;
}

.function_tabs_button{
    display: flex;
    max-width: 1300px;
    margin: auto;
    border-radius: 20px;
    overflow: hidden;
}

.function_tab_item {
	width: calc(100% / 3);
    background: #B7B9BF;
    color: #FFF;
    font-size: 24px;
    text-align: center;
    padding: 30px;
	transition: all 0.2s ease;
	border-right: 1px solid #e1e7ee;
}

.function_tab_item:last-of-type {
	border-right: none;
}

.function_tab_item:hover {
    background-color: #eaeef2;
    color: #a3a4a3;
}


#list:checked ~ .function_tabs_button-area .function_tabs_button label[for="list"],
#purpose:checked ~ .function_tabs_button-area .function_tabs_button label[for="purpose"],
#problem:checked ~ .function_tabs_button-area .function_tabs_button label[for="problem"]
{
    background: #016FCF;
    color: #FFF;
}

.function_tab_content{
	display: none;
}

#list:checked ~ #list_content,
#purpose:checked ~ #purpose_content,
#problem:checked ~ #problem_content {
    display: block;
}

/*目的で探す・課題で探す*/
.purpose-group,
.problem-group{
    position: relative;
    background:#DBF0FF;
    z-index: 0;
}

.purpose-group::after,
.problem-group::after{
    content: '';
    background: #FFF;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 0 100px 100px 0;
}

.purpose-group:nth-child(2n),
.problem-group:nth-child(2n){
    background:#FFF;
}

.purpose-group:nth-child(2n)::after,
.problem-group:nth-child(2n)::after
{
    background: #DBF0FF;
    border-radius: 100px 0 0 100px;
}

.purpose-group:last-of-type::after,
.problem-group:last-of-type::after{
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.purpose-group:first-child::after,
.problem-group:first-child::after{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

/*トップ背景など*/
.content-breadcrumb {
	position:relative;
	background: #DBF1FF;
    z-index: 0;
}

.content-breadcrumb::after{
    content: '';
	background: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 0 0 0 100px;
}

/*見出し共通*/
.content-section-box-common{
	max-width: 1300px;
    margin: 0 auto;
    text-align: left;
	padding: 100px 0;
}

.PageTitle{
    font-size: clamp(20px, 3.8vw, 40px);
    font-weight: bold;
    color: #00A5FF;
    line-height: 1.85;
}

.content-section-box-keyvisual{
	padding: 100px 0 20px;
}

.keyvisual-bluearea{
	position:relative;
	height:auto;
}

.keyvisual-bluearea::before{
    content: '';
	background:#6AC1F8;
    position: absolute;
    width: 50%;
    height: 50%;
    top: 0;
	right: 0;
    display: block;
    border-radius: 0 0 0 100px;
    width: 827px;
    height: 300px;
}

.keyvisual-bluearea::after{
    content: '';
    position: absolute;
    height: 300px;
    width: 484px;
    top: 4px;
    right: 310px;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
}

.keyvisual-kinou::after{
    background-image: url(https://www.dos-osaka.co.jp/ss1/img/keyvisual_kinou.webp);
}

.PageTitle-area {
    margin-bottom: 150px;
}

.PageTitle-under {
    position: relative;
    font-size: 16px;
    width: fit-content;
}

.PageTitle-under::after{
    content: '';
    background: #707070;
    position: absolute;
    width: 100px;
    height: 1px;
    top: 50%;
    right: auto;
    margin-left: 1em;
}

 /*見出し*/
.content-heading-section{
	background:#fff;
	position:relative;
    z-index: 0;
}

.content-heading-section::after{
    content: '';
	background: #DBF1FF;
    position: absolute;
    width: 95%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 0 100px 100px 0;
}


.content-heading-toptext {
    font-size: clamp(18px, 3.8vw, 40px);
    font-weight: bold;
    line-height: 1.5em;
}

.content-heading-undertext {
	margin:25px 0;
}

/*機能中見出し(H2ある箇所)*/
.middle-title-box{
    text-align: center;
}

.headerText-blueUnderLine{
	font-size: clamp(16px, 3.8vw, 32px);
    font-weight: bold;
    line-height: 1.5em;
    border-bottom: solid 5px #00A5FF;
    width: fit-content;
    margin: 0 auto 35px;
}

.background-base-function {
	position:relative;
  background: linear-gradient(180deg, #DBF1FF 0%, #DBF1FF 50%, #D1F1FE 50%, #D1F1FE 100%);
    z-index: 0;
}

.background-base-function::after{
    content: '';
	background: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 0 0 100px 0;
}

.background-option-function {
	position:relative;
  background: linear-gradient(180deg, #C4E7FE 0%, #C4E7FE 50%, #FCEBB5 50%, #FCEBB5 100%);
    z-index: 0;
}

.background-option-function::after{
    content: '';
	background: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 100px 0 0 100px;
}

.background-other-function {
	position:relative;
  background: linear-gradient(180deg, #ECE3EF 0%, #ECE3EF 50%, #EBEEF3 50%, #EBEEF3 100%);
    z-index: 0;
}

.background-other-function::after{
    content: '';
	background: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 100px 0 0 0;
}

.background-demo-trial{
	position:relative;
	background:#FFF;
    z-index: 0;
	padding-bottom: 45px;
}

.background-demo-trial::after{
    content: '';
	background: #EBEEF3;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 0 100px 0 0;
}

/*機能グループ*/
.background-asset-manage {
	position:relative;
  	background: linear-gradient(180deg, #fff 0%, #fff 50%, #C4E7FE 50%, #C4E7FE 100%);
    z-index: 0;
}

.background-asset-manage::after{
    content: '';
	background: #D1F1FE;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 100px 0 0 100px;
}

.background-ope-support{
	position:relative;
  	background: linear-gradient(180deg, #D1F1FE 0%, #D1F1FE 50%, #fff 50%, #fff 100%);
    z-index: 0;
}

.background-ope-support::after{
    content: '';
	background: #C4E7FE;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 0 100px 100px 0;
}

.background-security-manage{
	position:relative;
  	background: linear-gradient(180deg, #fff 0%, #fff 50%, #E5F4CD 50%, #E5F4CD 100%);
    z-index: 0;
}

.background-security-manage::after{
    content: '';
	background: #FCEBB5;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 0 100px 100px 0;
}

.background-log-manage{
	position:relative;
  	background: linear-gradient(180deg, #FCEBB5 0%, #FCEBB5 50%, #FCE2E2 50%, #FCE2E2 100%);
    z-index: 0;
}

.background-log-manage::after{
    content: '';
	background: #E5F4CD;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 100px 0 0 100px;
}

.background-ope-support-option{
	position:relative;
  	background: linear-gradient(180deg, #E5F4CD 0%, #E5F4CD 50%, #FFF 50%, #FFF 100%);
    z-index: 0;
}

.background-ope-support-option::after{
    content: '';
	background: #FCE2E2;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 0 100px 100px 0;
}

.background-option-service{
	position:relative;
  	background: linear-gradient(180deg, #FCE2E2 0%, #FCE2E2 50%, #ECE3EF 50%, #ECE3EF 100%);
    z-index: 0;
}

.background-option-service::after{
    content: '';
	background: #FFF;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 100px 0 0 100px;
}

.background-option-service-function{
	position:relative;
  	background:#fff;
    z-index: 0;
}

.background-option-service-function::after{
    content: '';
	background: #ECE3EF;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    border-radius: 0 100px 100px 0;
}

.function-group-title {
    text-align: center;
    font-size: clamp(16px, 3.8vw, 26px);
    font-weight: bold;
    color: #3C3C3C;
    line-height: 1.5;
    margin-bottom: 35px;
}

.function-group-title.base{
    color: #01BEFF;
}

.function-group-title.operation{
    color: #00A5FF;
}

.function-group-title.security{
    color: #FFB900;
}

.function-group-title.log{
    color: #7DC800;
}

.function-group-title.ope-op{
    color: #FF696D;
}


.function-group-txt {
    text-align: center;
    font-size: clamp(14px, 3.8vw, 16px);
    color: #fff;
    line-height: 1.5;
    margin-bottom: 35px;
}

.function-group-panelList{
	display: flex;
    flex-wrap: wrap;
    gap: 35px;
}

.function-group-panel{
	width: calc( (100% - 105px) / 4);
    background: #fff;
    border-radius: 10px;
	transition: all .3s;
}

.function-group-a{
    display: block;
    height: 100%;
}

.function-group-panel:hover{
	opacity: 0.6;
}

.function-group-panel.base{
    border: 2px solid #01BEFF;
}

.function-group-panel.operation{
    border: 2px solid #00A5FF;
}

.function-group-panel.security{
    border: 2px solid #FFB900;
}

.function-group-panel.log{
    border: 2px solid #7DC800;
}

.function-group-panel.ope-op{
    border: 2px solid #FF696D;
}

.function-group-panel.op-service{
    border: 2px solid #A674B0;
}

.function-group-panel.scene{
    border: 2px solid #555555;
}


.function-title{
	text-align: center;
    color: #FFF;
    padding: 15px;
    font-size: clamp(14px, 3.8vw, 20px);
    background: #01BEFF;
    border-radius: 5px 5px 0 0;
}

.function-title-p{
	line-height: normal;
}

.function-contents{
    font-size: 16px;
	padding: 15px;
}

.function-title-00A5FF{
    background: #00A5FF;
}

.function-title-FFB900{
    background: #FFB900;
}

.function-title-7DC800{
    background: #7DC800;
}

.function-title-FF696D{
    background: #FF696D;
}

.function-title-A674B0{
    background: #A674B0;
}

.function-title-555555{
    background: #555555;
}

.function-group-panel-other{
    width: calc( (100% - 70px) / 3);
}

.function-contents-other{
	text-align: left;
}

.function-bottom-group{
    display: flex;
    justify-content: center;
    gap: 50px;
}

.demotrial-bottom-text{
	margin-top:20px;
}


@media (max-width: 1600px) {
/*keyvisual*/

.keyvisual-bluearea::before{
    width: 700px;
}

.keyvisual-bluearea::after{
    right: 200px;
}

}

@media (max-width: 1400px) {
/*keyvisual*/
.content-section-box-common{
	max-width: 900px;
}

.keyvisual-bluearea::before {
	width: 600px;
}

.keyvisual-bluearea::after {
	right: 110px;
}

.function_tabs_button{
    max-width: 700px;
}

/*機能一覧パネル*/

.function-group-panel{
    width: calc((100% - 70px) / 3);
}

}


@media(max-width:1000px){


.function_tab_item{
	font-size: 16px;
    padding: 22px 0;
}


/*keyvisual*/
.keyvisual{
	padding-top: 0;
}

.content-section-box-common{
	max-width: 700px;
}

.keyvisual-bluearea::before{
	width: 450px;
	height: 250px;
}

.keyvisual-bluearea::after{
	right: 62px;
	height: 214px;
	width: 350px;
	top: 36px;
}

/*機能一覧*/

.function-group-panelList{
	gap: 20px;
}

.function-group-panel{
	width: calc((100% - 20px) / 2);
    margin-top: 15px;
}

}

@media(max-width:800px){
/*keyvisual*/

.content-section-box-common {
	max-width: none;
	padding:50px 30px;
	}

.content-section-box-keyvisual{
    padding: 15px 30px 40px;
}

.background-demo-trial{
    padding-bottom: 50px;
}

.keyvisual-bluearea::before{
	width: 45%;
	height: 100px;
}

.keyvisual-bluearea::after{
	display:none;
}


.PageTitle-area{
    margin-bottom: 80px;
}

.content-section-box-heading{
	padding-right:50px;
}


.function_tabs_button{
	max-width: 100%;
	margin: 0 15px;
}

/*背景角丸調整*/

.keyvisual-bluearea::before,
.content-breadcrumb::after{
    border-radius: 0 0 0 60px;
}

.content-heading-section::after,
.background-ope-support::after,
.background-security-manage::after,
.background-ope-support-option::after,
.background-option-service-function::after
{
    border-radius: 0 60px 60px 0;
}

.background-base-function::after{
    border-radius: 0 0 60px 0;
}

.background-asset-manage::after,
.background-option-function::after,
.background-log-manage::after,
.background-option-service::after
{
    border-radius: 60px 0 0 60px;
}

.background-other-function::after{
    border-radius: 60px 0 0 0;
}

.background-demo-trial::after{
    border-radius: 0 60px 0 0;
}

.purpose-group::after,
.problem-group::after{
    border-radius: 0 60px 60px 0;
}

.purpose-group:nth-child(2n)::after,
.problem-group:nth-child(2n)::after
{
    border-radius: 60px 0 0 60px;
}

.purpose-group:last-of-type::after,
.problem-group:last-of-type::after{
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.purpose-group:first-child::after,
.problem-group:first-child::after{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;

}

.function_tabs_button-area::after{
    border-radius: 60px 0 0 0;
}

}

@media(max-width:500px){
/*keyvisual*/

.keyvisual {
	padding-top: 0;
}

.keyvisual-bluearea::before{
    border-radius: 0 0 0 40px;
    width: 93px;
    height:58px;
}

.function_tabs_button-area{
	padding-top: 50px;
}

.function_tabs_button{
	width: calc(100% - 60px);
    flex-direction: column;
	margin: auto;
}

.function_tab_item{
	width: 100%;
	border-right: none;
	border-bottom: 1px solid #e1e7ee;
}

.function_tab_item:last-of-type {
	border-bottom: none;
}

/*背景角丸調整*/

.function_tabs_button-area::after{
    border-radius: 40px 0 0 0;
}

.content-breadcrumb::after{
    border-radius: 0 0 0 40px;
}

.content-heading-section::after,
.background-ope-support::after,
.background-security-manage::after,
.background-ope-support-option::after,
.background-option-service-function::after
{
    border-radius: 0 40px 40px 0;
}

.background-base-function::after{
    border-radius: 0 0 40px 0;
}

.background-asset-manage::after,
.background-option-function::after,
.background-log-manage::after,
.background-option-service::after
{
    border-radius: 40px 0 0 40px;
}

.background-other-function::after
{
    border-radius: 40px 0 0 0;
}

.background-demo-trial::after{
    border-radius: 0 40px 0 0;
}


.purpose-group::after,
.problem-group::after{
    border-radius: 0 40px 40px 0;
}

.purpose-group:nth-child(2n)::after,
.problem-group:nth-child(2n)::after
{
    border-radius: 40px 0 0 40px;
}

.purpose-group:last-of-type::after,
.problem-group:last-of-type::after{
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.purpose-group:first-child::after,
.problem-group:first-child::after{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}


/*TOP見出し*/
.PageTitle-area{
	margin-bottom: 20px;
}

.PageTitle{
    font-size: 20px;
}

.PageTitle-under{
    font-size: 8px;
}

.PageTitle-under::after{
    width: 50px;
}

.top_button{
	width: 100%;
}

.top_button a p {
    width: 78%;
}

/*機能一覧*/
.function-group-title{
    margin-bottom: 15px;
}

.function-group-panel{
	width: 100%;
    margin-top: 15px;
}

.headerText-blueUnderLine,
.function-group-title
{
    font-size: 16px;
}

.headerText-blueUnderLine{
    margin: 0 auto 20px;
}

.function-group-panelList-other{
    margin-top: 40px;
}

.function-group-panelList{
	gap:0;
}

.function-group-panelList li:first-child{
    margin-top: 0;
}

.function-title{
    font-size: 14px;
}

.function-contents{
    font-size: 14px;
}

.function-bottom-group{
    display: block;
}

.function-bottom-parts{
    margin-top: 25px;
}

.demotrial-bottom-text{
    margin-top: 10px;
}

/*改行*/
.nowrap{
	white-space: nowrap;
}

}