/* width for display content */
  .display-container{
    width: 95%;
    margin-bottom:10px;
  }
  @media screen and (min-width: 769px) {
    .display-container{
        width: 60%;
    }
}

/* 枠線 */
.image-1 {
  max-width: 250px;
  height: auto;
  border: 5px dashed black; /* 枠線 */
  border-radius: 8px; /* 角を丸める効果と併用も可能 */
}
.image-2 {
  max-width: 250px;
  height: auto;
  border: 5px dotted black; /* 枠線 */
  border-radius: 8px; /* 角を丸める効果と併用も可能 */
}
.image-3 {
  max-width: 250px;
  height: auto;
  border: 5px double black; /* 枠線 */
  border-radius: 15px; /* 角を丸める効果と併用も可能 */
}
/* 枠（カスタム） */
.frame-container {
  position: relative; /* Place the frame and image within the container */
  width: 200px; /* Size of the frame */
  height: 200px; /* Size of the frame */
}

.image-background {
  position: absolute; /* Position the image within the container */
  width: 150px; /* Image size: larger than the window but smaller than the frame */
  height: 150px; /* Image size: larger than the window but smaller than the frame */
  top: 50%; /* Center vertically within the container */
  left: 50%; /* Center horizontally within the container */
  transform: translate(-50%, -50%); /* Align the image to the center */
  background-image: url('https://images.unsplash.com/photo-1722631954755-7ee8e1ff4138'); /* Background image */
  background-size: cover; /* Fit the image within the frame */
  background-position: 10% 20%; /* Specify the visible part of the image through the window */
  background-repeat: no-repeat;
}

.frame {
  position: absolute; 
  left: 0;
  width: 100%; 
  height: 100%; 
}




/* シャドウ */
.image-4 {
  max-width: 250px;
  height: auto;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* shadow */
}
.image-5 {
  max-width: 250px;
  height: auto;
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 1); /* shadow */
}
.image-6 {
  max-width: 250px;
  height: auto;
  box-shadow: 25px -25px 0px lightblue; /* shadow */
  margin-top: 25px; /* Reserve space for shadow */
}

/* 傾ける */
.image-7 {
  max-width: 250px;
  height: auto;
  transform: rotate(-5deg); /* Tilting slightly */
  margin-bottom: 10px; /* Reserve space for tilting */
}