@charset "UTF-8";
/* =========================================================
   order.css  —  ORDER MADE ページ固有のスタイル
   ・共通クラス（.page-title / .section-title / .button /
     .info / .site-header / .site-footer など）は style.css を再利用
   ========================================================= */

/* 背景はデザイン指定の淡いラベンダー */
.page-order { background-color: #e5e7f3; }
.page-order .hero__bg::after {
}
.page-order .page-title__sub { color: var(--color-base); }
.hero__lead .button { margin-top: 30px; }
.hero + .content{
    padding: 122px 0 0;
}

/* =========================================================
   サービス紹介セクション（左：テキスト／右：ビジュアル）
   ========================================================= */
.feature {
  display: grid;
  grid-template-columns: 1fr 48.33%;
  gap: 50px;
  align-items: center;
  padding: 40px 0 60px 60px;
  position: relative;
} 
.feature__grid.pet,
.feature__grid.reform,
.feature__grid.repair {
  grid-template-columns: 1fr;
}
.feature__grid.school {
  grid-template-columns: 4.95fr 1.87fr 3.23fr;
  }
.feature__grid.school{
    padding: 21px 30px;
}
.feature__grid.pet{
    padding: 12px 65px;
}
.feature__grid.reform{
    padding: 33px;
}
.feature__grid span{
    text-box-edge: unset;
    text-box-trim: unset;
}
.feature.school {
  grid-template-columns: 465px 1fr;
}
.feature:before {
    content: "";
    display: block;
    background-color: var(--color-card);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 25.91%;
    z-index: 0;
}
.feature + .feature { margin-top: 80px; }
.feature__text { 
  position: relative;
  z-index: 2;
align-self: flex-start; }
.feature__tagline {
  margin-top: 42px;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -.02em;
  color: var(--color-base);
}
.feature__desc {
  margin-top: 40px;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  letter-spacing: -.02em;
  color: var(--color-text);
}
.feature__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  align-items: center;
}
.feature__grid.school{
    gap: 50px;
  grid-template-columns: 2.8fr 1.03fr 1.8fr ;
}
.feature__visual {
  position: relative;
  z-index: 2;
}
.feature__grid-item {
}
.feature__grid-item img { width: 100%; height: auto; }

/* オリジナルジュエリー：Before → After */
.oj-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 40px;
  background-color: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}
.oj-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
}
.oj-row img { width: 100%; object-fit: contain; }
.oj-arrow {
  width: 32px;
  height: 32px;
  color: #92a1c7;
  flex-shrink: 0;
}
.oj-caption {
  margin-top: 14px;
  font-family: "Noto Sans JP", var(--font-gothic);
  font-size: 12px;
  color: var(--color-text);
}

/* =========================================================
   Process（オーダーメイド／リフォームの流れ）
   ========================================================= */
.process {
  margin-top: 100px;
  padding: 60px 0 80px;
  background-color: #fff;
}
.process__title { margin-bottom: 75px;gap: 13px; }
.process__title .section-title__en{
    text-box-edge: unset;
    text-box-trim: unset;
    font-size: 58px;
    line-height: 75px;
    letter-spacing: 0.05em;
}
.process-flow { display: flex; flex-direction: column; }

.process-step__row {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 40px;
  padding: 30px 0 50px;
  min-height: 186px;
}
.process-step--line .process-step__row { border-bottom: 1px solid var(--color-primary); }
.process-step--line:first-child .process-step__row { border-top: 1px solid var(--color-primary); }
.process-step--boxed .process-step__row {
  padding: 30px 0 50px;
    /*
  border: 1px solid var(--color-primary);
  */
}
.process-step__label {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 28px;
  color: var(--color-base);
}
.process-step__body {
  font-family: "Noto Sans JP", var(--font-gothic);
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text);
}
.process-step__lead {
  font-family: "Noto Sans JP", var(--font-gothic);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  margin-top: 30px;
}

.process-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.process-option__head {
  padding: 11px 8px;
  font-family: "Noto Sans JP", var(--font-gothic);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  background-color: var(--main-accent-color);
}
.process-option__text {
  margin-top: 32px;
}
.process-option__img {
  width: 100%;
  margin-top: 30px;
  aspect-ratio: 413 / 279;
  object-fit: cover;
}

.process-arrow {
    position: relative;
}
.process-arrow span {
    position: absolute;
    left: 0px;
    top: -87px;
  width: 0;
  height: 0;
  border-left: 57px solid transparent;
  border-right: 57px solid transparent;
  border-top: 37px solid #92a1c7;
}

/* =========================================================
   レスポンシブ（SP: 768〜1280px）
   ========================================================= */
@media (max-width: 1280px) {
    .hero + *{
        padding: calc(10vw + 200px) 0 0;
    }
}

/* =========================================================
   レスポンシブ（SP）
   ========================================================= */
@media (max-width: 767px) {
  .hero + .content{
      padding: 87px 0 0;
  }
  .hero__lead {
    margin: 534px 0 0;
  }
  .feature.school,
  .feature {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 0;
  }
    .feature:before {
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 0;
    }
  .feature + .feature { margin-top: 40px; }
  .feature__grid { gap: 16px; }
  .feature__grid.reform{ padding: 25px;}
  .oj-card { padding: 25px; }

  .feature__text{
      padding: 0 25px;
  }
  .process { margin-top: 50px; padding: 40px 0px;position:relative; }
  .process-flow{
      position:relative;
      padding: 0;
  }
  .process-flow:after { 
      content: "";
      display: none;
    position: absolute;
    left: 0px;
    top: 0;
    width: 20px;
    aspect-ratio: 0.03353;
    background: url(../images/about/history_line.svg) center top / contain no-repeat;
  }
  .process-flow > *:last-child,
  .process-step:first-child{
      border-top: 1px solid var(--color-primary);
  }
  .process-step__row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .process-option__text {
    margin-top: 30px;
  }
  .process-step--boxed .process-step__row { padding: 25px 0 40px; }
  .process-options { grid-template-columns: 1fr; gap: 24px; }
  
    .process-arrow {
        display: none;
    }
    .feature__visual{
        width: 100%;
        padding: 0 25px;
    }
}