@media screen and (min-width: 641px),print {

.development {
width: 100%;
text-align: center;
}
.development .mainimage { text-align: center; margin-bottom: 50px;}
.development .mainimage img { width: 420px; height: auto;}
.development h3 {
font-size: 28px;
line-height: 1.8em;
font-weight: bold;
margin-bottom: 1em;
}
.development p {
font-size: 16px;
line-height: 1.8em;
color: #424242;
margin-bottom: 1em;
}
.development h4 {
font-size: 22px;
line-height: 1.7em;
margin-bottom: 10px;
color: #1d95d4;
font-weight: bold;
background-color: #dceef6;
padding: 1em;
box-sizing: border-box;
width: 1000px;
margin: 0px auto 0 auto;
}

.development #case {
width: 1000px;
margin: 50px auto 0 auto;
}
.development #case dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.development #case dl:after {
content:"";
display: block;
width: 320px;
}
.development #case dl dd {
background-color: #f4f4f4;
width: 320px;
padding: 10px;
box-sizing: border-box;
margin-bottom: 30px;
}
.development #case dl dd .image {
background-color: #FFF;
width: 300px;
height: 200px;
margin: 0px auto 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1em;
}
.development #case dl dd h5 {
font-size: 14px;
line-height: 1.7em;
padding: 1em 0 0.5em 0;
margin: 0px auto 0 auto;
}
.development #case dl dd h6 {
font-size: 22px;
line-height: 1.3em;
font-weight: bold;
}
.development #case dl dd h6 b {
font-size: 16px;
}
.development #case dl dd h6:after {
content: "";
background-color: #1d95d4;
display: block;
height: 2px;
width: 100px;
margin: 10px auto 20px auto;
}
.development #case dl dd p {
text-align: left;
font-size: 15px;
line-height: 1.7em;
padding: 0 0.5em 0 0.5em;
}
.development #case dl dd ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.development #case dl dd ul::after {
display: block;
content:"";
width: 95px;
}
.development #case dl dd ul li {
width: 95px;
font-size: 13px;
line-height: 1.5em;
color: #231815;
background-color: #9ce5ff;
border-radius: 100vh;
padding: 0.3em 0 0.2em 0;
position: relative;
margin-bottom: 10px;
}
.development #case dl dd ul li:before {
content: '';
  display: block;
  width: 6px;
  height: 3px;
  border: 3px solid #3386ff;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  position: absolute;
  left: 5px;
  top: 8px;
}
}



@media screen and (min-width: 0px) and (max-width: 640px) {
.development {
width: 100%;
text-align: center;
}
.development .mainimage {
width: 70%;
text-align: center;
margin: -30px auto 1em auto;
}
.development .mainimage img {
width: 100%;
height: auto;
}
.development h3 {
font-size: 18px;
line-height: 1.3em;
font-weight: bold;
margin-bottom: 1em;
}
.development p {
font-size: 15px;
line-height: 1.3em;
color: #424242;
margin-bottom: 1em;
}
.development h4 {
font-size: 18px;
line-height: 1.3em;
margin-bottom: 10px;
color: #1d95d4;
font-weight: bold;
background-color: #dceef6;
padding: 1em 0.5em 1em 0.5em;
box-sizing: border-box;
width: 100%;
margin: 0px auto 0 auto;
}

.development #case {
width: 90%;
margin: 20px auto 0 auto;
}
.development #case dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.development #case dl dd {
background-color: #f4f4f4;
width: 100%;
padding: 10px;
box-sizing: border-box;
margin-bottom: 30px;
}
.development #case dl dd .image {
background-color: #FFF;
height: auto;
margin: 0px auto 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1em;
}
.development #case dl dd h5 {
font-size: 14px;
line-height: 1.3em;
padding: 1em 0 0.5em 0;
margin: 0px auto 0 auto;
}
.development #case dl dd h6 {
font-size: 18px;
line-height: 1.3em;
font-weight: bold;
}
.development #case dl dd h6 b {
font-size: 14px;
}
.development #case dl dd h6:after {
content: "";
background-color: #1d95d4;
display: block;
height: 2px;
width: 50%;
margin: 10px auto 20px auto;
}
.development #case dl dd p {
text-align: left;
font-size: 15px;
line-height: 1.3em;
padding: 0 0.5em 0 0.5em;
}
.development #case dl dd ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.development #case dl dd ul::after {
display: block;
content:"";
width: 95px;
}
.development #case dl dd ul li {
width: 95px;
font-size: 13px;
line-height: 1.5em;
color: #231815;
background-color: #9ce5ff;
border-radius: 100vh;
padding: 0.3em 0 0.2em 0;
position: relative;
margin-bottom: 10px;
}
.development #case dl dd ul li:before {
content: '';
  display: block;
  width: 6px;
  height: 3px;
  border: 3px solid #3386ff;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  position: absolute;
  left: 5px;
  top: 8px;
}
}