/* ============================================================
  
  /pages/
  このディレクトリのCSSは「ページ特有の特有のスタイル」を
  記述してください。
  
  **nature_communit.cssについて**
  本CSSはOur Philosophyページ専用CSSです。
  300行を超えるCSSとなる場合は分割を、分割を検討してください。
  
 nature_communit.css 内ルール
  
  1. Dress機能、ブロックエディタの詳細CSSで制御できないスタイル、
     ページ個別の内容の内容のみ記述すること。
  2. CMS標準の機能で定義できないもののみ記述を可とする。
  3. **共通化できる内容の記述**は絶対にしないでください。
  
============================================================ */

/* 下部標準機能カルーセル調整用 */
.b-carousel_slide.seamless {
  /* 数字を大きくすると遅く、小さくすると速くなります */
  --duration: 160s !important;
  animation-duration: var(--duration) !important;
}

.bg-document {
  overflow: hidden;
}
.a-billboard .site_frame {
  width: 100%;
  max-width: 1200px;
  margin-top: auto;
  margin-bottom: 40px;
}
#a-billboard section {
  width: 868px;
}
#a-billboard svg {
  display: block;
  max-width: 860px;
  width: 86vw;
}
#a-main .c-body {
  line-height: 2.8em;
}
#a-main .-fadeIn {
  animation-duration: 3s;
}
#a-main h2.c-title {
  font-size:39px;
  letter-spacing: 0.2em;
}
#trigger-image,
#top-copy {
  width: 100%;
}
#a-main #top-copy h2 {
  font-size: 46px;
  letter-spacing: 0.2em;
}
＠@media(min-width: 1200px) {
  #top-copy {
    margin-left: 0;
  }
}

#a-main a.btn-default {
  padding: 14px 25px 14px 14px !important;
}

.b-carousel .b-carousel_slide_wrap .column {
  min-width: fit-content !important;
}
.b-carousel .b-carousel_slide_wrap .column .c-body {
  width: max-content;
}
div:has(> #asahi_location_img, > #asahi_location_img_sp) {
  max-width: 100%;
}
#bk98205356 {
  overflow: visible;
}
#animation_parent {
  /*position: relative;*/
  z-index: 2;
  position: absolute;
  width: 100%;
  top: 0;
}
#a-main h2,
#a-main h3,
#a-main p,
#a-main a {
  position: relative;
  z-index: 3;
}
/* アニメーション */
#c-1,
#c-2,
#c-3,
#c-p {
  position: absolute;
  top: 2320px; /* ここは適宜調整 */
  left: 34%;
  right: 0;
  margin: 0 auto;
  width: 1100px;
  z-index: 99;
  stroke: #fff;
  fill-opacity: 0;
  stroke-width: 2px;
}
#bk98382801 br {
  display: none;
} /* 不要な改行によるズレを防止 */
#c-1,
#c-2,
#c-3,
#c-p {
  pointer-events: none; /* マウス操作を邪魔しないように */
}
#Top_back_btn a {
  border: solid 1px #000000;
  margin: 0 auto;
  padding-top: 36px;
  padding-bottom: 34px;
  display: block;
  max-width: 570px;
  line-height: 1.8em;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
svg#arrow {
  width: 18px;
}
@media screen and (min-width: 642px) and (max-width: 1024px) {
  #c-1,
  #c-2,
  #c-3,
  #c-p {
    left: 460px;
  }
}
#bk98063177 {
  --space-custom: auto;
  max-width: 1525px;
}
#carousel01_pc {
  display: grid;
  height: 327px;
  grid-template-columns: 1.57fr 1fr 1fr 1fr;
  grid-gap: 13px;
}
#carousel01_pc.g-column:before,
#carousel01_pc.g-column:after {
  display: none;
}
#carousel01_pc .column {
  display: flex;
  overflow: hidden;
  width: 100%;
}
#carousel01_pc img,
#carousel01_pc source {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ホタル */
@keyframes firefly {
  0% {
    filter: brightness(100%);
  }
  50% {
    filter: brightness(30%);
  }
  100% {
    filter: brightness(100%);
  }
}
.firefly {
  animation: firefly 3s linear infinite;
  width: 100%;
  display: flex;
}

/* 久保田スライド */
#field-frame {
  height: 440px;
  overflow: hidden;
  position: relative;
  opacity: 0;
  margin: 0 auto;
  z-index: 1;
}
.field-landscape {
  width: 1550px;
  height: 440px;
  object-fit: cover;
  transform: translateX(0);
}

@media screen and (max-width: 641px) {
  .bd-webp #a-billboard {
    margin-top: 60px;
  }
  .a-billboard .site_frame {
    margin-bottom: 5px;
  }
  .a-billboard .site_frame .c-body {
    line-height: 0;
  }
  .a-billboard .site_frame .c-body {
    line-height: 0;
  }
  #a-main h2.c-title {
    font-size: 24px;
    letter-spacing: 0.09em;
  }
  #a-main #bk98063170 h2.c-title {
    font-size: 28px;
  }

  #a-main .c-body {
    line-height: 1.8em;
    text-align: justify;
  }
  #a-main .c-body.c-center {
    text-align: center;
  }
  #a-billboard section {
    width: 100%;
  }
  .a-billboard .site_frame {
    margin-bottom: 0;
  }
  #bk98401779 svg {
    width: 78%;
  }
  /* ボタン */
  #bk98063176 .c-right,
  #bk98368044 .c-right,
  #bk98382356 .c-right {
    text-align: center;
  }
  #Top_back_btn a {
    padding-top: 16px;
    padding-bottom: 13px;
  }
  .b-carousel .b-carousel_slide_wrap .c-img {
    height: 195.6px;
    display: flex;
  }
  .b-carousel .b-carousel_slide_wrap .c-img picture {
    display: inline-flex;
  }
  #field-frame {
    width: 100%;
    height: 220px;
  }
  .field-landscape {
    width: 775px;
    height: 220px;
  }
}

/* サークルアニメーション制御 */

@media screen and (min-width: 481px) and (max-width: 641px) {
  #c-1,
  #c-2,
  #c-3,
  #c-p {
    top: 2000px;
    width: 85vw;
    left: 50%;
  }
}
@media screen and (min-width: 381px) and (max-width: 480px) {
  #c-1,
  #c-2,
  #c-3,
  #c-p {
    top: 2120px;
    width: 480px;
    left: 25%;
  }
}
@media screen and (min-width: 320px) and (max-width: 380px) {
  #c-1,
  #c-2,
  #c-3,
  #c-p {
    top: 2250px;
    width: 480px;
    left: 25%;
  }
}