@charset "utf-8";
/* CSS Document */
html {
  scroll-behavior: smooth;
}
/*トップ*/
.main {
  background-color: #ece1da;
  position: relative;
}
/*トップ背景*/
.top_image {
  width: 100%;
  height: 700px;
  position: relative;
  margin-bottom: 60px;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;

  animation: image-switch-animation 25s infinite;
}

.src1 {
  background-image: url(../images/ennaifukei_shinryoku.jpg);
}
.src2 {
  background-image: url(../images/azumaya.jpg);
}
.src3 {
  background-image: url(../images/kisuge.jpg);
}
.src4 {
  background-image: url(../images/kinran.jpg);
}
.src5 {
  background-image: url(../images/hogokaisagyo.jpg);
}

@keyframes image-switch-animation {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 5s;
}
.image:nth-of-type(3) {
  animation-delay: 10s;
}
.image:nth-of-type(4) {
  animation-delay: 15s;
}
.image:nth-of-type(5) {
  animation-delay: 20s;
}
/*トップタイトル*/
.title {
  position: absolute;
  top: 0;
  left: 0;
  width: 170px;
  height: 190px;
  background-color: #fff;
  text-align: left;
  padding: 24px 0px 0px 24px;
}
.title h1 {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.5em;
  margin-bottom: 16px;
}
.title p {
  font-size: 1.6rem;
  line-height: 1.6em;
}
.top-link {
  color: #000;
}

.top_image_bottom01 {
  text-align: right;
  margin-bottom: 24px;
}
.top_image_bottom01 img {
  width: 80%;
}
.top_image_bottom02 img {
  width: 100%;
}
/*セクションタイトル*/
.section_title {
  margin: 48px auto;
  color: #746a51;
}
.section_title p {
  font-size: 1.8rem;
  padding-bottom: 16px;
}
.section_title h1 {
  font-size: 2.4rem;
  font-weight: 300;
}
/*共通リンクボタン*/
:root {
  --link_color: #746a51;
}
.link_button {
  padding: 0 20px;
  margin: 20px 0;
  position: relative;
}
*,
::before,
::after {
  box-sizing: border-box;
}
a {
  display: inline-block;
  text-decoration: none;
  line-height: 1;
}
.button_style {
  background: var(--link_color);
  color: #fff;
  padding: 1em 4em;
  transition: all 0.2s ease-in;
  position: relative;
}
.button_style::before,
.button_style::after {
  content: "";
  position: absolute;
  transition: all 0.2s ease-in;
}
.button_style::before {
  width: 10px;
  height: 10px;
  right: 20px;
  top: 50%;
  transform: translateY(-40%) rotate(45deg);
  border-top: 1px solid #fff;
}
.button_style::after {
  width: 24px;
  height: 1px;
  right: 18px;
  top: 53%;
  transform: translateY(-40%);
  background: #fff;
}
.button_style:hover::before {
  right: 12px;
}
.button_style:hover::after {
  right: 10px;
  width: 32px;
}
/*浅間山とは*/
.about {
  padding-bottom: 60px;
}
.about_sentence {
  margin: auto 24px;
  text-align: left;
  padding-bottom: 32px;
}
/*浅間山自然保護会とは*/
.ourstory {
  margin-bottom: -80px;
}
.ourstory_bg {
  width: 100%;
  height: 240px;
  background-image: url("../images/hogokaisagyo.jpg");
  background-size: cover;
  background-position: 50% 70%;
  background-repeat: no-repeat;
}
.ourstory_intro {
  position: relative;
  top: -140px;
  background-color: #fff;
  margin: 60px 24px 0 24px;
  padding: 8px 24px 48px;
}
.ourstory_sentence p {
  text-align: left;
}
/*会員インタビュー*/
.interview {
  background-image: url("../images/ennaifukei_shinryoku.jpg");
  background-color: rgba(255, 255, 255, 0.7);
  background-blend-mode: overlay;
  width: 100%;
  height: 700px;
}
.interview_intro {
  position: relative;
  top: 40px;
  background-color: #fff;
  margin: 0 24px;
  padding: 8px 24px 48px;
}
.interview_intro img {
  width: 300px;
}
.interview_sentence p {
  margin-top: 24px;
  text-align: left;
}

/*ギャラリー*/
.gallery {
  margin-bottom: 100px;
}
.gallery_sentence p {
  margin: 24px;
  text-align: left;
}
/* カルーセルの外枠 */
.carousel {
  width: 100%;
  height: 300px;
  display: flex; /* 子要素を横に並べる */
  overflow: hidden; /* はみ出た部分は表示しない */
  margin: 0 auto; /* 水平方向中央寄せ */
}
/* カルーセル内の画像 */
.carousel img {
  width: 100%;
  object-fit: cover;
  margin: 0;
  padding: 0;
  display: block; /* imgタグの改行のすき間を消すため */
}
/* スクロールアニメーションのキーフレーム */
@keyframes scroll {
  /* 初期位置は1個目の画像が左端 */
  0% {
    margin-left: 0;
  }
  /* 1個分左の位置に進めて2個目の画像を左端にする */
  20% {
    margin-left: -100%;
  }
  /* 少しの間上と同じ位置 */
  25% {
    margin-left: -100%;
  }
  /* 2個分左の位置に進めて3個目の画像を左端にする */
  45% {
    margin-left: -200%;
  }
  /* 少しの間上と同じ位置 */
  50% {
    margin-left: -200%;
  }
  /* 以降は上と同様に繰り返し */
  70% {
    margin-left: -300%;
  }
  75% {
    margin-left: -300%;
  }
  95% {
    margin-left: -400%;
  }
  100% {
    margin-left: -400%;
  }
}
/* カルーセルの子要素にスクロールアニメーションを設定 */
.carousel > :first-child {
  animation-name: scroll; /* キーフレーム名 */
  animation-duration: 20s; /* 再生時間全体は20秒 */
  animation-delay: 0s; /* 読込直後から遅延無しで開始 */
  animation-iteration-count: infinite; /* 無限に繰り返す */
}
/*年間イベント情報*/
.event {
  margin-bottom: -80px;
}
.event_bg {
  width: 100%;
  height: 240px;
  background-image: url("../images/kisuge.jpg");
  background-size: cover;
  background-position: 50% 70%;
  background-repeat: no-repeat;
}
.event_intro {
  position: relative;
  top: -140px;
  background-color: #fff;
  margin: 60px 24px 0 24px;
  padding: 8px 24px 48px;
}
.event_sentence p {
  text-align: left;
}
/*浅間山のインスタグラム*/
.information {
  padding-bottom: 60px;
}
.information_sentence p {
  margin: auto 24px;
  text-align: left;
}
.insta_image {
  margin: 0 auto;
}
.insta_image_contents img {
  list-style: none;
  width: 360px;
  height: 360px;
  object-fit: cover;
  padding: 16px;
}
.instagram_link img {
  width: 180px;
  height: auto;
  margin: 24px;
}
/*寄付のお願い*/
.donation {
  margin-bottom: -80px;
}
.donation_bg {
  width: 100%;
  height: 240px;
  background-image: url("../images/azumaya.jpg");
  background-size: cover;
  background-position: 50% 70%;
  background-repeat: no-repeat;
}
.donation_intro {
  position: relative;
  top: -140px;
  background-color: #fff;
  margin: 60px 24px 0 24px;
  padding: 8px 24px 48px;
}
.donation_sentence p {
  text-align: left;
}