.p-top_mv {
  position: relative;
}
.p-mv_box01 {
  background: url(../img/top_mv01.webp) no-repeat center;
  aspect-ratio: 1920/685;
  background-size: cover;
}
.p-mv_box02 {
  background: url(../img/top_mv02.webp) no-repeat center;
  aspect-ratio: 1920/685;
  background-size: cover;
}
.p-mv_box03 {
  background: url(../img/top_mv03.webp) no-repeat center;
  aspect-ratio: 1920/685;
  background-size: cover;
}

.p-top__ttl {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: calc(283 / 1920 * 100vw);
  color: #fff;
}
.p-top__ttl h1 {
  font-size: min(calc(32 / 1920 * 100vw), 3.2rem);
}
.p-top__ttl p {
  font-size: min(calc(24 / 1920 * 100vw), 2.4rem);
}

.p-top__flex {
  display: flex;
  gap: calc(30 / 1920 * 100vw);
  align-items: flex-start;
  justify-content: center;
}
.p-top__about {
  max-width: calc(1280 / 1920 * 100vw);
  margin: calc(100 / 1920 * 100vw) auto calc(67 / 1920 * 100vw);
}
.p-top__about img,
.p-top__service img {
  width: calc(550 / 1920 * 100vw);
}

.p-top__about h1,
.p-top__service h1,
.p-top__recruit h1 {
  color: #041562;
  font-size: min(calc(40 / 1920 * 100vw), 4rem);
  display: flex;
  align-items: end;
  gap: calc(30 / 1920 * 100vw);
}
.p-top__about span,
.p-top__service span,
.p-top__recruit span {
  font-size: min(calc(20 / 1920 * 100vw), 2rem);
}
.p-top__lead h2,
.p-top__service h2,
.p-top__recruit h2 {
  font-size: min(calc(32 / 1920 * 100vw), 3.2rem);
  margin: calc(20 / 1920 * 100vw) 0 calc(30 / 1920 * 100vw);
  line-height: 1.6;
}
.p-top__lead p,
.p-top__service p,
.p-top__recruit p {
  font-size: min(calc(20 / 1920 * 100vw), 2rem);
  margin-bottom: calc(30 / 1920 * 100vw);
}
.p-top__service {
  max-width: calc(1280 / 1920 * 100vw);
  margin: 0 auto;
}
.p-top__service .p-top__flex {
  flex-direction: row-reverse;
}

.p-top__works {
  margin: calc(30 / 1920 * 100vw) 0 calc(100 / 1920 * 100vw);
}
.p-top__works--ttl {
  text-align: center;
  color: #041562;
  margin-bottom: calc(93 / 1920 * 100vw);
}
.p-top__works--ttl h1 {
  font-size: min(calc(40 / 1920 * 100vw), 4rem);
}
.p-top__works--ttl p {
  font-size: min(calc(20 / 1920 * 100vw), 2rem);
}

.gallery-slider {
  width: 100%;
  margin: 0 auto calc(80 / 1920 * 100vw);
}
.gallery-slider li {
  margin-right: calc(60 / 1920 * 100vw); /* 右側の余白を20pxに設定 */
}
.gallery-slider img {
  width: 100%; /* 画像を親要素に合わせる */
  display: block;
}

.gallery-slider li:nth-child(odd) {
  padding: 20px 0;
}

.p-top__works .c-btn {
  margin: 0 auto;
}
.p-top__recruit {
  max-width: calc(1280 / 1920 * 100vw);
  margin: 0 auto;
  position: relative;
}
.p-top__recruit::after {
  content: "";
  background: url(../img/dec01.webp) no-repeat;
  background-size: contain;
  width: calc(1628 / 1920 * 100vw);
  position: absolute;
  bottom: calc(-30 / 1920 * 100vw);
  left: 0%;
  aspect-ratio: 1628/138;
  z-index: -1;
}
.p-top__lead {
  width: calc(700/1920*100vw);
}
.p-top__recruit--img {
  display: flex;
  align-items: flex-start;
  gap: calc(11/1920*100vw);
}
.p-top__recruit--img01 {
  padding-top: 60px;
}
.p-top__recruit--img01,
.p-top__recruit--img02 {
  width: calc(261 / 1920 * 100vw);
}
.p-top__area {
  margin: calc(144 / 1920 * 100vw) 0;
}
.p-top__area--ttl {
  text-align: center;
}
.p-top__area--ttl h1 {
  font-size: min(calc(40 / 1920 * 100vw), 4rem);
  color: #041562;
}
.p-top__area--ttl span {
  font-size: min(calc(20 / 1920 * 100vw), 2rem);
  color: #041562;
}
.p-top__area--ttl p {
  font-size: min(calc(20 / 1920 * 100vw), 2rem);
  margin-bottom: calc(20 / 1920 * 100vw);
}
.p-top__area p {
  text-align: center;
}
.p-top__area img {
  width: calc(714 / 1920 * 100vw);
  margin: calc(50 / 1920 * 100vw) auto 0;
}

@media screen and (max-width: 768px) {
  .p-mv_box01 {
    background: url(../img/top_mv01_sp.webp) no-repeat center;
    aspect-ratio: 375/625;
    background-size: cover;
  }
  .p-mv_box02 {
    background: url(../img/top_mv02_sp.webp) no-repeat center;
    aspect-ratio: 375/625;
    background-size: cover;
  }
  .p-mv_box03 {
    background: url(../img/top_mv03_sp.webp) no-repeat center;
    aspect-ratio: 375/625;
    background-size: cover;
  }
  .p-top__ttl h1 {
    font-size: 2.4rem;
    white-space: nowrap;
    line-height: 1.6;
  }
  .p-top__ttl p {
    font-size: 1.6rem;
  }
  .p-top__ttl {
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .p-top__flex {
    flex-direction: column-reverse;
    align-items: center;
  }
  .p-top__lead {
    width: auto;
  }
  .p-top__about {
    margin: 40px 4% 32px;
    max-width: unset;
  }
  .p-top__about h1,
  .p-top__service h1,
  .p-top__recruit h1 {
    font-size: 2.4rem;
    flex-direction: column;
    align-items: center;
  }
  .p-top__about span,
  .p-top__service span,
  .p-top__recruit span {
    font-size: 2rem;
  }
  .p-top__lead h2,
  .p-top__service h2,
  .p-top__recruit h2 {
    font-size: 2.4rem;
    margin: 23px 0 11px;
  }
  .p-top__lead p,
  .p-top__service p,
  .p-top__recruit p {
    font-size: 1.6rem;
    margin-bottom: 30px;
  }
  .p-top__about img,
  .p-top__service img {
    width: auto;
  }
  .p-top__service {
    max-width: unset;
    margin: 0 4% 40px;
  }
  .p-top__service .p-top__flex {
    flex-direction: column-reverse;
  }
  .p-top__works {
    margin: 40px 0;
  }
  .p-top__works--ttl h1,
  .p-top__area--ttl h1 {
    font-size: 2.4rem;
  }
  .p-top__works--ttl p,
  .p-top__area--ttl p {
    font-size: 2rem;
  }
  .gallery-slider {
    margin: 0 auto 30px;
  }
  .gallery-slider li {
    width: calc(100 / 375 * 100vw) !important;
    margin-right: 9px;
  }
  .gallery-slider li:nth-child(odd) {
    padding: 5px 0 0;
  }
  .p-top__recruit {
    max-width: unset;
    margin: 0 4%;
  }
  .p-top__recruit--img {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin-top: 30px;
  }
  .p-top__recruit--img01,
  .p-top__recruit--img02 {
    width: calc(139 / 375 * 100vw);
  }
  .p-top__recruit::after {
    width: 407px;
    bottom: 214px;
  }
  .p-top__recruit--img01 {
    padding-top: 33px;
  }
  .p-top__area {
    margin: 40px 4%;
  }
  .p-top__area img {
    width: auto;
    margin: 30px auto 0;
  }
}

/* --------------
service
------------------*/

.p-mv {
  position: relative;
}
.mv {
  background: url(../img/mv.webp) no-repeat center;
  background-size: cover;
  aspect-ratio: 1920/391;
}

.p-mv_ttl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}
.p-mv_ttl h1 {
  font-size: min(calc(96 / 1920 * 100vw), 9.6rem);
  font-weight: 500;
  letter-spacing: 0.2rem;
}

.p-mv_ttl h2 {
  font-size: min(calc(40 / 1920 * 100vw), 4rem);
  font-weight: 500;
  letter-spacing: 0.2rem;
}
.p-service01 {
  margin-top: calc(146 / 1920 * 100vw) !important;
}
.p-service {
  margin: calc(78 / 1920 * 100vw) 0;
}
.p-service h3 {
  color: #041562;
  font-size: min(calc(24 / 1920 * 100vw), 2.4rem);
}
.p-service  .p-top__lead h2 {
  font-size: min(calc(36 / 1920 * 100vw), 3.6rem);
  border-bottom: solid 1px #000;
  padding-bottom: calc(13 / 1920 * 100vw);
}

.p-service p {
  width: calc(700 / 1920 * 100vw);
}
.p-service img {
  width: calc(697 / 1920 * 100vw);
}
.p-service02 .p-top__flex,
.p-service04 .p-top__flex {
  flex-direction: row-reverse;
}
.p-service05 h3 {
  color: #000;
  text-align: center;
  position: relative;
  font-size: min(calc(36 / 1920 * 100vw), 3.6rem);
  font-weight: 500;
}
.p-service05 h3::after {
  content: "";
  border-bottom: solid 3px #041562;
  padding: calc(30 / 1920 * 100vw) 0 0;
  width: calc(100 / 1920 * 100vw);
  display: block;
  margin: 0 auto;
}
.p-service05 .p-top__lead {
  width: auto;
}
.p-service05 img {
  margin: calc(53 / 1920 * 100vw) auto;
}
@media screen and (max-width: 768px) {
  .p-service {
    margin: 60px 4% 30px;
  }
  .p-service .p-top__flex {
    gap: 30px;
  }
  .p-service .p-top__lead h2,
  .p-service .p-top__service h2,
  .p-service .p-top__recruit h2 {
    margin: 5px 0;
    font-size: 2rem;
  }
  .p-service .p-top__lead p,
  .p-service .p-top__service p,
  .p-service .p-top__recruit p {
    margin-bottom: 0;
  }
  .p-service01 {
    margin-top: 60px !important;
  }
  .p-service02 .p-top__flex,
  .p-service04 .p-top__flex {
    flex-direction: column-reverse;
  }
  .p-service h3 {
    font-size: 2rem;
  }
  .p-top__lead h2 {
    font-size: 2.4rem;
  }
  .p-service p {
    width: auto;
  }
  .p-service img {
    width: auto;
  }
}

/* ---------------
recruit
--------------------*/
.p-recruit {
  padding: calc(50 / 1920 * 100vw) 0;
  position: relative;
}
.p-recruit::before {
  content: "";
  border-bottom: solid 1px #041562;
  width: calc(1070 / 1920 * 100vw);
  display: block;
  position: absolute;
  top: calc(240 / 1920 * 100vw);
}
.p-recruit::after {
  content: "";
  background: url(../img/dec01.webp) no-repeat;
  background-size: contain;
  width: calc(1309 / 1920 * 100vw);
  position: absolute;
  right: 0;
  bottom: calc(-150 / 1920 * 100vw);
  aspect-ratio: 1309/138;
}
.p-recruit__box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(60 / 1920 * 100vw);
}
.p-recruit__lead {
  width: calc(692 / 1920 * 100vw);
}
.p-recruit__lead h1 {
  font-size: min(calc(64 / 1920 * 100vw), 6.4rem);
  margin-bottom: calc(70 / 1920 * 100vw);
  color: #041562;
}
.p-recruit__img {
  display: flex;
  align-items: flex-start;
  gap: calc(10 / 1920 * 100vw);
}
.p-recruit__img img {
  width: calc(261 / 1920 * 100vw);
}
.p-recruit__img01 {
  padding-top: calc(60 / 1920 * 100vw);
}
.p-recruit__outline {
  margin: calc(185 / 1920 * 100vw) 0 0;
}
.p-recruit__outline--ttl {
  text-align: center;
}
.p-recruit__outline--ttl h1 {
  font-size: min(calc(48 / 1920 * 100vw), 4.8rem);
  background: linear-gradient(90deg, #041562 0%, #082bc8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p-recruit__outline--ttl p {
  font-size: min(calc(36 / 1920 * 100vw), 3.6rem);
}
.p-recruit__outline--box {
  margin: calc(57 / 1920 * 100vw) 0 calc(120 / 1920 * 100vw);
}
.p-recruit__outline--box dl {
  display: flex;
  justify-content: center;
  font-size: min(calc(24 / 1920 * 100vw), 2.4rem);
  margin-bottom: calc(9 / 1920 * 100vw);
  align-items: center;
}
.p-recruit__outline--box dt {
  background-color: #041562;
  color: #fff;
  width: calc(241 / 1920 * 100vw);
  padding: calc(14 / 1920 * 100vw) 0;
  text-align: center;
}
.p-recruit__outline--box dd {
  background-color: #f5f5f5;
  width: calc(651 / 1920 * 100vw);
  padding: calc(14 / 1920 * 100vw) 0 calc(14 / 1920 * 100vw)
    calc(30 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .mv {
    background: url(../img/mv_sp.webp) no-repeat center;
    background-size: cover;
    aspect-ratio: 375/625;
  }
  .p-mv_ttl h1 {
    font-size: 3rem;
  }
  .p-mv_ttl h2 {
    font-size: 2.4rem;
  }
  .p-recruit {
    padding: 60px 4%;
  }
  .p-recruit::before {
    top: 100px;
    width: 91vw;
  }
  .p-recruit__box {
    flex-direction: column;
    gap: 60px;
  }
  .p-recruit__lead h1 {
    font-size: 2.4rem;
    margin-bottom: 20px;
  }

  .p-recruit__lead {
    width: auto;
  }
  .p-recruit__img img {
    width: calc(139 / 375 * 100vw);
  }
  .p-recruit::after {
    width: 407px;
    bottom: 274px;
  }
  .p-recruit__outline--ttl h1 {
    font-size: 2.4rem;
  }
  .p-recruit__outline--ttl p {
    font-size: 2rem;
  }
  .p-recruit__outline--box {
    margin: 20px 4% 40px;
  }
  .p-recruit__outline--box dl {
    font-size: 1.6rem;
    margin-bottom: 10px;
    align-items: unset;
  }
  .p-recruit__outline--box dt {
    width: 150px;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .p-recruit__outline--box dd {
    width: 100%;
    padding: 10px 0 10px 10px;
    display: flex;
    align-items: center;
  }
}
/* ------------------
company
-------------------*/
.p-greet {
  margin: calc(112 / 1920 * 100vw) 0 0;
}
.p-greet__ttl {
  text-align: center;
}
.p-greet__ttl h1 {
  color: #041562;
  font-size: min(calc(64 / 1920 * 100vw), 6.4rem);
  font-weight: 600;
  position: relative;
}
.p-greet__lead {
  text-align: center;
  margin: calc(28 / 1920 * 100vw) auto calc(55 / 1920 * 100vw);
  max-width: calc(1280 / 1920 * 100vw);
}
.p-greet__name {
  color: #041562;
  text-align: center;
  font-size: min(calc(40 / 1920 * 100vw), 4rem);
}
.p-greet__name .f-32 {
  font-size: min(calc(32 / 1920 * 100vw), 3.2rem);
  padding-right: calc(16 / 1920 * 100vw);
}
.p-greet__name .f-24 {
  font-size: min(calc(24 / 1920 * 100vw), 2.4rem);
  padding-left: calc(16 / 1920 * 100vw);
}
.p-company {
  margin: calc(185 / 1920 * 100vw) 0 0;
}
.p-company__ttl {
  text-align: center;
}
.p-company__ttl h1 {
  font-size: min(calc(48 / 1920 * 100vw), 4.8rem);
  background: linear-gradient(90deg, #041562 0%, #082bc8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p-company__ttl p {
  font-size: min(calc(36 / 1920 * 100vw), 3.6rem);
}
.p-company__box {
  margin: calc(57 / 1920 * 100vw) 0 calc(120 / 1920 * 100vw);
}

.p-company__box dl {
  display: flex;
  justify-content: center;
  font-size: min(calc(24 / 1920 * 100vw), 2.4rem);
  margin-bottom: calc(9 / 1920 * 100vw);
  align-items: center;
}
.p-company__box dt {
  background-color: #041562;
  color: #fff;
  width: calc(241 / 1920 * 100vw);
  padding: calc(14 / 1920 * 100vw) 0;
  text-align: center;
}
.p-company__box dd {
  background-color: #f5f5f5;
  width: calc(651 / 1920 * 100vw);
  padding: calc(14 / 1920 * 100vw) 0 calc(14 / 1920 * 100vw)
    calc(30 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .p-greet {
    margin: 60px 4% 0;
  }
  .p-greet__ttl h1 {
    font-size: 2.4rem;
  }
  .p-greet__lead {
    margin: 20px auto;
    max-width: unset;
  }
  .p-greet__name {
    font-size: 2.4rem;
  }
  .p-greet__name .f-32 {
    font-size: 1.8rem;
  }
  .p-greet__name .f-24 {
    font-size: 1.6rem;
  }
  .p-company__ttl h1 {
    font-size: 2.4rem;
  }
  .p-company__ttl p {
    font-size: 2rem;
  }
  .p-company__box {
    margin: 20px 4% 60px;
  }
  .p-company__box dl {
    font-size: 1.6rem;
    margin-bottom: 10px;
  }
  .p-company__box dt {
    width: 150px;
    padding: 10px 0;
  }
  .p-company__box dd {
    width: 100%;
    padding: 10px 0 10px 10px;
  }
}
/* -------------
contact
---------------*/
.p-contact {
  padding: calc(80 / 1920 * 100vw) 0 calc(120 / 1920 * 100vw);
}
.p-contact__txt {
  text-align: center;
  margin-bottom: calc(80 / 1920 * 100vw);
}
.p-contact .p-recruit__outline--ttl {
  margin-top: calc(120 / 1920 * 100vw);
}
.p-contact__flex {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(45 / 1920 * 100vw);
}
.p-contact__tel h3 {
  font-size: min(calc(32 / 1920 * 100vw), 3.2rem);
  color: #041562;
  margin-bottom: calc(24 / 1920 * 100vw);
}
.p-contact__tel a {
  display: flex;
  color: #041562;
  font-size: min(calc(48 / 1920 * 100vw), 4.8rem);
  align-items: center;
  border-top: solid 1px #041562;
  border-bottom: solid 1px #041562;
  padding: calc(42 / 1920 * 100vw) 0;
  gap: calc(8 / 1920 * 100vw);
}
.p-contact__tel img {
  width: calc(44 / 1920 * 100vw);
}
.p-contact__fax h3 {
  font-size: min(calc(32 / 1920 * 100vw), 3.2rem);
  color: #041562;
  margin-bottom: calc(24 / 1920 * 100vw);
}
.p-contact__fax p {
  display: flex;
  color: #041562;
  font-size: min(calc(48 / 1920 * 100vw), 4.8rem);
  align-items: center;
  border-top: solid 1px #041562;
  border-bottom: solid 1px #041562;
  padding: calc(42 / 1920 * 100vw) 0;
  line-height: unset;
  gap: calc(8 / 1920 * 100vw);
}
.p-contact__fax img {
  width: calc(38 / 1920 * 100vw);
}

.p-contact__form {
  background-color: #fff;
  padding: calc(120/1920*100vw) 0;
  max-width: calc(1084/1920*100vw);
  margin: 0 auto;
}
.p-contact__form--box {
  width: 795px;
  margin: 0 auto;
}

.form-group {
  display: flex;
  border-bottom: 1px solid #d9d9d9;
}
.form-group.no-border {
  border-bottom: none;
}
.form-label {
  width: calc(300 / 1920 * 100vw);
  font-weight: 700;
  display: flex;
  font-size: min(calc(20 / 1920 * 100vw), 2rem);
  align-items: center;
}

.form-input {
  flex: 1;
  padding: 20px 15px 20px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1%;
}
.form-input p {
  width: 100%;
}
.form-input input {
  border: solid 2px #d9d9d9;
  height: 30px;
  border-radius: 5px;
}
.radio label,
.check label {
  display: flex;
  align-items: center;
  font-size: min(calc(16 / 1920 * 100vw), 1.6rem);
  font-weight: 700;
}
.form-input.tel-inputs p,
.form-input.fax-inputs p {
  display: flex;
  align-items: center;
  gap: 1%;
}

.form-input.tel-inputs input,
.form-input.fax-inputs input {
  width: 124px;
  text-align: center;
}

.form-input input[type="text"],
.form-input input[type="email"],
.form-input textarea {
  width: 97%;
  border: 2px solid #d9d9d9;
  font-size: 14px;
  border-radius: 4px;
  padding: calc(10 / 1920 * 100vw);
}
.form-input textarea {
  height: 200px;
}
.form-input input[type="text"][name^="tel"],
.form-input input[type="text"][name^="fax"] {
  width: 124px;
}

.form-input input[type="radio"],
.form-input input[type="checkbox"] {
  margin-right: 6px;
  width: 18px;
}

.form-input textarea {
  width: 100%;
  resize: vertical;
}

.form-input input[type="image"] {
  cursor: pointer;
  border: unset;
  border-radius: unset;
  margin: 100px auto;
}
.wpcf7 input[type="submit"] {
  background-color: #041562;
  width: calc(350 / 1920 * 100vw);
  border: none;
  cursor: pointer;
  color: #fff;
  padding: calc(30 / 1920 * 100vw) 0;
  margin: 80px auto 0;
  display: block;
  font-size: min(calc(24 / 1920 * 100vw), 2.4rem);
}
.wpcf7-spinner {
  display: none !important;
}
.required {
  background-color: #da1212;
  color: #fff;
  font-size: calc(15 / 1920 * 100vw);
  padding: 3px 10px;
  margin-right: 18px;
}
@media screen and (max-width: 768px) {
  .p-contact {
    padding: 60px 0;
  }
  .p-contact__txt {
    margin-bottom: 20px;
    padding: 0 4%;
  }
  .p-contact__tel h3 {
    font-size: 1.6rem;
    text-align: center;
  }
  .p-contact__tel a {
    font-size: 2.4rem;
    justify-content: center;
    gap: 5px;
  }
  .p-contact__tel img {
    width: 18px;
  }
  .p-contact__fax h3 {
    font-size: 1.6rem;
    margin: 10px 0;
    text-align: center;
  }
  .p-contact__fax img {
    width: 18px;
  }
  .p-contact__fax p {
    font-size: 2.4rem;
    justify-content: center;
    gap: 5px;
  }
  .p-contact .p-recruit__outline--ttl {
    margin-top: 40px;
  }
  .p-contact__flex {
    display: block;
    padding: 0 4%;
  }
  .p-contact__form {
    padding: 20px 4%;
    max-width: unset;
  }
  .form-group {
    display: block;
  }
  .form-label {
    font-size: 1.6rem;
    margin-top: 10px;
    width: auto;
  }
  .required {
    font-size: 1.2rem;
  }
  .form-input {
    padding: 10px 0;
  }
  .form-input input {
    height: 20px;
  }
  .radio label, .check label {
    font-size: 1.6rem;
  }
  .form-input input[type="text"],
  .form-input input[type="email"],
  .form-input textarea {
    padding: 5px;
  }
  .form-input textarea {
    width: 97%;
  }
  .wpcf7 input[type="submit"] {
    font-size: 2rem;
    width: 200px;
    height: 52px;
  }
}
/* -------------------
works
------------------------*/
.p-gallery {
  padding: calc(67 / 1920 * 100vw) 0 calc(142 / 1920 * 100vw);
}
.p-gallery .p-ttl {
  text-align: center;
  padding: 0 0 calc(67 / 1920 * 100vw);
}
.p-gallery .p-ttl h2 {
  font-size: min(calc(48 / 1920 * 100vw), 4.8rem);
  color: #041562;
}
.p-gallery .p-ttl h3 {
  font-size: min(calc(36 / 1920 * 100vw), 3.6rem);
}
.p-gallery__list {
  max-width: calc(1280 / 1920 * 100vw);
  margin: 0 auto;
}
.p-gallery__list ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(20 / 1920 * 100vw);
}
.p-gallery__list li {
  width: calc(412 / 1920 * 100vw);
}
.p-gallery__modal {
  display: none; /* 最初は非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.p-gallery__modal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.p-gallery__modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
}

.p-gallery__modal-content img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width: 768px) {
  .p-gallery {
    padding: 60px 4%;
  }
  .p-gallery .p-ttl {
    padding: 0 0 20px;
  }
  .p-gallery .p-ttl h2 {
    font-size: 2.4rem;
  }
  .p-gallery .p-ttl h3 {
    font-size: 2rem;
  }
  .p-gallery__list {
    max-width: unset;
  }
  .p-gallery__list ul {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
  .p-gallery__list li {
    width: auto;
  }
}