@charset "UTF-8";
/* ---------------------------------------

  aboutus

--------------------------------------- */
#about {
  overflow: auto;
}

#about .intro .leaf_bg01 {
  width: 35%;
  position: fixed;
  top: 30px;
  left: -15%;
}

@media (max-width: 840px) {
  #about .intro .leaf_bg01 {
    width: 50%;
    top: 50px;
    left: -20%;
  }
}

#about .intro .leaf_bg02 {
  width: 35%;
  position: fixed;
  bottom: 30px;
  right: -12%;
}

@media (max-width: 840px) {
  #about .intro .leaf_bg02 {
    width: 60%;
    bottom: 30px;
    right: -20%;
  }
}

#about .intro .intro-ttl {
  width: 100%;
  text-align: center;
  font-size: 170px;
  font-weight: 900;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  line-height: 1;
  color: #afafaf;
}

@media (max-width: 840px) {
  #about .intro .intro-ttl {
    top: 20px;
    font-size: 60px;
  }
}

#about .intro .intro-desc {
  margin-top: 0;
  position: absolute;
  top: 62%;
  left: 13%;
  font-size: 26px;
  letter-spacing: 0.1em;
  font-weight: 700;
}

@media (max-width: 840px) {
  #about .intro .intro-desc {
    top: 72%;
    left: 10%;
  }
}

#about .intro .intro-desc .lead {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  /* 縦書き（右から左へ） */
  -webkit-text-orientation: mixed;
          text-orientation: mixed;
}

#about .ab-cover {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

#about .ab-cover .cover-inner {
  position: absolute;
  inset: 0;
}

#about .ab-cover .desc-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  color: #fff;
  z-index: 3;
  /* 画像より前面に */
  pointer-events: none;
  line-height: 1.4;
  font-size: 40px;
  font-weight: 700;
  z-index: 4;
}

#about .ab-cover .desc-wrap .desc01 {
  position: absolute;
  height: 60vh;
  top: 30%;
  left: 20%;
  -webkit-transform: translate(-20%, -30%);
          transform: translate(-20%, -30%);
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  /* 縦書き（右から左へ） */
  -webkit-text-orientation: mixed;
          text-orientation: mixed;
}

@media (max-width: 840px) {
  #about .ab-cover .desc-wrap .desc01 {
    top: 20%;
    left: 12%;
    font-size: 32px;
  }
}

#about .ab-cover .desc-wrap .desc02 {
  position: absolute;
  top: 50%;
  left: 10%;
  -webkit-transform: translate(-10%, -50%);
          transform: translate(-10%, -50%);
  font-size: 18px;
  line-height: 4;
}

@media (max-width: 840px) {
  #about .ab-cover .desc-wrap .desc02 {
    width: 90%;
    top: 20%;
    left: 50%;
    font-size: 13px;
    -webkit-transform: translate(-50%, -20%);
            transform: translate(-50%, -20%);
  }
}

#about .ab-cover .desc-wrap .desc03 {
  position: absolute;
  top: 50%;
  left: 10%;
  -webkit-transform: translate(-10%, -50%);
          transform: translate(-10%, -50%);
  font-size: 18px;
  line-height: 4;
}

@media (max-width: 840px) {
  #about .ab-cover .desc-wrap .desc03 {
    width: 90%;
    top: 20%;
    left: 50%;
    font-size: 13px;
    -webkit-transform: translate(-50%, -20%);
            transform: translate(-50%, -20%);
  }
}

#about .ab-cover .desc-wrap .desc04 {
  position: absolute;
  top: 50%;
  left: 10%;
  -webkit-transform: translate(-10%, -50%);
          transform: translate(-10%, -50%);
  font-size: 18px;
  line-height: 4;
}

@media (max-width: 840px) {
  #about .ab-cover .desc-wrap .desc04 {
    width: 90%;
    top: 20%;
    left: 50%;
    font-size: 13px;
    -webkit-transform: translate(-50%, -20%);
            transform: translate(-50%, -20%);
  }
}

#about .ab-cover .desc-wrap > div {
  margin: 0.6em 0;
}

#about .ab-cover .cover-bg,
#about .ab-cover .cover-bg02,
#about .ab-cover .cover-bg03 {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

#about .ab-cover .cover-bg::after,
#about .ab-cover .cover-bg02::after,
#about .ab-cover .cover-bg03::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--overlayAlpha, 0.3));
  pointer-events: none;
}

#about .ab-cover .cover-bg02,
#about .ab-cover .cover-bg03 {
  opacity: 0;
  visibility: hidden;
  /* autoAlphaと同等の視覚的効果用 */
}

#about .ab-cover .cover-bg02 {
  background-image: url("../../img/about/bg_img02.jpg");
  z-index: 2;
}

#about .ab-cover .cover-bg03 {
  background-image: url("../../img/about/bg_img03.jpg");
  z-index: 3;
}

#about .ab-cover .cover-bg {
  --overlayAlpha: 0;
  /* 初期は非表示（0） */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 65vw;
  height: 70vh;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url("../../img/about/bg_img01.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  z-index: 1;
}

@media (max-width: 840px) {
  #about .ab-cover .cover-bg {
    width: 85vw;
    height: 75vh;
  }
}

#about .section-lol {
  padding: 7% 0;
}

@media (max-width: 840px) {
  #about .section-lol {
    padding: 15% 0;
  }
}

#about .section-lol .lol-wrapper {
  width: 90%;
  margin: 0 auto;
}

#about .section-lol .lol-ttl {
  width: 100%;
  text-align: center;
  font-size: 140px;
  font-weight: 900;
  line-height: 1;
  color: #afafaf;
  margin-bottom: 30px;
}

@media (max-width: 840px) {
  #about .section-lol .lol-ttl {
    font-size: 40px;
  }
}

#about .section-lol .lol-txt {
  width: 56%;
  margin: 0 auto;
}

@media (max-width: 840px) {
  #about .section-lol .lol-txt {
    width: 100%;
  }
}

#about .section-lol .zoomin-block {
  width: 80%;
  margin: 100px auto 200px;
}

@media (max-width: 840px) {
  #about .section-lol .zoomin-block {
    width: 100%;
    margin: 100px auto 80px;
  }
}

#about .section-lol .zoomin-block .zoomin-ttl {
  width: 100%;
  text-align: center;
  font-size: 60px;
  font-weight: 900;
  line-height: 1;
  color: #afafaf;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
}

@media (max-width: 840px) {
  #about .section-lol .zoomin-block .zoomin-ttl {
    font-size: 32px;
    margin-bottom: 40px;
  }
}

#about .section-lol .zoomin-block .zoomin-list {
  border: 3px solid #afafaf;
  border-radius: 60px;
}

@media (max-width: 840px) {
  #about .section-lol .zoomin-block .zoomin-list {
    border: none;
    border-radius: 0;
  }
}

#about .section-lol .zoomin-block .zoomin-item .zoomin-card {
  position: relative;
}

@media (max-width: 840px) {
  #about .section-lol .zoomin-block .zoomin-item .zoomin-img {
    width: 100%;
    height: auto;
    overflow: hidden;
    border: 3px solid #afafaf;
    border-radius: 60px;
    margin-bottom: 30px;
  }
}

#about .section-lol .zoomin-block .zoomin-item .zoomin-body {
  width: 36%;
  position: absolute;
  top: 50%;
  right: 5%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media (max-width: 840px) {
  #about .section-lol .zoomin-block .zoomin-item .zoomin-body {
    width: 100%;
    position: relative;
    top: 0;
    right: 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

#about .section-lol .zoomin-block .zoomin-item .zoomin-body .body-ttl {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 20px;
}

#about .section-lol .zoomin-block .zoomin-item .zoomin-body .body-desc {
  font-size: 13px;
  line-height: 1.8;
}

#about .section-lol .concept-block {
  width: 80%;
  margin: 0 auto 200px;
}

@media (max-width: 840px) {
  #about .section-lol .concept-block {
    width: 100%;
    margin: 0 auto 100px;
  }
}

#about .section-lol .concept-block:last-child {
  margin-bottom: 0;
}

#about .section-lol .concept-block .concept-ttl {
  width: 100%;
  text-align: center;
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  color: #216e4f;
  margin-bottom: 60px;
}

@media (max-width: 840px) {
  #about .section-lol .concept-block .concept-ttl {
    font-size: 40px;
    margin-bottom: 30px;
  }
}

#about .section-lol .concept-block .concept-ttl .en {
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

#about .section-lol .concept-block .concept-ttl .jp {
  font-size: 14px;
  font-weight: 400;
}

#about .section-lol .concept-block .concept-subttl {
  text-align: center;
  font-size: 36px;
  margin-bottom: 20px;
}

@media (max-width: 840px) {
  #about .section-lol .concept-block .concept-subttl {
    font-size: 26px;
  }
}

#about .section-lol .concept-block .concept-desc {
  width: 41%;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
}

@media (max-width: 840px) {
  #about .section-lol .concept-block .concept-desc {
    text-align: left;
    width: 100%;
  }
}

#about .section-lol .concept-block.value .value-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 繰り返し構文で3列 */
  gap: 20px;
}

@media (max-width: 840px) {
  #about .section-lol .concept-block.value .value-list {
    display: block;
  }
}

@media (max-width: 840px) {
  #about .section-lol .concept-block.value .value-item {
    margin-bottom: 30px;
  }
  #about .section-lol .concept-block.value .value-item:last-child {
    margin-bottom: 0;
  }
}

#about .section-lol .concept-block.value .value-item .concept-subttl {
  margin-bottom: 0;
  text-align: left;
}

#about .section-lol .concept-block.value .value-item .concept-desc {
  width: 100%;
  text-align: left;
}

#about .section-other {
  background-color: #fff;
  padding: 7% 5% 60%;
  width: 100%;
  height: auto;
  background-image: url("../../img/about/leaf_bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: left top;
  position: relative;
  z-index: 55;
}

@media (max-width: 840px) {
  #about .section-other {
    padding: 45% 5% 150%;
    background-image: url("../../img/about/leaf_bg_sp.png");
  }
}

#about .section-other .outline-wrapper {
  width: 80%;
  margin: 0 auto;
  padding-top: 25%;
}

@media (max-width: 840px) {
  #about .section-other .outline-wrapper {
    width: 100%;
    padding-bottom: 40%;
  }
}

#about .section-other .outline-wrapper .outline-block {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5%;
}

#about .section-other .outline-wrapper .outline-block.outline .outline-table tr {
  border-top: 1px dashed #afafaf;
  border-bottom: 1px dashed #afafaf;
}

#about .section-other .outline-wrapper .outline-block.history .outline-table th {
  width: 17%;
  border-right: 1px dashed #afafaf;
}

@media (max-width: 840px) {
  #about .section-other .outline-wrapper .outline-block.history .outline-table th {
    width: 30%;
    vertical-align: top;
  }
}

#about .section-other .outline-wrapper .outline-block.history .outline-table td {
  padding-left: 5%;
}

@media (max-width: 840px) {
  #about .section-other .outline-wrapper .outline-block.history .outline-table td {
    vertical-align: top;
  }
}

#about .section-other .outline-wrapper .outline-ttl {
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 60px;
}

#about .section-other .outline-wrapper .outline-ttl .listmark {
  color: #216e4f;
}

#about .section-other .outline-wrapper .outline-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

#about .section-other .outline-wrapper .outline-table th,
#about .section-other .outline-wrapper .outline-table td {
  padding: 20px 0;
}

#about .section-other .outline-wrapper .outline-table th {
  width: 20%;
  font-weight: 400;
}

@media (max-width: 840px) {
  #about .section-other .outline-wrapper .outline-table th {
    width: 30%;
    vertical-align: top;
  }
}

#about .section-other .entryBtn {
  text-align: center;
  margin-bottom: 50px;
  position: absolute;
  bottom: 300px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media (max-width: 840px) {
  #about .section-other .entryBtn {
    bottom: 200px;
  }
}

#about .section-other .entryBtn .entryBtn-txt {
  text-decoration: none;
  display: inline-block;
  border: 4px solid #afafaf;
  padding: 10px 50px;
  color: #afafaf;
  font-size: 50px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.2em;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#about .section-other .entryBtn .entryBtn-txt:hover {
  background-color: #afafaf;
  color: #fff;
  text-decoration: none;
}

#about .section-other .hashirukun {
  width: 13%;
  height: auto;
  margin: auto;
  position: absolute;
  bottom: -50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media (max-width: 840px) {
  #about .section-other .hashirukun {
    bottom: -50px;
    width: 37%;
  }
}

#about .padBtm {
  padding-bottom: 20% !important;
}

#about .marBtm {
  margin-bottom: 20% !important;
}

#about .marTop {
  margin-top: 20% !important;
}