@charset "utf-8";


.fullcontainer{
  width: 100%;
	margin: 120px auto 120px auto;
}

.container{
	width: 1200px;
	margin: 120px auto 120px auto;
}

@media only screen and (max-width: 1200px){
  .container{
  	margin: 60px auto;
    width:100%;
    padding: 0 20px ;
  }
  .fullcontainer{
  	margin: 60px auto;
  }
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

@media (min-width: 768px) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}

/**********************************************
共通
**********************************************/

#h_Area{
	height: 480px;
	position: relative;
  margin-top: 100px;
}

#single-h_Area{
  margin-top: 100px;
}

@media screen and (max-width: 1200px){
  #h_Area{
    padding: 0 20px 0;
  }
}

@media screen and (max-width: 768px) {
  #h_Area{
    height: 260px;
  }
  #single-h_Area{

  }
}

.h_inner{
	max-width: 1100px;
	margin-right: auto;
	margin-left: auto;
	min-height: 480px;
}

@media screen and (max-width: 768px) {
  .h_inner{
		min-height: 260px;
		display: flex;
		align-items: center;
  }
}

.headerImg {
  width: 70%;
  height: 100%; 
  background-size: cover;
  background-position: center;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 300px 0 0 300px;
}

h1.h1_harea{
	position:absolute;
	z-index:1;
	font-size:32px;
	font-weight: bold;
	top: 43%;
	left: 0;
}

h1.h1_harea span{
  display: block;
  font-size: 64px;
}

@media screen and (max-width: 768px) {
  h1.h1_harea {
		font-size: 21px;
		position: static;
  }
  h1.h1_harea span{
    font-size: 32px;
  }
}

#breadcrumb,
#single_breadcrumb{
  width: 100%;
	height: 30px;
}

#breadcrumb ul,
#single_breadcrumb{
	height:  24px;
	padding:  2px 0 2px;
}

#breadcrumb li,
#single_breadcrumb li{
	float: left;
}

@media only screen and (max-width: 1360px){
  #breadcrumb,
  #single_breadcrumb{
  	display: none;
  }
}

h2{
	font-size: 54px;
  font-weight: bold;
  margin-bottom: 40px;
}

h2.h2_center{
  text-align: center;
}

h2.h2_center span{
  font-size:24px; 
  display: block;
}

@media screen and (max-width: 768px) {
  h2{
    font-size: 24px;
    margin-bottom: 20px;
  }
  h2.h2_center span{
    font-size:16px; 
  }
}

h3{
	width:100%;
	margin-bottom: 30px;
	font-size: 32px;
	font-weight: bold;
}

h3 span{
  display: block;
  font-size: 18px;
  margin-left: 66px;
}

h3::before{
  content: '';
  width: 30px;
  height: 30px;
  border: 7px solid #3CA8E1;
  border-radius: 50%;
  display: inline-block;
  line-height: 30px;
  vertical-align: middle;
  margin-right: 16px;
}

@media screen and (max-width: 768px){
  h3{
    margin-bottom: 15px;
    font-size: 21px;
  }
  h3 span{
    font-size: 14px;
  }
  h3::before{
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    border: 5px solid #3CA8E1;
  }
}


/**********************************************
news・column
**********************************************/
.news_container{
  width: 960px;
  margin: 0 auto;
}

@media screen and (max-width: 960px){
  .news_container{
    width: 90%;
    margin: 0 auto;
  }
}

.pagination {
  display: flex;
  margin-top: 120px;
  width: 100%;
  justify-content: space-between;
}

.pagination a{
  text-decoration: none;
  color: #222;
}

@media screen and (max-width: 768px){
  .pagination {
    gap: 20px;
    margin-top: 60px;
  }
  .pagination a{
    font-size: 12px;
  }
}

.pagination__btn>* {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination__btn--prev>*::before {
  content: '';
  width: 69px;
  height: 69px;
  background: url("../img/page/prev.png") no-repeat;
  background-size: contain;
}

.pagination__btn--next>*::after {
  content: '';
  width: 69px;
  height: 69px;
  background: url("../img/page/next.png") no-repeat;
  background-size: contain;
}

@media screen and (max-width: 768px){
  .pagination__btn--prev>*::before,
  .pagination__btn--next>*::after{
    width: 40px;
    height: 40px;
  }
}

.pagination__btn a {
  color: "#222";
}

.single_date{
  display: block;
}

.pageNation {
	text-align: center;
	margin: 0 auto;
}
.pageNation ul {
    margin: 0;
}
.pageNation li {
	font-size: 16px;
	margin-right: 20px;
	display: inline-block;
	color: #242537;
	text-align: center;
	border:1px solid #707070;
	border-radius: 50%;
  overflow: hidden;
  line-height: 50px;
  width: 50px;
  height: 50px;
}
.pageNation li.prev,
.pageNation li.next {
  width: 80px;
  height: 80px;
  vertical-align: middle;
}
@media screen and (max-width: 768px){
  .pageNation li{
    line-height: 30px;
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
  .pageNation li.prev,
  .pageNation li.next{
    width: 30px;
    height: 30px;
  }
}
.pageNation li.active {
	color: #fff;
	background-color: #069D6E;
  border:1px solid #069D6E;
}
.pageNation li a {
	display: block;
	line-height: 50px;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.pageNation li a:hover {
	text-decoration: none;
	color: #fff;
	background-color: #069D6E;
  border:1px solid #069D6E;
}

.archiveLink{
  padding: 20px 80px;
  border: 1px solid #707070;
}

@media screen and (max-width: 768px){
  .archiveLink{
    padding: 10px;
  }
  .pageNation li a {
    line-height: 30px;
    font-size: 12px;
  }
}

.columnList{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 1200px){
  .columnList{
    justify-content: space-between;
  }
}

@media screen and (max-width: 768px){
  .columnList{
    width: 90%;
    margin: 0 auto;
    justify-content: space-between;
  }
}

.columnList .column__box{
  width: 350px;
  margin-bottom: 80px;
}


@media screen and (min-width: 1201px){
  .columnList a:nth-child(3n-1) .column__box{
    margin: 0 5% 80px;
  }
}

.columnList a{
  text-decoration: none;
  color: #222;
  display: contents;
}

@media screen and (min-width: 1201px){
  .columnList .column__box{
    height: -webkit-fill-available;
  }
}

@media screen and (max-width: 1200px){
  .columnList .column__box{
    width:45%;
  }
}

@media screen and (max-width: 768px){
  .columnList .column__box{
    width: 100%;
    margin-bottom: 30px;
  }
}

.pickWrap{
  width: 100%;
  padding: 80px 0;
  background: #EEF2F2;
}

.column-pickWrap{
  width: 100%;
  padding: 80px 0;
}

@media screen and (max-width: 768px){
  .pickWrap,
  .column-pickWrap{
    padding: 40px 0 40px;
  }
  .sp2col .worksList .worksItem:last-child{
    display: none;
  }
}

@media screen and (max-width: 1200px){
  .sp2col .columnList a:last-child{
    display: none;
  }
}

.viewImg{
  float: right;
}

/*----------- column ------------*/
.single-column__wrap{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.single-column__content{
  width: 75%;
  max-width: 860px!important;
}

.single-column__side{
  width: 300px;
  padding: 10px;
  background: #F1F2F3;
}

.single-column__side-title{
  font-size: 21px;
  font-weight: bold;
  margin-bottom: 24px;
  text-align: center;
}

@media screen and (max-width: 1200px){
  .single-column__content{
    width: 100%;
    max-width:100%!important;
    margin-bottom: 80px;
  }
  .single-column__side{
    width: 100%;
  }
}

.popular__list{
  width: 100%;
  padding-left: 0!important;
}

.popular__item{
  list-style: none;
}

.popular__item a{
  width: 100%;
  margin-bottom: 24px;
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  color: #222!important;
  text-decoration: none!important;
}

.popular__thumbnail{
  width: 100px;
  height: 90px;
}

.popular__thumbnail img{
  width: 100%;
  height: 100%!important;
  object-fit: cover;
}

.popular__txt{
  width: calc(100% - 110px);
}

@media screen and (max-width: 1200px){
  .popular__list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .popular__item {
    width: 48%;
  }
}

@media screen and (max-width: 768px){
  .popular__item {
    width: 100%;
  }
  .popular__item a{
    margin-bottom: 16px;
  }
}

/*----------- works ------------*/
.pc_web-capture{
	position: absolute;
	left:50%;
	overflow-y: scroll;
	overflow-x: hidden;
	transform: translatex(-49.9%);
}

.sp_web-capture{
	position: absolute;
	left:50%;
	overflow-y: scroll;
	overflow-x: hidden;
	transform:translateX(-49.9%);
}

.web_mock ::-webkit-scrollbar {
	display: none;
	-webkit-appearance: none;
}

.pc_web-mock img,.sp_web-mock img{margin: 0!important;}

picture{display: block;}
		
@media screen and (min-width: 1360px) {
	.web_mock{
		position: relative;
		width: 1200px;
		height: 650px;
		margin: 0 auto 120px;
	}

	.pc_web-mock{
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.pc_web-capture{
		top: 30px;
		width: 675px;
		height: 425px;
	}

	.pc_web-capture img{max-width: 670px;}

	.sp_web-mock{
		position: absolute;
		right: 0;
		bottom: -30px;
	}

	.sp_web-capture{
		top: 70px;
		width: 255px;
		height: 460px;
	}

	.sp_web-capture img{max-width: 255px;}

}

@media screen and (max-width:1359px) {
	.web_mock{
		width: 100%;
		text-align: center;
	}

	.pc_web-mock img{width: 100%;}
	.sp_web-mock img{width: 50%;}
	
	.pc_web-mock{
		position: relative;
		width: 100%;
		margin: 0 auto 60px;
	}

	.pc_web-capture{
		top: 5%;
		width: 65%;
		height: 70%;
	}

	.pc_web-capture img{max-width: 100%;}

	.sp_web-mock{
		position: relative;
		width: 100%;
		margin: 0 auto 60px;
	}

	.sp_web-capture{
		top: 12%;
		width: 70%;
		height: 75%;
	}

	.sp_web-capture img{width: 62%;}
}

.basic_full{
	width: 100%;
  border-top:  1px solid #CECECE;
}

.basic_full th{
  font-weight: bold;
}

.basic_full th,
.basic_full td{
  padding: 20px;
  border-bottom: 1px solid #CECECE;
}

@media screen and (max-width: 768px){
  .basic_full th,
  .basic_full td{
    padding: 10px;
  }
}

.basic_full th{
  width: 20%;
  text-align: center;
}

.basic_full td a{
  color: #3CA8E1;
}

.basic_full td a::after{
  content: url("../img/page/works_link.png");
  display: inline-block;
  margin-left: 10px;
  line-height: 19px;
  vertical-align: middle;
}

.entry-work li{
	float: left;
	margin:0 0 80px;
}

@media screen and (min-width: 1360px) {
	.entry-work li{	width:380px;
	                height:400px}

	.entry-work li:nth-child(3n-1){margin: 0 80px 80px;}

	.work_eye img{
		width: 400px;
		height: 300px;
		object-fit: cover;
	}
}

@media screen and (max-width: 1359px) {
	.entry-work li{	width:48%;}

	.entry-work li:nth-child(2n){margin: 0 0 80px 4%;}

	.work_eye img{
		width: 100%;
		object-fit: cover;
		margin-bottom: 30px;
	}
}

.worksPont{
  width: 100%;
  padding: 20px;
  background: #F9F9F9;
}

.worksPont{
  margin-bottom: 80px;
}

.worksPont__ttl{
  font-size: 24px;
  margin-bottom: 16px;
  font-weight: bold;
}

@media screen and (max-width: 768px){
  .worksPont{
    margin-bottom: 40px;
  }
  .worksPont__title{
    font-size: 16px;
  }
}

/*---------------------------
PAGE common
----------------------------*/
.page_contact{
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  max-width: 900px;
  background: #3CA8E1;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.page_contact_mail{
  display: block;
  width: 80%;
  max-width: 320px;
  position: relative;
}

.page_contact_mail::after{
  content: url("../img/page/page-contact-arrow.png");
  height: 24px;
  display: block;
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
}

@media screen and (max-width: 768px){
  .page_contact_mail{
    margin-top: 10px;
  }
}

.flowList{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

.flowList li{
  width: 48%;
  height: auto;
  margin-bottom: 40px;
  padding: 40px;
  background: #069D6E;
  color: #fff;
  border-radius: 10px;
  display: flex;
  position: relative;
}

@media screen and (max-width: 768px){
  .flowList{
    width: 90%;
    margin: 0 auto;
  }
  .flowList li{
    width: 100%;
    margin-bottom: 20px;
    padding: 15px 15px 15px 40px;
  }
}

.flowList__ttl{
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
}

.flowList__no {;
  width: 35px;
  padding: 10px 0;
  height: 70px;
  border-radius: 0 35px 35px 0;
  line-height: 45px;
  background: #fff;
  display: block;
  position: absolute;
  left: 0;
  top: 20px;
  color: #069D6E;
  font-size: 40px;
  font-weight: bold;
}

@media screen and (max-width: 768px){
  .flowList__ttl{
    font-size: 21px;
    margin-bottom: 10px;
    border-bottom: 1px solid #fff;
  }
  .flowList__no{
    width: 20px;
    height: 40px;
    border-radius: 0 20px 20px 0;
    font-size: 18px;
    line-height: 20px;
  }
}

/*---------------------------
COMPANY
----------------------------*/

.comWrap{
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

.comInfo{
  width: 800px;
}

.comInfo__ttl{
  margin-bottom: 40px;
  font-size: 50px;
  font-weight: bold;
}

@media screen and (max-width: 1200px){
  .comInfo{
    width: 70%;
  }
  .comInfo__img{
    width: 28%;
    height: auto;
  }
  .comInfo__ttl{
    font-size: 32px;
  }
}

@media screen and (max-width: 768px){
  .comWrap{
    flex-wrap: wrap;
  }
  .comInfo{
    width: 100%;
  }
  .comInfo__img{
    width: 70%;
    max-width: 320px;
    height: auto;
    margin: 20px auto 0;
  }
  .comInfo__ttl{
    font-size: 24px;
  }
}

.sdgs__img{
  display: block;
  margin: 0 auto;
}

.floatR{
  float: right;
}

.mapArea{
  width: 100%;
  height: 260px;
}

@media screen and (max-width: 768px){
  .mapArea{
    height: 180px;
  }
}

.mapArea iframe{
  width: 100%;
  height: 100%;
}

.historyList{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-left: 1px solid #D5DEE2;
  margin-left: 10px;
}

.historyList dt{
  width: 15%;
  padding-left: 20px;
  position: relative;
  font-weight: bold;
}

.historyList dt::before{
  content: '';
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background: #D5DEE2;
  position: absolute;
  left: -10px;
  top: 0;
}

.historyList dd{
  width: 85%;
  margin-bottom: 60px;
}

@media screen and (max-width: 768px){
  .historyList dt{
    width: 30%;
  }
  .historyList dd{
    width: 70%;
    margin-bottom: 30px;
  }
}

.cliant_col2{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.cliant_col2 li{
  width: 48%;
  padding: 20px;
  background: #F1F2F3;
}

.cliant{
  margin-bottom: 30px;
  padding: 5px 0;
  background: #242424;
  color: #fff;
  text-align: center;
  font-size: 24px;
}

.cliant_list{
  line-height: 2;
}

@media screen and (max-width: 768px){
  .cliant_col2{
    width: 90%;
    margin: 0 auto;
  }
  .cliant_col2 li{
    width: 100%;
    padding: 10px;
  }
  .cliant_col2 li:first-child{
    margin-bottom: 20px;
  }
  .cliant{
    margin-bottom: 10px;
    font-size: 18px;
  }
}

/*---------------------------
policy
----------------------------*/
.policy ul li{
  display: list-item;
  list-style: disc;
  list-style-position: inside;
}


/*---------------------------
marketing
----------------------------*/

.mk_nayami{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.mk_nayami__img{
  width: 40%;
}

.mk_nayami__txt{
  width: 55%;
}

.mk_nayami__ttl{
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 30px;
}

.mk_nayami ul li{
  margin-bottom: 20px;
}

.mk_nayami ul li::before{
  content: '';
  width: 10px;
  height: 10px;
  line-height: 10px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 50%;
  background: #069D6E;
}

@media screen and (max-width: 768px){
  .mk_nayami__img{
    margin-bottom: 20px;
    text-align: center;
  }
  .mk_nayami__img,
  .mk_nayami__txt{
    width: 100%;
  }
  .mk_nayami__ttl{
    text-align: center;
    font-size: 21px;
  }
  .mk_nayami ul{
    width: 90%;
    margin: 0 auto;
  }
}

.strongList{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.strongList li{
  max-width: 280px;
  width: calc(100% / 4 - 10px);
  height: auto;
}

.strongList__box{
  height: 100%;
  padding: 10px;
  border:1px solid #707070;
  border-radius: 10px;
}

.strongList__ttl{
  font-size: 21px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-weight: bold;
  border-bottom: 4px solid #3CA8E1;
}

@media screen and (max-width: 1200px){
  .strongList__ttl{
    font-size: 18px;
  }
  .strongList li{
    margin-bottom: 20px;
    max-width:  calc(100% / 2 - 10px);
    width: calc(100% / 2 - 10px);
  }
}


.movList{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.movList li{
  width: 32%;
  margin-bottom: 80px;
  max-width: 350px;
}

.movList__ttl{
  padding: 10px 0;
  font-size: 24px;
  font-weight: bold;
}

@media screen and (max-width: 768px){
  .movList li{
    width: 48%;
    margin-bottom: 40px;
    max-width: 48%;
  }
  .movList__ttl{
    font-size: 18px;
  }
}

.drone_contact{
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  max-width: 900px;
  background: #F25F11;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  position: relative;
}


.drone_contact::after{
  content: url("../img/page/movie/drone_link.png");
  height: 24px;
  display: block;
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
}

/*---------------------------
CONTACT
----------------------------*/

.fukidashi{
  width: 90%;
  position: relative;
  display: block;
  margin: 1em auto;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  background: #069D6E;
  text-align: center;
  font-size: 21px;
  border-radius: 20px;
  font-weight: bold;
}

@media screen and (max-width: 768px){
  .fukidashi{
    font-size: 16px;
  }
}

.fukidashi:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #069D6E;
}

.fukidashi p {
  margin: 0;
  padding: 0;
}

.form_wrap{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.form_info{
  width: 580px;
  padding: 40px;
  box-shadow: 3px 3px 8px #00000029;
}

@media screen and (max-width: 1200px){
  .form_info{
    width: 48%;
  }
}

@media screen and (max-width: 768px){
  .form_info{
    width: 100%;
    padding: 15px;
    margin-bottom: 80px;
  }
}

.form_info__ttl{
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  color: #069D6E;
  text-align: center;
}

@media screen and (max-width: 768px){
  .form_info__ttl{
    font-size: 18px;
  }
}

.form_info__img{
  display: block;
  margin: 0 auto 10px;
}

.form_info__center{
  text-align: center;
}

.form_cf7{
  width: 48%;
}

@media screen and (max-width: 768px){
  .form_cf7{
    width: 100%;
  }
}

dl.contact_area{
  width: 100%;
}

dl.contact_area dt{
  font-weight: bold;
}

dl.contact_area dt span{
  font-size: 14px;
  background: #3CA8E1;
  color: #fff;
  padding: 0 10px;
  margin-left: 20px;
  float: right;
}

@media screen and (max-width: 768px){
  dl.contact_area dt span{
    font-size: 12px;
  }
}

dl.contact_area dd{
  margin-bottom: 30px;
}

.contact_center{
  text-align: center;
}

/*---------------------------
WEBSITE
----------------------------*/

.workFlow{
  background: url(../img/page/website/flow-back.png) no-repeat;
  padding: 80px 0 60px;
  color: #fff;
  margin-bottom: 120px;
  background-size: cover;
}

.workFlow h3.long_en{color: #fff!important;}
.workFlow h3.long_en::first-letter{color: #fff!important;}

.guide{
  font-size: 24px;
  font-weight: bold;
  padding: 10px 20px;
  border: 2px solid #fff;
  display: inline-block!important;
}

@media screen and (max-width: 768px){
  .guide{
    font-size: 18px;
    padding: 10px;
  }
}

.workflowList{
  color: #000;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 30px 0 60px;
}

.workflowList li{
  width: 320px;
  background: #fff;
  padding: 20px 10px 10px;
  box-sizing: border-box;
  filter: drop-shadow(5px 2px 4px rgba(0,0,0,0.4));
}

.GrnText{
  color: #208144;
  font-size: 32px;
  font-weight: bold;
  border-bottom: 3px dotted #000;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .workflowList{
    flex-wrap: wrap;
    margin: 10px 0 30px;
  }
  
  .workflowList li{
    width: 100%; 
    margin-bottom: 20px;
  }
  .workFlow {
    background-size: cover;
  }
  .option li{
    width: 100%;
  }
  
  .option li img{
    width:100%; 
  }
  .GrnText{
    font-size: 21px;
  }
}

.strengths {
  max-width: 1200px;
  margin: 0 auto;
}

.strength {
  display: flex;
  align-items: stretch;
  background: #f9f9f9;
}

.strength:last-child {
  border-bottom: none;
}

.strength-ttl{
  height: 100%;
  margin: 10px 0;
  font-size: 24px;
  font-weight: bold;
  width: 20%;
  border-right: 1px solid #424242;
  text-align: center;
  vertical-align: middle;
}

@media screen and (max-width: 768px){
  .strength-ttl{
    width: 100%;
    border: none;
    font-size: 18px;
  }
}

.strength-number {
  background: #3bb1e0;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
  vertical-align: middle;
}

@media screen and (max-width: 768px){
  .strength-number{
    padding: 5px;
  }
}

.strength-number span{
  font-weight: bold;
  margin-left: 10px;
}

.strength-number span:first-child {
  font-size: 14px;
  text-transform: uppercase;
}

.strength-number span:last-child {
  font-size: 36px;
  line-height: 1.2;
}

@media screen and (max-width: 768px){
  .strength-number span:last-child {
    font-size: 18px;
  }
}

.strength-content {
  flex: 1;
  padding: 10px 20px;
}

.strength-content h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 10px;
}

.strength-content p {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 768px) {
  .strength {
    flex-direction: column;
  }
  .strength-number {
    min-width: auto;
    width: 100%;
  }
  .strength-content {
    padding: 10px;
  }
}

.caseList{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:stretch;
}

.caseList li{
  width: 30%;
  margin-bottom: 20px;
  display: flex;
}

@media screen and (max-width: 768px){
  .caseList li{
    width: 48%;
  }
}

.caseList__box{
  width: 100%;
  height: 100%;
  background: #EEF2F2;
  padding: 10px 20px;
  border-radius: 10px;
}

.caseList__ttl{
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.caseList__ttl span{
  background: #EEF2F2;
  padding-right: 20px;
}

.caseList__ttl::after{
  content: '';
  width: 100%;
  height: 1px;
  background: #3CA8E1;
  display: block;
  position: absolute;
  left: 0;
  top:50%;
  z-index: -1;
}

.caseList p{
  padding: 0 20px;
  font-size: 21px;
  font-weight: bold;
}

@media screen and (max-width: 768px){
  .caseList p{
    font-size: 18px;
    padding: 0 10px;
  }
}

.chance{
  width: 100%;
  font-size: 32px;
  text-align: center;
  font-weight: bold;
}

.chance span{
  color: #069D6E;
}

@media screen and (max-width: 768px){
  .chance{
    font-size: 21px;
  }
}

.ws-option{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ws-option li{
  width: 24%;
  margin-bottom: 60px;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #707070;
  border-radius: 10px;
}

@media screen and (max-width: 1200px){
  .ws-option li{
    width: 48%;
    padding: 10px;
    margin-bottom: 20px;
  }
}

.ws-option li img{
  width: 100%;
}

.ws-option_title{
  font-size: 22px!important;
  border-bottom: 2px dotted #000;
}

.option_title{
  display: block;
  margin-bottom: 1em;
  border-bottom: 2px dotted #000;
  line-height: 2em;
  font-weight: bold;
}

.works4col{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

.works4col li{
  width: calc(100% / 4 - 10px);
  padding: 10px;
  margin-bottom: 20px;
  background: #EEF2F2;
}

@media screen and (max-width: 768px){
  .works4col{
    width: 90%;
    margin: 0 auto;
  }
  .works4col li{
    width: calc(100% / 2 - 10px);
  }
}

.works4col li img{
  display: block;
  margin: 0 auto;
}

.works4col_ttl{
  margin-bottom: 16px;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 768px){
  .pcView{
    display: none;
  }
}