@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/



img{
  max-width:100%;
  height:auto;
  /* filter: saturate(150%); */
}

h2{
  font-size:1.3rem;
  margin:0 0 20px 0;
}

/*写真と文章のセット　装飾のためのCSS*/

.area{
  position:relative;
  margin:0 auto 5% auto;
  padding: 0 20px;
  max-width:1000px;
  width:100%;
}

.area figure{
  position:relative;
  left:0;
  top:0;
  width:40%;
  line-height: 0;
}

.area:nth-child(2n) figure{
  left:63%;
}

.area .box{
  position:absolute;
  top:40%;
  left:35%;
  background:#fff;
  padding:30px;
  box-shadow: 0 0 40px rgba(0,0,0,0.1);
}

.area:nth-child(2n) .box{
  left:inherit;
  right:35%;
}



/*＝＝＝＝＝＝＝＝＝＝＝タブレット以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:768px){
.area figure{
  width:50%;
}
  
footer{
  position:inherit;
}

}

@media screen and (max-width:600px){
h2{
  text-align: center;
}
  
.area:nth-child(2n) figure {
    left: 0;
}
  
.area figure{
  width:100%;
}
.area .box,
.area:nth-child(2n) .box{
  position: relative;
  top: -150px;
  left: 0;
  right: inherit;
  padding:20px;
  margin: 0 auto -30% auto;
}

}

.str {
  background    : linear-gradient(transparent 50%, #8af8b6 65%);  /* ラインマーカーを付ける  */
}

@media (min-width: 1000px) {
  .gather  {
      text-align: center;
  }
}
@media (max-width: 670px) {
  .gather  {
      text-align: left;
  }
}