@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 {
  #design {
    background-image: url(../images/design/bg.jpg); /* 画像を指定 */
    background-position: top center; /* 画像の位置を指定 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-size: contain; /* 画像のサイズ調整（必要に応じて変更） */
    background-color: #f7f6f0; /* 背景色を指定 */
  }

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

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

  .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: #fff;
    padding-block: 147px 0px;
  }

  .p-design.--design01 {
    margin-bottom: 150px;
  }

  .p-design.--design02 {
    margin-bottom: 150px;
  }

  .p-design.--design03 {
    margin-bottom: 180px;
  }

  .p-design .p-design__ttl {
    margin-bottom: 100px;
    margin-inline: auto;
    padding-block: 238px 50px;
    width: min(95%, 1440px);
  }

  .p-design .p-design__ttl.--design01 {
    background: url(../images/design/design01_img-top.jpg) no-repeat top
      center/cover;
  }

  .p-design .p-design__ttl.--design02 {
    background: url(../images/design/design02_img-top.jpg) no-repeat top
      center/cover;
  }

  .p-design .p-design__ttl.--design03 {
    background: url(../images/design/design03_img-top.jpg) no-repeat top
      center/cover;
  }

  .p-design .p-design__ttl .wrap {
    color: #ffffff;
    margin-inline: auto;
    width: min(95%, 1028px);
  }

  .p-design .p-design__ttl .wrap p {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    margin-bottom: 11px;
  }

  .p-design .p-design__ttl .wrap h2 {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.2857142857;
  }

  .p-design .p-design01__con {
    display: grid;
    gap: 0 13.3%;
    grid-template-columns: 43.2% 58.9%;
    margin-inline: auto;
    width: min(95%, 920px);
    align-items: center;
  }

  .p-design .p-design01__con-left p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.7142857143;
    margin-bottom: 40px;
  }

  .p-design .p-design01__con-left p:last-child {
    margin-bottom: 0;
  }

  .p-design .p-design01__con-right img {
    height: auto;
    width: 100%;
  }

  .p-design .p-design02__con {
    display: grid;
    gap: 0 8.5%;
    grid-template-columns: 49.9% 55.6%;
    margin-bottom: 80px;
    margin-inline: auto;
    width: min(95%, 940px);
  }

  .p-design .p-design02__con-left p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.7142857143;
    margin-bottom: 41px;
  }

  .p-design .p-design02__con-left p:last-child {
    margin-bottom: 0;
  }

  .p-design .p-design02__con-right img {
    height: auto;
    width: 100%;
  }

  .p-design .p-design02__con02 {
    display: grid;
    gap: 0 6.3%;
    grid-template-columns: 50.6% 35.6%;
    margin-inline: auto;
    width: min(95%, 1200px);
    align-items: center;
  }

  .p-design .p-design02__con02-left img {
    height: auto;
    width: 100%;
  }

  .p-design.--design02 .p-design02__con02-right {
    position: relative;
    top: -17px;
  }

  .p-design .p-design02__con02-right p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.7142857143;
    margin-bottom: 24px;
  }

  .p-design .p-design02__con02-right p:last-child {
    margin-bottom: 0;
  }

  .p-design .p-design03__con {
    display: grid;
    gap: 0 9.6%;
    grid-template-columns: 49% 46.4%;
    margin-bottom: 80px;
    margin-inline: auto;
    width: min(95%, 927px);
  }

  .p-design .p-design03__con-left p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.7142857143;
    margin-bottom: 39px;
  }

  .p-design .p-design03__con-left p:last-child {
    margin-bottom: 0;
  }

  .p-design .p-design03__con-right img {
    height: auto;
    width: 100%;
  }

  .p-design .p-design03__con02 {
    display: grid;
    gap: 0 8.5%;
    grid-template-columns: 48.7% 42.7%;
    margin-inline: auto;
    width: min(95%, 702px);
    align-items: center;
  }

  .p-design .p-design03__con02-left img {
    height: auto;
    width: 100%;
  }

  .p-design .p-design03__con02-right p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.7142857143;
    margin-bottom: 39px;
  }

  .p-design .p-design03__con02-right p:last-child {
    margin-bottom: 0;
  }

  .p-link {
    padding-block: 0 150px;    
  }

  .p-link .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%;
  }

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

  #design .copyright {
    background: #FFFFFC;
  }
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1350px) {
======================================== */
@media screen and (min-width: 768px) and (max-width: 1350px) {
  .p-design .p-design02__con {
    display: grid;
    grid-template-columns: 49.9% 41.6%;
  }
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1250px) {
======================================== */
@media screen and (min-width: 768px) and (max-width: 1250px) {
  .p-design .p-design01__con {
    grid-template-columns: 43.2% 50.9%;
    gap: 0 5.3%;
  }
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1100px) {
======================================== */
@media screen and (min-width: 768px) and (max-width: 1100px) {
  .p-design .p-design03__con {
    grid-template-columns: 49% 41.4%;
  }
}

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

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

  .p-fv .p-fv__txt {
    font-size: 4.831vw;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 1.9;
    margin-bottom: 9.662vw;
    margin-inline: auto;
    text-align: left;
    width: min(95%, 83.1vw);
  }

  .p-fv .p-fv__scrolldown {
    animation: scroll 2s infinite;
    background: #403f3f;
    height: 19.324vw;
    left: 50%;
    margin-bottom: -9.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-design.--design01 {
    margin-bottom: 9.662vw;
  }

  .p-design.--design02 {
    margin-bottom: 9.662vw;
  }

  .p-design.--design03 {
    margin-bottom: 12.493vw;
  }

  .p-design .p-design__ttl {
    margin-bottom: 9.662vw;
    margin-inline: auto;
    padding-block: 34.058vw 7.246vw;
    width: 100%;
  }

  .p-design .p-design__ttl.--design01 {
    background: url(../images/design/design01_img-top_sp.jpg) no-repeat top
      center/cover;
  }

  .p-design .p-design__ttl.--design02 {
    background: url(../images/design/design02_img-top_sp.jpg) no-repeat top
      center/cover;
    margin-bottom: 7vw;
  }

  .p-design .p-design__ttl.--design03 {
    background: url(../images/design/design03_img-top_sp.jpg) no-repeat top
      center/cover;
  }

  .p-design .p-design__ttl .wrap {
    color: #ffffff;
    margin-inline: auto;
    width: min(95%, 82.1vw);
  }

  .p-design .p-design__ttl .wrap p {
    font-size: 2.899vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    margin-bottom: 3.449vw;
  }

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

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

  .p-design .p-design01__con-left {
    display: contents;
  }

  .p-design .p-design01__con-left p {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8571428571;
    margin-bottom: 5.797vw;
    order: 1;
  }

  .p-design .p-design01__con-left p.bottom {
    order: 3;
  }

  .p-design .p-design01__con-left p:last-child {
    margin-bottom: 0;
  }

  .p-design .p-design01__con-right {
    order: 2;
    text-align: center;
    margin-bottom: 6vw;
  }

  .p-design .p-design01__con-right img {
    height: auto;
    width: 77.295vw;
  }

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

  .p-design .p-design02__con-left {
    display: contents;
  }

  .p-design .p-design02__con-left p {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8571428571;
    margin-bottom: -1.203vw;
    order: 1;
  }

  .p-design .p-design02__con-left p:last-child {
    margin-bottom: 0;
  }

  .p-design .p-design02__con-right {
    order: 2;
    text-align: center;
  }

  .p-design .p-design02__con-right img {
    height: auto;
    width: 77.295vw;
  }

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

  .p-design .p-design02__con02-left {
    order: 2;
    text-align: center;
  }

  .p-design .p-design02__con02-left img {
    height: auto;
    width: 77.295vw;
  }

  .p-design .p-design02__con02-right {
    order: 1;
  }

  .p-design .p-design02__con02-right p {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8571428571;
    margin-bottom: 5.797vw;
  }

  .p-design .p-design02__con02-right p:last-child {
    margin-bottom: 0;
  }

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

  .p-design .p-design03__con-left p {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8571428571;
    margin-bottom: 6.797vw;
  }

  .p-design .p-design03__con-left p:last-child {
    margin-bottom: 0;
  }

  .p-design .p-design03__con-right {
    text-align: center;
  }

  .p-design .p-design03__con-right img {
    height: auto;
    width: 77.295vw;
  }

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

  .p-design .p-design03__con02-left {
    order: 2;
    text-align: center;
  }

  .p-design .p-design03__con02-left img {
    height: auto;
    width: 77.295vw;
  }

  .p-design .p-design03__con02-right {
    order: 1;
  }

  .p-design .p-design03__con02-right p {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8571428571;
    margin-bottom: 5.797vw;
  }

  .p-design .p-design03__con02-right p:last-child {
    margin-bottom: 0;
  }

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

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

  .p-link .p-link__items {
    display: grid;
    gap: 2.493vw 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%;
  }
}