body {
    font-family: "Noto Sans JP", sans-serif;
}

#container::selection {
    background: unset;
}
#container sup {font-size: 75%;}

/* br */

@media screen and (min-width: 768px) {
    br.pc {
        display: inline-block;
    }
    br.sp {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    br.pc {
        display: none;
    }
    br.sp {
        display: inline-block;
    }
}
/* color */
.col-org {color: rgba(240,100,0,1);}
.col-ppl {color: rgba(110,60,190,1);}
.col-blue {color: rgba(10,155,205,1);}
.col-yll {color: rgba(245,180,0,1);}

/* sec color */

.sec_wht {
    background-color: #fff;
    color: #000;
}

.sec_wht .secInner {
}

.sec_blk {
    background-color: #d4d4d4;
    color: #000;
}

.sec_gry {
    background-color: #f2f2f2;
    color: #000;
}

.sec_lgry {
    background-color: #f2f2f2;
    color: #000;
}

.secInner {
    margin: 0 auto;
    max-width: 960px;
    padding: 80px 80px;
}


/* sec title text */
.sec-area { 
	width: 100%;
	position: relative;}
.sec-area + .sec-area { padding-top: 40px;}

.secTit {
    text-align: center;
    font-size: 32px;
    font-weight: 500;
	margin-bottom: 1rem;
}
.secTxt {
    text-align: center;
    font-size: 16px;
	line-height: 1.6;
	margin-bottom: 1rem;
}


/* p.lead */

p.lead {
    font-size: 14px;
    font-weight: 500;
}

.hidden {
    display: none !important;
}


/*========== sec01 ==========*/

.sec-mv {}

.sec-mv .secInner {
    max-width: none;
    padding: 0;
}

.sec-mv .secInner .img {
    height: 300px;
    overflow: hidden;
}

.sec-mv .secInner .img img {
    height: 300px;
    margin-left: calc(50% - 975px);
    user-select: none;
}

.sec-mv .grid {
    display: flex;
    align-items: normal;
    justify-content: space-between;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.sec-mv .grid > div {
    width: calc( 100% / 4);
    position: relative;
}

.sec-mv .grid >div:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 30px;
    background-color: #707070;
    left: 0;
    top: 18px;
}

.sec-mv .grid > div:last-child:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 30px;
    background-color: #707070;
    right: 0;
    top: 18px;
}

.sec-mv .grid > div > a {
    display: block;
    padding: 1.2em 1em;
    text-align: center;
    color: #000;
    text-decoration: none;
}





/*========== 評価方法 ==========*/

#evaluation .secTit {
    margin: 1rem 0;
}
#evaluation .secInner {
    padding: 80px 40px;
	max-width: 1100px;
}
#evaluation .title {
    text-align: center;
    font-size: 20px;
	padding-top: 1em;
}
#evaluation .lead {
    font-size: 16px;
    text-align: center;
}
@media only screen and (max-width: 767px) {
#evaluation .secInner {
    padding: 40px 20px;
	}
}
.evl-area {
  width: 100%;
  display: flex;
  justify-content: space-between;
	padding-top: 20px;
}
.evl-area .evl-cont {
	width: calc(100% / 3);
}
.evl-cont-circle {
	  position: relative;
	  width: 300px;
	  height: 300px;
	  border-radius: 50%;
	  display: flex;
	  flex-direction: column;
	  align-items: flex-start;
	  justify-content: center;
	  color: #ffffff;
	  overflow: hidden;
    text-align: center;
	box-sizing: border-box;
	margin-bottom: 20px;
}
	#evl-sales .evl-cont-circle {
		background-color: #F06400;
	}
	#evl-service .evl-cont-circle {
		background-color: #6E3CBE;
	}
	#evl-solution .evl-cont-circle {
		  background-color: #0A9BCD;
	}
.evl-cont-circle h4 {
    font-size: 24px;
	font-weight: 700;
	line-height: 1;
	margin: 0 auto 10px;
}
.evl-cont-circle h4 span {
    font-size: 15px;
}
.evl-cont-circle p {
	font-size: 14px;
    font-weight: 500;
	line-height: 1.4;
	margin: 0 auto 10px;
}
.evl-cont-circle img {
    max-width: 120px;
	margin: 0 auto;
}
.evl-cont-list {
}
.evl-cont-list li {}
.evl-area-note {
	position: relative;
	padding: 10px 0;
}

@media screen and (max-width: 960px) {
.evl-area {
  width: 100%;
  display: block;
}
.evl-area .evl-cont {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.evl-cont-circle {
    margin: 0 auto 10px;
}
.evl-cont-list {
	margin-bottom: 20px;
}

}

#evaluation .evl_info {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#evaluation .evl_info .secTxt {
  margin-bottom: 3em;
}
#evaluation .evl_info .evl_info-cont {
    width: 100%;
    max-width: 300px;
    border-radius: 150px;
    padding: 40px 0 27px;
    text-align: center;
    color: #ffffff;
}
#evaluation .evl_info .evl_info-cont h4 {
    font-size: 24px;
    line-height: 2;
  font-weight: 700;
}
#evaluation .evl_info .evl_info-cont p {
	font-size: 15px;
    line-height: 1.5em;
    font-weight: normal;
    margin-bottom: 10px;
}
#evaluation .evl_info .evl_info-cont img {
    max-width: 130px;
}
#evaluation .evl_info .evl-sales {
  background-color: #FF7C03;
  background-color: #F06400;
}
#evaluation .evl_info .evl-service {
  background-color: #925ED2;
	    background-color: #6E3CBE;
}
#evaluation .evl_info .evl-solution {
      background-color: #0A9BCD;
}




#evaluation .grid {
    display: flex;
    align-items: normal;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 1rem;
}

#evaluation .grid > div {
    width: calc( 100% / 3);
    padding: 3%;
}

#evaluation .grid .img {
    position: relative;
    padding: 20%;
	color: #fff;
    border-radius: 50%;
}
#evaluation .grid .img.evl-ico01 {
    background-color: #F06400;
}
#evaluation .grid .img.evl-ico02 {
    background-color: #6E3CBE;
}
#evaluation .grid .img.evl-ico03 {
    background-color: #0A9BCD;
}

#evaluation .grid .img img {
    width: 100%;
    user-select: none;
	margin-top: -10%;
}

#evaluation .grid .img span {
    position: absolute;
    left: 0;
    bottom: 12.5%;
    width: 100%;
    font-size: 1.5vw;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    color: #fff;
}

#evaluation .ctg-area {
	position: relative;
	width: 100%;
	padding-top: 20px;
}
.ctg-box {
	position: relative;
	background-color: #FFFFFF;
	padding: 20px;
	margin-bottom: 40px;
}
.ctg-box .ctg-tit{
    color: #FFFFFF;
    font-size: 16px;
    padding: 5px 10px;
    margin-bottom: 2em;
}
.ctg-box.col-org {
	border: 5px solid #F06400;
	}
	.ctg-box.col-org .ctg-tit  {
		background-color: #F06400;
	}
.ctg-box.col-blue {
	border: 5px solid #0A9BCD;
	}
	.ctg-box.col-blue .ctg-tit  {
		background-color: #0A9BCD;
	}
.ctg-box.col-ppl {
	border: 5px solid #6E3CBE;
	}
	.ctg-box.col-ppl .ctg-tit  {
		background-color: #6E3CBE;
	}

#evaluation .flex-area {
    width: 100%;
    display: flex;
    align-items:stretch;
    justify-content:flex-start;
    margin: 0 auto 1rem;
}
#evaluation .flex-area .flex-img {
    width:30%;
}
#evaluation .flex-area .flex-img img {
    width:100%;
	padding: 20px;
}
#evaluation .flex-area .flex-txt {
    width:70%;
	padding-left: 20px;
	color: #282828;
}
#evaluation ul li {
    margin-left: 1em;
    text-indent: -1em;
	margin-bottom: .1rem;
	font-size: 14px;
}
#evaluation ul li strong.tit  {
    font-weight: bold;
}

@media (min-width: 960px) {
    #evaluation .grid .img span {
        font-size: 16px;
    }
}


/*========== ロゴ ==========*/
#logo {}
#logo .secInner {
    padding: 80px 40px;
	max-width: 1100px;
}
#evaluation .title {
    text-align: center;
    font-size: 20px;
	padding-top: 1em;
}

.logo-dtl {
	position: relative;
	width: 100%;
	margin: 0 auto 40px;
}
.logo-dtl img {
	position: relative;
	width: 100%;
}
.logo-dtl .pc-view {
	display: block;
}
.logo-dtl .sp-view {
	display: none;
}

#good-partner {
	width: 90%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: solid 2px #282828;
    border-radius: 20px;
    padding: 10px 20px;
	margin: 0 auto;
}
#good-partner .img-area {
	width: 20%;
}
#good-partner .img-area img {
	display: block;
	width: min(160px,100%);
}
#good-partner .txt-area {
	width: 80%;
	padding-left: 10px;
}
#good-partner .txt-area .tit {
	font-size: 18px;
    font-weight: 700;
}
#good-partner .txt-area .txt {
	font-size: 14px;
	line-height: 1.6;
}
@media only screen and (max-width: 767px) {
#logo .secInner {
    padding: 40px 20px;
}
.logo-dtl .pc-view {
	display: none;
}
.logo-dtl .sp-view {
	display:block;
}

#good-partner {
	width: 90%;
    display: block;
}
#good-partner .img-area,
#good-partner .txt-area {
	width: 100%;
	padding: 0;
}
#good-partner .img-area img {
	width: min(160px,80%);
	margin: 0 auto 10px;
}

}	
/*========== ご相談は ==========*/
#message {
	background-color: #FFF0C8;
	color: #000;
}
#message .secTxt {
	font-size: 18px;
	line-height: 1.8;
}

/** デスクトップ（狭い時） **/
@media only screen and (max-width: 920px) {}

/** end:デスクトップ（狭い時） **/

/** タブレット **/
@media only screen and (max-width: 860px) {
    .secTit {
        font-size: 26px;
    }
}

/** end:タブレット **/

/** スマートフォン **/
@media only screen and (max-width: 767px) {
    .secTit {
        font-size: 22px;
		text-align: left;
		}
	.secTxt {
		text-align: left;
		}
   
    .secInner {
        margin: 0 auto;
        max-width: 100%;
        padding: 35px 25px;
    }
    /*========== sec01 ==========*/
    
    .sec-mv .secInner .img {
        width: 100%;
        height: auto;
    }
    
    .sec-mv .secInner .img img {
        width: 100%;
        height: auto;
        margin-left: 0;
    }
    
    .sec-mv .grid {
        display: none;
    }

}

/** end:スマートフォン **/
@media only screen and (max-width: 320px) {
    .sec05 .button_01 a {
        text-align: left;
    }
}

/** end:スマートフォン **/



/* .css-cancel */
.css-cancel {
    position: absolute;
    top: 30px;
    right: 30px;
    display: none;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px #666;
    cursor: pointer;
}
.css-cancel:before,
.css-cancel:after {
    content: "";
    position: absolute;
    display: block;
    background-color: #000;
}
.css-cancel:before {
    top: 15%;
    left: 45%;
    width: 10%;
    height: 70%;
    transform: rotate(45deg);
}
.css-cancel:after {
    top: 45%;
    left: 15%;
    width: 70%;
    height: 10%;
    transform: rotate(45deg);
}
.css-cancel:hover {
    background-color: #fbfbfb;
    box-shadow: 0 0 8px #999;
}
.css-cancel:hover:before,
.css-cancel:hover:after {
    background-color: #d01026;
}
.modal .css-cancel {
    display: block;
}
@media only screen and (max-width: 767px) {
    .css-cancel {
        top: 5px;
        right: 5px;
    }
}


#evaluation {
    background-color: #f2f2f2;
    color: #000;
}

/*--------------------
mv-area
----------------------*/
.mv-area {
    width: 100%;
    background-color: #d4d4d4;
	margin: 0 auto;
}
.mv-area dl {
    width: 100%;
    height: 280px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.mv-area dl>dt.txtCol,
.mv-area dl>dd.imgCol{
    width: 50%;
}
.mv-area dl>dt.txtCol {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.mv-area dl>dt.txtCol .leftSide {
	width: calc(1110px / 2);
	padding: 1rem;
}
.mv-area dl>dt.txtCol .txt {
    font-size: 1.4rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}
.mv-area dl>dt.txtCol .tit {
    font-size: 2rem;
}

.mv-area dl>dt.txtCol .mv_tit {
    font-size: 3.2rem;
    margin-bottom: 25px;
    position: relative;
}
.mv-area dl>dt.txtCol .mv_tit:after {
    content: '';
    /*何も入れない*/
    
    display: inline-block;
    /*忘れずに！*/
    
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 180px;
    height: 13px;
    background: url(../images/titLine.png) no-repeat;
    background-size: cover;
    vertical-align: middle;
}
.mv-area dl > dt.txtCol .mv_subtit {
    font-size: 1.4rem;
    margin-bottom: 10px;
}
.mv-area dl > dd.imgCol img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;}

/* mv-area top */
.mv-area.top {
    width: 100%;
    background-color: #f2f2f2;
	color: #282828;
}
.mv-area.top dl {
	color: #282828;
}
.mv-area.top dl>dt.txtCol .mv_tit {
    font-size: 3.2rem;
    margin-bottom: 40px;
    line-height: 1.0;
    position: relative;
}
.mv-area.top dl>dt.txtCol .mv_tit:after {
    content: '';
    /*何も入れない*/
    display: inline-block;
    /*忘れずに！*/
    
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 250px;
    height: 15px;
    background: url(../images/titLine.png) no-repeat;
    background-size: cover;
    vertical-align: middle;
}
.mv-area.top dl>dt.txtCol .mv_tit span {
    font-size: 2.0rem;
}
.mv-area.top dl>dt.txtCol .mv_subtit {
    font-size: 1.2rem;
}
.mv-area.top dl>dt.txtCol .mv_txt {
	position: relative;
    color: #282828;
}

@media only screen and (max-width: 767px) {
    .mv-area dl {
        width: 100%;
        height: inherit;
        display: flex;
        flex-direction: column;
    }
    
    .mv-area dl>dt.txtCol,
    .mv-area dl>dd.imgCol {
        width: 100%;
    }
    
    .mv-area dl>dt.txtCol {
        order: 1;
        display: block;
        box-sizing: border-box;
        padding: 25px 25px 20px;
    }
    .mv-area dl>dt.txtCol .leftSide {
        width: 100%;
    }
.mv-area dl>dt.txtCol .txt {
    font-size: 1rem;
}
.mv-area dl>dt.txtCol .tit {
    font-size: 1.6rem;
}

   
    .mv-area dl>dt.txtCol .mv_tit {
        font-size: 2.2rem;
        margin-bottom: 15px;
    }
    
    .mv-area dl>dt.txtCol .mv_subtit {
        font-size: 1.2rem;
        margin-bottom: 5px;
    }
    
    .mv-area dl>dd.imgCol {
        order: 0;
    }
    
    .mv-area dl>dd.imgCol img {
        width: 100%;
        max-height: 100%;
    }
    /* mv-area top */
    
    .mv-area.top dl {
        height: inherit;
    }
    
    .mv-area.top dl>dt.txtCol .mv_tit {
        font-size: 2.0rem;
        margin-bottom: 25px;
    }
    
    .mv-area.top dl>dt.txtCol .mv_tit span {
        font-size: 1.4rem;
    }
    
    .mv-area.top dl>dt.txtCol .mv_subtit {
        font-size: 1.0rem;
    }
}

/*--------------------
sec-lead
----------------------*/
.sec-lead {
    background-color: #fff;
}
.sec-lead .secInner {
    padding: 40px 0;
}
@media only screen and (max-width: 767px) {
    .sec-lead .secInner {
        padding: 20px 25px;
    }
}

/*--------------------
sec-link
----------------------*/
.sec_link .secTit {
    margin: 50px 0 50px;
}
.sec_link .secInner {
    margin: 0 auto;
    max-width: 800px;
    padding: 40px 80px 0;
}
.sec_link .linkBtn.btn2Col {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 2em auto 0;
}
.sec_link .linkBtn.btn1Col {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2em auto;
}
.sec_link .linkBtn_kpd {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
}
.sec_link .linkBtn_kpd a {
    color: #0a9bcd;
}
.sec_link .linkBtn a {
    display: block;
    margin-bottom: 2rem;
    padding: 15px 40px;
    font-size: 18px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #099bcc;
    user-select: none;
}
.sec_link .linkBtn.orange a {
    background-color: #ef6400;
}
.sec_link .linkBtn.btn2Col a {
    width: 320px;
}
.sec_link .linkBtn.btn1Col a {
    width: 50%;
}
.sec_recommend-h2 {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.375;
    padding: 0 4px 8px;
    position: relative;
}
.sec_recommend-h2:after {
    content: '';
    background: #0a9bcd;
    width: 100%;
    height: 2px;
    left: 0;
    bottom: 0;
    position: absolute;
}
.box-recommend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.box-recommend .panel {
    width: calc(99.999% / 3 - 20px);
    box-sizing: border-box;
}
.box-recommend .panel a .img {
    width: 100%;
}
.box-recommend .panel .img img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}
.box-recommend .panel h3 {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 10px;
    min-height: 3em;
}
.box-recommend .panel .desc {
    font-size: 15px;
}
.recommend-wrap {
    position: relative;
    margin: 0 auto 100px;
    padding: 30px 30px 13px;
    max-width: 1130px;
}
@media only screen and (max-width: 767px) {
    .mv_tit img {
        max-width: 100%;
    }
    
    .box-recommend .panel {
        width: 100%;
        margin-bottom: 50px;
    }
    
    .box-recommend .panel h3 {
        min-height: unset;
    }
    
    .sec_link .secInner {
        padding: 35px 25px;
    }
    
    .sec_link .linkBtn.btn2Col a {
        width: 100%;
        box-sizing: border-box;
    }
    
    .sec_link .linkBtn.btn2Col {
        display: block;
    }
    
    .sec_link .linkBtn.btn1Col {
        display: block;
    }
    
    .sec_link .linkBtn.btn1Col a {
        width: inherit;
    }
}
.p_top_title {
    width: 970px;
    margin: 50px auto 0;
}
.l_content_inner {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
}
.c_anchorlink_wrap {
    background-color: #fff;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.c_anchorlink_wrap::after {
    content: "";
    display: block;
    width: 30%;
}
.c_anchorlink_wrap .linkBtn a {
    display: block;
    margin-bottom: 18px;
    padding: 15px 40px;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #099bcc;
    user-select: none;
}
.c_anchorlink_wrap .linkBtn.btn3Col {
    width: calc(100%/3 - 30px);
}
.c_anchorlink_wrap .linkBtn.btn3Col a {
    width: 100%;
    box-sizing: border-box;
}
.baselink-wrap {
    display: flex;
    flex-wrap: wrap;
}
.baselink-wrap .baselink {
    width: calc(100%/3);
    padding: 20px;
    box-sizing: border-box;
}
.baselink-wrap .baselink a {
    width: 100%;
    display: block;
}
.baselink-wrap .baselink a img {
    width: 100%;
    height: auto;
}
.baselink-wrap .baselink h3 {
    font-size: 17px;
    font-weight: 600;
}
@media only screen and (max-width: 767px) {
    .p_top_title {
        width: 100%;
        background-color: unset;
        box-sizing: border-box;
    }
    
    .c_anchorlink_wrap .linkBtn.btn3Col {
        width: 100%;
    }
    
    .baselink-wrap .baselink {
        width: 100%;
    }
}
