@charset "utf-8";
/* CSS Document */

/* ---------- セクションタイトル ---------- */
.section-shell__title {
  margin: 100px auto 0;
}
.section-clean__title {
  margin: 200px auto 0;
}
.section-shell__title img, .section-clean__title img {
  position: relative;
  top: -50px;
}
@media(max-width:1200px) {
  .section-shell__title {
    margin: 50px auto 0;
  }
  .section-clean__title {
    margin: 250px auto 0;
  }
  .section-shell__title img, .section-clean__title img {
    width: 200px;
    top: -40px;
  }
  .section-shell__text, .section-clean__text {
    margin: 0 auto;
    width: 80%;
    box-sizing: border-box;
  }
}
/* ---------- 開催概要 背景・タイトル　---------- */
.section-shell__info, .section-clean__info {
  background-color: #f6f8f3;
  height: 700px;
}
.section-clean__info {
  margin-bottom: 250px;
}
.section-shell__info::after, .section-clean__info::after {
  content: "";
  display: block;
  background-image: url("../images/accent/wave_bg.png");
  background-size: contain;
  background-repeat: repeat-x;
  width: 100%;
  height: 200px;
  position: absolute;
}
.section-shell__info h1, .section-clean__info h1 {
  padding: 100px 0 60px;
}
.section-shell__info h1::before, .section-clean__info h1::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 30px;
  width: 20px;
  background-image: url("../images/accent/emphasis.png");
  background-repeat: no-repeat;
  margin-right: 20px;
}
.section-shell__info h1::after, .section-clean__info h1::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 30px;
  width: 20px;
  background-image: url("../images/accent/emphasis.png");
  background-repeat: no-repeat;
  transform: scale(-1, 1);
  margin-left: 15px;
}
@media(max-width:1200px) {
  .section-shell__info {
    height: 100%;
  }
  .section-clean__info {
    height: 100%;
    margin-bottom: 350px;
  }
}
/* ---------- 　開催概要 詳細　---------- */
.section-shell__info-detail, .section-clean__info-detail {
  display: flex;
  justify-content: center;
}
.section-shell__info-detail table, .section-clean__info-detail table {
  width: 600px;
  font-size: 1.6rem;
  line-height: 2.9rem;
  background-color: #fcfcfc;
}
.section-shell__info-detail table tr, .section-clean__info-detail table tr {
  border-bottom: solid 1px #01598A;
}
.section-shell__info-detail table tr:last-child, .section-clean__info-detail table tr:last-child {
  border-bottom: none;
}
.section-shell__info-detail table th, .section-clean__info-detail table th {
  background-color: #53A6B8;
  color: #fcfcfc;
  font-weight: 400;
  padding: 10px;
  vertical-align: middle;
  width: 100px;
}
.section-shell__info-detail table td, .section-clean__info-detail table td {
  padding: 10px 30px;
  text-align: left;
}
.section-shell__info-detail iframe, .section-clean__info-detail iframe {
  width: 300px;
  height: 365px;
  margin-left: 60px;
  filter: sepia(.3);
}
.section-shell__info-detail a{
  color:#01598A;
  text-decoration: none;
}
@media(max-width:1200px) {
  .section-shell__info-detail, .section-clean__info-detail {
    margin: 0 auto;
    width: 80%;
    box-sizing: border-box;
    display: block;
  }
  .section-shell__info-detail table, .section-clean__info-detail table {
    width: 100%;
    font-size: 1.2rem;
    line-height: 2.4rem;
  }
  .section-shell__info-detail iframe, .section-clean__info-detail iframe {
    width: 100%;
    height: 250px;
    margin: 50px auto 0;
  }
}
/* ---------- 貝殻交換会　写真 ---------- */
.section-shell__photo {
  margin: 80px auto 120px;
}
.section-shell__photo img {
  border-radius: 20px;
  height: 300px;
  width: 600px;
  object-fit: cover;
}
@media(max-width:1200px) {
  .section-shell__photo {
    width: 80%;
    box-sizing: border-box;
    max-width: 600px;
    max-height: 300px;
  }
  .section-shell__photo img {
    width: 100%;
  }
}
/* ---------- 海岸清掃　写真 ---------- */
.section-clean__photo {
  margin: 80px auto 150px;
  display: flex;
  justify-content: center;
}
.section-clean__photo img {
  height: 100%;
  object-fit: cover;
}
.section-clean__photo img:first-child {
  width: 400px;
  position: relative;
  top: -30px;
  left: -50px;
}
.section-clean__photo img:last-child {
  width: 300px;
  position: relative;
  top: 60px;
  left: 50px;
}
@media(max-width:800px) {
  .section-clean__photo {
    width: 80%;
    box-sizing: border-box;
    margin: 80px auto 250px;
    display: block;
    max-width: 600px;
    max-height: 300px;
  }
  .section-clean__photo img {
    width: 100%;
  }
  .section-clean__photo img:first-child {
    width: 400px;
    position: relative;
    left: -100px;
  }
  .section-clean__photo img:last-child {
    width: 300px;
    position: relative;
    top: -20px;
    left: 150px;
  }
}
/* ---------- リンク位置調整 ---------- */
.anchor-clean {
  display: block;
  padding-top: 70px;
  margin-top: -70px;
}