/* =========================
  2. Header
========================= */


header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: transform 0.4s ease, background 0.3s ease, box-shadow 0.3s ease;
  }
  
  
  
  .header-inner{
      /* max-width: 1200px; */
      margin: 0 auto;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  
  .header-logo{
      font-size: 30px;
      font-weight: bold;
      letter-spacing: 1.3px;
      padding: 0 20px;
  }
  
  .header-nav ul{
      display: flex;
      letter-spacing: 1.3px;
  }
  
  .header-nav ul li{
      font-size: 16px;
      color: #333;
      font-weight: bold;
      padding: 30px 20px;
  }
    
  .header-right{
    display: flex;
  }
  

  .header-dl,
  .header-contact{
    font-size: 16px;
    /* color: #333; */
    font-weight: bold;
    margin: 0;
    padding: 30px 20px;
  }
  .header-actions {
display: flex;
    align-items: center;
    /* gap: 16px; */
    /* padding-right: 20px; */
  }

.header-contact-icon,
.hamburger{
    display: none;
}


  

  
  .header-contact-icon {
    font-size: 20px;
    color: #333;
  }



  @media (max-width: 1024px) {
    .header-logo{
      font-size: 25px;
      font-weight: bold;
      letter-spacing: 1.3px;
      padding: 0 10px;
  }
  
  .header-nav ul{
      display: flex;
      letter-spacing: 1.3px;
  }
  
  .header-nav ul li{
      font-size: 14px;
      color: #333;
      font-weight: bold;
      padding: 10px 10px;
  }

  .header-dl,
  .header-contact{
    font-size: 16px;
    /* color: #333; */
    font-weight: bold;
    margin: 0;
    padding: 20px;
  }



    /* 中央ナビを消す */
    .header-nav .nav-main {
      display: none;
    }
  
    /* 右側アクション表示 */
    .header-actions {
      display: flex;
    }

    .header-contact-icon{
        display: none;
    }
  
    /* 資料DL・お問い合わせは表示 */
    .hn_dl,
    .hn_contact {
      display: list-item;
    }

    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      /* 右側を1塊に */
      .header-actions {
        list-style: none;
        display: flex;
        align-items: center;
        margin-left: auto; 
      }
      
      .nav-main {
        display: none;
      }


  .hamburger {
    width: 60px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
  }

  .hamburger span {
    height: 2px;
    background: #333;
    width: 100%;
  }

      
  }


  /* @media (max-width: 767px) */
  
  
  @media (max-width: 500px){

    /* テキストの問い合わせを消す */
    .hn_contact {
      display: none;
    }
  
    /* メールアイコン表示 */
    .header-contact-icon {
      display: inline-block;
    }

    .header-dl,
    .header-contact{
        display: none;
    }
  
    /* DLも非表示（必要なら残してもOK） */
    .hn_dl {
      display: none;
    }
  
    .header-actions {
      display: flex;
    }
  
    .header-contact-icon{
        display: block;
    }

    .header-logo {
      font-size: 24px;
    }
    @media (max-width: 500px){
        .hn_dl {
          display: none;
        }
      
        .hn_contact {
          display: none;
        }
      
        .header-contact-icon {
          display: inline-block;
        }
      }


      .hamburger {
        width: 40px;
        height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: none;
        border: none;
        cursor: pointer;
      }

      
  }
    

  
  
  
  
  /* =========================
    3. Hero
  ========================= */
  
  .hero {
      position: relative;
      padding: 60px 0 80px;
      overflow: hidden;
    }
    
    .hero-inner {
      display: flex;
      align-items: flex-start;
      /* max-width: 1200px; */
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    
    .hero-content {
      width: 40%;
      margin: auto

    }
    
    .hero-sub {
      font-size: 14px;
      letter-spacing: 0.08em;
      margin-bottom: 24px;
      font-weight: bold;
    }
    
    .hero-content h1 {
      
      font-size: 25px;
      line-height: 1.8;
      margin-bottom: 24px;
      font-weight: bold
    }
    
    .hero-content h1 strong{
      font-size: 30px;
    }
    .hero-text {
      font-size: 20px;
      line-height: 1.8;
      margin-bottom: 40px;
    }
    
  
  
    
    /* 右画像 */
    .hero-image {
      width: 50%;
      margin-top: 40px;
    }
    
    .hero-image img {
      width: 100%;
      height: 580px;
      object-fit: cover;
    }
    
  
    .hero-bg {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 80%;
      height: 330px;
      z-index: 1;
    }
  
  
  .hero-bg-2{
      position: absolute;
      z-index: 2;
      bottom: 0;
      right: 0;
      width: 20%;
      height: 330px;
      z-index: 1;
  }
    
  
  
  
    .hero-bg {
      box-shadow: -40px 0 80px rgba(0,0,0,0.05);
    }
  
    .btn {
      letter-spacing: 0.08em;
      transition: 0.3s;
    }
    
  
  
  


    @media (max-width: 1125px) {

        .hero {
          padding: 100px 0 40px;
        }
      
        .hero-content {
          width: 70%;
          padding: 60px 0;
        }
      
        .hero-content h1 {
          font-size: 22px;
        }
      
        .hero-content h1 strong {
          font-size: 26px;
        }
      
        .hero-text {
          font-size: 18px;
          margin-bottom: 32px;
        }
      
        .hero-image {
          width: 100%;
          margin-top: 20px;
        }
        .hero-inner {
          flex-direction: column;
        }
        .hero-image {
          order: 1;   /* ← これが重要 */
        }
      
        .hero-image img {
          height: 450px;
        }
      
        .hero-bg,
        .hero-bg-2 {
          height: 260px;
        }
      }

      

      @media (max-width: 767px) {

        .hero {
          padding: 40px 0 0px;
        }
      
        .hero-inner {
          flex-direction: column;
        }

        .hero-image {
            order: -1;   /* ← これが重要 */
          }
      
        .hero-content {
          width: 90%;
          margin: 0 auto 32px;
        }
      
        .hero-sub {
          font-size: 12px;
          margin-bottom: 16px;
        }
      
        .hero-content h1 {
          font-size: 22px;
          line-height: 1.6;
        }
      
        .hero-content h1 strong {
          font-size: 26px;
        }
      
        .hero-text {
          font-size: 16px;
          margin-bottom: 28px;
        }
      
        .hero-image {
          width: 100%;
          margin-top: 0;
        }
      
        .hero-image img {
          height: 360px;
        }
      
        .hero-bg {
          width: 100%;
          height: 200px;
        }
      
        .hero-bg-2 {
          display: none; /* SPでは装飾を整理 */
        }
      }
      


      @media (max-width: 467px) {


        .hero-content {
          /* width: 70%; */
          padding: 20px 0 30px;
        }


        .hero-content h1 {
          font-size: 20px;
        }
      
        .hero-content h1 strong {
          font-size: 24px;
        }
      
        .hero-text {
          font-size: 15px;
        }
      
   
        .hero-image img {
          height: 200px;
        }
      
        .hero-bg {
          height: 160px;
        }
      }
      
  
  
  
  
  /* =========================
    4. Marquee
  ========================= */
  
  .marquee {
    position: relative;
    z-index: 3;
    top: -110px;
    left: 0;
    width: 100%;
    overflow: hidden;
    padding: 0;
  margin: 0;
  }
  
  
  
  .marquee-track span {
    font-size: 230px;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    margin-right: 80px;
  
    /* アウトライン文字 */
    color: transparent;
    -webkit-text-stroke: 2px rgb(255, 255, 255);
    text-stroke: 2px rgb(255, 255, 255);
  }
  
  
  @media (max-width: 1125px) {

    .marquee {
      top: -70px;
    }
  
    .marquee-track span {
      font-size: 180px;
      margin-right: 60px;
      -webkit-text-stroke: 1.5px rgb(255, 255, 255);
    }
  
  }
  
  @media (max-width: 467px) {

    .marquee {
      top: -40px;
    }
  
    .marquee-track span {
      font-size: 100px;
      margin:0 40px 0 0;
      -webkit-text-stroke: 1px rgb(255, 255, 255);
      opacity: 0.6;
    }
  
  }
  
  
  
  /* =========================
    5. About
  ========================= */
  
  
  .about {
      position: relative;
      padding: 0 0 140px;
      overflow: hidden;
    }
  
  
  
    .about-inner {
      display: flex;
      align-items: center;
      max-width: 90%;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .about-content {
      width: 50%;
    }
    
    .about-content h3 {
      font-size: 28px;
      line-height: 1.6;
      margin-bottom: 32px;
      font-weight: bold;
    }
    
    .about-text p {
      font-size: 18px;
      line-height: 2;
      margin-bottom: 40px;
    }
   
    .about-image {
      width: 45%;
      margin-left: auto;
    }
    
    .about-image img {
      width: 100%;
      height: 520px;
      object-fit: cover;
    }
    
  
  
  
  
  .about-content,
  .about-image {
    opacity: 0;
    transform: translateY(40px);
    transition: 2s ease;
    /* overflow: hidden; */
  }
  
  .about.show .about-content,
  .about.show .about-image {
    opacity: 1;
    transform: translateY(0);
  }
  .about-image img {
      transition: transform 0.8s ease;
    }
    
  
  
  
    .about::before {
      content: "WAY OF DAIRY";
      position: absolute;
      top: 200px;
      right: 0;
      font-size: 150px;
      color: rgba(0,0,0,0.03);
      font-weight: bold;
      letter-spacing: 0.1em;
    }
  
  
    .about-image {
      position: relative;
    }
    
    .about-image::before {
      content: "";
      position: absolute;
      top: -40px;
      left: -40px;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
  
    .about-explanation{
      /* background-color: #fff; */
      color: #000;
      font-weight: bold;
      /* width: fit-content; */
      /* text-align: center; */
      padding: 10px;
      position: absolute;
      /* top:0;
      right: 0; */
      bottom:30px;
      left: 20px;
      font-size: 20px;
      z-index: 20;
    }
  
    .about-explanation span{
      background-color: #fff;
      width: fit-content;
    }
  
  
  



    @media (max-width: 1125px) {

        .about {
          padding: 0 0 100px;
        }
      
        .about-inner {
          max-width: 92%;
        }
      
        .about-content {
          width: 55%;
        }
      
        .about-content h3 {
          font-size: 24px;
          margin-bottom: 24px;
        }
      
        .about-text p {
          font-size: 16px;
          line-height: 1.9;
          margin-bottom: 32px;
        }
      
        .about-image {
          width: 40%;
        }
      
        .about-image img {
          height: 460px;
        }
      
        .about::before {
          font-size: 120px;
          top: 160px;
        }
      
        .about-explanation {
          font-size: 18px;
        }
      
      }

      
      @media (max-width: 762px) {

        .about {
          padding: 0 0 80px;
        }
      
        .about-inner {
          flex-direction: column;
          max-width: 95%;
        }
      
        .about-content,
        .about-image {
          width: 100%;
        }
      
        .about-content {
          order: 1;
        }
      
        .about-content h3 {
          font-size: 22px;
          margin-bottom: 20px;
        }
      
        .about-text p {
          font-size: 13px;
          line-height: 1.5;
          margin-bottom: 20px;
        }
      
        .about-image {
          order: 2;
          margin-top: 32px;
        }
      
        .about-image img {
          height: 400px;
        }
      

        .about::before {
          display: none;
        }
      
        .about-image::before {
          top: 20px;
          left: 20px;
        }

        .about-explanation {
          font-size: 13px;
          bottom: 10px;
          left: 10px;
        }
      
      }
      
      @media (max-width: 467px){
        .about {
          padding: 0 0 50px;
        }
        .about-text p {
          /* font-size: 13px;
          line-height: 1.5; */
          margin-bottom: 10px;
        }


        .about-image img {
          height: 200px;
        }
        .about-image::before {
          top: 5px;
          left: 15px;
        }
      }


    
  
  














  /* =========================
    6. Farm
  ========================= */
  .farm {
      position: relative;
      padding: 160px 0 100px;
      overflow: hidden;
    }
  
    
    .farm-hero {
      display: flex;
      margin-top: 80px;
      position: relative;
    }
    
    .farm-left {
      width: 55%;
      padding: 0 70px;
    }
    
    .farm-left h3 {
      font-size: 26px;
      line-height: 1.6;
      margin-bottom: 24px;
    }
    
    .farm-left p {
      font-size: 16px;
      line-height: 2;
      margin-bottom: 40px;
    }
  
   .farm-right  {
      position: absolute;
      z-index: 2;
      top:-100px;
      right: 0;
      width: 35%;
      height: 2000px;
  
    }

    .farm-arrow-more span{
        display: none;
    }
  
    .farm-right_2{
      position: absolute;
      z-index: 1;
      top:-450px;
      right: 0;
      width: 35%;
      height: 400px;
    }
  
  
    
    
    .farm-cow {
      position: absolute;
      top: 80px;
      left: -40px;
    }
    
    .farm-cow img {
      width: 500px;
    }
  
    
  
  /* 下リスト全体 */
  .farm-list {
      margin-top: 120px;
      position: relative;
    }
    
    /* 各行 */
    .farm-item {
      align-items: center;
      display: flex;
      justify-content: space-between;
      width: 85%;
      margin: auto;
      padding: 26px 1%;
      position: relative;
      z-index: 4;
      border-top: 1px solid #333;
    }
    
    .farm-item:last-child{
      border-bottom: 1px solid #333;
    }
   
    .farm-item-left {
      width: 45%;
    }
    
    .farm-item-left h4 {
      font-size: 30px;
      margin: 0 0 16px 0;
      font-weight: 550;
    }
    
    .farm-item-left p {
      font-size: 16px;
      line-height: 1.9;
      color: #333;
    }
    
    .farm-item-right {
      width: 40%;
min-height: 110px;
      justify-content: space-between;
      align-items: center;
      padding-left: 20px;
      position: relative;
      z-index: 4;
      border-right: 2px dotted #333;
    }
    
  
    .farm-meta-title {
      font-size: 12px;
      color: #666;
      margin-bottom: 12px;
      letter-spacing: 0.05em;
    }
  

    .farm-tags {
      max-width: calc(100% - 40px);
    }
    
    .farm-tags span {
      display: inline-block;
      font-size: 13px;
      padding: 4px 12px;
      border-radius: 20px;
      margin: 0 8px 10px 0;
      white-space: nowrap;
    }
    

  
    .farm-tags span {
      padding: 6px 12px;
      font-size: 13px;
      border-radius: 20px;
      transition: 0.3s ease;
    }
    
  
  
  

  
    @media (max-width: 1125px) {

        .farm {
          padding: 120px 0 80px;
        }
      
        .farm-hero {
          margin-top: 60px;
        }
      
        .farm-left {
          width: 53%;
          padding: 0 40px;
        }
      
        .farm-left h3 {
          font-size: 20px;
        }
      
        .farm-left p {
          font-size: 13px;
        }
      
        .farm-right {
          width: 40%;
          height: 1600px;
        }
      
        .farm-right_2 {
          width: 40%;
          top: -350px;
          height: 300px;
        }
      
        .farm-cow img {
          width: 420px;
        }
      



        .farm-list {
          margin-top: 60px;
        }
      
        .farm-item {
          width: 90%;
          padding: 22px 0;
        }
      
        .farm-item-left h4 {
          font-size: 24px;
        }
      
        .farm-item-left p {
          font-size: 13px;
          line-height: 1.5;
        }
      
        .farm-item-right {
          width: 35%;
          min-height: 90px;
          padding: 0;
        }

      
        .farm-tags span {
          font-size: 10px;
          padding: 4px 10px;
        }
      
      }
      
  
  
      @media (max-width: 762px) {

        .farm {
          padding: 80px 0 60px;
        }
      
        /* ===== hero ===== */
      
        .farm-hero {
          flex-direction: column;
          margin-top: 40px;
        }
      
        .farm-left {
          width: 95%;
          padding: 0 2.5%;
        z-index: 3;
        }
      
        .farm-left h3 {
          font-size: 22px;
          line-height: 1.3;
        }
      
        .farm-left p {
          font-size: 14px;
        }
      
        .farm-right_2{
          z-index: 1;
      
        }
        /* 装飾背景は消す */
        .farm-right {
          height: 3000px;
          /* display: none; */
          z-index: 2;
        }

     


        .farm-right .farm-cow{
         display: none;
  
        }
      
        .farm-btn {
          margin-top:0px;
        }
      
        /* ===== list ===== */
      
        .farm-list {
          margin-top: 60px;
        }
      
        .farm-item {
          flex-direction: column;
          width: 90%;
          padding: 24px 0;
          gap: 20px;
        }
      
        .farm-item-left,
        .farm-item-right {
          width: 100%;
        }
      
        .farm-item-left h4 {
          font-size: 20px;
        }
      
        .farm-item-right {
            border-bottom: 2px dotted #333;
          padding: 0;
          border-right: none;
        }
      
        .farm-meta-title {
          margin-bottom: 10px;
        }
      
        .farm-tags {
          max-width: 100%;
        }
      
        .farm-tags span {
          margin-right: 6px;
        }

        .farm-arrow-more{
          align-items: center;
          display: flex;
          gap: 10px;
      }

        .farm-arrow-more span{
          display: block;
      }
      
        .farm-arrow {
          margin: 0 auto;
        }
      
      }
      
  
  
  /* =========================
    7. Case
  ========================= */
  
  
    .case {
      padding: 100px 0 70px;
      overflow: hidden;
    }
    
  
    
    /* リード文 */
    .case-lead {
      margin: 40px auto;
      width: 90%;
    }
    
    .case-note {
      font-size: 12px;
      color: #666;
    }
    
    /* 横スクロール */
    .case-scroll {
      overflow-x: auto;
      width: 95%;
      margin: 0 0 0 auto;
    }
    
    .case-track {
      display: flex;
      gap: 40px;
      width: max-content;
      padding-bottom: 40px;
    }
    
    /* カード */
    .case-card {
      width: 360px;
      flex-shrink: 0;
    }
    
    .case-card img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      margin-bottom: 10px;
    }
    
    /* 上ラベル */
    .case-meta {
      margin-bottom: 4px;
    }
    
    .case-label {
      font-size: 12px;
      padding: 8px 10px 4px;
      margin-right: 6px;
    }
    
  
    .case-card h3 {
      font-size: 16px;
      margin-bottom: 8px;
      border-left: 2px solid #333;
      padding: 5px 0 0 10px;
    }
    
    .case-card p {
      font-size: 16px;
      line-height: 1.8;
      margin-bottom: 12px;
    }
    
   
    .case-tags span {
      display: inline-block;
      font-size: 12px;
  
      padding: 4px 12px;
      border-radius: 20px;
      margin-right: 6px;
      margin-bottom: 6px;
    }
    
  
    
  
  
  














  @media (max-width: 1125px){



    .case {
        padding: 70px 0 40px;
      }
      

      .case-note {
        font-size: 10px;
      }
    
      .case-lead {
        margin: 30px auto;
      }
      .case-label {
        font-size: 10px;
        padding: 8px 10px 4px;
      }

      .case-card p {
        font-size: 13px;
      }

      .case-tags span {
        font-size: 10px;
      }


  }
    
  
  @media (max-width: 467px){



    .case {
        padding: 50px 0;
      }
    
    
      .case-lead {
        margin: 20px auto;
      }
 

  .case-card {
    width: 280px;
  }

  .case-track{
    padding: 0 20px 20px 0;
    height: fit-content;
  }
  
  .case-card img {
    height: 180px;
  }
  
  .case-card h3 {
    font-size: 14px;
    margin-bottom: 5px;
    padding: 2px 0 0 6px;
  }


  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* =========================
    8. News
  ========================= */
  
  
  
    .news {
      border-top: 1px solid #bcbcbc;
      padding: 70px 0px 50px;
      width: 90%;
      margin: 0 auto;
    }
    
    /* 横並び */
    .news-wrapper {
      display: flex;
      gap: 120px;
    }
    
    /* 左タイトル */
    .news-head {
      width: 350px;
      position: relative;
    }
  
    
    .news-content {
      flex: 1;
      min-width: 0;
    }

    .news-viewport { overflow: visible; }
    .news-viewport.is-scrolling { overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; overflow-anchor: none; }
    .news-viewport.is-scrolling::-webkit-scrollbar { display: none; }
    .news-inner .news-item { opacity: 1; transform: none; }
    .news-inner .news-item a { display: block; }
    .news-inner .news-item h3 { overflow-wrap: anywhere; }
    .news-empty { margin: 0; padding: 24px 0; color: #666; line-height: 1.8; border-bottom: 1px solid #bcbcbc; }
    .news-scroll-toggle { display: block; margin: 12px 0 0 auto; padding: 6px 0; border: 0; background: transparent; color: #56776a; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
    .news-empty[hidden], .news-scroll-toggle[hidden] { display: none; }
    .news-scroll-toggle:focus-visible, .news-item a:focus-visible { outline: 2px solid #56776a; outline-offset: -2px; }
    
    .news-item {
      padding: 16px 0;
      border-bottom: 1px solid rgb(108, 108, 108);
    }
    
    .news-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 8px;
    }
    
    .news-meta time {
      font-size: 14px;
      color: rgba(158, 158, 158, 0.7);
    }
    
    .news-category {
      font-size: 12px;
      padding: 4px 12px 2px;
      border-radius: 20px;
      color: #333;
    }
    
    .news-item h3 {
      font-size: 18px;
      font-weight: 400;
      margin: 10px 0;
      color: #333;
    }
    
  
    
    .news-item {
      padding: 16px 0;
      border-bottom: 1px solid rgb(108,108,108);
      transition: transform 0.3s ease, background 0.3s ease;
    }
    
  
  
    .news-item h3 {
      position: relative;
      display: inline-block;
    }
    
  
    
  
  
  
  
  
    @media (max-width: 1125px){
  
      .news {
        padding: 50px 0;
        width: 90%;
        margin: 0 auto;
      }
      
  
      .news-wrapper {
        display: block;
        gap: 0;
      }
  
      .news-head {
        width: fit-content;
      }
      
  
      
      .news-meta time {
        font-size: 10px;
      }
  
      .news-category {
        font-size: 10px;
        padding: 2px 6px 1px;
      }
  
      .news-item h3 {
        font-size: 15px;
        margin: 5px 0 0;
      }
  
   
    }
  
  
  
    @media (max-width: 467px){
      .news {
        border-top: 1px solid #bcbcbc;
        padding: 50px 0;
        width: 90%;
        margin: 0 auto;
      }
      
  
      .news-wrapper {
        display: block;
        gap: 0;
      }
  
      
      
      .news-item h3 {
        font-size: 13px;
        margin: 5px 0 0;
      }
  
    }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* =========================
    9. CTA
  ========================= */
  
  
  
  
  
  
  
    /* 全体 */
  .cta-grid {
      width: 100%;
    }
    
    /* 行 */
    .cta-row {
      display: flex;
      overflow: hidden;
    }
    
    /* 共通ボックス */
    .cta-box {
      width: 50%;
      position: relative;
      text-decoration: none;
      color: inherit;
    }
    
    /* 上段（画像） */
    .cta-row-top .cta-box {
      height: 300px;
    }
  
  
    
    .cta-image {
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
    
    .cta-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 0px;
  
    }
    
    .cta-overlay h3 {
      font-size: 45px;
      margin: 0;
      text-align: center;
    }
    
    .cta-overlay span {
      text-align: center;
      font-size: 14px;
      font-weight: bold;
    }
    
    /* 下段（テキスト） */
    .cta-row-bottom .cta-box {
      padding: 24px 80px;
      min-height: 180px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
    }
    
   
    .cta-row-bottom {
      position: relative;
    }
    
    .cta-row-bottom::after {
      content: "";
      position: absolute;
      top: 40px;        /* ← 上の余白 */
      bottom: 40px;     /* ← 下の余白 */
      left: 50%;
      width: 1px;
    
      background-image: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0.3) 0px,
        rgba(0,0,0,0.3) 4px,
        transparent 4px,
        transparent 8px
      );
    }
  
    .cta-text-inner h3 {
      font-size: 35px;
      margin-bottom: 8px;
      line-height: 30px;
    }
    
    .cta-text-inner span {
      font-weight: normal;
      font-size: 13px;
      display: block;
      margin-bottom: 16px;
    }
    
    .cta-text-inner p {
      font-size: 14px;
      line-height: 1.5;
    }
    
    /* 矢印 */
    .cta-arrow {
      width: 76px;
      height: 76px;
  
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    
  
    
  
  
  
  
  
    .cta-row-bottom .cta-box {
      display: flex;
    }
  
  
  
    .cta-arrow {
      position: absolute;
      top: 40px;
      right: 80px;
    }
    .cta-row-bottom .cta-box {
      position: relative;
    }
  
              
  
  
  
      
  
  
  
    @media (max-width: 1125px){
  
  
  
  .cta-row-top .cta-box {
    height: 280px;
  }
  
  
  .cta-overlay h3 {
    font-size: 40px;
  }
  
  .cta-row-bottom .cta-box {
    padding: 20px 40px;
    min-height: 150px;
  }
  
  
  .cta-text-inner h3 {
    font-size: 30px;
    margin-bottom: 8px;
    line-height: 30px;
  }
  
  .cta-text-inner span {
    font-weight: normal;
    font-size: 13px;
    display: block;
    margin-bottom: 16px;
  }
  
  .cta-text-inner p {
    font-size: 13px;
    line-height: 1.5;
  }
  
  /* 矢印 */
  .cta-arrow {
    width: 66px;
    height: 66px;
  }
  
  .cta-arrow {
    top: 35px;
    right: 40px;
  }
  
    }
  
  
  
  
    @media (max-width: 767px) {
  
      .cta-grid {
        width: 100%;
        padding: 0;
     
      }
  
      .cta-overlay h3 {
        font-size: 35px;
      }
    
    /* 上段（画像） */
    .cta-row-top .cta-box {
      height: 200px;
    }
  
      .cta-row {
        /* flex-direction: column; */
      }
  
      .cta-grid .cta-row-top{
        display: flex;
        width: 100%;
        background-color: red;
      }
  
      .cta-row-top .cta-box {
        width: 50%;
      }
  
    .cta-box {
      width: 90%;
    }
  
    .cta-row-bottom .cta-box {
      padding: 24px 5% 0;
      min-height: 180px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
    }
  
    .cta-row-bottom .cta-box:last-child{
      border-top: 2px dotted #333;
    }
    .cta-row-bottom::after {
     display: none;
    }
  
    .cta-row {
      flex-direction: column;
    }
    /* .cta-box {
      width: 100%;
      padding: 0;
    } */
  
    .cta-arrow {
      top: 30px;
      right: 30px;
    }
    
  
  
    .cta-row h3{
      font-size: 30px;
      padding: 0;
      margin: 0;
    }
  
      /* 上段は横並び維持 */
      .cta-row-top {
        display: flex;
        flex-direction: row;
      }
    
      .cta-row-top .cta-box {
        width: 50%;
      }
    
      /* 下段だけ縦並び */
      .cta-row-bottom {
        flex-direction: column;
      }
  
    }
  
  
  
    @media (max-width: 467px){
  
  
       .cta-row-top {
        display: block;
        flex-direction: column;
      }
  
        /* 上段（画像） */
    .cta-row-top .cta-box {
      height: 180px;
    }
  
      .cta-row-top .cta-box {
        width: 100%;
      }
   
  
  
    .cta-row h3{
      font-size: 25px;
      padding: 0;
      margin: 0;
    }
  
  
  
    .cta-arrow {
      top: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
    }
    
    }
  
  
  /* =========================
   10. Footer
  ========================= */
  
    
  
  
/* Footer */
.footer {
  padding: 60px clamp(24px, 5vw, 80px) 25px;
  border-top: 1px solid #ddd;
  font-size: 14px;
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(480px, 1.4fr);
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto 48px;
}
.footer-info h2 { font-size: 36px; line-height: 1.2; margin: 0 0 4px; }
.footer-sub { font-size: 13px; margin-bottom: 24px; }
.footer-info address { font-style: normal; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.footer-info address a { color: #56776a; margin-left: 8px; }
.footer-nav { display: grid; grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr); gap: 28px; }
.footer_min_flex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.footer-nav ul { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin: 0 0 14px; font-size: 14px; line-height: 1.7; }
.footer-nav li.footer-subtitle { font-size: 12px; font-weight: 600; letter-spacing: .1em; margin-bottom: 22px; color: #56776a; }
.footer a { position: relative; display: inline-block; color: #333; text-decoration: none; }
.footer a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: currentColor; transition: width .3s ease; }
.footer a:focus-visible { outline: 2px solid #56776a; outline-offset: 4px; }
.footer-social-pending { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 4px 8px; }
.footer-social-pending i { width: 18px; text-align: center; font-size: 18px; }
.footer-social-pending small { grid-column: 2; font-size: 10px; color: #666; }
.footer-bottom { max-width: 1280px; margin: auto; border-top: 1px solid #bbb; padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: #666; }
@media (max-width: 1050px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-info { max-width: 420px; }
  .footer-nav { border-top: 1px solid #ddd; padding-top: 32px; }
}
@media (max-width: 600px) {
  .footer { padding-top: 40px; }
  .footer-info h2 { font-size: 30px; }
  .footer-nav { grid-template-columns: 1fr; gap: 24px; }
  .footer_min_flex { gap: 20px; }
  .footer-sns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; border-top: 1px solid #ddd; padding-top: 24px !important; }
  .footer-sns .footer-subtitle { grid-column: 1 / -1; }
  .footer-bottom { flex-wrap: wrap; }
}

/* =========================
 Sub Page Final Fix
 layout.css is loaded last, so final corrections stay here.
========================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.sub-page,
.sub-page * {
  box-sizing: border-box;
}

.sub-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.sub-page h1,
.sub-page h2,
.sub-page p,
.sub-page dd,
.sub-page li,
.sub-page a,
.sub-cta p {
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: anywhere;
}

.sub-page img {
  display: block;
  max-width: 100%;
}

.sub-page .sub-hero-inner,
.sub-page .sub-section,
.sub-page .sub-cta,
.sub-page .sub-split > *,
.sub-page .sub-card-grid > *,
.sub-page .sub-feature-list > *,
.sub-page .sub-case-list > *,
.sub-page .sub-news-list > *,
.sub-page .sub-timeline > * {
  min-width: 0;
}

@media (max-width: 500px) {
  .sub-page .sub-hero {
    padding-left: 6%;
    padding-right: 6%;
  }

  .sub-page .sub-hero-inner {
    width: 100%;
  }

  .sub-page .sub-section,
  .sub-page .sub-cta {
    width: 88%;
  }

  .sub-page .sub-section h2 {
    font-size: 26px;
    line-height: 1.55;
  }

  .sub-page .sub-section p,
  .sub-page .sub-hero p {
    font-size: 15px;
    line-height: 2;
  }

  .sub-page .sub-card-grid article {
    padding: 24px;
  }

  .sub-page .sub-form input,
  .sub-page .sub-form select,
  .sub-page .sub-form textarea {
    min-width: 0;
  }

  header .header-inner {
    min-height: 56px;
  }

  header .header-right {
    margin-left: auto;
  }

  header .header-actions {
    gap: 16px;
    padding-right: 14px;
  }
}

.career-visual-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  padding-top: 0;
  padding-bottom: 64px;
}

.career-visual-row img {
  width: 100%;
  height: 360px;
  object-fit: cover;
}

.career-lead {
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  gap: 56px;
  align-items: end;
  padding-bottom: 48px;
}

.career-lead h2 {
  margin-bottom: 0;
}

.career-section-head {
  max-width: 1120px;
  padding-top: 24px;
  padding-bottom: 0;
}

.career-section-head h2 {
  margin-bottom: 8px;
}

.career-section-head p:last-child {
  max-width: 680px;
}

.sub-timeline article img {
  width: 240px;
  height: 150px;
  object-fit: cover;
}

.sub-timeline article {
  grid-template-columns: 120px 1fr 240px;
  align-items: center;
  background: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 0;
}

.sub-page .sub-timeline {
  padding-top: 32px;
  padding-bottom: 56px;
}

@media (max-width: 900px) {
  .career-lead,
  .career-visual-row,
  .sub-timeline article {
    grid-template-columns: 1fr;
  }

  .sub-timeline article img {
    width: 100%;
    height: 220px;
  }
}

.career-point-grid {
  padding-top: 32px;
  padding-bottom: 64px;
}

.career-point-grid article {
  background: #f7f7f5;
}

.career-point-grid article h2 {
  font-size: 22px;
}

.career-requirements {
  padding-top: 48px;
}

.career-requirements .sub-info-list {
  background: #fff;
}

@media (max-width: 500px) {
  .career-visual-row img,
  .sub-timeline article img {
    height: 200px;
  }

  .career-lead {
    gap: 24px;
    padding-bottom: 32px;
  }

  .sub-page .career-visual-row,
  .sub-page .sub-timeline {
    width: 88%;
  }

  .sub-page .sub-lead h2 {
    font-size: 24px;
  }

  .career-visual-row img {
    object-position: center;
  }

  .sub-timeline article {
    gap: 18px;
  }

  .career-section-head {
    padding-top: 12px;
    padding-bottom: 0;
  }

  .sub-page .sub-timeline {
    padding-top: 20px;
    padding-bottom: 48px;
  }

  .career-point-grid {
    padding-top: 20px;
    padding-bottom: 48px;
  }
}


/* =========================
 Career Page Polish
========================= */

.career-page {
  --career-ink: #26312d;
  --career-muted: #64716b;
  --career-green: #6f8d80;
  --career-green-dark: #3f5d53;
  --career-milk: #f7f5ee;
  --career-paper: #fffaf0;
  --career-line: rgba(38, 49, 45, 0.14);
  --career-accent: #c6a765;
  background:
    linear-gradient(180deg, #fff 0, #fff 430px, var(--career-milk) 430px, var(--career-milk) 100%);
  color: var(--career-ink);
}

.career-page .sub-hero {
  min-height: 520px;
}

.career-page .sub-hero-photo::before {
  background:
    linear-gradient(90deg, rgba(28, 38, 35, 0.84) 0%, rgba(28, 38, 35, 0.52) 42%, rgba(28, 38, 35, 0.2) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.1));
}

.career-page .sub-kicker,
.career-page .sub-section-label {
  color: var(--career-green-dark);
}

.career-page .sub-hero .sub-kicker {
  color: #fff;
}

.career-page .sub-hero h1 {
  font-size: clamp(42px, 5vw, 72px);
  letter-spacing: 0.04em;
}

.career-page .sub-hero p {
  font-weight: 700;
}

.career-page .sub-hero-inner::before {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  background: var(--career-accent);
  margin-bottom: 28px;
}

.career-page .career-lead {
  position: relative;
  max-width: 1120px;
  margin-top: -42px;
  padding: 48px;
  background: rgba(255, 250, 240, 0.96);
  border: 1px solid rgba(38, 49, 45, 0.08);
  box-shadow: 0 24px 60px rgba(38, 49, 45, 0.12);
  z-index: 2;
}

.career-page .career-lead h2,
.career-page .career-section-head h2,
.career-page .career-requirements h2 {
  color: var(--career-ink);
}

.career-page .career-lead p:last-child,
.career-page .career-section-head p:last-child {
  color: var(--career-muted);
}

.career-page .career-visual-row {
  padding-top: 56px;
}

.career-page .career-visual-row img {
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(38, 49, 45, 0.16);
}

.career-page .career-visual-row img:first-child {
  transform: translateY(-18px);
}

.career-page .career-visual-row img:nth-child(2) {
  border: 10px solid #fff;
}

.career-page .career-section-head {
  position: relative;
}

.career-page .career-section-head::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--career-accent);
  margin-bottom: 22px;
}

.career-page .sub-timeline {
  gap: 18px;
}

.career-page .sub-timeline article {
  padding: 24px;
  border: 1px solid var(--career-line);
  border-left: 6px solid var(--career-green);
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(38, 49, 45, 0.07);
}

.career-page .sub-timeline time {
  width: fit-content;
  background: var(--career-green-dark);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
}

.career-page .sub-timeline article h2 {
  margin-bottom: 8px;
  font-size: 24px;
}

.career-page .sub-timeline article p {
  color: var(--career-muted);
}

.career-page .sub-timeline article img {
  border-radius: 8px;
}

.career-page .career-point-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(38, 49, 45, 0.08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(38, 49, 45, 0.08);
}

.career-page .career-point-grid article::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(198, 167, 101, 0.2), rgba(111, 141, 128, 0));
}

.career-page .career-point-grid article img {
  filter: saturate(0.92) contrast(1.02);
}

.career-page .career-point-grid article h2 {
  color: var(--career-green-dark);
}

.career-page .career-point-grid article p {
  color: var(--career-muted);
}

.career-page .career-requirements {
  max-width: 1120px;
  padding: 56px;
  margin-bottom: 84px;
  background: #fff;
  border: 1px solid rgba(38, 49, 45, 0.08);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(38, 49, 45, 0.08);
}

.career-page .career-requirements .sub-info-list {
  border-top-color: var(--career-line);
}

.career-page .career-requirements .sub-info-list div {
  border-bottom-color: var(--career-line);
}

.career-page .career-requirements dt {
  color: var(--career-green-dark);
}

.career-page .sub-cta {
  margin-top: 0;
  background:
    linear-gradient(135deg, rgba(63, 93, 83, 0.96), rgba(38, 49, 45, 0.98));
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 22px 50px rgba(38, 49, 45, 0.18);
}

.career-page .sub-cta a {
  background: var(--career-accent);
  color: var(--career-ink);
}

@media (max-width: 900px) {
  .career-page .career-lead {
    padding: 36px;
  }

  .career-page .career-visual-row img:first-child {
    transform: none;
  }

  .career-page .career-requirements {
    padding: 36px;
  }
}

@media (max-width: 500px) {
  .career-page {
    background:
      linear-gradient(180deg, #fff 0, #fff 360px, var(--career-milk) 360px, var(--career-milk) 100%);
  }

  .career-page .sub-hero {
    min-height: 420px;
  }

  .career-page .career-lead {
    width: 88%;
    margin-top: -28px;
    padding: 28px;
  }

  .career-page .career-lead h2 {
    font-size: 23px;
  }

  .career-page .career-lead p:last-child {
    font-size: 14px;
  }

  .career-page .career-visual-row {
    padding-top: 40px;
  }

  .career-page .career-visual-row img:nth-child(2) {
    border-width: 6px;
  }

  .career-page .sub-timeline article {
    padding: 20px;
  }

  .career-page .career-requirements {
    width: 88%;
    padding: 28px;
    margin-bottom: 56px;
  }

  .career-page .sub-cta {
    width: 88%;
  }
}


/* =========================
 Farm Page Polish
========================= */

.farm-page {
  --farm-ink: #25312d;
  --farm-muted: #66736f;
  --farm-green: #78998b;
  --farm-green-dark: #3d5d52;
  --farm-mist: #eef4ef;
  --farm-cream: #fbf8ef;
  --farm-line: rgba(37, 49, 45, 0.13);
  --farm-accent: #bfa56c;
  background:
    linear-gradient(180deg, #fff 0, #fff 430px, var(--farm-mist) 430px, var(--farm-mist) 100%);
  color: var(--farm-ink);
}

.farm-page .sub-hero {
  min-height: 520px;
}

.farm-page .sub-hero-photo::before {
  background:
    linear-gradient(90deg, rgba(37, 49, 45, 0.82) 0%, rgba(37, 49, 45, 0.48) 48%, rgba(37, 49, 45, 0.16) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.05));
}

.farm-page .sub-hero-inner::before {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  background: var(--farm-accent);
  margin-bottom: 28px;
}

.farm-page .sub-hero .sub-kicker {
  color: #fff;
}

.farm-page .sub-hero h1 {
  font-size: clamp(40px, 5vw, 68px);
}

.farm-page .sub-hero p {
  font-weight: 700;
}

.farm-page .sub-section-label {
  color: var(--farm-green-dark);
}

.farm-lead {
  position: relative;
  max-width: 1120px;
  margin-top: -44px;
  padding: 42px;
  background: rgba(251, 248, 239, 0.96);
  border: 1px solid rgba(37, 49, 45, 0.08);
  box-shadow: 0 24px 60px rgba(37, 49, 45, 0.12);
  z-index: 2;
}

.farm-lead img {
  height: 360px;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(37, 49, 45, 0.14);
}

.farm-lead h2 {
  color: var(--farm-ink);
}

.farm-lead p:last-child {
  color: var(--farm-muted);
}

.farm-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-top: 54px;
  padding-bottom: 48px;
}

.farm-stat-row div {
  background: #fff;
  border: 1px solid var(--farm-line);
  border-radius: 8px;
  padding: 28px 22px;
  box-shadow: 0 14px 34px rgba(37, 49, 45, 0.07);
}

.farm-stat-row span {
  display: block;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: var(--farm-green-dark);
  margin-bottom: 12px;
}

.farm-stat-row p {
  color: var(--farm-muted);
  line-height: 1.4;
}

.farm-feature-list {
  gap: 20px;
  padding-top: 24px;
  padding-bottom: 64px;
}

.farm-feature-list article {
  display: grid;
  grid-template-columns: 76px 1fr 280px;
  gap: 28px;
  align-items: center;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--farm-line);
  border-left: 6px solid var(--farm-green);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(37, 49, 45, 0.08);
}

.farm-feature-list .sub-feature-number {
  background: var(--farm-green-dark);
  border-radius: 8px;
}

.farm-feature-list article h2 {
  color: var(--farm-ink);
}

.farm-feature-list article p {
  color: var(--farm-muted);
}

.farm-feature-list article img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 8px;
}

.farm-page .sub-tag-list li {
  background: var(--farm-mist);
  color: var(--farm-green-dark);
  border: 1px solid rgba(61, 93, 82, 0.12);
}

.farm-section-head {
  padding-top: 24px;
  padding-bottom: 24px;
}

.farm-section-head::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--farm-accent);
  margin-bottom: 22px;
}

.farm-section-head p:last-child {
  color: var(--farm-muted);
  max-width: 680px;
}

.farm-gallery {
  padding-top: 24px;
}

.farm-gallery img {
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(37, 49, 45, 0.1);
}

.farm-page .sub-cta {
  background: linear-gradient(135deg, rgba(61, 93, 82, 0.96), rgba(37, 49, 45, 0.98));
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 22px 50px rgba(37, 49, 45, 0.18);
}

.farm-page .sub-cta a {
  background: var(--farm-accent);
  color: var(--farm-ink);
}

@media (max-width: 1000px) {
  .farm-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .farm-feature-list article {
    grid-template-columns: 70px 1fr;
  }

  .farm-feature-list article img {
    grid-column: 1 / -1;
    height: 260px;
  }
}

@media (max-width: 900px) {
  .farm-lead {
    padding: 34px;
  }
}

@media (max-width: 500px) {
  .farm-page {
    background:
      linear-gradient(180deg, #fff 0, #fff 360px, var(--farm-mist) 360px, var(--farm-mist) 100%);
  }

  .farm-page .sub-hero {
    min-height: 420px;
  }

  .farm-page .sub-hero h1 {
    font-size: 30px;
    line-height: 1.45;
  }

  .farm-page .sub-hero p {
    font-size: 14px;
    line-height: 1.8;
  }

  .farm-lead {
    width: 88%;
    margin-top: -28px;
    padding: 28px;
  }

  .farm-lead h2 {
    font-size: 23px;
  }

  .farm-lead p:last-child {
    font-size: 14px;
  }

  .farm-lead img {
    height: 220px;
  }

  .farm-stat-row {
    width: 84%;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 40px;
    padding-bottom: 32px;
  }

  .farm-stat-row div {
    padding: 22px 16px;
  }

  .farm-stat-row span {
    font-size: 28px;
  }

  .farm-feature-list {
    width: 84%;
  }

  .farm-feature-list article {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px;
  }

  .farm-feature-list article img {
    height: 210px;
  }

  .farm-page .sub-cta {
    width: 88%;
  }
}


/* =========================
 Contact Page Polish
========================= */

.contact-page {
  --contact-ink: #17211f;
  --contact-muted: #61716b;
  --contact-green: #77a091;
  --contact-green-dark: #243f38;
  --contact-night: #14211e;
  --contact-panel: rgba(255, 255, 255, 0.78);
  --contact-milk: #f4f7f2;
  --contact-line: rgba(23, 33, 31, 0.13);
  --contact-accent: #c8ae6e;
  background:
    linear-gradient(180deg, #101b18 0, #101b18 450px, var(--contact-milk) 450px, var(--contact-milk) 100%);
  color: var(--contact-ink);
}

.contact-page .sub-hero {
  min-height: 500px;
}

.contact-page .sub-hero-photo::before {
  background:
    linear-gradient(90deg, rgba(14, 25, 22, 0.92) 0%, rgba(14, 25, 22, 0.64) 44%, rgba(14, 25, 22, 0.28) 100%),
    linear-gradient(0deg, rgba(14, 25, 22, 0.32), rgba(14, 25, 22, 0.1));
}

.contact-page .sub-hero-inner::before {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  background: var(--contact-accent);
  margin-bottom: 28px;
}

.contact-page .sub-hero .sub-kicker {
  color: #fff;
}

.contact-page .sub-hero h1 {
  font-size: clamp(34px, 3.5vw, 46px);
  line-height: 1.35;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.contact-page .sub-hero p {
  font-weight: 700;
}

.contact-page p,
.contact-page dd,
.contact-page label,
.contact-page a {
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

.contact-lead {
  position: relative;
  max-width: 1120px;
  margin-top: -56px;
  padding: 48px;
  background: var(--contact-panel);
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(14, 25, 22, 0.22);
  backdrop-filter: blur(16px);
  z-index: 2;
}

.contact-page .sub-section-label {
  color: var(--contact-green-dark);
}

.contact-lead h2 {
  color: var(--contact-ink);
  font-size: 24px;
  line-height: 1.6;
  text-wrap: balance;
}

.contact-lead p {
  color: var(--contact-muted);
}

.contact-page .sub-contact-box {
  background: rgba(20, 33, 30, 0.94);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 28px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.contact-page .sub-contact-box div {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.contact-page .sub-contact-box div:last-child {
  border-bottom: 0;
}

.contact-page .sub-contact-box dt {
  color: var(--contact-accent);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.contact-page .sub-contact-box dd {
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  line-height: 1.7;
}

.contact-form-section {
  max-width: 1120px;
  padding-top: 72px;
  padding-bottom: 108px;
}

.contact-page .sub-form {
  position: relative;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 42px;
  background: #fff;
  border: 1px solid var(--contact-line);
  border-radius: 8px;
  box-shadow: 0 22px 60px rgba(23, 33, 31, 0.12);
}

.contact-page .sub-form::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 5px solid var(--contact-green);
  border-radius: 8px;
  pointer-events: none;
}

.contact-page .sub-form label {
  color: var(--contact-green-dark);
}

.contact-page .sub-form label:nth-child(5),
.contact-page .sub-form button {
  grid-column: 1 / -1;
}

.contact-page .sub-form input,
.contact-page .sub-form select,
.contact-page .sub-form textarea {
  border: 1px solid rgba(23, 33, 31, 0.16);
  border-radius: 6px;
  background: #f8faf7;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact-page .sub-form input:focus,
.contact-page .sub-form select:focus,
.contact-page .sub-form textarea:focus {
  outline: none;
  border-color: var(--contact-green);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(119, 160, 145, 0.16);
}

.contact-page .sub-form button {
  justify-self: start;
  background: linear-gradient(135deg, var(--contact-green-dark), var(--contact-night));
  border-radius: 6px;
  padding: 18px 52px;
  color: #fff;
  box-shadow: 0 16px 32px rgba(23, 33, 31, 0.2);
}

.contact-page .sub-form button::after {
  content: "  →";
}

@media (max-width: 1100px) {
  .contact-lead {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-page .sub-contact-box {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .contact-lead {
    padding: 36px;
  }

  .contact-page .sub-form {
    grid-template-columns: 1fr;
    padding: 34px;
  }
}

@media (max-width: 600px) {
  .contact-lead,
  .contact-form-section,
  .contact-page .sub-cta {
    width: 86%;
  }

  .contact-page .sub-contact-box div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact-page .sub-hero h1 {
    font-size: 28px;
    line-height: 1.35;
  }

  .contact-page .sub-hero p {
    font-size: 14px;
    line-height: 1.8;
  }
}

@media (max-width: 500px) {
  .contact-page {
    background:
      linear-gradient(180deg, #101b18 0, #101b18 370px, var(--contact-milk) 370px, var(--contact-milk) 100%);
  }

  .contact-page .sub-hero {
    min-height: 420px;
  }

  .contact-page .sub-hero h1 {
    font-size: 28px;
  }

  .contact-page .sub-hero p {
    font-size: 14px;
    line-height: 1.8;
  }

  .contact-lead {
    width: 86%;
    margin-top: -34px;
    padding: 28px;
  }

  .contact-lead h2 {
    font-size: 21px;
    line-height: 1.65;
  }

  .contact-page .sub-contact-box {
    padding: 4px 20px;
  }

  .contact-form-section {
    width: 86%;
    padding-top: 48px;
    padding-bottom: 72px;
  }

  .contact-page .sub-form {
    padding: 26px;
    gap: 18px;
  }

  .contact-page .sub-form button {
    width: 100%;
    text-align: center;
  }
}


/* =========================
 News Page Polish
========================= */

/* Full-width pasture contact scene */
.about-page .pasture-contact {
  position: relative;
  isolation: isolate;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: clamp(440px, 42vw, 580px);
  margin: 0;
  padding: 150px 24px 170px;
  overflow: hidden;
  background: url('../img/contact-pasture.png') center bottom / 100% 100% no-repeat;
  text-align: center;
}
.pasture-contact-content { position: relative; z-index: 2; width: min(100%, 680px); margin: auto; }
.about-page .pasture-contact p {
  margin: 0 0 24px;
  color: #24432e;
  font-size: clamp(19px, 2.1vw, 28px);
  font-weight: 500;
  line-height: 1.8;
  line-break: strict;
}
.about-page .pasture-contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 18px 32px;
  background: #244d34;
  border: 1px solid #244d34;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 5px 0 rgba(28, 60, 38, .13);
  transition: background .2s, box-shadow .2s;
}
.about-page .pasture-contact a:hover { background: #183923; box-shadow: 0 7px 16px rgba(28, 60, 38, .2); }
.pasture-contact a:focus-visible, .pasture-motion-toggle:focus-visible { outline: 3px solid #244d34; outline-offset: 5px; }
.pasture-motion-toggle { display: block; margin: 16px auto 0; padding: 6px 12px; border: 0; background: transparent; font: inherit; font-size: 11px; color: #24432e; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.pasture-motion-toggle[hidden] { display: none; }
.pasture-cows { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.pasture-cow { position: absolute; left: 0; width: 100%; bottom: var(--cow-bottom); z-index: var(--cow-layer, 1); animation: pasture-cross var(--cow-duration) linear var(--cow-delay) infinite; }
.pasture-cow[data-walk-right] { animation-direction: reverse; }
.pasture-cow img { display: block; width: var(--cow-size); height: auto; object-fit: contain; transform: scaleX(var(--cow-facing, 1)); animation: pasture-step 1.1s ease-in-out var(--cow-delay) infinite; }
.pasture-contact.is-paused .pasture-cow, .pasture-contact.is-paused .pasture-cow img { animation-play-state: paused; }
@keyframes pasture-cross { from { transform: translateX(100%); } to { transform: translateX(calc(0px - var(--cow-size))); } }
@keyframes pasture-step { 0%, 100% { transform: translateY(0) rotate(-.6deg) scaleX(var(--cow-facing, 1)); } 50% { transform: translateY(-2px) rotate(.6deg) scaleX(var(--cow-facing, 1)); } }
@media (max-width: 600px) {
  .about-page .pasture-contact { min-height: 420px; padding: 130px 24px 140px; background-size: auto 100%; }
  .about-page .pasture-contact p { max-width: 300px; margin: 0 auto 20px; font-size: 20px; }
  .about-page .pasture-contact a { padding: 16px 24px; gap: 20px; font-size: 15px; }
  .pasture-cow:nth-child(n + 4) { display: none; }
  .pasture-cow img { width: calc(var(--cow-size) * .75); }
}
@media (prefers-reduced-motion: reduce) {
  .pasture-cow, .pasture-cow img { animation: none; }
  .pasture-cow:nth-child(1) { left: 7%; }
  .pasture-cow:nth-child(2) { left: 36%; }
  .pasture-cow:nth-child(3) { left: 73%; }
  .pasture-cow:nth-child(4) { left: 55%; }
  .pasture-cow:nth-child(5) { left: 22%; }
  .pasture-motion-toggle { display: none; }
}

/* About: story, thought and daily values */
.about-page {
  font-family: "Josefin Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --about-ink: #293e35;
  --about-muted: #5d6b64;
  --about-green: #587663;
  --about-line: #cad5cc;
}
.about-page .about-story {
  padding: clamp(56px, 8vw, 104px) 0 64px;
}
.about-page .about-story .sub-section-label,
.about-page .about-thought .sub-section-label,
.about-page .about-values .sub-section-label {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .18em;
  color: var(--about-green);
  margin: 0 0 24px;
}
.about-story-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.about-page .about-story h2 {
  font-size: clamp(28px, 3.3vw, 42px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .035em;
  color: var(--about-ink);
  margin: 0;
}
.about-story h2 span { display: block; }
.about-story-copy { border-left: 1px solid var(--about-line); padding-left: 32px; }
.about-page .about-story-copy p {
  margin: 0;
  font-size: 16px;
  line-height: 2.2;
  color: var(--about-muted);
}
.about-page .about-thought {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  box-sizing: border-box;
  padding: clamp(24px, 4vw, 48px);
  background: #edf1e9;
  border-radius: 4px;
  scroll-margin-top: 88px;
}
.about-thought-photo { margin: 0; min-width: 0; }
.about-thought-photo img {
  display: block;
  width: 100%;
  height: 390px;
  object-fit: cover;
  border-radius: 2px;
}
.about-thought-photo figcaption {
  margin-top: 12px;
  color: var(--about-muted);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .1em;
}
.about-page .about-thought h2 {
  font-size: clamp(24px, 2.3vw, 30px);
  font-weight: 500;
  line-height: 1.7;
  color: var(--about-ink);
  margin: 0 0 24px;
}
.about-page .about-thought-copy > p:not(.sub-section-label) {
  font-size: 15px;
  line-height: 2.1;
  color: var(--about-muted);
  margin: 0 0 18px;
}
.about-page .about-thought-copy > p:last-child { margin-bottom: 0; }
.about-page .about-values { padding: 72px 0 32px; }
.about-page .about-values-head .sub-section-label { margin-bottom: 12px; }
.about-page .about-values-head h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  color: var(--about-ink);
  margin: 0 0 32px;
}
.about-values-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.about-values-grid article {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--about-line);
}
.about-value-number {
  font-size: 38px;
  font-weight: 300;
  line-height: 1.2;
  color: #819586;
}
.about-values-grid h3 { margin: 0 0 12px; color: var(--about-ink); font-size: 22px; font-weight: 500; line-height: 1.5; }
.about-page .about-values-grid p { margin: 0; font-size: 15px; line-height: 2; color: var(--about-muted); }
@media (max-width: 800px) {
  .about-story-layout { grid-template-columns: 1fr; gap: 24px; }
  .about-story-copy { padding-left: 24px; max-width: 600px; }
  .about-page .about-thought { grid-template-columns: 1fr; gap: 28px; }
  .about-thought-photo img { height: 300px; }
  .about-thought-copy { max-width: 600px; }
  .about-values-grid { column-gap: 28px; }
  .about-values-grid article { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 500px) {
  .about-page .about-story { padding: 48px 0 40px; }
  .about-page .about-story h2 { font-size: 28px; }
  .about-page .about-story-copy p { font-size: 15px; line-height: 2; }
  .about-page .about-thought { padding: 24px 20px; }
  .about-thought-photo img { height: 230px; }
  .about-page .about-thought h2 { font-size: 23px; }
  .about-page .about-values { padding: 48px 0 16px; }
  .about-values-grid { grid-template-columns: 1fr; }
  .about-values-grid article { padding: 24px 0; }
  .about-value-number { font-size: 32px; }
  .about-values-grid h3 { font-size: 20px; margin-bottom: 8px; }
}

.news-page {
  --news-ink: #25312d;
  --news-muted: #66736f;
  --news-green: #6f8d80;
  --news-green-dark: #3d5d52;
  --news-milk: #f5f6ef;
  --news-paper: #fffaf0;
  --news-line: rgba(37, 49, 45, 0.13);
  --news-accent: #c1a766;
  background:
    linear-gradient(180deg, #fff 0, #fff 430px, var(--news-milk) 430px, var(--news-milk) 100%);
  color: var(--news-ink);
}

.news-page .sub-hero {
  min-height: 500px;
}

.news-page .sub-hero-photo::before {
  background:
    linear-gradient(90deg, rgba(37, 49, 45, 0.86) 0%, rgba(37, 49, 45, 0.54) 48%, rgba(37, 49, 45, 0.2) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.08));
}

.news-page .sub-hero-inner::before {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  background: var(--news-accent);
  margin-bottom: 28px;
}

.news-page .sub-hero .sub-kicker {
  color: #fff;
}

.news-page .sub-hero h1 {
  font-size: clamp(42px, 5vw, 70px);
}

.news-page .sub-hero p {
  font-weight: 700;
}

.news-page .sub-news-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1120px;
  margin-top: -52px;
  padding: 0 0 84px;
  position: relative;
  z-index: 2;
}

.news-page .sub-news-list article a {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--news-line);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(37, 49, 45, 0.12);
}

.news-page .sub-news-list article img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.news-page .sub-news-list article time,
.news-page .sub-news-list article span,
.news-page .sub-news-list article h2,
.news-page .sub-news-list article p {
  margin-left: 28px;
  margin-right: 28px;
}

.news-page .sub-news-list article time {
  display: block;
  margin-top: 28px;
  margin-bottom: 10px;
  color: var(--news-green-dark);
  font-weight: 700;
}

.news-page .sub-news-list article span {
  display: inline-block;
  width: fit-content;
  margin-bottom: 18px;
  background: var(--news-milk);
  color: var(--news-green-dark);
  border: 1px solid rgba(61, 93, 82, 0.12);
}

.news-page .sub-news-list article h2 {
  font-size: 22px;
  line-height: 1.55;
  margin-bottom: 14px;
  color: var(--news-ink);
}

.news-page .sub-news-list article p {
  grid-column: auto;
  margin-bottom: 30px;
  color: var(--news-muted);
}

.news-page .sub-cta {
  background: linear-gradient(135deg, rgba(61, 93, 82, 0.96), rgba(37, 49, 45, 0.98));
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 22px 50px rgba(37, 49, 45, 0.18);
}

.news-page .sub-cta a {
  background: var(--news-accent);
  color: var(--news-ink);
}

.news-article-page {
  --news-ink: #25312d;
  --news-muted: #66736f;
  --news-green: #3d5d52;
  --news-milk: #f5f6ef;
  --news-line: rgba(37, 49, 45, 0.13);
  --news-accent: #c1a766;
  background: var(--news-milk);
  color: var(--news-ink);
}

.news-article-page .news-detail-hero {
  min-height: 460px;
}

.news-article-page .news-detail-hero::before {
  background:
    linear-gradient(90deg, rgba(37, 49, 45, 0.86) 0%, rgba(37, 49, 45, 0.58) 48%, rgba(37, 49, 45, 0.22) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.08));
}

.news-article-page .news-detail-hero .sub-hero-inner::before {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  background: var(--news-accent);
  margin-bottom: 28px;
}

.news-article-page .news-detail-hero .sub-kicker {
  color: #fff;
}

.news-article-page .news-detail-hero h1 {
  font-size: clamp(42px, 5vw, 70px);
}

.news-article-page .news-detail-hero p {
  font-weight: 700;
}

.news-article {
  width: 90%;
  max-width: 980px;
  margin: -58px auto 0;
  padding: 0 0 100px;
  position: relative;
  z-index: 2;
}

.news-article-hero {
  padding: 52px;
  background: #fff;
  border: 1px solid var(--news-line);
  border-radius: 8px;
  box-shadow: 0 20px 54px rgba(37, 49, 45, 0.1);
}

.news-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.news-article-meta a,
.news-article-meta span {
  display: inline-block;
  background: var(--news-green);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
}

.news-article-meta time {
  color: var(--news-green);
  font-weight: 700;
}

.news-article h1 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.35;
  font-weight: 700;
  margin-bottom: 22px;
}

.news-article-hero p {
  color: var(--news-muted);
  font-size: 18px;
  line-height: 2;
}

.news-article-main-image {
  width: 100%;
  height: 460px;
  object-fit: cover;
  margin: 34px 0;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(37, 49, 45, 0.12);
}

.news-article-body {
  padding: 54px;
  background: #fff;
  border: 1px solid var(--news-line);
  border-radius: 8px;
}

.news-article-body p {
  font-size: 17px;
  line-height: 2.1;
  color: var(--news-muted);
  margin-bottom: 26px;
}

.news-article-body h2 {
  position: relative;
  font-size: 28px;
  line-height: 1.6;
  font-weight: 700;
  margin: 52px 0 22px;
  padding-top: 24px;
}

.news-article-body h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--news-accent);
}

.news-article-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 34px;
}

.news-article-nav a {
  display: inline-block;
  background: var(--news-green);
  color: #fff;
  padding: 14px 24px;
  border-radius: 6px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .news-page .sub-news-list {
    grid-template-columns: 1fr;
    margin-top: -34px;
  }

  .news-article {
    margin-top: -44px;
  }

  .news-article-hero,
  .news-article-body {
    padding: 36px;
  }
}

@media (max-width: 500px) {
  .news-page .sub-hero {
    min-height: 420px;
  }

  .news-page .sub-news-list {
    width: 86%;
  }

  .news-page .sub-news-list article time,
  .news-page .sub-news-list article span,
  .news-page .sub-news-list article h2,
  .news-page .sub-news-list article p {
    margin-left: 22px;
    margin-right: 22px;
  }

  .news-page .sub-news-list article h2 {
    font-size: 21px;
  }

  .news-page .sub-news-list article img {
    height: 200px;
  }

  .news-article {
    width: 86%;
    margin-top: -34px;
    padding: 0 0 72px;
  }

  .news-article-page .news-detail-hero {
    min-height: 390px;
  }

  .news-article-hero,
  .news-article-body {
    padding: 28px;
  }

  .news-article-main-image {
    height: 260px;
  }

  .news-article-body p {
    font-size: 15px;
  }

  .news-article-nav {
    display: grid;
  }
}