@charset "utf-8";

.title{
  height: 310px;
  background-image: url(..//images/case/bgcase.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #4211ae;
  text-shadow: 1px 1px 10px #dde7eb;
}

.title h1{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 32px;
  font-weight: bold;
}

.title p{
  font-size: 13px;
  margin-top: 15px;
}

.case{
  display: flex;
  justify-content: space-between;
  width: 930px;
  max-width: 90%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  align-items: flex-start;
  
  position: relative; 
  margin-bottom: 30px;
}

.case img{
  height: 400px;
    position: relative;
  z-index: 2; /* 丸（z-index: 1）よりも大きい数字にする */
  margin-top: 20px;
}

.thumb-img {
  display: block;
  margin: 10px auto;
  max-width:100%;
  height: auto;
  position: relative;
}

.reverse img{
 height: 400px;
    position: relative;
  z-index: 2; /* 丸（z-index: 1）よりも大きい数字にする */
  margin-right: 20px;
}

.case-toptext{
  margin-top: 80px;
    position: relative;
  z-index: 2; /* 丸（z-index: 1）よりも大きい数字にする */
}

.case-toptext h2{
 font-size: 22px;
 font-weight: bold;
 line-height: 30px;
}

.case-toptext h2{
 font-size: 22px;
 font-weight: bold;
 line-height: 30px;
}

.case-toptext p{
  font-size: 15px;
  line-height: 28px;
  margin-top: 10px;
  margin-bottom: 30px;
}

.case-toptext h2::after{
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background-color: #230484;
  margin-top: 20px;
}

.case-text{
  margin-top: 20px;
  margin-right: 60px;
}

.case-text h3{
 font-size: 18px;
 font-weight: bold;
 line-height: 30px;
}


.case-text p{
  font-size: 15px;
  line-height: 28px;
  margin-top: 10px;
  margin-bottom: 10px;
    position: relative;
  z-index: 2; /* 丸（z-index: 1）よりも大きい数字にする */

}

.reverse {
  flex-direction: row-reverse;
  
}

.reverse .case-text{
    margin-left: 40px;
    margin-right: 0;
      position: relative;
  z-index: 2; /* 丸（z-index: 1）よりも大きい数字にする */

}

.bg-circle1 {
  width: 350px;
  height: 350px;
  background-color: #dde7eb; /* 薄い黄色 */
  border-radius: 50%; /* 正円にする */
  /* 【超重要】自由な場所に配置できるようにする */
  position: absolute; 
  /* 親要素（.card）の右下を基準にして配置 */
  bottom: -30px;
  right: 300px;
  /* 【超重要】マイナスの値を指定して、文字の後ろ側に回す */
  z-index: 1; 
}

.bg-circle2 {
  width: 250px;
  height: 250px;
  background-color:#dde7eb; /* 薄い黄色 */
  border-radius: 50%; /* 正円にする */
  /* 【超重要】自由な場所に配置できるようにする */
  position: absolute; 
  /* 親要素（.card）の右下を基準にして配置 */
  bottom: 20px;
  right: 515px;
  /* 【超重要】マイナスの値を指定して、文字の後ろ側に回す */
  z-index: 1; 
}

.bg-circle3 {
    width: 350px;
  height: 350px;
 background-color:#dde7eb; /* 薄い黄色 */
  border-radius: 50%; /* 正円にする */
  /* 【超重要】自由な場所に配置できるようにする */
  position: absolute; 
  /* 親要素（.card）の右下を基準にして配置 */
  bottom: -40px;
  right: -40px;
  /* 【超重要】マイナスの値を指定して、文字の後ろ側に回す */
  z-index: 1; 
}

.bg-circle4 {
  width: 250px;
  height: 250px;
  background-color: #dde7eb; /* 薄い黄色 */
  border-radius: 50%; /* 正円にする */
  /* 【超重要】自由な場所に配置できるようにする */
  position: absolute; 
  /* 親要素（.card）の右下を基準にして配置 */
   bottom: 100px;
  right: 800px;
  /* 【超重要】マイナスの値を指定して、文字の後ろ側に回す */
  z-index: 1; 
}



@media (max-width:800px){
  
.case{
margin-right: auto;
      display: block;
    margin-top: 40px;}


.case-text{
  margin-top: 50px;
  margin-bottom: 50px;
      margin-left: 15px;
    margin-right: 15px;

}

.case img{
  display: block;   /* 画像をブロック要素にする */
  margin-left: auto;
  margin-right: auto;
 width: 90%;
  height: auto;
}

.case-toptext h2{
 font-size: 22px;
 font-weight: bold;
 line-height: 30px;
   text-align: center;

}

.case-toptext h2::after{
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background-color: #230484;
  margin-top: 20px;
     text-align: center;

}


.case-toptext p{
  font-size: 15px;
  line-height: 28px;
  margin-top: 10px;
  margin-bottom: 50px;
    text-align: center;

}

.case-toptext h2::after{
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background-color: #230484;
  margin-top: 20px;
    text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;

}


.case-text p{
  margin-top: 10px;
}

.reverse{
  flex-direction: row-reverse;
}


.reverse .case-text{
    margin-left: 15px;
    margin-right: 15px;
}

.bg-circle1 {
width: 140px;
  height: 140px;
  background-color:  #dde7eb; 
  border-radius: 50%; 
  position: absolute; 
  bottom: 110px;
  right: 50px;
  z-index: 1;
}

.bg-circle2 {
  width: 140px;
  height: 140px;
  background-color:  #dde7eb; 
  border-radius: 50%; 
  position: absolute; 
  bottom: -30px;
  right:200px;
  z-index: 1;
}

.bg-circle3 {
  width: 140px;
  height: 140px;
  background-color:  #dde7eb; 
  border-radius: 50%; 
  position: absolute; 
  bottom: 200px;
  right: 20px;
  z-index: 1;
}

.bg-circle4 {width: 140px;
  height: 140px;
  background-color:  #dde7eb; 
  border-radius: 50%; 
  position: absolute; 
  bottom: 10px;
  right: 20px;
  z-index: 1;
}
 

}