@charset "UTF-8";

@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }

  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }

  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }

  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* ========================================
@media screen and (min-width: 768px), print {
======================================== */
@media screen and (min-width: 768px), print {
  #material {
    background-image: url(../images/material/fv_bg.jpg); /* 画像を指定 */
    background-position: top center; /* 画像の位置を指定 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-size: contain; /* 画像のサイズ調整（必要に応じて変更） */
    background-color: #f7f6f0; /* 背景色を指定 */
  }

  .p-fv {
    margin-block: 84px 0;
  }

  .p-fv .p-fv__txt {
    margin-bottom: 55px;
    text-align: center;
  }

  .p-fv .p-fv__txt p {
    margin-bottom: 41px;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.75;
  }

  .p-fv .p-fv__txt p:last-child {
    margin-bottom: 0;
  }

  .p-fv .p-fv__scrolldown {
    animation: scroll 2s infinite;
    background: #403f3f;
    height: 100px;
    left: 50%;
    margin-bottom: -59px;
    position: relative;
    transform: translateX(-50%);
    width: 1px;
    z-index: 10;
  }

  .p-fv .p-fv__img {
    text-align: center;
  }

  .p-fv .p-fv__img img {
    height: auto;
    width: 100%;
  }

  .p-bg {
    background: #fffffc;
    padding-block: 149px 0;
  }

  .p-material.--material01 {
    margin-bottom: 144px;
  }

  .p-material.--material02 {
    margin-bottom: 131px;
  }

  .p-material.--material03 {
    margin-bottom: 164px;
  }

  .p-material .l-inner.l-material {
    margin-right: auto;
    width: min(95%, 1560px);
  }

  .p-material .p-material__con {
    display: grid;
    grid-template-columns: 62.8% 42.9%;
    margin-bottom: 100px;
  }

  .p-material .p-material__con.--material02 {
    margin-bottom: 81px;
  }

  .p-material .p-material__con.--material03 {
    margin-bottom: 82px;
  }

  .p-material .p-material__con-left {
    padding-block: 154px;
  }

  .p-material .p-material__con-left.--material01 {
    background: url(../images/material/material01_ttl_bg.jpg) no-repeat top
      center/cover;
    width: 100%;
  }

  .p-material .p-material__con-left.--material02 {
    background: url(../images/material/material02_ttl_bg.jpg) no-repeat top
      center/cover;
    width: 100%;
    padding-block: 125px;
  }

  .p-material .p-material__con-left.--material03 {
    background: url(../images/material/material03_ttl_bg.jpg) no-repeat top
      center/cover;
    width: 100%;
  }

  .p-material .p-material__con-left .wrap {
    color: #ffffff;
    margin-left: auto;
    padding-inline: 0 80px;
    width: min(95%, 480px);
  }

  .p-material .p-material__con-left.--material02 .wrap {
    width: min(95%, 416px);
  }

  .p-material .p-material__con-left.--material03 .wrap {
    width: min(95%, 368px);
  }

  .p-material .p-material__con-left .wrap p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.96px;
    margin-bottom: 13px;
  }

  .p-material .p-material__con-left .wrap h2 {
    font-size: 28px;
    font-weight: 400;
    line-height: 2.2;
    letter-spacing: 0;
  }

  .p-material .p-material__con-right {
    border-top: 1px solid #acada7;
    left: -90px;
    padding-block: 80px 0;
    position: relative;
    top: 80px;
  }

  .p-material .p-material__con-right p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.7142857143;
    margin-bottom: 40px;
    margin-inline: auto;
    width: min(95%, 506px);
    padding-inline: 86px 0;
  }

  .p-material .p-material__con-right p:last-child {
    margin-bottom: 0;
  }

  .p-material .p-material__con02 {
    display: grid;
    gap: 0 4%;
    grid-template-columns: 27.3% 41.3%;
    justify-content: flex-end;
  }

  .p-material .p-material__con02.--material02 {
    grid-template-columns: 23% 44.7%;
    align-items: center;
    gap: 0 4.8%;
  }

  .p-material .p-material__con02.--material03 {
    grid-template-columns: 24.2% 43.7%;
    gap: 0 4.4%;
    align-items: center;
  }

  .p-material .p-material__con02-left p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.7142857143;
    margin-bottom: 40px;
    width: min(95%, 400px);
    margin-inline: auto;
  }

  .p-material .p-material__con02-left p:last-child {
    margin-bottom: 0;
  }

  .p-material .p-material__con02-right img {
    height: auto;
    width: 100%;
  }

  .p-link {
    padding-bottom: 150px;
  }

  .p-link .l-inner.l-link {
    margin-inline: auto;
    width: min(95%, 1020px);
  }

  .p-link .p-link__items {
    display: grid;
    gap: 0 60px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-link .p-link__item a {
    display: block;
  }

  .p-link .p-link__item a img {
    height: auto;
    width: 100%;
  }

  #material .l-footer .l-footer__garage {
    margin-bottom: 0;
    padding-block: 0 42px;
  }

  #material .copyright {
    background: #fffffc;
  }
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1450px) {
======================================== */
@media screen and (min-width: 768px) and (max-width: 1450px) {
  .p-material .p-material__con02 {
    display: grid;
    gap: 0 5.4%;
    grid-template-columns: minmax(0, 1fr) 41.3%;
    justify-content: flex-end;
    width: min(95%, 1120px);
    margin-left: auto;
  }

  .p-material .p-material__con02.--material02 {
    grid-template-columns: minmax(0, 1fr) 44.7%;
  }

  .p-material .p-material__con02.--material03 {
    grid-template-columns: minmax(0, 1fr) 43.7%;
  }

  .p-material .p-material__con-right {
    border-top: 1px solid #acada7;
    left: -6.207vw;
    padding-block: 5.517vw 0;
    position: relative;
    top: 5.517vw;
  }

}

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

======================================== */
@media screen and (min-width:768px) and ( max-width:900px) {
    .p-material .p-material__con-left .wrap {
        padding-inline: 0;
    }
}

/* ========================================
@media screen and (max-width: 767px) {
======================================== */
@media screen and (max-width: 767px) {
  #material {
    background: linear-gradient(
      180deg,
      #f7f6f0 0%,
      #f7f6f0 11%,
      #ffffff 11%,
      #ffffff 100%
    );
  }

  .p-fv {
    margin-block: 14vw 14.493vw;
  }

  .p-fv .p-fv__txt {
    margin-bottom: 9.662vw;
    margin-inline: auto;
    text-align: left;
    width: min(95%, 82.1vw);
  }

  .p-fv .p-fv__txt p {
    font-size: 4.831vw;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.9;
    margin-bottom: 8.797vw;
  }

  .p-fv .p-fv__txt p:last-child {
    margin-bottom: 0;
  }

  .p-fv .p-fv__scrolldown {
    animation: scroll 2s infinite;
    background: #403f3f;
    height: 19.324vw;
    left: 50%;
    margin-bottom: -10.662vw;
    position: relative;
    transform: translateX(-50%);
    width: 0.242vw;
    z-index: 10;
  }

  .p-fv .p-fv__img {
    text-align: center;
  }

  .p-fv .p-fv__img img {
    height: auto;
    width: 100%;
  }

  .p-material.--material01 {
    margin-bottom: 9.662vw;
  }

  .p-material.--material02 {
    margin-bottom: 9.662vw;
  }

  .p-material.--material03 {
    margin-bottom: 11.662vw;
  }

  .p-material .l-inner.l-material {
    margin-inline: auto;
    width: 100%;
  }

  .p-material .p-material__con {
    display: grid;
    gap: 9.662vw 0;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-bottom: 7.746vw;
  }

  .p-material .p-material__con-left {
    padding-block: 33.816vw 7.246vw;
  }

  .p-material .p-material__con-left.--material01 {
    background: url(../images/material/material01_ttl_bg_sp.jpg) no-repeat top
      center/cover;
    width: 100%;
  }

  .p-material .p-material__con-left.--material02 {
    background: url(../images/material/material02_ttl_bg_sp.jpg) no-repeat top
      center/cover;
    width: 100%;
    padding-block: 24vw 7vw;
  }

  .p-material .p-material__con-left.--material03 {
    background: url(../images/material/material03_ttl_bg_sp.jpg) no-repeat top
      center/cover;
    width: 100%;
  }

  .p-material .p-material__con-left .wrap {
    color: #ffffff;
    margin-inline: auto;
    padding-inline: 0;
    width: min(95%, 82.1vw);
  }

  .p-material .p-material__con-left .wrap p {
    font-size: 3.865vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    margin-bottom: 1.932vw;
  }

  .p-material .p-material__con-left .wrap h2 {
    font-size: 6.763vw;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.2857142857;
  }

  .p-material .p-material__con-right {
    border: none;
    padding-block: 0;
    position: static;
  }

  .p-material .p-material__con-right p {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8571428571;
    margin-bottom: 6.297vw;
    margin-inline: auto;
    width: min(95%, 82.1vw);
  }

  .p-material .p-material__con-right p:last-child {
    margin-bottom: 0;
  }

  .p-material .p-material__con02 {
    display: grid;
    gap: 7.246vw 0;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-inline: auto;
    width: min(95%, 82.1vw);
  }

  .p-material .p-material__con02.--material02 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .p-material .p-material__con02.--material03 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .p-material .p-material__con02-left {
    order: 2;
  }

  .p-material .p-material__con02-left p {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8571428571;
    margin-bottom: 6.3vw;
  }

  .p-material .p-material__con02-left p:last-child {
    margin-bottom: 0;
  }

  .p-material .p-material__con02-right {
    order: 1;
  }

  .p-material .p-material__con02-right img {
    height: auto;
    width: 100%;
  }

  .p-material .p-material__con-left .wrap p {
    font-size: 2.899vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    margin-bottom: 3.415vw;
  }

  .p-material .p-material__con-left .wrap h2 {
    font-size: 5.797vw;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 1.75;
  }

  .p-link {
    margin-bottom: 24.155vw;
  }

  .p-link .l-inner.l-link {
    margin-inline: auto;
    width: min(95%, 91.7vw);
  }

  .p-link .p-link__items {
    display: grid;
    gap: 3.382vw 0;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .p-link .p-link__item a {
    display: block;
  }

  .p-link .p-link__item a img {
    height: auto;
    width: 100%;
  }
}