@charset "utf-8";

/* =====================================================================

	冒頭
	
======================================================================== */
  .lead > span {
    font-weight: 600;
    }
  .lead .c-marker {
    font-size: clamp(1.5rem, -0.214rem + 3.571vw, 2rem);
    line-height: 150%;
    font-weight: 700;
    }
  .text-kikori {
    display: inline-flex;
    column-gap: 0.5rem;
    margin-top: 0.75rem;
    }
  .text-kikori span {
    display: grid;
    place-items: center;
    padding: 0.75rem;
    line-height: 1;
    background-color: var(--color-green);
    color: #FFFFFF;
    font-size: clamp(1.875rem, -3.504rem + 11.207vw, 3.5rem);
    font-weight: 600;
    }
@media (max-width: 991.98px) {
  .img-about {
    max-width: 80%;
    margin-inline: auto;
    }
}
@media (min-width: 992px) {
  .img-about {
    margin-left: calc(20% - 20vw);
    }
}



/* =====================================================================

	お知らせ
	
======================================================================== */
  .l-info {
    position: relative;
    margin-top: var(--decor-forest-h);
    padding-bottom: var(--decor-forest-h);
    }
  .l-info::before {
    display: inline-block;
    content: "";
    background-image: var(--decor-forest);
    background-size: var(--decor-forest-w) var(--decor-forest-h);
    width: var(--decor-forest-w);
    height: var(--decor-forest-h);
    position: absolute;
    top: calc( var(--decor-forest-h) * -1 );
    left: calc(50% - 50vw);
    }
  .l-info::after {
    display: inline-block;
    content: "";
    background-image: var(--decor-forest-white);
    background-size: var(--decor-forest-w) var(--decor-forest-h);
    width: var(--decor-forest-w);
    height: var(--decor-forest-h);
    position: absolute;
    bottom: 0;
    right: calc(50% - 50vw);
    }
  .info-row {
    background-color: #FFFFFF;
    }



/* =====================================================================

	施工実績
	
======================================================================== */
  .l-works {
    padding-bottom: calc( var(--decor-forest-h) * 1.5 );
    }
@media (min-width: 992px) {
  .l-works {
    background-image: url("../img/home/bg_works.webp");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: right bottom;
    min-height: 1000px;
    }
}
@media (min-width: 1400px) {
  .l-works .c-tit--fuchidori.-vertical::after {
    --fukidashiLine-h: min(276 / 992 * 100vw, 276px);
    content: url("../img/home/fukidashiLine-brown.png");
    position: absolute;
    bottom: calc( (var(--fukidashiLine-h) * -1) - 0.5em );
    left: 0.45em;
    z-index: -1;
    }
}



/* =====================================================================

	フジヤマロガーのおしごと
	
======================================================================== */
  .l-services {
    position: relative;
    }
  .l-services::before {
    display: inline-block;
    content: "";
    background-image: var(--decor-forest-green);
    background-size: var(--decor-forest-w) var(--decor-forest-h);
    width: var(--decor-forest-w);
    height: var(--decor-forest-h);
    position: absolute;
    top: calc( var(--decor-forest-h) * -1 );
    left: calc(50% - 50vw);
    }
@media (min-width: 1200px) {
  .l-services {
    background-image: url("../img/home/bg_services-lg.jpg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center center;
    height: 830px;
    }
  .l-services .row {
    margin-top: 7.5rem;
    }
}
@media (min-width: 1400px) {
  .l-services .c-tit--fuchidori.-vertical::after {
    --fukidashiLine-h: min(184 / 992 * 100vw, 184px);
    content: url("../img/home/fukidashiLine-white.png");
    position: absolute;
    bottom: calc( (var(--fukidashiLine-h) * -1) - 0.5em );
    left: 0.45em;
    }
}



/* =====================================================================

	施工までの流れ
	
======================================================================== */
  .l-flow {
    background-image: url("../img/home/bg_flow.jpg");
    background-repeat: no-repeat;
    background-size: 220%;
    background-position: 80% center;
    padding-bottom: var(--decor-forest-h);
    }
  .p-price dt {
    background-color: #000;
    color: var(--color-yellow);
    font-weight: bold;
    text-align: center;
    }
  .p-price dd {
    text-align: start;
    font-weight: bold;
    }
@media (min-width: 768px) {
  .l-flow {
    background-size: auto;
    background-position: center bottom;
    }
}
@media (min-width: 992px) {
  .p-price {
    width: 690px;
    text-align: center;
    margin-inline: auto;
    }
}



/* =====================================================================

	森林アクティビティ
	
======================================================================== */
  .l-activity {
    position: relative;
    margin-top: calc( var(--decor-forest-h) / 2 );
    background-image: url("../img/home/bg_activity.webp?02");
    background-repeat: no-repeat;
    background-size: calc( 100%/2 );
    background-position: right bottom;
    min-height: 900px;
    }
  .l-activity::before {
    display: inline-block;
    content: "";
    background-image: var(--decor-forest-beige);
    background-size: var(--decor-forest-w) var(--decor-forest-h);
    width: var(--decor-forest-w);
    height: var(--decor-forest-h);
    position: absolute;
    top: calc( var(--decor-forest-h) * -1 );
    left: calc(50% - 50vw);
    }
@media (min-width: 1200px) {
  .l-activity {
    background-size: contain;
    background-position: right center;
    min-height: 800px;
    }
}
@media (min-width: 1400px) {
  .l-activity .c-tit--fuchidori.-vertical::after {
    --fukidashiLine-h: min(184 / 992 * 100vw, 184px);
    content: url("../img/home/fukidashiLine-white.png");
    position: absolute;
    bottom: calc( (var(--fukidashiLine-h) * -1) - 0.5em );
    left: 0.45em;
    }
}

  /* 森遊び大サーカス */
  .p-activityEvent {
    text-align: center;
    color: #FFFFFF;
    }
  .tit-activityEvent {
    font-weight: bold;
    display: inline-block;
    background: url("../img/home/tit_activity_bg.png") no-repeat left bottom;
    background-size: contain;
    padding-bottom: 0.25em;
    padding-left: 0.3em;
    padding-right: 0.3em;
    text-shadow: 0 0 10px #000;
    }



/* =====================================================================

	森林ボランティア
	
======================================================================== */
  .l-volunteer {
    background-image: url("../img/home/bg_volunteer.webp");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center bottom;
    }
  .p-bosyu {
    border: solid 5px var(--color-yellow);
    border-radius: 15px;
    color: var(--color-yellow);
    width: 120px;
    height: 120px;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: bold;
    }
@media (min-width: 768px) {
  .p-bosyu {
    margin-right: -120px !important;
    }
}



/* =====================================================================

	採用情報
	
======================================================================== */
@media (max-width: 991.98px) {
  .decor-recruitImg {
    text-align: center;
    margin-inline: 10%;
    }
    .decor-recruitImg img {
      max-width: 80%;
      }
}
@media (min-width: 992px) {
  .l-recruit {
    position: relative;
    background-image: url("../img/home/bg_recruit.jpg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: left bottom;
    }
  .decor-recruitImg {
    display: none;
    }
  .l-recruit::before {
    --w: 533px;
    --h: 460px;
    display: inline-block;
    content: "";
    background-image: url("../img/home/img_recruit.webp");
    background-repeat: no-repeat;
    background-size: var(--w) var(--h);
    width: var(--w);
    height: var(--h);
    position: absolute;
    top: 3rem;
    left: calc(50% + 330px);
    }
}
@media (min-width: 1400px) {  
  .recruit-tit {
    position: relative;
    }
    .recruit-tit::before,
    .recruit-tit::after {
      position: absolute;
      top: 50%;
      top: calc( 50% - 20px );
      content: '';
      width: 2px;
      height: 30px;
      background-color: var(--color-brown-dark);
      }
  .recruit-tit::before { left: 0; }
  .recruit-tit::after { right: 0; }
  
  .recruit-tit .c-tit--fuchidori {
    overflow: hidden;
    }
    .recruit-tit .c-tit--fuchidori span {
      position: relative;
      display: inline-block;
      padding: 0 3%;
      font-weight: bold;
      }
    .recruit-tit .c-tit--fuchidori span::before,
    .recruit-tit .c-tit--fuchidori span::after {
      position: absolute;
      top: 50%;
      content: '';
      width: 400%;
      height: 2px;
      background-color: var(--color-brown-dark);
      }
    .recruit-tit .c-tit--fuchidori span::before { right: 100%; }
    .recruit-tit .c-tit--fuchidori span::after { left: 100%; }
}

  /* 募集要項（アコーディオン） */
  .accordion-item {
    border-radius: 0 !important;
    }
  #accordion-Job .accordion-button {
    background-color: var(--color-brown2);
    color: #FFFFFF;
    border-radius: 0 !important;
    }
  #accordion-Job .accordion-button span {
    display: block;
    margin-inline: auto;
    font-weight: 700;
    }
  #accordion-Job .job-description {
    background-color: rgba(255,255,255,0.6);
    } 



/* =====================================================================

	アクセス
	
======================================================================== */
  .l-access {
    position: relative;
    }
  .p-add {
    overflow: hidden;
    background-color: #FFFFFF;
    height: 100%;
    align-items: center;
    }
  .p-add dt {
    background-color: var(--color-green);
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    min-width: 120px;
    height: 100%;
    position: relative;
    align-items: center;
    display: grid;
    }
    .p-add dt::after {
      content: "";
      position:absolute;
      top: -12px;
      top: 50%;
      transform: translateY(-50%);
      right: -22px;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent transparent transparent var(--color-green);
      border-width: 60px 0 60px 2em;
      z-index: 1;
      }
@media (min-width: 1400px) {
  .l-access .c-tit--fuchidori.-vertical::after {
    --fukidashiLine-h: min(184 / 992 * 100vw, 184px);
    content: url("../img/home/fukidashiLine-green.png");
    position: absolute;
    bottom: calc( (var(--fukidashiLine-h) * -1) - 0.5em );
    left: 0.45em;
    }
}