.p-project-content01 {
  padding-top: calc(100vw / 375 * 60);
  position: relative;
}

.p-project-content01::before {
  content: "";
  display: block;
  width: calc(100vw / 375 * 300);
  height: calc(100vw / 375 * 467);
  background-image: url("../img/works/project/bgImg.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
}

.p-project-content01__inner {
  padding: 0 calc(100vw / 375 * 20);
  position: relative;
  z-index: 10;
}

.p-project-content01__inner__list {
  display: flex;
  flex-wrap: wrap;
}

.p-project-content01__inner__list__item {
  width: 50%;
  border: 1px solid #D6D6D6;
}

.p-project-content01__inner__list__item__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(100vw / 375 * 60);
  padding: 0 calc(100vw / 375 * 20);
  background: #ffffff;
}

.p-project-content01__inner__list__item__link::after {
  content: "";
  display: block;
  width: calc(100vw / 375 * 13);
  height: calc(100vw / 375 * 8);
  background-image: url("../img/works/project/arrowIcon.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.p-project-content01__inner__list__item:nth-of-type(2n) {
  border-left: none;
}

.p-project-content01__inner__heading {
  font-weight: 400;
  font-size: calc(100vw / 375 * 22);
  line-height: 1.67;
  letter-spacing: 0.04em;
  color: #0E6DA6;
  margin-top: calc(100vw / 375 * 40);
}

.p-project-content01__inner__text {
  line-height: 2.5;
  margin-top: calc(100vw / 375 * 20);
  text-align: justify;
}

.p-project-content01__inner__heading02 {
  margin-top: calc(100vw / 375 * 40);
  padding-bottom: calc(100vw / 375 * 10);
  border-bottom: 1px solid #2F6DA1;
}

.p-project-content01__inner__heading02__text {
  font-weight: 400;
  font-size: calc(100vw / 375 * 20);
  line-height: 1.58;
}

.p-project-content01__inner__list02 {
  display: flex;
  flex-wrap: wrap;
}

.p-project-content01__inner__list02__item {
  width: calc(100vw / 375 * 105);
  margin: calc(100vw / 375 * 20) calc(100vw / 375 * 10) 0 0;
}

.p-project-content01__inner__list02__item:nth-of-type(3n) {
  margin-right: 0;
}

.p-project-content01__inner__list02__item__text {
  text-align: center;
  margin-top: calc(100vw / 375 * 5);
}

.p-project-content01__inner__list02 + .p-project-content01__inner__text {
  margin-top: calc(100vw / 375 * 40);
}

@media print,
(min-width: 768px) {
  .p-project-content01 {
    padding-top: calc(100vw / 1600 * 138);
  }

  .p-project-content01::before {
    width: calc(100vw / 1600 * 862);
    height: calc(100vw / 1600 * 1342);
  }

  .p-project-content01__inner {
    padding: 0;
    width: calc(100vw / 1600 * 1160);
    margin: 0 auto;
  }

  .p-project-content01__inner__list {
    justify-content: flex-end;
  }

  .p-project-content01__inner__list__item {
    width: calc(100vw / 1600 * 266);
    border-right: none;
  }

  .p-project-content01__inner__list__item__link {
    height: calc(100vw / 1600 * 70);
    padding: 0 calc(100vw / 1600 * 20);
  }

  .p-project-content01__inner__list__item__link::after {
    width: calc(100vw / 1600 * 13);
    height: calc(100vw / 1600 * 8);
  }

  .p-project-content01__inner__list__item__link__text {
    font-size: calc(100vw / 1600 * 20);
  }

  .p-project-content01__inner__list__item:nth-of-type(2n) {
    border-left: 1px solid #D6D6D6;
  }

  .p-project-content01__inner__list__item:last-of-type {
    border-right: 1px solid #D6D6D6;
  }

  .p-project-content01__inner__heading {
    font-size: calc(100vw / 1600 * 30);
    margin-top: calc(100vw / 1600 * 69);
  }

  .p-project-content01__inner__text {
    line-height: 2.5;
    margin-top: calc(100vw / 1600 * 63);
    text-align: left;
  }

  .p-project-content01__inner__text + .p-project-content01__inner__heading {
    margin-top: calc(100vw / 1600 * 114);
  }

  .p-project-content01__inner__heading02 {
    margin-top: calc(100vw / 1600 * 63);
    padding-bottom: calc(100vw / 1600 * 35);
  }

  .p-project-content01__inner__heading02__text {
    font-size: calc(100vw / 1600 * 24);
  }

  .p-project-content01__inner__list02 {
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-top: calc(100vw / 1600 * 62);
  }

  .p-project-content01__inner__list02__item {
    width: calc(100vw / 1600 * 117);
    margin: 0;
  }

  .p-project-content01__inner__list02__item__text {
    margin-top: calc(100vw / 1600 * 22);
  }

  .p-project-content01__inner__list02 + .p-project-content01__inner__text {
    margin-top: calc(100vw / 1600 * 63);
  }
}

.p-project-content02 {
  margin-top: calc(100vw / 375 * 60);
}

.p-project-content02__inner {
  width: calc(100vw / 375 * 335);
  margin: 0 auto;
  border-bottom: 1px solid #D6D6D6;
}

.p-project-content02__inner__heading {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
}

.p-project-content02__inner__heading__text01 {
  font-weight: 400;
  font-size: calc(100vw / 375 * 24);
  line-height: 1.275;
  letter-spacing: 0.053em;
  color: #0E6DA6;
}

.p-project-content02__inner__heading__text02 {
  font-weight: 500;
  font-size: calc(100vw / 375 * 20);
  line-height: 1.5;
}

.p-project-content02__inner__map {
  overflow: scroll;
  margin-top: calc(100vw / 375 * -60);
  padding-top: calc(100vw / 375 * 65);
  position: relative;
  z-index: 10;
}

.p-project-content02__inner__map__inner {
  width: calc(100vw / 375 * 800);
  position: relative;
}

.p-project-content02__inner__map__inner__button {
  position: absolute;
}

.p-project-content02__inner__map__inner__button[data-item="1"] {
  width: calc(100vw / 375 * 100);
  top: calc(100vw / 375 * 124);
  left: calc(100vw / 375 * 260);
}

.p-project-content02__inner__map__inner__button[data-item="2"] {
  width: calc(100vw / 375 * 100);
  top: calc(100vw / 375 * 256);
  left: calc(100vw / 375 * 480);
}

.p-project-content02__inner__map__inner__button[data-item="3"] {
  width: calc(100vw / 375 * 109);
  top: calc(100vw / 375 * -60);
  left: calc(100vw / 375 * 645);
}

.p-project-content02__inner__map__inner__button[data-item="4"] {
  width: calc(100vw / 375 * 100);
  top: calc(100vw / 375 * 60);
  left: calc(100vw / 375 * 460);
}

.p-project-content02__inner__map__inner__button[data-item="5"] {
  width: calc(100vw / 375 * 100);
  top: calc(100vw / 375 * 320);
  left: calc(100vw / 375 * 340);
}

.p-project-content02__inner__map__inner__button[data-item="6"] {
  width: calc(100vw / 375 * 100);
  top: calc(100vw / 375 * 100);
  left: calc(100vw / 375 * 150);
}

.p-project-content02__inner__map__inner__button[data-item="7"] {
  width: calc(100vw / 375 * 100);
  top: calc(100vw / 375 * 300);
  left: calc(100vw / 375 * 150);
}

.p-project-content02__inner__map__inner__button[data-item="8"] {
  width: calc(100vw / 375 * 100);
  top: calc(100vw / 375 * 105);
  left: calc(100vw / 375 * 20);
}

.p-project-content02__inner__map__inner__button.disabled {
  pointer-events: none;
}

.p-project-content02__inner__map__inner__button:hover {
  opacity: 0.7;
}

.p-project-content02__modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}

.p-project-content02__modal__mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(56, 56, 56, 0.65);
}

.p-project-content02__modal__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.p-project-content02__modal__inner__item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw / 375 * 345);
  max-height: 80vh;
  background: #ffffff;
  padding: calc(100vw / 375 * 20);
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
}

.p-project-content02__modal__inner__item__close {
  width: calc(100vw / 375 * 20);
  position: absolute;
  top: calc(100vw / 375 * 20);
  right: calc(100vw / 375 * 20);
}

.p-project-content02__modal__inner__item__heading__text {
  font-weight: 500;
  font-size: calc(100vw / 375 * 22);
  line-height: 1.48;
}

.p-project-content02__modal__inner__item__container {
  flex-grow: 1;
  overflow: auto;
  margin-top: calc(100vw / 375 * 10);
}

.p-project-content02__modal__inner__item__container__list__item {
  margin-top: calc(100vw / 375 * 4);
}


.p-project-content02__modal__inner__item__container__list__item:nth-of-type(odd) {
  font-weight: 700;
}

.p-project-content02__modal__inner__item__container__list__item:nth-of-type(even) {
  padding-bottom: calc(100vw / 375 * 4);
  margin-bottom: calc(100vw / 375 * 16);
  border-bottom: 1px solid #efefef;
}

.p-project-content02__modal__inner__item__remarks {
  margin-top: calc(100vw / 375 * 20);
}

.p-project-content02__modal__inner__item__remarks__text {
  font-size: calc(100vw / 375 * 14);
  line-height: 1.5;
  color: #A1A1A1;
  text-align: right;
}

.p-project-content02__modal__inner__item.is-active {
  visibility: visible;
  opacity: 1;
}

.p-project-content02__modal__inner__item[data-item="1"] .p-project-content02__modal__inner__item__heading__text {
  color: #74CAD9;
}

.p-project-content02__modal__inner__item[data-item="2"] .p-project-content02__modal__inner__item__heading__text {
  color: #6E87CC;
}

.p-project-content02__modal__inner__item[data-item="3"] .p-project-content02__modal__inner__item__heading__text {
  color: #e89fc1;
}

.p-project-content02__modal__inner__item[data-item="4"] .p-project-content02__modal__inner__item__heading__text {
  color: #ce9dff;
}

.p-project-content02__modal__inner__item[data-item="5"] .p-project-content02__modal__inner__item__heading__text {
  color: #69afd9;
}

.p-project-content02__modal__inner__item[data-item="6"] .p-project-content02__modal__inner__item__heading__text {
  color: #6fc8af;
}

.p-project-content02__modal__inner__item[data-item="7"] .p-project-content02__modal__inner__item__heading__text {
  color: #8fc36e;
}

.p-project-content02__modal__inner__item[data-item="8"] .p-project-content02__modal__inner__item__heading__text {
  color: #cfb86d;
}

.p-project-content02__modal.is-active {
  visibility: visible;
  opacity: 1;
}

@media print,
(min-width: 768px) {
  .p-project-content02 {
    margin-top: calc(100vw / 1600 * 112);
  }

  .p-project-content02__inner {
    width: calc(100vw / 1600 * 1160);
    padding-bottom: calc(100vw / 1600 * 150);
  }

  .p-project-content02__inner__heading {
    position: static;
  }

  .p-project-content02__inner__heading__text01 {
    font-size: calc(100vw / 1600 * 40);
  }

  .p-project-content02__inner__heading__text02 {
    font-size: calc(100vw / 1600 * 24);
    margin-top: calc(100vw / 1600 * 5);
  }

  .p-project-content02__inner__map {
    overflow: visible;
    margin-top: calc(100vw / 1600 * 86);
    padding-top: 0;
  }

  .p-project-content02__inner__map__inner {
    width: 100%;
  }

  .p-project-content02__inner__map__inner__button {
    cursor: pointer;
    transition: 0.3s;
  }

  .p-project-content02__inner__map__inner__button[data-item="1"] {
    width: calc(100vw / 1600 * 189);
    top: calc(100vw / 1600 * 125);
    left: calc(100vw / 1600 * 410);
  }

  .p-project-content02__inner__map__inner__button[data-item="2"] {
    width: calc(100vw / 1600 * 206);
    top: calc(100vw / 1600 * 356);
    left: calc(100vw / 1600 * 718);
  }

  .p-project-content02__inner__map__inner__button[data-item="3"] {
    width: calc(100vw / 1600 * 189);
    top: calc(100vw / 1600 * -112);
    left: calc(100vw / 1600 * 918);
  }

  .p-project-content02__inner__map__inner__button[data-item="4"] {
    width: calc(100vw / 1600 * 189);
    top: calc(100vw / 1600 * 74);
    left: calc(100vw / 1600 * 619);
  }

  .p-project-content02__inner__map__inner__button[data-item="5"] {
    width: calc(100vw / 1600 * 189);
    top: calc(100vw / 1600 * 460);
    left: calc(100vw / 1600 * 485);
  }

  .p-project-content02__inner__map__inner__button[data-item="6"] {
    width: calc(100vw / 1600 * 189);
    top: calc(100vw / 1600 * 108);
    left: calc(100vw / 1600 * 206);
  }

  .p-project-content02__inner__map__inner__button[data-item="7"] {
    width: calc(100vw / 1600 * 189);
    top: calc(100vw / 1600 * 420);
    left: calc(100vw / 1600 * 261);
  }

  .p-project-content02__inner__map__inner__button[data-item="8"] {
    width: calc(100vw / 1600 * 189);
    top: calc(100vw / 1600 * 128);
    left: calc(100vw / 1600 * 0);
  }

  .p-project-content02__modal__inner__item {
    width: calc(100vw / 1600 * 1035);
    padding: calc(100vw / 1600 * 60) calc(100vw / 1600 * 120);
  }

  .p-project-content02__modal__inner__item__close {
    width: calc(100vw / 1600 * 27);
    top: calc(100vw / 1600 * 62);
    right: calc(100vw / 1600 * 72);
    transition: 0.3s;
    cursor: pointer;
  }

  .p-project-content02__modal__inner__item__close:hover {
    opacity: 0.7;
  }

  .p-project-content02__modal__inner__item__heading__text {
    font-size: calc(100vw / 1600 * 31);
  }

  .p-project-content02__modal__inner__item__container {
    margin-top: calc(100vw / 1600 * 30);
  }

  .p-project-content02__modal__inner__item__container__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .p-project-content02__modal__inner__item__container__list__item {
    width: 45%;
    margin-top: 0;
    margin-bottom: calc(100vw / 1600 * 16);
    padding-bottom: calc(100vw / 1600 * 8);
    border-bottom: 1px solid #efefef;
  }

  .p-project-content02__modal__inner__item__container__list__item:nth-of-type(even) {
    width: 55%;
    margin-top: 0;
    margin-bottom: calc(100vw / 1600 * 16);
    padding-bottom: calc(100vw / 1600 * 8);
    padding-left: calc(100vw / 1600 * 8);
  }

  .p-project-content02__modal__inner__item__remarks {
    margin-top: calc(100vw / 1600 * 20);
  }

  .p-project-content02__modal__inner__item__remarks__text {
    font-size: calc(100vw / 1600 * 16);
  }
}

.p-project-content03 {
  margin-top: calc(100vw / 375 * 60);
  padding-bottom: calc(100vw / 375 * 60);
}

.p-project-content03__inner {
  padding: 0 calc(100vw / 375 * 20);
}

.p-project-content03__inner__heading {
  display: flex;
  flex-direction: column;
}

.p-project-content03__inner__heading__text01 {
  font-weight: 400;
  font-size: calc(100vw / 375 * 24);
  line-height: 1.275;
  letter-spacing: 0.053em;
  color: #0E6DA6;
}

.p-project-content03__inner__heading__text02 {
  font-weight: 500;
  font-size: calc(100vw / 375 * 20);
  line-height: 1.5;
}

.p-project-content03__inner__list {
  padding-top: calc(100vw / 375 * 40);
}

.p-project-content03__inner__list__item__left {
  width: calc(100vw / 375 * 200);
  margin: 0 auto;
}

.p-project-content03__inner__list__item__right {
  margin-top: calc(100vw / 375 * 20);
}

.p-project-content03__inner__list__item__right__inner__heading__text {
  font-weight: 500;
  font-size: calc(100vw / 375 * 20);
  line-height: 1.67;
}

.p-project-content03__inner__list__item__right__inner__text {
  margin-top: calc(100vw / 375 * 10);
  line-height: 1.625;
}

.p-project-content03__inner__list.slick-slider {
  margin-bottom: 0;
}

.p-project-content03__inner__list.slick-slider .slick-dots {
  bottom: auto;
  top: calc(100vw / 375 * -16);
  display: flex;
  justify-content: flex-end;
}

.p-project-content03__inner__list.slick-slider .slick-dots li {
  width: calc(100vw / 375 * 12);
  height: calc(100vw / 375 * 12);
  margin: 0 0 0 calc(100vw / 375 * 12);
}

.p-project-content03__inner__list.slick-slider .slick-dots li button {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 0;
  background: #DDDDDD;
}

.p-project-content03__inner__list.slick-slider .slick-dots li button::before {
  content: none;
}

.p-project-content03__inner__list.slick-slider .slick-dots li.slick-active button {
  background: #0E6DA6;
}

@media print,
(min-width: 768px) {
  .p-project-content03 {
    margin-top: calc(100vw / 1600 * 90);
    padding-bottom: calc(100vw / 1600 * 177);
  }

  .p-project-content03__inner {
    padding: 0;
    width: calc(100vw / 1600 * 1160);
    margin: 0 auto;
  }

  .p-project-content03__inner__heading__text01 {
    font-size: calc(100vw / 1600 * 40);
  }

  .p-project-content03__inner__heading__text02 {
    font-size: calc(100vw / 1600 * 24);
    margin-top: calc(100vw / 1600 * 5);
  }

  .p-project-content03__inner__list {
    padding-top: calc(100vw / 1600 * 99);
  }

  .p-project-content03__inner__list__item {
    display: flex !important;
  }

  .p-project-content03__inner__list__item__left {
    width: calc(100vw / 1600 * 450);
    flex-shrink: 0;
    margin: 0;
    border: 1px solid #D2D2D2;
    border-right: none;
  }

  .p-project-content03__inner__list__item__right {
    margin-top: 0;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #D2D2D2;
    border-left: none;
  }

  .p-project-content03__inner__list__item__right__inner {
    width: calc(100vw / 1600 * 600);
  }

  .p-project-content03__inner__list__item__right__inner__heading {
    width: calc(100vw / 1600 * 600);
  }

  .p-project-content03__inner__list__item__right__inner__heading__text {
    font-size: calc(100vw / 1600 * 24);
  }

  .p-project-content03__inner__list__item__right__inner__text {
    margin-top: calc(100vw / 1600 * 21);
  }

  .p-project-content03__inner__list.slick-slider .slick-dots {
    top: calc(100vw / 1600 * -16);
  }

  .p-project-content03__inner__list.slick-slider .slick-dots li {
    width: calc(100vw / 1600 * 16);
    height: calc(100vw / 1600 * 16);
    margin: 0 0 0 calc(100vw / 1600 * 20);
  }
}

.p-project-mainVisual {
  height: calc(100vw / 375 * 320);
  padding-top: calc(100vw / 375 * 20);
  background-image: url("../img/works/project/mainImg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.p-project-mainVisual__inner {
  padding: 0 calc(100vw / 375 * 20);
}

.p-project-mainVisual__inner__heading {
  display: flex;
  flex-direction: column;
}

.p-project-mainVisual__inner__heading__text01 {
  font-family: 'Abel', sans-serif;
  font-weight: 400;
  font-size: calc(100vw / 375 * 30);
  line-height: 1.34;
  letter-spacing: 0.053em;
  color: #ffffff;
}

.p-project-mainVisual__inner__heading__text02 {
  font-weight: 500;
  font-size: calc(100vw / 375 * 20);
  color: #ffffff;
}

@media print,
(min-width: 768px) {
  .p-project-mainVisual {
    height: calc(100vw / 1600 * 672);
    padding-top: calc(100vw / 1600 * 148);
  }

  .p-project-mainVisual__inner {
    padding: 0;
    width: calc(100vw / 1600 * 1160);
    margin: 0 auto;
  }

  .p-project-mainVisual__inner__heading__text01 {
    font-size: calc(100vw / 1600 * 50);
  }

  .p-project-mainVisual__inner__heading__text02 {
    font-size: calc(100vw / 1600 * 30);
    margin-top: calc(100vw / 1600 * 5);
  }
}