@charset "UTF-8";
/*色*/
/*icon*/
/*背景画像*/
/*メディアクエリ*/
/*トランジション*/
/*色*/
/*icon*/
/*背景画像*/
/*メディアクエリ*/
/*トランジション*/
/*----------------- 全体的なもの ----------------- */
/*全ての要素にborder-boxを適用*/
*,
*:before,
*:after {
  box-sizing: border-box;
  font: inherit;
  color: inherit;
}

html {
  font-family: YuMincho, "游明朝体", Yu Mincho, "游明朝", serif;
  font-size: 62.5%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

[id] {
  scroll-margin-top: 60px;
}

body {
  margin: 0;
  padding: 0;
  letter-spacing: 0.1rem;
  opacity: 0;
  background: #def6e6;
  background: linear-gradient(0deg, #def6e6 0%, lightyellow 39%, white 100%);
}

img {
  width: 100%;
  max-width: 100%;
}

ul {
  list-style-type: none;
}

ol li {
  list-style-type: none;
  counter-increment: cnt;
}

.sec-disc {
  width: 100%;
  max-width: 920px;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.sec-disc ul li {
  color: #08435E;
  font-size: 1.6rem;
  line-height: 3rem;
}

.sec-disc2 {
  width: 100%;
  max-width: 540px;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.sec-disc2 ol li {
  margin-bottom: 2rem;
}

@media screen and (max-width: 780px) {
  .sec-disc {
    max-width: 80%;
    padding: 1rem;
  }
}

@media screen and (max-width: 480px) {
  .sec-disc {
    max-width: 100%;
    padding: 1rem;
  }
  .sec-disc p {
    padding: 0 2rem;
  }
}

/* ----------------- テキスト関連 ----------------- */
h1 {
  font-size: 2.8rem;
  color: #08435E;
  line-height: 5.4rem;
  font-weight: 500;
}

h2 {
  font-size: 2.4rem;
  color: #08435E;
  line-height: 4.8rem;
  font-weight: 500;
}

h3 {
  font-size: 2.1rem;
  color: #08435E;
  line-height: 4.5rem;
  font-weight: 500;
  font-feature-settings: "palt" 1;
}

h4 {
  font-size: 1.8rem;
  color: #08435E;
  line-height: 3.2rem;
  font-weight: 400;
  font-feature-settings: "palt" 1;
}

p {
  font-size: 1.6rem;
  color: #08435E;
  line-height: 3rem;
  font-weight: 400;
}

.mini {
  font-size: 1.2rem;
  color: #08435E;
  line-height: 2.8rem;
  font-weight: 500;
}

.bold {
  font-weight: 600;
}

a {
  text-decoration: none;
}

sup {
  vertical-align: super;
  font-size: smaller !important;
}

/* ----------------- ボタン関連 ----------------- */
.btn-row{
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}
.btn-prim {
  margin:3rem;
}

.btn-prim a {
  width: 280px;
  height: 40px;
  color: #fff;
  background-color: #08435E;
  border: #08435E solid 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 1.8rem;
  text-align: center;
  transition: all ease-in-out .5s;
}

.btn-prim a:hover {
  color: #08435E;
  background-color: #fff;
}

/*反転btn*/
.btn-rev {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.btn-rev a {
  width: 280px;
  height: 40px;
  color: #08435E;
  background-color: #fff;
  border: #fff solid 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 1.8rem;
  text-align: center;
  transition: all ease-in-out .5s;
}

.btn-rev a:hover {
  color: #fff;
  background-color: #08435E;
}

/*iconつきbtn*/
.btn-afer-icon {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.btn-afer-icon a {
  display: inline-block;
  height: 40px;
  color: #fff;
  background-color: #08435E;
  border: #08435E solid 2px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 1.8rem;
  text-align: center;
  transition: all ease-in-out .5s;
}

.btn-afer-icon a::after {
  content: "";
  background-image: url("../img/pdf-icon.svg");
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
}

.btn-afer-icon a:hover {
  color: #08435E;
  background-color: #fff;
}

/*色違いボタン*/
.btn-orange {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.btn-orange a {
  width: 280px;
  height: 40px;
  color: #fff;
  background-color: #ff8c1a;
  border: #ff8c1a solid 2px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 1.8rem;
  text-align: center;
  transition: all ease-in-out .5s;
}

.btn-orange a:hover {
  color: #ff8c1a;
  background-color: #fff;
}

/* ----------------- スクロールスナップ ----------------- */
.container {
  overflow: auto;
}

/* ----------------- table ----------------- */
table {
  border: #08435E solid 1.5px;
  width: 100%;
  background-color: #fff;
  padding: 1.5rem;
}

table caption {
  color: #08435E;
  font-size: 1.4rem;
  padding: 0.5rem 0;
}

table thead {
  background-color: #08435E;
}

table thead tr th {
  color: #fff;
  font-size: 1.4rem;
  padding: 0.5rem 0;
}

table tbody tr td {
  font-size: 1.4rem;
  text-align: center;
  padding: 0.5rem 0;
  border: #08435E solid 0.5px;
}

table.nouen {
  margin: 2rem 0;
}

/* ----------------- article ----------------- */
article.page-hero {
  display: block;
  z-index: -10;
}

article.page-hero .cont-hero {
  position: relative;
}

article.page-hero .cont-hero img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 540px;
  object-fit: cover;
  margin-top: 50px;
}

article.page-hero .deco-yama-w {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -32%);
  -webkit-transform: translate(-50%, 32%);
  -ms-transform: translate(-50%, -32%);
}

article {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) minmax(auto, 920px) minmax(2rem, 1fr);
}

article > * {
  grid-column: 2;
}

article section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ----------------- スクロールフェードイン ----------------- */
.f-in {
  opacity: 0;
}

/* ----------------- cta-btns ----------------- */
.cta-btns {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 6%;
  right: -250px;
  overflow: hidden;
  z-index: 100;
  opacity: 0;
  transition: all ease-in-out .5s;
}

.cta-btns .cta-btn a {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 250px;
  height: 50px;
  font-size: 1.2rem;
  color: #fff;
  padding-left: 3px;
}

.cta-btns.appear {
  opacity: 1;
  right: -200px;
}

.cta-btn:first-of-type {
  border-radius: 8px 0 0 0;
}

.cta-btn:last-of-type {
  border-radius: 0 0 0 8px;
}

.cta-btn.bt-btn {
  background-color: #034e35;
  transition: all ease-in-out .5s;
}

.cta-btn.bt-btn a::before {
  content: '';
  width: 45px;
  height: 45px;
  background-image: url(../img/arrow-up-circle.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.cta-btn.bt-btn:hover {
  background-color: #e6b422;
}

.cta-btn.seeding-btn {
  background-color: #21634d;
  transition: all ease-in-out .5s;
}

.cta-btn.seeding-btn a::before {
  content: '';
  width: 45px;
  height: 45px;
  background-image: url(../img/bud-icon-wh.svg);
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 1.5rem;
}

.cta-btn.seeding-btn:hover {
  background-color: #e6b422;
}

.cta-btn.mainenance-btn {
  background-color: #3f7865;
  transition: all ease-in-out .5s;
}

.cta-btn.mainenance-btn a::before {
  content: '';
  width: 45px;
  height: 45px;
  background-image: url(../img/mori-icon.svg);
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 3px;
}

.cta-btn.mainenance-btn:hover {
  background-color: #e6b422;
}

.cta-btn.contact {
  background-color: #568877;
  transition: all ease-in-out .5s;
}

.cta-btn.contact a::before {
  content: '';
  width: 45px;
  height: 45px;
  background-image: url(../img/mail.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.cta-btn.contact:hover {
  background-color: #e6b422;
}

.cta-btns.cta-open {
  position: fixed;
  right: 0px;
}

.cta-btns-sp {
  display: none;
}

/* ----------------- cta-btns レスポンシンブ ----------------- */
@media screen and (max-width: 480px) {
  .cta-btns-sp {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 100;
  }
  .cta-btns-sp .cta-btn-sp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 50px;
  }
  .cta-btns-sp .cta-btn-sp a img {
    width: 50px;
    height: 50px;
  }
}

.cta-btn-sp.bt-btn {
  background-color: #034e35;
  transition: all ease-in-out .5s;
}

.cta-btn-sp.bt-btn:hover {
  background-color: #e6b422;
}

.cta-btn-sp.seeding-btn {
  background-color: #21634d;
  transition: all ease-in-out .5s;
}

.cta-btn-sp.seeding-btn:hover {
  background-color: #e6b422;
}

.cta-btn-sp.mainenance-btn {
  background-color: #3f7865;
  transition: all ease-in-out .5s;
}

.cta-btn-sp.mainenance-btn:hover {
  background-color: #e6b422;
}

.cta-btn-sp.contact {
  background-color: #568877;
  transition: all ease-in-out .5s;
}

.cta-btn-sp.contact:hover {
  background-color: #e6b422;
}

@media screen and (max-width: 480px) {
  .cta-btns {
    display: none;
  }
}

/* ----------------- deco-bud-mini 見出し装飾 ----------------- */
.deco-bud-mini {
  margin-top: 1rem;
  margin-bottom: 5rem;
  position: relative;
}

.deco-bud-mini h3 {
  font-size: 1.8rem;
  display: inline-block;
  line-height: 3rem;
}

.deco-bud-mini h3:first-child {
  padding-left: 3rem;
}

.deco-bud-mini h3::before {
  content: '';
  width: 35px;
  height: 35px;
  display: inline-block;
  position: absolute;
  top: 3%;
  left: 3%;
  background: url("../img/bud-icon.svg") no-repeat 50% 50%;
  transform: translateX(-50%);
}

.deco-bud-mini h3::after {
  content: '';
  display: block;
  width: 0%;
  height: 3px;
  background-color: #08435E;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  transition: all ease-in-out 1.5s;
}

.deco-bud-mini p {
  font-size: 1.4rem;
  text-align: center;
}

.deco-bud-mini h3.active::after {
  width: 100%;
}

@media screen and (max-width: 480px) {
  .deco-bud-mini h3 {
    font-size: 1.8rem;
    display: inline-block;
    line-height: 3rem;
  }
}

/*色*/
/*icon*/
/*背景画像*/
/*メディアクエリ*/
/*トランジション*/
/* ----------------- G nav関連 ----------------- */
header {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 60px;
  background-color: #08435E;
  padding: 1rem;
  display: block;
  position: fixed;
  z-index: 100;
  filter: drop-shadow(1px 3px 5px rgba(0, 3, 3, 0.4));
  -webkit-filter: drop-shadow(1px 3px 5px rgba(0, 3, 3, 0.4));
  -moz-filter: drop-shadow(1px 3px 5px rgba(0, 3, 3, 0.4));
  -ms-filter: drop-shadow(1px 3px 5px rgba(0, 3, 3, 0.4));
}

header .nav-container {
  position: relative;
  display: grid;
  grid-template-columns: 20% 65% 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "nav-logo nav-list-cont nav-sp";
}

header .nav-logo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  grid-area: nav-logo;
}

header .nav-logo h1 {
  color: #fff;
}

header .nav-logo h1 img {
  width: 100%;
  max-width: 180px;
}

header .nav-list-cont {
  grid-area: nav-list-cont;
}

header .nav-list-cont .nav-list {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  margin-top: 1rem;
}

header .nav-list-cont .nav-list li {
  position: relative;
}

header .nav-list-cont .nav-list li a {
  font-size: 1.3rem;
  color: #fff;
  transition: all ease-in-out .5s;
}

header .nav-list-cont .nav-list li a:hover {
  color: #e6b422;
}

header li.pc-list a::before {
  content: '';
  display: block;
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 25px;
  height: 25px;
  background: url("../img/bud-icon-wh.svg") no-repeat 50% 50%;
  opacity: 0;
  transition: all ease-in-out .5s;
}

header li.pc-list a:hover::before {
  opacity: 1;
}

header li.pc-list.active a::before {
  content: '';
  display: block;
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 25px;
  height: 25px;
  background: url("../img/bud-icon-wh.svg") no-repeat 50% 50%;
  opacity: 1;
}

li.pc-list.dd-menu ul.inner-menu {
  position: absolute;
  top: 30px;
  left: 0;
}

li.pc-list.dd-menu ul.inner-menu li {
  background-color: #fff;
  border-bottom: #08435E solid 0.5px;
  width: 200px;
  height: 0px;
  opacity: 0;
  text-align: center;
  padding-top: 5px;
  transition: all ease-in-out .5s;
}

li.pc-list.dd-menu ul.inner-menu li a {
  color: #08435E;
}

li.pc-list.dd-menu ul.inner-menu li a::before {
  content: none;
}

li.pc-list.dd-menu ul.inner-menu li:hover {
  background-color: #AAC4B2;
}

li.dd-menu.sub-open ul.inner-menu li {
  height: 40px;
  opacity: 1;
}

.nav-sp {
  display: none;
}

@media screen and (max-width: 1200px) {
  header .nav-container {
    grid-template-columns: minmax(250px, 720px) 1fr;
    grid-template-areas: "nav-logo nav-sp";
  }
  header .nav-container .nav-list-cont {
    display: none;
  }
  header .nav-container .nav-sp {
    display: block;
  }
}

.sp-menu {
  width: 100%;
  position: absolute;
  top: 50px;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all ease-in-out .5s;
}

.sp-menu ul li a {
  padding-top: 5px;
  height: 0px;
  display: block;
  background-color: #fff;
  text-align: center;
  border-bottom: #08435E solid 0.5px;
  transition: all ease-in-out .5s;
}

.sp-menu ul li a:hover {
  background-color: #AAC4B2;
}

.sp-menu ul li .open-btn {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 1rem;
  transition: all ease-in-out .3s;
}

.open-btn.rotate-icon {
  transform: rotate(45deg);
}

#sp-menu-btn {
  display: block;
  position: absolute;
  top: 0;
  right: 0.8rem;
  width: 50px;
  height: 44px;
  cursor: pointer;
  transition: .5s;
}

#sp-menu-btn .inner-line {
  display: block;
  position: absolute;
  left: 0;
  width: 35px;
  height: 2px;
  background-color: #ffffff;
  transition: 1s;
  border-radius: 4px;
}

#line1 {
  top: 20%;
}

#line2 {
  top: 50%;
}

#line3 {
  bottom: 15%;
}

#line1.line-1 {
  transform: rotate(-45deg);
  top: 50%;
}

#line2.line-2 {
  opacity: 0;
}

#line3.line-3 {
  transform: rotate(45deg);
  bottom: 45%;
}

.dd-menu-sp {
  position: relative;
}

.sp-menu.sp-menu-open {
  opacity: 1;
  visibility: visible;
}

.sp-menu.sp-menu-open ul li a {
  height: 40px;
}

.sp-menu-bk {
  opacity: 0;
  visibility: hidden;
  transition: all ease-in-out .5s;
}

.sp-menu-bk li {
  height: 0px;
  transition: all ease-in-out .5s;
}

.sp-menu-bk.sp-sub-open {
  opacity: 1;
  visibility: visible;
}

.sp-menu-bk.sp-sub-open li {
  height: 40px;
}

.sp-menu-bk.sp-sub-open li a {
  background-color: #fffacd;
}

/*色*/
/*icon*/
/*背景画像*/
/*メディアクエリ*/
/*トランジション*/
/* ----------------- footer 関連 ----------------- */
footer {
  background-color: #08435E;
  position: relative;
}

footer .footer-nyoi {
  width: 250px;
  position: absolute;
  top: -30%;
  left: -0.5%;
}

footer p {
  color: #fff;
}

footer p.copy {
  font-size: 10px;
  text-align: center;
}

.footer-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.footer-wrap .white-logo {
  width: 100%;
  max-width: 295px;
}

.footer-wrap .footer-nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

.footer-wrap .footer-nav a {
  color: #fff;
  font-size: 1.2rem;
  margin-left: 2rem;
  transition: all ease-in-out .5s;
}

.footer-wrap .footer-nav a:hover {
  color: #e6b422;
}

/* ----------------- footer レスポンシブ ----------------- */
@media screen and (max-width: 1200px) {
  footer .footer-nyoi {
    position: absolute;
    top: -17%;
    left: -0.5%;
  }
}

@media screen and (max-width: 1200px) {
  .footer-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 480px) {
  footer {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 480px) {
  .footer-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: initial;
  }
  .footer-wrap .white-logo {
    max-width: 230px;
  }
  .footer-wrap p {
    font-size: 1.4rem;
  }
  .footer-wrap .footer-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .footer-wrap .footer-nav a {
    margin: 1rem 0;
  }
}

/*色*/
/*icon*/
/*背景画像*/
/*メディアクエリ*/
/*トランジション*/
/* ----------------- Hero-image 関連 ----------------- */
#hero {
  width: 100%;
  height: 100vh;
  background-image: url("../img/hero.jpg");
  background-repeat: no-repeat;
  background-position: center;
  object-fit: cover;
  z-index: -1;
}

#hero .hero-wrap h2 img {
  width: 32%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

/* ----------------- Hero-image レスポンシブ ----------------- */
@media screen and (max-width: 1200px) {
  #hero .hero-wrap h2 img {
    width: 50%;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -30%);
    -webkit-transform: translate(-50%, -30%);
    -ms-transform: translate(-50%, -45%);
  }
}

@media screen and (max-width: 780px) {
  #hero {
    background-position: 60% 50%;
  }
  #hero .hero-wrap h2 img {
    width: 60%;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -48%);
    -webkit-transform: translate(-50%, -48%);
    -ms-transform: translate(-50%, -48%);
  }
}

@media screen and (max-width: 480px) {
  #hero {
    background-position: 65% 50%;
  }
  #hero .hero-wrap h2 img {
    width: 80%;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -48%);
    -webkit-transform: translate(-50%, -48%);
    -ms-transform: translate(-50%, -48%);
  }
}

/* ----------------- 協会概要 関連 ----------------- */
#keshiki {
  padding-top: 10rem;
  padding-bottom: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  position: relative;
}

#keshiki .news-btn {
  position: absolute;
  top: -16%;
  right: 0;
}

#keshiki .news-btn .news-svg {
  position: relative;
  transition: all ease-in-out .5s;
  fill: #fff;
}

#keshiki .news-btn .news-svg svg {
  width: 200px;
  transition: all ease-in-out .5s;
}

#keshiki .news-btn p {
  position: absolute;
  top: 30%;
  right: 55%;
  transition: all ease-in-out .5s;
}

.news-btn:hover .news-svg svg {
  fill: #AAC4B2;
}

.news-btn:hover p {
  color: #fff;
}

.deco-yama {
  margin-top: 5rem;
  margin-bottom: 5rem;
  display: inline-block;
  position: relative;
}

.deco-yama h3 {
  text-align: center;
}

.deco-yama h3::before {
  content: '';
  display: block;
  width: 100px;
  height: 50px;
  position: absolute;
  top: -80%;
  left: 50%;
  background: url("../img/nyoi-simple.svg") no-repeat 50% 50%;
  transform: translateX(-50%);
}

.deco-yama h3::after {
  content: '';
  display: block;
  width: 0%;
  height: 3px;
  background-color: #08435E;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  transition: all ease-in-out .8s;
}

.deco-yama h3.active::after {
  width: 100%;
}

.deco-yama-w {
  margin-top: 5rem;
  margin-bottom: 5rem;
  display: inline-block;
  position: relative;
}

.deco-yama-w h3 {
  color: #fff;
}

.deco-yama-w h3::before {
  content: '';
  display: block;
  width: 100px;
  height: 50px;
  position: absolute;
  top: -50%;
  left: 50%;
  background: url("../img/nyoi-simple-w.svg") no-repeat 50% 50%;
  transform: translateX(-50%);
}

.deco-yama-w h3::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

.deco-yama-w p {
  color: #fff;
  text-align: center;
}

/* ----------------- deco-yama 関連 レスポンシブ ----------------- */
@media screen and (max-width: 480px) {
  .deco-yama {
    margin-top: 3rem;
    margin-bottom: 0;
    max-width: 85%;
  }
  .deco-yama h3 {
    font-size: 1.8rem;
    line-height: 3rem;
  }
  .deco-yama h3::before {
    position: absolute;
    top: -120%;
    left: 50%;
  }
  .deco-yama h3::after {
    background-color: #08435E;
  }
}

/* ----------------- 景色を維持 関連 ----------------- */
#view h2 {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 540px;
  position: relative;
}

#view h2 img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 540px;
  object-fit: cover;
}

#view h2 .sec-catch {
  width: 32%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#view .view-flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 540px;
  background-color: #fff;
}

#view .view-flex .keshiki-disc.swiper-container {
  width: 50%;
  height: 540px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#view .view-flex .keshiki-disc.swiper-container .swiper-slide {
  height: auto;
  background-color: #fff;
}

#view .view-flex .keshiki-disc.swiper-container .swiper-slide .disc-cont {
  height: 100%;
}

#view .view-flex .keshiki-disc.swiper-container .swiper-slide .disc-cont h4 {
  text-align: center;
  margin-bottom: 2rem;
}

#view .view-flex .keshiki-disc.swiper-container .swiper-slide .disc-cont p {
  width: 60%;
  margin: 0 auto;
}

#view .view-flex .syokugai-img.swiper-container {
  width: 50%;
  height: 540px;
  background-color: #AAC4B2;
}

#view .view-flex .syokugai-img.swiper-container .swiper-slide {
  width: 100%;
  height: auto;
}

#view .view-flex .syokugai-img.swiper-container .swiper-slide img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pin-spacer {
  z-index: -1 !important;
}

.syokugai-img {
  position: relative;
}

.syokugai-img .swip-icon {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, -2%);
  -webkit-transform: translate(-50%, -2%);
  -ms-transform: translate(-50%, -2%);
  width: 60px;
  z-index: 200;
}

.syokugai-img .swip-icon img {
  width: 100%;
}

/* ----------------- 景色を維持 レスポンシブ ----------------- */
@media screen and (max-width: 1200px) {
  #view .view-flex .keshiki-disc.swiper-container .swiper-slide .disc-cont p {
    width: 90%;
  }
}

@media screen and (max-width: 780px) {
  #view .view-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-top: 2rem;
  }
  #view .view-flex .keshiki-disc.swiper-container {
    width: 100%;
    height: auto;
  }
  #view .view-flex .keshiki-disc.swiper-container .swiper-slide {
    height: auto;
  }
  #view .view-flex .keshiki-disc.swiper-container .swiper-slide .disc-cont {
    width: 100%;
    height: 100%;
    padding-bottom: 5rem;
  }
  #view .view-flex .keshiki-disc.swiper-container .swiper-slide .disc-cont h4 {
    font-size: 1.4rem;
  }
  #view .view-flex .keshiki-disc.swiper-container .swiper-slide .disc-cont p {
    width: 90%;
    font-size: 1.2rem;
    line-height: 2.5rem;
  }
  #view .view-flex .syokugai-img.swiper-container {
    width: 100%;
    height: auto;
  }
  #view .view-flex .syokugai-img.swiper-container .swiper-slide {
    height: auto;
  }
  #view .view-flex .syokugai-img.swiper-container .swiper-slide img {
    height: 100%;
  }
}

@media screen and (max-width: 480px) {
  #view h2 .sec-catch {
    width: 75%;
  }
}

@media screen and (max-width: 480px) {
  .syokugai-img .swip-icon {
    width: 45px;
  }
}

/* ----------------- あたらしい森づくり 関連 ----------------- */
#remake h2 {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 540px;
  position: relative;
}

#remake h2 img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 540px;
  object-fit: cover;
}

#remake h2 .sec-catch {
  width: 32%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.remake-bottom {
  padding-top: 5rem;
  padding-bottom: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background: #aac4b2;
  background: linear-gradient(0deg, #aac4b2 0%, white 20%, white 80%, #aac4b2 100%);
}

.remake-bottom .remake-nyoi {
  width: 200px;
  position: absolute;
  top: -4.8%;
  right: 0;
}

.remake-box {
  margin-top: 0;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 920px;
}

.remake-box .remake-card {
  width: 100%;
  max-width: 360px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  position: relative;
  overflow: hidden;
}



.remake-box .remake-card a {
}

.remake-box .remake-card p {  
    font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.5rem;
  color: #fff;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transition: all ease-in-out .5s;
  z-index: 10;
  padding: 0.5rem 0;
  background-color: rgba(0, 0, 0, 0.5); }}



.remake-box .remake-card  img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 540px;
  object-fit: cover;
  transition: all ease-in-out .5s;
  
}

.remake-card:hover p {
  color: #08435E;
  background-color: #fff;
  padding: 0.5rem 0;
}

.remake-card:hover img {
  transform: scale(1.05);
}

.l-top-box img {
  border-radius: 8px 0 0 0;
}

.r-top-box img {
  border-radius: 0 8px 0 0;
}

.l-bottom-box img {
  border-radius: 0 0 0 8px;
}

.r-bottom-box img {
  border-radius: 0 0 8px 0;
}

/* ----------------- あたらしい森づくり レスポンシブ ----------------- */
@media screen and (max-width: 780px) {
  .remake-bottom .remake-nyoi {
    position: absolute;
    top: -50px;
    right: 0;
  }
}

@media screen and (max-width: 480px) {
  .remake-bottom .remake-nyoi {
    position: absolute;
    top: -2.8%;
    right: -3%;
  }
}

@media screen and (max-width: 480px) {
  .remake-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .remake-box .remake-card {
    padding: 0 1rem;
  }
  .remake-box .remake-card a {
    width: calc(100% - 2rem);
  }
}

@media screen and (max-width: 480px) {
  .l-top-box img {
    border-radius: 8px 8px 0 0;
  }
}

@media screen and (max-width: 480px) {
  .r-top-box img {
    border-radius: 0 0 0 0;
  }
}

@media screen and (max-width: 480px) {
  .l-bottom-box img {
    border-radius: 0 0 0 0;
  }
}

@media screen and (max-width: 480px) {
  .r-bottom-box img {
    border-radius: 0 0 8px 8px;
  }
}

@media screen and (max-width: 480px) {
  #remake h2 .sec-catch {
    width: 75%;
  }
}

/* ----------------- さまざまな取り組み 関連 ----------------- */
#works h2 {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 540px;
  position: relative;
}

#works h2 img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 540px;
  object-fit: cover;
}

#works h2 .sec-catch {
  width: 32%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#works .works-bottom {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100%;
  background: #def6e6;
  background: linear-gradient(0deg, #def6e6 0%, lightyellow 39%, white 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 5rem;
  position: relative;
}

#works .works-bottom .works-nyoi {
  width: 200px;
  position: absolute;
  top: -50px;
  right: 0;
}

.jigyo-wrap {
  margin-top: 5rem;
  margin-bottom: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.deco-bud {
  margin-top: 5rem;
  margin-bottom: 5rem;
  position: relative;
}

.deco-bud h3 {
  display: inline-block;
  line-height: 3rem;
}

.deco-bud h3::before {
  content: '';
  width: 50px;
  height: 50px;
  display: inline-block;
  position: absolute;
  top: -13%;
  left: 5%;
  background: url("../img/bud-icon.svg") no-repeat 50% 50%;
  transform: translateX(-50%);
}

.deco-bud h3::after {
  content: '';
  display: block;
  width: 0%;
  height: 3px;
  background-color: #08435E;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  transition: all ease-in-out 1.5s;
}

.deco-bud p {
  text-align: center;
}

.deco-bud h3.active::after {
  width: 100%;
}

.jigyo-bottom {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: auto 60%;
  width: 100%;
  max-width: 920px;
  padding: 1rem;
}

.jigyo-disc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding: 0 2rem;
}

.jigyo-disc p {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.jigyo-img {
  width: 100%;
  padding-top: 67%;
  position: relative;
}

.jigyo-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  padding: 2rem;
}

/* ----------------- さまざまな取り組み レスポンシブ ----------------- */
@media screen and (max-width: 780px) {
  #works .works-nyoi {
    position: absolute;
    top: -2.5%;
    right: 0;
  }
}

@media screen and (max-width: 480px) {
  #works h2 .sec-catch {
    width: 75%;
  }
  #works .works-nyoi {
    position: absolute;
    top: -1.9%;
    right: 0;
  }
}

@media screen and (max-width: 480px) {
  .jigyo-wrap {
    margin-top: initial;
  }
  .jigyo-wrap .deco-bud h3 {
    font-size: 1.8rem;
    line-height: 3rem;
  }
}

@media screen and (max-width: 480px) {
  .jigyo-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .jigyo-bottom .deco-bud {
    order: 0;
  }
  .jigyo-bottom .jigyo-disc {
    order: 2;
    padding: 0 1rem;
  }
  .jigyo-bottom .jigyo-disc p {
    font-size: 1.4rem;
    line-height: 2.5rem;
  }
  .jigyo-bottom .jigyo-img {
    order: 1;
  }
  .jigyo-bottom .jigyo-img img {
    padding: initial;
  }
}

/* ----------------- info 関連 ----------------- */
#info {
  padding-top: 10rem;
  padding-bottom: 15rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  background-color: #AAC4B2;
}

#info .info-wrap {
  width: 100%;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#info .info-wrap .info-disc {
  width: 100%;
  max-width: 60%;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

#info .info-wrap .info-disc ul {
  margin: 0 auto;
}

#info .info-wrap .info-disc ul li.post-list {
  display: flex;
  margin-top: 2.5rem;
  border-bottom: #08435E solid 1.5px;
}

#info .info-wrap .info-disc ul li.post-list:first-of-type {
  margin-top: 0px;
}

#info .info-wrap .info-disc ul li.post-list .post-date {
  font-size: 1.8rem;
  color: #08435E;
  line-height: 2.8rem;
  font-weight: 600;
  margin-left: 0.5rem;
}

#info .info-wrap .info-disc ul li.post-list .post-title {
  font-size: 1.4rem;
  color: #08435E;
  line-height: 3rem;
  font-weight: 300;
  margin-left: 2rem;
}

#info .info-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 40%;
  object-fit: cover;
}


.info-Schedule ul {
    text-align: center;
    margin-left: 125px;
    
}

.info-Schedule li{
  font-size: 1.8rem;
  display: flex;
  margin-top: 2rem;
  color: #08435E;
  
}

.info-Schedule a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  text-align: center;
  transition: all ease-in-out .1s;
  border-bottom:#08435E solid 2px;
}

.info-Schedule a:hover {
  /*color: #08435E;
  border:#08435E solid 2px;*/
  color: #bc5302;
  border-bottom: solid 2px;
  font-weight: 600;

}





/* ----------------- info 関連 レスポンシブ ----------------- */
@media screen and (max-width: 480px) {
  #info {
    padding-top: 5rem;
    padding-bottom: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #info .info-wrap {
    max-width: 100%;
  }
  #info .info-wrap .info-disc {
    max-width: 90%;
  }
  #info .info-wrap .info-disc ul li.post-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
  }
  #info .info-wrap .info-disc ul li.post-list .post-date {
    font-size: 1.5rem;
    line-height: 1.8rem;
  }
  #info .info-wrap .info-disc ul li.post-list .post-title {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}

/*色*/
/*icon*/
/*背景画像*/
/*メディアクエリ*/
/*トランジション*/
/* ----------------- 協会概要 関連 ----------------- */
.ov-cont {
  background: #def6e6;
  background: linear-gradient(0deg, #def6e6 0%, lightyellow 39%, white 100%);
  padding-top: 1rem;
  padding-bottom: 10rem;
}

#purpose {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

ol {
  margin-left: 3rem;
}

ol li {
  font-size: 1.6rem;
  color: #08435E;
  line-height: 2.8rem;
  font-weight: 400;
}

ol li::before {
  content: "(" counter(cnt) ")";
  display: inline-block;
  margin-left: -3rem;
  /* サイトに合せて調整 */
  width: 3rem;
  /* サイトに合せて調整 */
}

#officer {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

#officer .sec-disc2 ul {
  margin-left: 3rem;
  margin-bottom: 2rem;
}

#officer .sec-disc2 ul li {
  font-size: 1.8rem;
  color: #08435E;
  line-height: 3.2rem;
  font-weight: 400;
  margin-bottom: 2rem;
}

#officer .sec-disc2 ul li span {
  font-size: 1.2rem;
}

h3.list-top {
  margin-top: 3rem;
  margin-bottom: 1rem;
  display: block;
  text-align: left;
  position: relative;
}

h3.list-top::after {
  content: "";
  width: 100%;
  height: 3px;
  background-color: #08435E;
  position: absolute;
  bottom: 5px;
  left: 0;
}

#finance {
  margin-top: 3rem;
  margin-bottom: 5rem;
}

#finance .add-img {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* ----------------- 協会概要 レスポンシブ ----------------- */
@media screen and (max-width: 1200px) {
  article.page-hero .cont-hero img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 540px;
    object-fit: cover;
    margin-top: 50px;
  }
  article.page-hero .deco-yama-w {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    -webkit-transform: translate(-50%, -40%);
    -ms-transform: translate(-50%, -40%);
  }
}

@media screen and (max-width: 480px) {
  article.page-hero .deco-yama-w {
    width: 75vw;
    text-align: center;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -10%);
    -webkit-transform: translate(-50%, 10%);
    -ms-transform: translate(-50%, -10%);
  }
  article.page-hero .deco-yama-w h3 {
    font-size: 1.3rem;
    line-height: 4rem;
  }
}

/*色*/
/*icon*/
/*背景画像*/
/*メディアクエリ*/
/*トランジション*/
/* ----------------- 森づくり 関連 ----------------- */
.grid-type-one {
  margin-top: 10rem;
  margin-bottom: 10rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 1rem;
  grid-template-areas: "text-area image-area w-image-top" "text-area image-area w-image-bottom";
}

.grid-type-two {
  margin-top: 10rem;
  margin-bottom: 10rem;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 1rem;
  grid-template-areas: "image-area text-area w-image-top" "image-area text-area w-image-bottom";
}

.grid-type-three {
  margin-top: 10rem;
  margin-bottom: 10rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 1rem;
  grid-template-areas: "image-area w-image-top text-area" "image-area w-image-bottom text-area";
}

.text-area {
  grid-area: text-area;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
}

.text-area p {
  font-size: 1.4rem;
  padding: 0 2rem;
}

.image-area {
  grid-area: image-area;
}

.image-area img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 540px;
  object-fit: cover;
  border-radius: 8px 0 0 8px;
}

.w-image-top {
  grid-area: w-image-top;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.w-image-top img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 0 8px 0 0;
}

.w-image-bottom {
  grid-area: w-image-bottom;
  margin-top: 0.5rem;
}

.w-image-bottom img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 0 0 8px 0;
}

/* ----------------- 森づくり レスポンシブ ----------------- */
@media screen and (max-width: 780px) {
  .grid-type-one {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 80%;
    max-height: 100%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 780px) {
  .grid-type-two {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 80%;
    max-height: 100%;
    margin: 0 auto;
  }
  .grid-type-two .image-area {
    order: 1;
  }
  .grid-type-two .text-area {
    order: 0;
  }
  .grid-type-two .w-image-top {
    order: 2;
  }
  .grid-type-two .w-image-bottom {
    order: 3;
  }
}

@media screen and (max-width: 780px) {
  .grid-type-three {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 80%;
    max-height: 100%;
    margin: 0 auto;
  }
  .grid-type-three .image-area {
    order: 1;
  }
  .grid-type-three .text-area {
    order: 0;
  }
  .grid-type-three .w-image-top {
    order: 2;
  }
  .grid-type-three .w-image-bottom {
    order: 3;
  }
}

@media screen and (max-width: 780px) {
  .text-area {
    margin-top: 4rem;
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 780px) {
  .image-area {
    margin-bottom: 1rem;
  }
  .image-area img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
  }
}

@media screen and (max-width: 780px) {
  .w-image-top {
    overflow: hidden;
    margin-bottom: 1rem;
  }
  .w-image-top img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 0 0 0 0;
  }
}

@media screen and (max-width: 780px) {
  .w-image-bottom {
    grid-area: w-image-bottom;
    margin-top: initial;
  }
  .w-image-bottom img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 0 0 8px 8px;
  }
}

@media screen and (max-width: 480px) {
  .grid-type-one {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 95%;
    max-height: 100%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 480px) {
  .grid-type-two {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 95%;
    max-height: 100%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 480px) {
  .grid-type-three {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 95%;
    max-height: 100%;
    margin: 0 auto;
  }
}

/*色*/
/*icon*/
/*背景画像*/
/*メディアクエリ*/
/*トランジション*/
/* ----------------- 収益事業 関連 ----------------- */
#suihousou {
  background: #def6e6;
  background: linear-gradient(0deg, #def6e6 0%, lightyellow 39%, white 100%);
}

.suihousou-container {
  margin-top: 10rem;
  margin-bottom: 10rem;
  display: grid;
  grid-template-columns: 0.8fr 0.6fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0.5px;
  grid-template-areas: "left-text right-top" "left-text right-bottom";
}

.suihousou-container h3 {
  font-size: 1.8rem;
}

.suihousou-container p {
  line-height: 2.8rem;
}

.left-text {
  grid-area: left-text;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
}

.left-text p {
  margin-top: 0;
  margin-bottom: 3rem;
  font-size: 1.6rem;
  padding: 0 2rem;
  width: 100%;
  max-width: 70ch;
}

.left-text .btn-prim {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.right-top {
  grid-area: right-top;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
}

.right-top img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 0 10px 0 0;
}

.right-bottom {
  grid-area: right-bottom;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}

.right-bottom img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 0 0 10px 0;
}

/* ----------------- 収益事業 レスポンシブ ----------------- */
@media screen and (max-width: 780px) {
  .suihousou-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    margin-bottom: 2rem;
  }
  .suihousou-container:last-of-type {
    margin-bottom: 10rem;
  }
  .suihousou-container .right-top img {
    border-radius: 10px 10px 0 0;
  }
  .suihousou-container .right-bottom img {
    border-radius: 0 0 10px 10px;
  }
}

/*色*/
/*icon*/
/*背景画像*/
/*メディアクエリ*/
/*トランジション*/
/* ----------------- 整備事業 関連 ----------------- */
#felling .jigyo-wrap .felling-disc {
  width: 100%;
  height: 100%;
  max-width: 920px;
  max-height: 100%;
  margin-top: 2rem;
  margin-bottom: 4rem;
  text-align: center;
}

#felling .jigyo-wrap .felling-center {
  display: flex;
  flex-direction: column;
}

#felling .jigyo-wrap .felling-center p {
  font-size: 1.4rem;
  line-height: 2.8rem;
  padding: 0 1rem;
  margin-bottom: 2rem;
}

#felling .jigyo-wrap .felling-center .btn-prim {
  margin: 3rem auto;
}

#felling .jigyo-wrap .felling-center .btn-orange {
  margin: 3rem auto;
}

#felling .jigyo-wrap .mente-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin-top: 2rem;
  margin-bottom: 5rem;
}

#felling .jigyo-wrap .mente-box:nth-of-type(odd) {
  flex-direction: row-reverse;
}

#felling .jigyo-wrap .mente-box:nth-of-type(odd) .felling-right {
  margin-right: 5px;
}

#felling .jigyo-wrap .mente-box:nth-of-type(odd) .felling-right img {
  border-radius: 8px 0 0 8px;
}

#felling .jigyo-wrap .mente-box:nth-of-type(odd) .felling-left {
  margin-left: 5px;
}

#felling .jigyo-wrap .mente-box .felling-left {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 50%;
  max-height: 100%;
  margin-right: 5px;
  clear: both;
}

#felling .jigyo-wrap .mente-box .felling-left .icon-img {
  float: left;
}

#felling .jigyo-wrap .mente-box .felling-left .icon-img a img {
  width: 120px;
  height: 120px;
  margin: 1rem;
  transition: all ease-in-out .5s;
}

#felling .jigyo-wrap .mente-box .felling-left p {
  font-size: 1.4rem;
  line-height: 2.8rem;
  padding: 0 1rem;
  margin-bottom: 2rem;
}

#felling .jigyo-wrap .mente-box .felling-left .btn-prim a {
  margin: 0 auto;
}

#felling .jigyo-wrap .mente-box .felling-left .btn-orange a {
  margin: 0 auto;
}

#felling .jigyo-wrap .mente-box .felling-right {
  width: 100%;
  height: 100%;
  max-width: 50%;
  max-height: 100%;
  margin-left: 5px;
}

#felling .jigyo-wrap .mente-box .felling-right img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0 8px 8px 0;
}

#felling .jigyo-wrap .mente-box .felling-right p.img-caption {
  font-size: 1.2rem;
  line-height: 1.8rem;
  padding: 0.5rem 1rem;
}

.icon-img a img:hover {
  transform: rotateY(360deg);
}

.movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* ----------------- 整備事業 レスポンシブ ----------------- */
@media screen and (max-width: 780px) {
  #felling .jigyo-wrap .felling-disc {
    max-width: 90%;
  }
  #felling .jigyo-wrap .felling-disc h3 {
    line-height: 3.2rem;
  }
  #felling .jigyo-wrap .mente-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #felling .jigyo-wrap .mente-box:nth-of-type(even) {
    flex-direction: column;
  }
  #felling .jigyo-wrap .mente-box:nth-of-type(odd) {
    flex-direction: column;
  }
  #felling .jigyo-wrap .mente-box:nth-of-type(odd) .felling-right img {
    border-radius: 0 0 8px 8px;
  }
  #felling .jigyo-wrap .mente-box .felling-left {
    max-width: 80%;
  }
  #felling .jigyo-wrap .mente-box .felling-right {
    max-width: 80%;
  }
}

@media screen and (max-width: 480px) {
  #felling .jigyo-wrap .felling-disc {
    max-width: 100%;
  }
  #felling .jigyo-wrap .felling-disc h3 {
    font-size: 1.7rem;
    line-height: 3rem;
  }
  #felling .jigyo-wrap .mente-box .felling-left {
    max-width: 100%;
  }
  #felling .jigyo-wrap .mente-box .felling-right {
    max-width: 100%;
  }
}

/*色*/
/*icon*/
/*背景画像*/
/*メディアクエリ*/
/*トランジション*/
/* ----------------- 森林体験支援 関連 ----------------- */
.image-tile {
  width: 100%;
  height: 100%;
  max-width: 920px;
  max-height: 100%;
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.image-tile .tile-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.image-tile .tile-wrap .tile-item {
  width: 230px;
  height: 230px;
}

.image-tile .tile-wrap .tile-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------- レスポンシブ ----------------- */
@media screen and (max-width: 780px) {
  .image-tile .tile-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}

/*色*/
/*icon*/
/*背景画像*/
/*メディアクエリ*/
/*トランジション*/
.mente-box h3 {
  text-align: center;
}

.mente-box .felling-center h3 {
  font-size: 1.7rem;
}

.mente-box .felling-center .process-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: #AAC4B2 solid 3px;
  border-radius: 8px;
  background-color: #fff;
  padding: 1rem;
  position: relative;
  margin-bottom: 5rem;
}

.mente-box .felling-center .process-wrap ul {
  margin-bottom: 1rem;
}

.mente-box .felling-center .process-wrap ul li {
  font-size: 2rem;
  line-height: 4rem;
}

.mente-box .felling-center .process-wrap:not(:last-child)::after {
  content: "";
  width: 5rem;
  height: 5rem;
  background: url("../img/lg-arrow.svg");
  background-repeat: no-repeat;
  position: absolute;
  top: 100%;
}

/*色*/
/*icon*/
/*背景画像*/
/*メディアクエリ*/
/*トランジション*/
.quotation-box {
  border: #ff8c1a solid 3px;
  border-radius: 8px;
  background-color: #fff;
  padding: 2rem;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.quotation-box h3.wp-title {
  font-size: 1.8rem;
  padding-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  line-height: 2.8rem;
}

.quotation-box .q-box-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.quotation-box .q-box-wrap .q-box-left {
  width: 50%;
  padding: 1.5rem;
}

.quotation-box .q-box-wrap .q-box-left .wp-catch-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  margin-bottom: 2rem;
}

.quotation-box .q-box-wrap .q-box-left .wp-catch-img img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.quotation-box .q-box-wrap .q-box-right {
  width: 50%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.quotation-box .q-box-wrap .q-box-right .wp-details ul li {
  font-size: 1.6rem;
  font-weight: 600;
  text-align: left;
  margin-bottom: 2rem;
}

.quotation-box .q-box-wrap .q-box-right .wp-disc {
  font-size: 1.4rem;
  line-height: 2.8rem;
  margin-bottom: 2rem;
}

.quotation-box .dummy-img {
  margin: 2rem 0;
}

.quotation-box .dummy-img img {
  border-radius: 10px;
}

/* ----------------- traning レスポンシンブ ----------------- */
.quotation-box {
  padding: initial;
}

@media screen and (max-width: 780px) {
  .quotation-box .q-box-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .quotation-box .q-box-wrap .q-box-left {
    width: 90%;
  }
  .quotation-box .q-box-wrap .q-box-right {
    width: 80%;
  }
}

.quotation-box {
  padding: initial;
}

@media screen and (max-width: 480px) {
  .quotation-box .q-box-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .quotation-box .q-box-wrap .q-box-left {
    width: 100%;
  }
  .quotation-box .q-box-wrap .q-box-right {
    width: 95%;
  }
  .quotation-box .dummy-img {
    margin: 2rem 2rem;
  }
}
.has-fixed-layout{
    border: #AAC4B2 solid 3px;
    border-radius: 8px;
}

/* ----------------- レスポンシブ系 ----------------- */
article.grid-comp {
  padding-bottom: 5rem;
  background: #def6e6;
  background: linear-gradient(0deg, #def6e6 0%, lightyellow 39%, white 100%);
}

/*アコーディオン全体*/
/*==================================================
アコーディオンのためのcss
===================================*/

/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 100%;
    max-width: 900px;
    margin:0 auto;
    padding: 1rem;
}

.accordion-area li{
    margin: 5px 0;
}

.accordion-area section {
 border: #AAC4B2 solid 3;
}

/*アコーディオンタイトル*/
.accordion-title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:2rem;
    font-weight: normal;
    padding: 1% 1% 1% 50px;
    transition: all .5s ease;
    background-color: #ff8c1a;
    border: #ff8c1a solid 2px;
    border-radius: 8px;
    color: #FFFFFF;
}

/*アイコンの＋と×*/
.accordion-title::before,
.accordion-title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #fff;
    
}
.accordion-title::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    
}
.accordion-title::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/

.accordion-title.close::before{
  transform: rotate(45deg);
}

.accordion-title.close::after{
  transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.accordion-box {
    display: none;/*はじめは非表示*/
  margin:0 3% 3% 3%;
    padding: 1%;
}



@media screen and (max-width: 780px) {
  article.grid-comp {
    padding-bottom: 10rem;
  }
}