/* ==========================================================================
   木造建築ページ（page-wood）スタイル
   ========================================================================== */
   
  /* main */
  .p-wood-mv {
    position: relative;
    width: 100vw;
    aspect-ratio: 1536 / 680;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-block-start: 0 !important;
    margin-block-end: 40px;
    background: url(../images/wood/main-bg_pc.webp) 0 0 no-repeat;
    background-size: cover;

    @media (width <=480px) {
      width: 100vw;
      aspect-ratio: 390 / 736;
      background: url(../images/wood/main-bg_sp.webp) 0 0 no-repeat;
      background-size: contain;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      margin-block-start: 0 !important; 
    }
  }

  /* 🟢 【確定】犯人はこれでした。#topのpadding-topだけを安全にゼロにします */
  main#top.l-main {
    padding-block-start: 0 !important;
    
    @media (width <= 480px) {
      padding-block-start: 0 !important;
    }
  }

  .u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .p-wood-wrapper {
    width: 1100px;
    margin: auto;
    @media (width <=1100px) {
      width: 100%;
    }
  }

  /* common style */
  .p-wood-section {
    margin-inline: auto;
    margin-block-end: 88px;
  }

  .p-wood-splitbox {
    width: 100%;
    display: flex;
    gap: 32px;

    @media (width <=768px) {
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
    }
  }

  .p-wood-box {
    width: 100%;
  }

  .p-wood-wrapper h2 {
    margin-block-end: clamp(2rem, 0.4516rem + 5.1613vw, 4rem) !important;
  }

  .p-wood-wrapper img {
    max-width: 100%;
    height: auto;
  }

  .p-wood-wrapper strong {
    font-weight: 600 !important;
  }

  .mb-56 {
    margin-block-end: clamp(2.5rem, 1.7258rem + 2.5806vw, 3.5rem);
  }

  .mb-48 {
    margin-block-end: clamp(1.5rem, 0.3387rem + 3.871vw, 3rem);
  }

  .mb-32 {
    margin-block-end: clamp(1.5rem, 1.1129rem + 1.2903vw, 2rem);
  }

  .center-self {
    align-self: center;
  }

  .right-txt {
    text-align: right;
  }
  .blue-txt {
    color: #2888a3;
  }

  
  


  .p-wood-group {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 32px;
    @media (width <=768px) {
      gap: 24px;
    }
  }

  .p-wood-left_pict {
    @media (width <=768px) {
      width: 30%;
    }
    @media (width <=480px) {
      width: 280px;
    }
  }

.p-wood-intro_image {
  width: 280px !important;
  min-width: 280px !important;
  @media (width <=480px) {
    width: 60%;
  }
  }

  .p-wood-1col_pict {
    width: auto;
    @media (width <=768px) {
      width: 30%;
    }
    @media (width <=480px) {
      width: 100%;
    }
  }

  .p-wood-2col_pict {
    width: calc((100% - 32px) / 2);
    @media (width <=480px) {
      width: 100%;
    }
  }

  .p-wood-3col_pict {
    width: calc((100% - 64px) / 3);
    @media (width <=480px) {
      width: 100%;
    }
  }

  .p-wood-merit {
    text-align: center;
    background: url(../images/wood/wood_bg.webp) 0 0 no-repeat;
    background-size: cover;
    box-sizing: border-box;
    padding: 40px;
    @media (width <=768px) {
      width: calc(50% - 8px);
      padding: 24px 12px;
      align-self: stretch;
    }
  }

 

  .p-wood-merit_subheading {
    display: flex;
    justify-content: center;
    gap: 12px;
    align-items: center;
    margin: 0 auto 16px;
    font-size: clamp(1rem, 0.8065rem + 0.6452vw, 1.25rem);
    font-weight: 500;
    color: #685647;
    @media (width <=768px) {
      gap: 10px;
    }
  }

  .p-wood-merit_subheading::before,
  .p-wood-merit_subheading::after {
    content: "";
    display: inline-block;
    background: #685647;
    width: 22%;
    height: 1px;
    @media (width <=768px) {
      width:20%;
    }
    @media (width <=480px) {
    width:24px;
  }
  }

  .p-wood-merit_read {
    font-size: clamp(0.875rem, 0.7782rem + 0.3226vw, 1rem);
    @media (width <=768px) {
      font-size: 14px;
    }
  }

  .p-wood-heading_center {
    text-align: center;
    font-size: clamp(1.25rem, 0.7661rem + 1.6129vw, 1.875rem) !important;
    color: #418da7;
    margin: 0 auto 56px !important;
    @media (width <=768px) {
      margin: 0 auto 32px !important;
    }
  }
  
  .p-wood-case {
    width: calc((100% - 64px) / 3);
    @media (width <=480px) {
      width: 100%;
    }
  }

  .p-wood-case_pict {
    margin-block-end: 8px;
  }

  .p-wood-case_read {
    font-weight: 600;
  }

  .p-wood-caption {
    font-size: 14px;
    margin-block-start: 8px;
  }