/* service */

#service {
  position: relative;
  text-align: center;

}

#service p {
  text-align: left;
  margin: 0 0 1em 0;
}

#service .title {
  background: #1265b2;
  color: #fff;
  padding: 50px 0 70px 0;
}

#service .title h2 {
  font-size: 1.3rem;
  margin: 0 0 20px 0;
  letter-spacing: 0.1em;
}

#service h3 {
  color: #1265b2;
  letter-spacing: 0.1em;
  margin: 0 0 20px 0;
}

#service .title p {
  margin: 0 0 30px 0;
}

#service .title p br {
  display: none;
}

#service .service-area {
  background: #fff;
  padding: 70px;
  width: 70%;
  margin: -50px auto;
  line-height: 200%;
  box-shadow: 3px 3px 0 0 rgb(210, 220, 220);
  /*影*/
}

#service .service-area ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /* スマホ表示用。flipDownを指定している親要素に指定しないとうまく動かない*/
  transform: translate3d(0, 0, 0);
}

#service .service-area ul li {
  opacity: 0;
  width: 22%;
  padding: 0 0 50px 0;
}

#service .service-area ul li a {
  display: block;
}

#service .service-area figure {
  margin: 1em 0;
  background-color: #f1f1f1;
  padding: 2%;
}

img.pcenter {
  width: 70% !important;
}

.bggray {
  background-color: #e9f1f4;
  padding: 5% 5% 2% 5%;
  border: 5px double #fff;
  margin: 0 0 2% 0;
}

.photowakublue {
  border: 15px double #e9f1f4;
  background-color: #e9f1f4;
  margin: 0 0 2% 0;
}

/*contents*/
/* --- レイアウト設定 --- */
.room-flex-container {
  justify-content: center;
  /* 中央寄せに変更 */
  gap: 40px;
  margin: 100px auto 30px auto;
  width: 90%;
}

/* 基本は2列 */
.polaroid-item {
  width: calc(100% - 20px);
  /* gap考慮 */
  text-align: center;
}

@media screen and (min-width:960px) {

  .room-flex-container {
    display: flex;
    flex-wrap: wrap;
  }

  /* 基本は2列 */
  .polaroid-item {
    width: calc(50% - 20px);
  }

  /* 3枚目だけ下に */
  .room-flex-container .polaroid-item:nth-child(3):last-child {
    width: 60%;
    /* 少し大きめにするとバランス良い */
  }
}

/* --- ポラロイド装飾 --- */
.polaroid-item figure {
  background-color: #fff;
  padding: 15px 15px 35px 15px;
  /* 下を広くしてポラロイド風に */
  margin: 0;
  box-shadow: 5px 8px 20px rgba(0, 0, 0, 0.15);
  /* 影で立体感 */
  border: 1px solid #eee;
  /* ほんの少し傾ける（無造作感） */
  transform: rotate(-1.5deg);
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

/* 右側のポラロイドだけ逆方向に傾ける */
.polaroid-item:nth-child(even) figure {
  transform: rotate(1.5deg);
}

.polaroid-item img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 15px;
  border: 1px solid #f0f0f0;
  /* 写真の縁取り */
}

.polaroid-item figcaption {
  font-family: "Hiragino Sans", "Meiryo", sans-serif;
  font-size: 1.1rem;
  color: #666;
  font-weight: bold;
}

/* 説明文のスタイル */
.description-text {
  line-height: 1.8;
  margin-top: 0px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  /* 読みやすく背景を少し白く */
  border-radius: 8px;
}

@media screen and (min-width:960px) {
  #service .service-area figure {
    width: 50%;
    margin: 1em auto;
  }

  .bggray {
    padding: 3% 5% 2% 5%;
  }
}

@media screen and (max-width:960px) {
  #service .title {
    width: 100%;
  }

  #service .service-area {
    width: 80%;
    padding: 50px 20px 30px 20px;
  }

  #service .service-area ul li {
    width: 40%;
  }

  #service .title p br {
    display: block;
  }

  .contents-area {
    margin: -70px 0 0 0;
  }
}


@media screen and (max-width:550px) {
  #service .service-area {
    width: 90%;
    left: 5%;
  }
}

@media screen and (max-width:400px) {
  #service .service-area {
    width: 100%;
    left: 0;
    font-size: 0.9rem;
  }

}


#inphoto {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}




@media screen and (min-width:768px) {
  #inphoto ul {
    display: flex;
    flex-wrap: wrap;
  }

  #inphoto li {
    width: 50%;
    padding: 2%;
    background-color: #e9f1f4;
    border: 10px solid #fff;
  }
}

.service-area h3.padrt35 {
  padding: 35px 0 0 0;
}

@media screen and (min-width:960px) {
  #contents {
    width: 70%;
    margin: 4em auto;
  }

  .contents-area {
    display: flex;
    flex-wrap: wrap;
  }

  .contents-area section {
    width: 46%;
    margin: 2% 2% 2% 2%;
  }

}

.onegai {
  color: #dc404e;
}

.onegai li {
  margin: 0 0 0 14px;
  list-style: circle;

}