@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP&family=M+PLUS+Rounded+1c&family=Poppins:wght@400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
:root {
  --text-color: #005b43;
  --main-color: #1ca867;
  --pink: #d74e71;
  --orange: #ef8615;
  --bk: #000;
  --wh: #fff;
}

@font-face {
  font-family: "DIN2014";
  src: url("../fonts/din-2014.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@media screen and (max-width: 834px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 835px) {
  .sp {
    display: none !important;
  }
}

@media screen and (max-width: 640px) {
  .pc-sm {
    display: none !important;
  }
}

@media screen and (min-width: 641px) {
  .sp-sm {
    display: none !important;
  }
}

@media screen and (max-width: 1024px) {
  .pc-tb {
    display: none !important;
  }
}

@media screen and (min-width: 1025px) {
  .sp-tb {
    display: none !important;
  }
}

.under499 {
  display: none !important;
}
@media screen and (max-width: 499px) {
  .under499 {
    display: block !important;
  }
}

/* 三点リーダー 一行 */
/* 三点リーダー 複数行 */
/* 背景をテキストで切り取る */
/* -------------------------
 * 共通
 * ------------------------- */
.access-sec {
  padding-block: 12rem 14rem;
}
@media screen and (max-width: 1200px) {
  .access-sec {
    padding-block: 10rem;
  }
}
@media screen and (max-width: 834px) {
  .access-sec {
    padding-block: 8rem;
  }
}
@media screen and (max-width: 640px) {
  .access-sec {
    padding-block: 6rem;
  }
}

/* -------------------------
 * イントロ
 * ------------------------- */
.access-intro {
  padding-bottom: 18.6rem;
}
@media screen and (max-width: 1200px) {
  .access-intro {
    padding-bottom: 10rem;
  }
}
@media screen and (max-width: 834px) {
  .access-intro {
    padding-bottom: 8rem;
  }
}
@media screen and (max-width: 640px) {
  .access-intro {
    padding-bottom: 6rem;
  }
}

.access-intro__txt {
  color: var(--main-color);
  font-size: clamp(1.8rem, 1.7vw, 3rem);
  text-align: center;
  line-height: 1.8;
}

/* -------------------------
 * Guidance
 * ------------------------- */
.access-guidance {
  background-color: #e9f5df;
}

.access-guidance__flex {
  display: grid;
  grid-template-columns: 1fr 56.7rem;
  gap: 3rem 7%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 10rem;
}
@media screen and (max-width: 1024px) {
  .access-guidance__flex {
    grid-template-columns: 1fr;
    margin-bottom: 6rem;
  }
}

@media screen and (max-width: 1024px) {
  .access-guidance__flex-img {
    max-width: 30rem;
    margin: 0 auto 4rem;
  }
}
@media screen and (max-width: 640px) {
  .access-guidance__flex-img {
    margin-bottom: 0;
    aspect-ratio: 1;
    width: 100%;
    height: auto;
  }
  .access-guidance__flex-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center 32%;
       object-position: center 32%;
  }
}

.access-guidance__logo-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto 6rem;
}
@media screen and (max-width: 834px) {
  .access-guidance__logo-area {
    margin-bottom: 2rem;
  }
}

.access-guidance__logo {
  max-width: 418px;
  height: auto;
  width: 60%;
}
@media screen and (max-width: 640px) {
  .access-guidance__logo {
    width: 60%;
  }
}
@media screen and (max-width: 640px) {
  .access-guidance__logo {
    width: 80%;
  }
}

.access-guidance__logo-txt {
  margin-top: 1rem;
}

.access-guidance__info-list {
  display: grid;
  grid-template-columns: 22% 78%;
  gap: 0 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 4rem;
}
@media screen and (max-width: 640px) {
  .access-guidance__info-list {
    grid-template-columns: 1fr;
    margin-bottom: 2rem;
  }
}
.access-guidance__info-list dt {
  color: var(--main-color);
  border-bottom: 1px solid #dfedd1;
}
@media screen and (max-width: 640px) {
  .access-guidance__info-list dt {
    border-bottom: none;
  }
}
.access-guidance__info-list dt:first-of-type {
  padding-bottom: 2.4rem;
}
@media screen and (max-width: 640px) {
  .access-guidance__info-list dt:first-of-type {
    padding-bottom: 1rem;
  }
}
.access-guidance__info-list dt:not(:first-of-type) {
  padding-block: 2.4rem;
}
@media screen and (max-width: 640px) {
  .access-guidance__info-list dt:not(:first-of-type) {
    padding-block: 1.8rem 0.5rem;
  }
}
.access-guidance__info-list dd {
  border-bottom: 1px solid #dfedd1;
}
.access-guidance__info-list dd:first-of-type {
  padding-bottom: 2.4rem;
}
@media screen and (max-width: 640px) {
  .access-guidance__info-list dd:first-of-type {
    padding-bottom: 1rem;
  }
}
.access-guidance__info-list dd:not(:first-of-type) {
  padding-block: 2.4rem;
}
@media screen and (max-width: 640px) {
  .access-guidance__info-list dd:not(:first-of-type) {
    padding-block: 0 1.8rem;
  }
}

.access-guidance__sns-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 5%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  grid-template-rows: auto;
}
@media screen and (max-width: 640px) {
  .access-guidance__sns-list {
    -webkit-column-gap: 2%;
       -moz-column-gap: 2%;
            column-gap: 2%;
  }
}
.access-guidance__sns-list > li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0rem;
}

.access-guidance__sns-name {
  margin-bottom: 0.8rem;
}
@media screen and (max-width: 640px) {
  .access-guidance__sns-name {
    font-size: 1.2rem;
  }
}
.access-guidance__sns-name span {
  font-size: 1.2rem;
  color: var(--main-color);
}
@media screen and (max-width: 640px) {
  .access-guidance__sns-name span {
    font-size: 1rem;
  }
}

.access-guidance-instructor {
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 7rem 5%;
}
@media screen and (max-width: 834px) {
  .access-guidance-instructor {
    padding: 3rem 2rem;
  }
}

.access-guidance-instructor__ttl {
  color: var(--main-color);
  font-size: 3.2rem;
  background-image: radial-gradient(circle, #c4dfaa 1px, transparent 2px);
  background-size: 7px 6px;
  background-position: bottom left;
  background-repeat: repeat-x;
  padding-bottom: 2rem;
  margin-bottom: 4rem;
}
@media screen and (max-width: 834px) {
  .access-guidance-instructor__ttl {
    font-size: 2.2rem;
    padding-bottom: 1.2rem;
    margin-bottom: 2.4rem;
  }
}

.access-guidance-instructor__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem 7%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.access-guidance__btn {
  background: var(--main-color);
  border-radius: 10px;
  max-width: 28rem;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-block: 2rem;
  color: #fff;
  font-size: 1.8rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.access-guidance-instructor__list-img-area {
  position: relative;
  margin-bottom: 2rem;
}
@media screen and (max-width: 1024px) {
  .access-guidance-instructor__list-img-area {
    margin-bottom: 1rem;
  }
}

.access-guidance-instructor__img {
  display: block;
  overflow: hidden;
}
@media screen and (max-width: 499px) {
  .access-guidance-instructor__img {
    aspect-ratio: 200/150;
  }
}
.access-guidance-instructor__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}

.access-guidance-instructor__name {
  background: var(--main-color);
  border-radius: 5px;
  text-align: center;
  padding: 0.6rem 1.2rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  bottom: 1.5rem;
  left: -1.5rem;
  font-size: 2.4rem;
}
@media screen and (max-width: 1024px) {
  .access-guidance-instructor__name {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 834px) {
  .access-guidance-instructor__name {
    bottom: 1rem;
    left: -0.5rem;
  }
}

/* -------------------------
 * Message
 * ------------------------- */
@media screen and (max-width: 640px) {
  .access-message.access-sec {
    padding-bottom: 9rem;
  }
}

.access-message__flex {
  display: grid;
  grid-template-columns: 1fr 25.5rem;
  gap: 3rem 8%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 834px) {
  .access-message__flex {
    grid-template-columns: 1fr;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

.access-message__body .f17 {
  line-height: 1.2;
}

.access-message__img-area {
  position: relative;
}
@media screen and (max-width: 834px) {
  .access-message__img-area {
    margin: 0 auto;
    max-width: 42.5rem;
  }
}

.access-message__name {
  background: var(--main-color);
  border-radius: 5px;
  text-align: center;
  padding: 0.6rem 1.2rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  top: 22rem;
  left: -1rem;
  font-size: 2.4rem;
}
@media screen and (max-width: 834px) {
  .access-message__name {
    top: unset;
    bottom: 1rem;
    left: -0.5rem;
    font-size: 1.8rem;
  }
}

/* -------------------------
 * Facility
 * ------------------------- */
.access-facility__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: 4rem;
}
.access-facility__list > li {
  background-color: #2b9e76;
  padding: 5rem 3%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 3rem 5%;
}
@media screen and (max-width: 834px) {
  .access-facility__list > li {
    padding: 3rem 2rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 2rem;
  }
}

.access-facility__list-ttl {
  background-color: #fff600;
  padding: 1.4rem 1.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 3.2rem;
  color: var(--main-color);
}
.access-facility__list-ttl span {
  line-height: 1;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 834px) {
  .access-facility__list-ttl {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    font-size: 2rem;
    padding: 1rem 1.2rem;
  }
}

.access-facility__list-body--2column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 2%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.access-facility__list-item-ttl {
  color: #fff;
  font-size: 2.6rem;
  background-image: radial-gradient(circle, #fff 1px, transparent 2px);
  background-size: 7px 6px;
  background-position: bottom left;
  background-repeat: repeat-x;
  padding-bottom: 1.6rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 834px) {
  .access-facility__list-item-ttl {
    font-size: 1.8rem;
    margin-bottom: 1.4rem;
  }
}

.access-facility__feature-list {
  color: #fff;
}
.access-facility__feature-list > li + li {
  margin-top: 1.2rem;
}
@media screen and (max-width: 834px) {
  .access-facility__feature-list > li + li {
    margin-top: 0.6rem;
  }
}
@media screen and (max-width: 834px) {
  .access-facility__feature-list li {
    font-size: 1.6rem;
  }
}
.access-facility__feature-list span {
  font-size: 1.2rem;
}

.access-facility__labels {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 834px) {
  .access-facility__labels {
    margin-top: 1rem;
  }
}
.access-facility__labels li {
  border-radius: 5px;
  background-color: #fff;
  padding: 0 1rem;
  text-align: center;
  color: var(--main-color);
}

.access-facility__list-body {
  grid-template-rows: auto;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem 6.5%;
}
@media screen and (max-width: 834px) {
  .access-facility__list-body {
    grid-template-columns: 1fr;
  }
}

.access-facility__list-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 834px) {
  .access-facility__list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.access-facility__txt-contents {
  margin-bottom: 4rem;
}
@media screen and (max-width: 834px) {
  .access-facility__txt-contents {
    margin-bottom: 2rem;
  }
}

.access-facility__list-body--1column .access-facility__list-item {
  display: grid;
  grid-template-columns: 25.5rem 1fr;
  gap: 0rem 8%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 834px) {
  .access-facility__list-body--1column .access-facility__list-item {
    grid-template-columns: 1fr;
  }
}

.access-facility__list-img-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 3%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* -------------------------
 * 姉妹店
 * ------------------------- */
.access-sister-store__ttl {
  font-size: 5.2rem;
  text-align: center;
  color: #fff;
  margin-bottom: 6rem;
}
@media screen and (max-width: 834px) {
  .access-sister-store__ttl {
    font-size: 2.5rem;
    margin-bottom: 3rem;
  }
}

.access-sister-store__content {
  background: #fff;
  padding: 6rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem 5%;
}
@media screen and (max-width: 834px) {
  .access-sister-store__content {
    padding: 3rem 2rem;
  }
}
@media screen and (max-width: 834px) {
  .access-sister-store__content .mark-list {
    font-size: 1.6rem;
  }
}
.access-sister-store__content .mark-list::before {
  background-color: #fff600;
}

.access-sister-store__btn {
  color: #1ca867;
  font-size: 1.6rem;
  border-radius: 25px;
  background-color: #e8f5e9;
  text-align: center;
  padding: 1rem 2rem;
  width: 100%;
  max-width: 28rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.access-sister-store__btn .material-icons {
  font-size: 1.5rem;
}
.access-sister-store__btn:hover {
  opacity: 0.7;
}

/* -------------------------
 * Access
 * ------------------------- */
.access-access-info.access-sec {
  padding-bottom: 0;
}

.access-access-info__step-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem 4.5%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 9rem;
}
@media screen and (max-width: 1024px) {
  .access-access-info__step-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 834px) {
  .access-access-info__step-list {
    margin-bottom: 3rem;
  }
}
.access-access-info__step-list li:last-child .access-access-info__step-img::after {
  display: none;
}

.access-access-info__step-img {
  position: relative;
}
.access-access-info__step-img::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10%;
  -webkit-transform: translateY(-50%) translateX(50%);
          transform: translateY(-50%) translateX(50%);
  width: 16px;
  height: 32px;
  background-color: #c2e6ce;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
          clip-path: polygon(0 0, 0 100%, 100% 50%);
  z-index: 1;
}
@media screen and (max-width: 1024px) {
  .access-access-info__step-img::after {
    right: -5%;
  }
}
@media screen and (max-width: 834px) {
  .access-access-info__step-img::after {
    width: 8px;
    height: 16px;
  }
}

.access-access-info__step-txt-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
@media screen and (max-width: 834px) {
  .access-access-info__step-txt-area {
    margin-top: 1rem;
    gap: 0.5rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.access-access-info__step-txt-area .num {
  width: 6rem;
  height: 6rem;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-color: #1ca867;
  border-radius: 50%;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 2.4rem;
}
@media screen and (max-width: 1024px) {
  .access-access-info__step-txt-area .num {
    width: 4rem;
    height: 4rem;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 834px) {
  .access-access-info__step-txt-area .num {
    width: 3rem;
    height: 3rem;
    font-size: 1.6rem;
  }
}
.access-access-info__step-txt-area .txt {
  line-height: 1.7;
}
@media screen and (max-width: 834px) {
  .access-access-info__step-txt-area .txt {
    line-height: 1.4;
  }
}

.access-access-info__by-car {
  border-radius: 10px;
  border: solid 5px #dfedd1;
  background-color: #fff;
  padding: 6rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem 8%;
  margin: 0 auto 10rem;
  max-width: 96rem;
}
@media screen and (max-width: 834px) {
  .access-access-info__by-car {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 3rem 2rem;
    margin-bottom: 4rem;
  }
}

.access-access-info__by-car-img {
  width: 13rem;
  height: auto;
  aspect-ratio: 130/70;
}
@media screen and (max-width: 834px) {
  .access-access-info__by-car-img {
    width: 20%;
  }
}

.access-access-info__by-car-ttl {
  color: var(--main-color);
  font-size: 2.6rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 834px) {
  .access-access-info__by-car-ttl {
    text-align: center;
    font-size: 2rem;
  }
}

.access-access-info__by-car-fee {
  margin-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem 9%;
}
.access-access-info__by-car-fee li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.access-access-info__by-car-fee-label {
  border-radius: 13px;
  background-color: #c2e6ce;
  padding: 0rem 1.6rem;
  text-align: center;
  margin-right: 1rem;
  font-size: 1.4rem;
  color: #005b43;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.access-access-info__map {
  aspect-ratio: 1200/500;
}
@media screen and (max-width: 834px) {
  .access-access-info__map {
    aspect-ratio: 4/3;
  }
}

/* -------------------------
 * 若手プロ応援プロジェクト
 * ------------------------- */
.access-project {
  padding: 10rem 5% 8rem;
}
@media screen and (max-width: 834px) {
  .access-project {
    padding: 8rem 2rem;
  }
}
@media screen and (max-width: 640px) {
  .access-project {
    padding: 6rem 2rem;
  }
}
@media screen and (max-width: 834px) {
  .access-project.inner {
    width: 100%;
  }
}
@media screen and (max-width: 834px) {
  .access-project.inner.bdrs-10 {
    border-radius: 0;
  }
}

.access-project__ttl {
  font-size: 4.5rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 12rem;
  position: relative;
  color: var(--main-color);
  text-align: center;
}
.access-project__ttl span {
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .access-project__ttl {
    margin-bottom: 8rem;
  }
}
@media screen and (max-width: 834px) {
  .access-project__ttl {
    font-size: 2.5rem;
    margin-bottom: 5rem;
  }
}
.access-project__ttl::before {
  background: url(../img/access/project01.webp) no-repeat center;
  background-size: contain;
  content: "";
  display: inline-block;
  position: absolute;
  width: 28rem;
  aspect-ratio: 558/286;
  top: -10.5rem;
  left: -38%;
  z-index: 1;
}
@media screen and (max-width: 1200px) {
  .access-project__ttl::before {
    width: 24vw;
    left: -35%;
  }
}
@media screen and (max-width: 990px) {
  .access-project__ttl::before {
    width: 24vw;
    left: -23%;
  }
}
@media screen and (max-width: 834px) {
  .access-project__ttl::before {
    top: -9rem;
  }
}
@media screen and (max-width: 499px) {
  .access-project__ttl::before {
    top: -5rem;
    left: -4%;
    width: 34vw;
    max-width: 13.4rem;
  }
}
.access-project__ttl::after {
  aspect-ratio: 1240/40;
  width: 100%;
  background-image: url(../img/access/project02.webp);
  display: block;
  position: absolute;
  left: 0;
  bottom: -2rem;
  content: "";
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 834px) {
  .access-project__ttl::after {
    bottom: -1.6rem;
  }
}
@media screen and (max-width: 499px) {
  .access-project__ttl::after {
    bottom: -1rem;
  }
}

.access-project__content {
  background-color: #fff;
  padding: 7.8rem;
  position: relative;
}
@media screen and (max-width: 1200px) {
  .access-project__content {
    padding: 5rem;
    padding-bottom: 58rem;
  }
}
@media screen and (max-width: 834px) {
  .access-project__content {
    padding: 2rem;
    padding-bottom: 55rem;
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 499px) {
  .access-project__content {
    padding-bottom: 46rem;
  }
}
.access-project__content::after {
  position: absolute;
  background: url(../img/access/project03.webp) no-repeat center;
  background-size: contain;
  content: "";
  display: inline-block;
  width: 46%;
  max-width: 48rem;
  aspect-ratio: 758/1094;
  bottom: 0px;
  right: 5%;
  z-index: 1;
}
@media screen and (max-width: 1200px) {
  .access-project__content::after {
    right: 50%;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
    width: 33rem;
  }
}
@media screen and (max-width: 499px) {
  .access-project__content::after {
    width: 28rem;
  }
}

.access-project__txt {
  width: 48%;
}
@media screen and (max-width: 1200px) {
  .access-project__txt {
    width: 100%;
  }
}/*# sourceMappingURL=access.css.map */