@charset "UTF-8";
/* Scss Document */
/* color */
/* media queries*/
/*========== #casestudies ==========*/
/*========== #casestudies 2108 ==========*/
#casestudies {
  background: #fff;
  padding: 1rem 1rem 5rem 1rem;
  margin: 0 0 2rem 0;
  height: 100%;
  /*========== end .link_box ==========*/
  /*==========事例TOP ==========*/
  /*========== .individual_article 事例TOP ==========*/
  /*========== end .individual_article　事例TOP ==========*/
  /*========== end .case_summary ==========*/
  /*========== end h4 ==========*/
  /*========== end .case_block ==========*/
  /*========== office-start_2105 ==========*/
  /*========== end office-start_2105 ==========*/
  /*========== end .flow ==========*/ }
  #casestudies .slider {
    margin: 2rem 1rem; }
  #casestudies .main_text {
    padding: 2rem 1rem;
    margin: -1rem 0;
    /*background-color: $subColor;
    color: #fff;*/ }
    @media screen and (max-width: 640px) {
      #casestudies .main_text {
        background: none; } }
  #casestudies .bg_dark {
    background-color: #f9efaa;
    background: linear-gradient(to right, #f9efaa 0, #f9efaa 10rem, rgba(255, 255, 255, 0) 10rem, rgba(255, 255, 255, 0) 100%); }
    @media screen and (max-width: 640px) {
      #casestudies .bg_dark {
        background: none; } }
  #casestudies .bg_gray {
    background-color: #47463b; }
  #casestudies .bg_green {
    background-color: rgba(146, 208, 80, 0.5); }
  #casestudies .bg_purple {
    background-color: rgba(230, 159, 247, 0.5); }
  #casestudies .bg_red {
    background-color: rgba(249, 172, 172, 0.5); }
  #casestudies .main_title {
    background: url("../img/case_summary_title.png") no-repeat 2% 35%;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: left;
    margin: 0 0 2rem 0;
    padding: .8rem 0 .8rem 11rem;
    color: #fff;
    min-height: 6rem; }
    @media screen and (max-width: 767px) {
      #casestudies .main_title {
        font-size: 1.5rem; } }
    @media screen and (max-width: 640px) {
      #casestudies .main_title {
        padding: .8rem 0;
        text-align: center;
        background: none; } }
  #casestudies .link_box {
    overflow: hidden; }
    #casestudies .link_box ul {
      width: 100%;
      display: flex; }
      @media screen and (max-width: 899px) {
        #casestudies .link_box ul {
          flex-wrap: wrap; } }
      #casestudies .link_box ul li {
        background: #47463b;
        color: #fff;
        text-align: center;
        border-right: 1px solid #fff;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        list-style: none; }
        @media screen and (max-width: 899px) {
          #casestudies .link_box ul li {
            width: 50%; } }
        @media screen and (max-width: 640px) {
          #casestudies .link_box ul li {
            width: 33%; } }
        @media screen and (max-width: 480px) {
          #casestudies .link_box ul li {
            width: 100%; } }
        #casestudies .link_box ul li a {
          display: block;
          padding: 1rem .5rem; }
          @media screen and (max-width: 480px) {
            #casestudies .link_box ul li a {
              padding: .5rem; } }
          #casestudies .link_box ul li a:hover {
            background: rgba(243, 222, 40, 0.5);
            text-decoration: none;
            color: #fff; }
  #casestudies .main_title_top {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    margin: 0 0 2rem 0;
    background: #47463b;
    padding: .8rem 0;
    color: #fff; }
    @media screen and (max-width: 767px) {
      #casestudies .main_title_top {
        font-size: 1.5rem; } }
  #casestudies .individual_article {
    margin: 3rem 2rem 0 2rem;
    display: flex;
    flex-wrap: wrap; }
    @media screen and (max-width: 899px) {
      #casestudies .individual_article {
        display: block; } }
    @media screen and (max-width: 767px) {
      #casestudies .individual_article {
        margin: 3rem 5% 0 5%; } }
    @media screen and (max-width: 480px) {
      #casestudies .individual_article {
        margin: 3rem 0 0 0; } }
    #casestudies .individual_article .case {
      display: flex;
      border: #E2E2E2 1px solid;
      justify-content: center;
      padding: 0 0 1rem 0;
      width: calc( 100% / 3 - .5rem);
      margin: 0 0 1rem 0; }
      #casestudies .individual_article .case:nth-of-type(3n+2) {
        margin: 0 .7rem 1rem .7rem; }
        @media screen and (max-width: 899px) {
          #casestudies .individual_article .case:nth-of-type(3n+2) {
            margin: 0; } }
      @media screen and (max-width: 899px) {
        #casestudies .individual_article .case {
          display: block;
          width: 100%; } }
      #casestudies .individual_article .case .article {
        box-sizing: border-box;
        margin: 0 .3rem;
        padding: .5rem;
        display: block; }
        @media screen and (max-width: 899px) {
          #casestudies .individual_article .case .article {
            /*display: flex;*/
            width: 80%;
            margin: 1rem auto; } }
        @media screen and (max-width: 640px) {
          #casestudies .individual_article .case .article {
            width: 100%; } }
        #casestudies .individual_article .case .article .img_box {
          position: relative;
          text-align: center; }
          @media screen and (max-width: 899px) {
            #casestudies .individual_article .case .article .img_box {
              /*width: 50%;*/
              text-align: center;
              background: rgba(71, 70, 59, 0.3); } }
          #casestudies .individual_article .case .article .img_box .group {
            background: #47463b;
            color: #fff;
            text-align: center;
            position: absolute;
            bottom: .5rem;
            left: 0;
            width: 100%; }
            @media screen and (max-width: 899px) {
              #casestudies .individual_article .case .article .img_box .group {
                right: 0;
                left: 0;
                width: 100%; } }
        #casestudies .individual_article .case .article .text_box {
          overflow: hidden; }
          #casestudies .individual_article .case .article .text_box .campany {
            text-align: center;
            font-weight: bold;
            font-size: 1.1rem;
            margin: 1rem 0;
            /*height: 4.5rem;*/ }
            @media screen and (max-width: 899px) {
              #casestudies .individual_article .case .article .text_box .campany {
                height: auto; } }
          #casestudies .individual_article .case .article .text_box .case_lead {
            padding: .5rem 0; }
          #casestudies .individual_article .case .article .text_box .tag {
            background-color: #EDE7C0;
            border-radius: 5px;
            display: inline-block;
            font-size: .9rem;
            margin: .3rem;
            padding: .3rem; }
          #casestudies .individual_article .case .article .text_box .tag_title {
            border-radius: 5px;
            font-size: .9rem;
            margin: .3rem;
            padding: .3rem;
            text-align: center;
            background: #47463b;
            color: #fff; }

#casestudies .list_article {
		margin: 3rem 1rem 0 1rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
}
@media screen and (max-width: 899px) {
		#casestudies .list_article {
				display: block;
		}
}
@media screen and (max-width: 480px) {
		#casestudies .list_article {
				margin: 3rem 0 0 0;
		}
}
#casestudies .list_article .case {
		border: #E2E2E2 1px solid;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		padding: 0 0 1rem 0;
		margin: 0 0 1rem 0;
}
#casestudies .list_article .case:nth-of-type(3n+2) {
		margin: 0 0.7rem 1rem 0.7rem;
}
@media screen and (max-width: 899px) {
		#casestudies .list_article .case:nth-of-type(3n+2) {
				margin: 0;
		}
}
@media screen and (max-width: 899px) {
		#casestudies .list_article .case {
				display: block;
				width: 100%;
		}
}
#casestudies .list_article .case .article {
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		margin: 0 0.3rem;
		padding: 0.5rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
}
@media screen and (max-width: 899px) {
		#casestudies .list_article .case .article {
				display: block;
				margin: 1rem auto;
		}
}
@media screen and (max-width: 640px) {
		#casestudies .list_article .case .article {
				width: 100%;
		}
}
#casestudies .list_article .case .article .img_box {
		position: relative;
		text-align: center;
		width: 40%;
}
@media screen and (max-width: 899px) {
		#casestudies .list_article .case .article .img_box {
				width: 100%;
				text-align: center;
				background: rgba(71, 70, 59, 0.3);
		}
}
#casestudies .list_article .case .article .img_box .group {
		background: #47463b;
		color: #fff;
		text-align: center;
		position: absolute;
		bottom: 0.5rem;
		left: 0;
		width: 100%;
	flex: 1;
}
@media screen and (max-width: 899px) {
		#casestudies .list_article .case .article .img_box .group {
				right: 0;
				left: 0;
				width: 100%;
		}
}
#casestudies .list_article .case .article .text_box {
		/*overflow: hidden;*/
		padding: 0 0.5rem;
}
#casestudies .list_article .case .article .text_box .campany {
		text-align: left;
		font-weight: bold;
		font-size: 1.1rem;
		margin: 0.5rem 0;
		height: 4.5rem;
}
@media screen and (max-width: 899px) {
		#casestudies .list_article .case .article .text_box .campany {
				height: auto;
		}
}
#casestudies .list_article .case .article .text_box .case_lead {
		padding: 0.5rem 0;
}
#casestudies .list_article .case .article .text_box .tag {
		background-color: #EDE7C0;
		border-radius: 5px;
		display: inline-block;
		font-size: 0.9rem;
		margin: 0.3rem;
		padding: 0.3rem;
}
#casestudies .list_article .case .article .text_box .tag_title {
		border-radius: 5px;
		font-size: 0.9rem;
		margin: 0.3rem;
		padding: 0.3rem 0.8rem;
		text-align: left;
		background: #47463b;
		color: #fff;
}

  #casestudies .case_summary {
    margin: 0 5% 3rem 5%;
    border: #47463b 1px solid; }
    #casestudies .case_summary .overview {
      border: none;
      margin: 1rem;
      font-size: 1.1rem; }
      #casestudies .case_summary .overview .title {
        font-weight: bold;
        background-color: #47463b;
        color: #fff;
        padding: .5rem;
        margin: 0 0 .5rem 0; }
      @media screen and (max-width: 767px) {
        #casestudies .case_summary .overview {
          margin: .5rem;
          background: none;
          padding: .5rem 0; } }
    #casestudies .case_summary .box {
      display: flex; }
      @media screen and (max-width: 899px) {
        #casestudies .case_summary .box {
          flex-wrap: wrap; } }
      #casestudies .case_summary .box .inner_box {
        padding: 1rem;
        width: 100%; }
        #casestudies .case_summary .box .inner_box:nth-of-type(2) {
          position: relative;
          text-align: center;
          /* display: table-cell; */
          display: block; }
          #casestudies .case_summary .box .inner_box:nth-of-type(2) img {
            vertical-align: middle; }
          @media screen and (max-width: 899px) {
            #casestudies .case_summary .box .inner_box:nth-of-type(2) {
              /*width: 50%;*/ }
              #casestudies .case_summary .box .inner_box:nth-of-type(2) img {
                width: 100%; } }
          #casestudies .case_summary .box .inner_box:nth-of-type(2) .group {
            background: rgba(51, 51, 51, 0.5);
            color: #fff;
            text-align: center;
            position: absolute;
            padding: .5rem;
            bottom: 15%;
            left: 1rem;
            right: 1rem;
            margin: 0 auto; }
        @media screen and (max-width: 899px) {
          #casestudies .case_summary .box .inner_box:nth-of-type(1) {
            order: 1; }
          #casestudies .case_summary .box .inner_box:nth-of-type(2) {
            text-align: center;
            order: 0; } }
    #casestudies .case_summary .tag_cloud {
      overflow: hidden;
      margin: 0 0 1rem 0; }
      #casestudies .case_summary .tag_cloud .tag_title {
        font-weight: bold;
        background-color: #47463b;
        color: #fff;
        padding: .3rem .5rem; }
      #casestudies .case_summary .tag_cloud .tag {
        background: #F9EFAA;
        border-radius: 5px;
        float: left;
        margin: .3rem;
        padding: .3rem; }
  #casestudies h4 {
    padding: 1rem 0;
    margin: 2rem 0 .5rem 0;
    border-bottom: #47463b 1px dotted; }
    @media screen and (max-width: 767px) {
      #casestudies h4 {
        margin: 3rem 0 .5rem 0; } }
    #casestudies h4.case01_task {
      background: url("../img/casestudies_01_task.png") no-repeat left top;
      padding: 1.3rem 0;
      text-indent: -9999px; }
    #casestudies h4.case02_suggest {
      background: url("../img/casestudies_02_suggest.png") no-repeat left top !important;
      padding: 1.3rem 0;
      text-indent: -9999px; }
      @media screen and (max-width: 767px) {
        #casestudies h4.case02_suggest {
          background: url("../img/casestudies_02_suggest_sp.png") no-repeat left top !important; } }
    #casestudies h4.case02_1_suggest {
      background: url("../img/casestudies_02_1_suggest.png") no-repeat left top;
      padding: 1.3rem 0;
      text-indent: -9999px; }
      @media screen and (max-width: 767px) {
        #casestudies h4.case02_1_suggest {
          background: url("../img/casestudies_02_1_suggest_sp.png") no-repeat left top; } }
    #casestudies h4.case03_benefits {
      background: url("../img/casestudies_03_benefits.png") no-repeat left;
      padding: 1.3rem 0;
      text-indent: -9999px; }
    #casestudies h4.case04_comment {
      background: url("../img/casestudies_04_comment.png") no-repeat left top !important;
      padding: 1.3rem 0;
      text-indent: -9999px; }
    #casestudies h4.info_bt {
      text-align: center;
      border-bottom: none; }
  #casestudies .case_block {
    margin: 0 5% 3rem 5%;
    /*========== .casestudies_text ==========*/
    /*========== end .casestudies_text ==========*/
    /*========== end .casestudies_btn ==========*/ }
    #casestudies .case_block .sub_title {
      font-weight: bold;
      font-size: 1.2rem; }
      #casestudies .case_block .sub_title + P {
        padding: 1.5rem 0 .5rem 0; }
    #casestudies .case_block .casestudies_text {
      padding: 1.5rem 0; }
      #casestudies .case_block .casestudies_text ul {
        margin: 0 0 0 1.5rem; }
        #casestudies .case_block .casestudies_text ul li {
          margin: 0;
          padding: 0; }
        #casestudies .case_block .casestudies_text ul.count_list li {
          list-style: none;
          padding: 0 0 0 2rem; }
          #casestudies .case_block .casestudies_text ul.count_list li.title {
            padding: 0 0 0 1rem;
            margin: 1rem 0 0 0; }
      #casestudies .case_block .casestudies_text p {
        margin: .5rem 0; }
      #casestudies .case_block .casestudies_text .text_line_right {
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 1.1rem;
        margin: 0 0 .5rem 0; }
        #casestudies .case_block .casestudies_text .text_line_right:after {
          content: "";
          flex-grow: 1;
          height: 1px;
          display: block;
          margin: 0 0 0 1rem;
          background: #47463b; }
        #casestudies .case_block .casestudies_text .text_line_right + p {
          margin: 0 0 1.5rem 0; }
    #casestudies .case_block .casestudies_btn {
      margin: 1rem 0 5rem 0;
      display: flex; }
      @media screen and (max-width: 640px) {
        #casestudies .case_block .casestudies_btn {
          display: block; } }
      #casestudies .case_block .casestudies_btn .common_btn {
        background-color: #F3DE28;
        position: relative;
        width: 100%;
        padding: 0;
        text-align: center;
        margin: 0 .5rem; }
        @media screen and (max-width: 640px) {
          #casestudies .case_block .casestudies_btn .common_btn {
            margin: .5rem 0; } }
        #casestudies .case_block .casestudies_btn .common_btn img {
          width: 20%;
          margin: 0 1.5rem 0 0; }
        #casestudies .case_block .casestudies_btn .common_btn a {
          display: block;
          width: 100%;
          padding: 1rem .5rem; }
          @media screen and (max-width: 480px) {
            #casestudies .case_block .casestudies_btn .common_btn a {
              padding: .5rem; } }
          #casestudies .case_block .casestudies_btn .common_btn a:hover {
            background: rgba(71, 70, 59, 0.5);
            text-decoration: none;
            color: #fff; }
            #casestudies .case_block .casestudies_btn .common_btn a:hover img {
              filter: invert(100%); }
    #casestudies .case_block .tag_cloud {
      margin: 1rem 0 0 0;
      overflow: hidden; }
      #casestudies .case_block .tag_cloud .tag_title {
        background-color: #47463b;
        color: #fff;
        padding: .3rem .5rem;
        font-weight: bold; }
      #casestudies .case_block .tag_cloud .tag {
        background: #EDE7C0;
        border-radius: 5px;
        float: left;
        margin: .3rem;
        padding: .3rem; }
    #casestudies .case_block .case_note {
      font-size: .8rem;
      margin: 3rem 0; }
  #casestudies .scenario {
    background: #F3DE28;
    padding: .5rem;
    text-align: center;
    margin: 3rem 10% 1rem 10%; }
    @media screen and (max-width: 767px) {
      #casestudies .scenario {
        margin: 3rem 5% 1rem 5%; } }
    @media screen and (max-width: 480px) {
      #casestudies .scenario {
        margin: 3rem 0 1rem 0; } }
  #casestudies .flow .step {
    margin: 0 auto;
    background: url("../img/step_bg.png") no-repeat bottom center;
    padding: 1rem;
    padding: 0 0 4rem 0;
    display: table;
    width: 80%; }
    @media screen and (max-width: 899px) {
      #casestudies .flow .step {
        display: block;
        width: 100%; } }
    #casestudies .flow .step:last-of-type {
      background-image: none;
      padding: 0 0 2rem 0; }
    #casestudies .flow .step .explain {
      display: table-cell;
      background: #fff;
      width: 60%;
      vertical-align: middle;
      padding: .5rem 0; }
      @media screen and (max-width: 899px) {
        #casestudies .flow .step .explain {
          display: block;
          width: 100%;
          margin: .8rem 0 0 0; } }
    #casestudies .flow .step .title {
      font-weight: bold;
      padding: 0 .5rem 0 4.7rem;
      height: 4rem;
      display: table-cell;
      vertical-align: middle;
      font-size: 1.1rem;
      /*width: 40%*/ }
    #casestudies .flow .step:nth-of-type(1) .title {
      background: url("../img/step01.jpg") no-repeat 0% 50%;
      background-size: 4rem; }
    #casestudies .flow .step:nth-of-type(2) .title {
      background: url("../img/step02.jpg") no-repeat 0% 50%;
      background-size: 4rem; }
    #casestudies .flow .step:nth-of-type(3) .title {
      background: url("../img/step03.jpg") no-repeat 0% 50%;
      background-size: 4rem; }
    #casestudies .flow .step:nth-of-type(4) .title {
      background: url("../img/step04.jpg") no-repeat 0% 50%;
      background-size: 4rem; }
    #casestudies .flow .step:nth-of-type(5) .title {
      background: url("../img/step05.jpg") no-repeat 0% 50%;
      background-size: 4rem; }
    #casestudies .flow .step:nth-of-type(6) .title {
      background: url("../img/step06.jpg") no-repeat 0% 50%;
      background-size: 4rem; }

/*========== IE用202206まで ==========*/
.img_box img.img-fluid {
  width: 100% !important; }

/*========== IE用202206まで ==========*/
/*========== #casestudies 2112 ==========*/
#casestudies {
  background: #fff;
  padding: 1rem 1rem 5rem 1rem;
  margin: 0 0 2rem 0;
  height: 100%;
  /*========== end .main ==========*/
  /*========== end .case_company ==========*/ }
  #casestudies .main {
    margin: 1rem;
    background: #F3DE28;
    /*@include max640 {
    	background: $mainColor !important;
    }*/ }
    #casestudies .main .title {
      /*background: url("../img/casestudies_h3_maintitle.svg") no-repeat 10% 50%;*/
		background: url("../img/casestudies_h3_maintitle.svg") no-repeat 5% 50%;
      font-size: 1.8rem;
      font-weight: bold;
      text-align: left;
      margin: 0 0 2rem 0;
      /*padding: .8rem 0 .8rem 13rem;*/
      padding: .8rem 0 .8rem 8rem;
      color: #47463b;
      min-height: 6rem; }
      @media screen and (max-width: 899px) {
        #casestudies .main .title {
          padding: .8rem 0 .8rem 9rem; } }
      @media screen and (max-width: 767px) {
        #casestudies .main .title {
          font-size: 1.5rem;
          margin: 0 0 1rem 0; } }
      @media screen and (max-width: 640px) {
        #casestudies .main .title {
          padding: .8rem 0;
          text-align: center;
          background: none; } }
  #casestudies .case_company {
    margin: 0 5% 3rem 5%; }
    #casestudies .case_company .box {
      display: flex;
      align-items: center; }
      @media screen and (max-width: 640px) {
        #casestudies .case_company .box {
          display: block; } }
      #casestudies .case_company .box .title {
        background: #47463b;
        color: #fff;
        text-align: center;
        width: 10rem; }
        @media screen and (max-width: 640px) {
          #casestudies .case_company .box .title {
            width: 100%;
            margin: .5rem 0; } }
        #casestudies .case_company .box .title.summary {
          padding: 1.5rem 0; }
          @media screen and (max-width: 640px) {
            #casestudies .case_company .box .title.summary {
              padding: 1rem 0; } }
        #casestudies .case_company .box .title.tagtitle {
          padding: .5rem 0; }
      #casestudies .case_company .box .comment {
        padding: 0 1rem; }
        #casestudies .case_company .box .comment p {
          font-weight: bold;
          font-size: 1.15rem; }
        #casestudies .case_company .box .comment .industry {
          font-size: .8rem;
          font-weight: 100; }
        #casestudies .case_company .box .comment .tag {
          background-color: #F5F5F5;
          border-radius: 5px;
          display: inline-block;
          font-size: .9rem;
          margin: .3rem;
          padding: .6rem; }
    #casestudies .case_company .imgbox {
      padding: 2rem 0; }
      #casestudies .case_company .imgbox img {
        width: 100%; }
  #casestudies .case_block {
    margin: 0 5% 3rem 5%; }
    #casestudies .case_block h4 {
      border-bottom: #47463b 1px dotted;
      padding: 1rem 0 1rem 5rem; }
      #casestudies .case_block h4.task {
        background: url("../img/casestudies_h4_task.svg") no-repeat 0% 50%;
        background-size: contain; }
      #casestudies .case_block h4.suggest {
        background: url("../img/casestudies_h4_suggest.svg") no-repeat 0% 50%;
        background-size: contain; }
      #casestudies .case_block h4.result {
        background: url("../img/casestudies_h4_result.svg") no-repeat 0% 50%;
        background-size: contain; }
      #casestudies .case_block h4.talk {
        background: url("../img/casestudies_h4_talk.svg") no-repeat 0% 50%;
        background-size: contain; }
      #casestudies .case_block h4.info_bt {
        text-align: center;
        border-bottom: none;
        padding: 1rem 0 !important; }
    #casestudies .case_block .demeilt,
    #casestudies .case_block .suggest,
    #casestudies .case_block .result {
      display: flex; }
      @media screen and (max-width: 640px) {
        #casestudies .case_block .demeilt,
        #casestudies .case_block .suggest,
        #casestudies .case_block .result {
          display: block; } }
      #casestudies .case_block .demeilt .box,
      #casestudies .case_block .suggest .box,
      #casestudies .case_block .result .box {
        margin: 1rem .3rem;
        padding: .5rem;
        text-align: center; }
        #casestudies .case_block .demeilt .box p,
        #casestudies .case_block .suggest .box p,
        #casestudies .case_block .result .box p {
          padding: 1rem 0 .5rem 0; }
        #casestudies .case_block .demeilt .box.block2,
        #casestudies .case_block .suggest .box.block2,
        #casestudies .case_block .result .box.block2 {
          width: calc((100% - .5rem) / 2); }
        #casestudies .case_block .demeilt .box.block3,
        #casestudies .case_block .suggest .box.block3,
        #casestudies .case_block .result .box.block3 {
          width: calc((100% - .5rem) / 3); }
        #casestudies .case_block .demeilt .box.block4,
        #casestudies .case_block .suggest .box.block4,
        #casestudies .case_block .result .box.block4 {
          width: calc((100% - .5rem) / 4); }
        @media screen and (max-width: 640px) {
          #casestudies .case_block .demeilt .box.block2, #casestudies .case_block .demeilt .box.block3, #casestudies .case_block .demeilt .box.block4,
          #casestudies .case_block .suggest .box.block2,
          #casestudies .case_block .suggest .box.block3,
          #casestudies .case_block .suggest .box.block4,
          #casestudies .case_block .result .box.block2,
          #casestudies .case_block .result .box.block3,
          #casestudies .case_block .result .box.block4 {
            width: calc(100% - .5rem ); } }
    #casestudies .case_block .demeilt .box {
      background: #EBEBEB; }
      #casestudies .case_block .demeilt .box p .point {
        /*color: #f26628;*/
        font-weight: bold;
        font-size: 1.1rem;
        background: rgba(255, 255, 255, 0);
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(75%, rgba(255, 255, 255, 0)), color-stop(77%, #f26628), color-stop(100%, #f26528));
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f26528', GradientType=0 ); }
    #casestudies .case_block .suggest .box {
      background: #F3DE28; }
      #casestudies .case_block .suggest .box .imgbox {
        background-color: #fff;
        padding: .5rem 0; }
      #casestudies .case_block .suggest .box .point {
        /*color: #f26628;*/
        font-weight: bold;
        font-size: 1.1rem;
        background: rgba(255, 255, 255, 0);
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(75%, rgba(255, 255, 255, 0)), color-stop(77%, #f26628), color-stop(100%, #f26528));
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f26528', GradientType=0 ); }
    #casestudies .case_block .result .box {
      background: #F3DE28; }
      #casestudies .case_block .result .box .imgbox {
        background-color: none;
        padding: 0; }
      #casestudies .case_block .result .box .point {
        color: #47463b;
        font-weight: bold;
        font-size: 1.1rem;
        background: rgba(255, 255, 255, 0);
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(75%, rgba(255, 255, 255, 0)), color-stop(77%, #f26628), color-stop(100%, #f26528));
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #f26628 77%, #f26528 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f26528', GradientType=0 ); }
    #casestudies .case_block .theme {
      padding: 1rem; }
      #casestudies .case_block .theme.sub {
        background-color: #F5F5F5; }
      #casestudies .case_block .theme .title {
        font-weight: bold;
        font-size: 1.2rem;
        padding-bottom: 1rem; }

#casestudies .uline_orange {
		/*color: #f26628;*/
		background: rgba(255, 255, 255, 0);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(75.5%, rgba(255, 255, 255, 0)), color-stop(76%, rgb(242, 102, 40)), color-stop(100%, rgb(242, 101, 40)));
		background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(75.5%, rgba(255, 255, 255, 0)), color-stop(76%, rgb(242, 102, 40)), to(rgb(242, 101, 40)));
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75.5%, rgb(242, 102, 40) 76%, rgb(242, 101, 40) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#f26528", GradientType=0 );
}

#casestudies .doc_dl {
		border: #F3DE28 3px solid;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		padding: 1.2rem;
		margin: 1.8rem 1rem;
}
#casestudies .doc_dl .item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
}
@media screen and (max-width: 767px) {
		#casestudies .doc_dl .item {
				display: block;
		}
}
#casestudies .doc_dl .item .img {
		width: 45%;
		text-align: center;
		padding-right: 1.5rem;
}
@media screen and (max-width: 767px) {
		#casestudies .doc_dl .item .img {
				padding-right: 0;
				width: 100%;
				margin-bottom: 1.5rem;
		}
}
#casestudies .doc_dl .item .text {
		-webkit-box-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
}
@media screen and (max-width: 767px) {
		#casestudies .doc_dl .item .text {
				padding-left: 0;
		}
}
#casestudies .doc_dl .item .text .title {
		font-weight: bold;
		text-align: center !important;
		font-size: 1.2rem;
}
#casestudies .doc_dl .item .text ul {
		margin: 1.5rem 0 0 0;
		padding: 0;
}
#casestudies .doc_dl .item .text ul li {
		list-style: none;
		margin-bottom: 0.5rem;
		text-indent: -1.5rem;
		padding: 0 0 0 1rem;
}
#casestudies .doc_dl .item .text ul li:before {
		font-family: "Font Awesome 5 Free";
		content: " \f00c";
		font-weight: 900;
		color: #f26628;
		margin-right: 0.5rem;
}
#casestudies .doc_dl .item .text ul li:last-child {
		margin-bottom: 0;
}
@media screen and (max-width: 767px) {
		#casestudies .doc_dl .item .text ul li {
				text-indent: -2rem;
				margin-left: 2rem;
		}
}
#casestudies .doc_dl .dl_bt {
		padding-top: 1.5rem;
		text-align: center;
}
#casestudies .doc_dl .dl_bt img {
		width: 40%;
}
#casestudies .doc_dl .dl_bt a:hover {
		opacity: 0.7;
}
/*========== end #casestudies 2112 ==========*/

#casestudies .main_point {
  border: #F3DE28 2px solid;
}
#casestudies .main_point .title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.8rem;
}
#casestudies .main_point .text {
}