/* ───────── TOP レイアウト ───────── */

#top{
  width:100%;
  height:100vh;          /* ここで一括指定 */
  display:flex;
  justify-content:space-between;
  margin:0;
  padding:0;
}


/* ── 左：ナビゲーション ───────────────── */

.top-nav{
  width:20%;
  text-align:center;
  margin:0;
  padding:0;
}

.top-nav ul{
  width:100%;
  margin:auto;
}

.top-nav .nav-list li{
  width:130px;
  margin:20px auto;
  text-align:center;
  font:16px/20px "Kiwi Maru",serif;
  color:#13564D;
}

.top-nav .nav-list li span{
  display:block;
  font:13px "Playpen Sans Arabic",cursive;
  color:#4FD9B3;
}

.top-nav .site-title{
  margin:40px auto 30px;
  font:32px/30px "Playpen Sans Arabic",cursive;
}

.top-nav .site-title span{
  display:block;
  font:18px "Kiwi Maru",serif;
}

.top-nav .site-title .logo{
  width:120px;
  margin:0 auto 5px;
  height:auto;
}

/* ── 右：スワイパー ─────────────────── */

.swiper{                
  width:100%;
  height:100vh;
}

#top .swiper{           
  width:80%;
  border-bottom-left-radius:80px;
  position:relative;
}

.swiper-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.15);
  transition:transform 8s ease;
}

#top .swiper .swiper-slide img{   
  border-bottom-left-radius:80px;
}

.swiper-slide-active img,
.swiper-slide-duplicate-active img{
  transform:scale(1);
}


@media (max-width: 1440px) { 
  .top-nav{
      width:25%;
    }
    #top .swiper{           
      width:75%;
     
    }
}


@media (max-width: 1280px) { 
  .top-nav{
      width:30%;
    }
    #top .swiper{           
      width:70%;
     
    }
}



@media (max-width: 768px)  {
  
.top-nav{

  display: none;
}

#top .swiper{           
  width:100%;
  border-bottom-left-radius:0;

} 

#top .swiper .swiper-slide img{   
  border-bottom-left-radius:0;
}




}


@media (min-width: 768px) {
  #navToggle{
      display: none;
  }

.swiper h2{
  display: none;
}



}



/* ② 見出しを絶対配置でど真ん中へ */
.swiper h2{
  position:absolute;
  top:20px; left:20px;
  /* transform:translate(-50%, -50%); */
  z-index:10;                  /* 画像より前に出す */
  /* text-align:center; */
  line-height:0.9;
  color:#fff;                  /* デフォルト白文字 */
  font-size:clamp(24px, 6vw, 42px); /* 画面幅で自動伸縮 */
  display: flex;
  width: fit-content;
  align-items: center;
}

/* ロゴ画像を整列 */
.swiper h2 .logo{
  width:clamp(80px, 18vw, 100px);
 /* width: 100px; */
 height: auto;
  /* height:80px; */
  margin: 0 10px 0 0;
}

/* 和文サブタイトル */
.swiper h2 span{
  /* display:block; */
  font-size:.7em;
  color: #4FD9B3;
  /* letter-spacing:.05em;    
        */
}


@media (min-width: 768px) {
  #navToggle{
      display: none;
  }

.swiper h2{
  display: none;
}



}




/* 丸ボタン本体（既にあるスタイルに追加・上書き） */
#navToggle{
  background:#13564D;
  color:#fff;
  width:60px; height:60px;
  border:none; border-radius:50%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2px;                          /* アイコンと文字の間隔 */
  font-size:26px;                   /* アイコンサイズ */
  cursor:pointer;
  padding: 40px;
  transition:transform .25s;
  position: fixed;
  right: 15px;
  top:15px;
  z-index: 990;
}

#navToggle:hover{ transform:rotate(8deg); }

/* ─ ラベル文字 ─ */
#navToggle::after{
  content:attr(data-label);         /* ← ここが肝：属性値を表示 */
  font-size:10px;
  color:#fff;
  margin: 5px 0 0 0;
  letter-spacing:.05em;
  line-height:1;
  pointer-events:none;
}



@media (min-width: 768px) {
  #navToggle{
      display: none;
  }

}

/* ===== おしゃれスライドメニュー ===== */

/* パネル本体 */
#slideMenu{
  position:fixed;
  top:0; right:0;
  width:300px;
  height:100vh;
  background:rgba(19,86,77,.95);  /* 深緑＋透明感 */
  backdrop-filter:blur(6px);
  transform:translateX(100%);     /* 初期は画面外 */
  transition:transform .45s cubic-bezier(.6,.05,.3,1);
  z-index:900;                    /* ヘッダーより前に */
  display:flex; align-items:center; justify-content:center;
}

/* 開いた状態 */
#slideMenu.open{ transform:none; }

/* メニューリスト */
#slideMenu ul{
  list-style:none;
  padding:0; margin:0;
  text-align:center;
  width:100%;
}
#slideMenu li{ margin:20px 0; }
#slideMenu a{
  font-family:"Kiwi Maru",serif;
  font-size:20px;
  color:#fff;
  text-decoration:none;
  transition:opacity .25s;
}
#slideMenu a:hover{ opacity:.7; }

/* “画面を暗くする” オーバーレイ */
#menuOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  transition:opacity .45s;
  z-index:800;
}
#menuOverlay.show{
  opacity:1; pointer-events:auto;
}

/* ===== 既存トグルボタンを少し上に固定したい場合（任意） ===== */
/*
#navToggle{
  position:fixed;
  top:20px; right:20px;
  z-index:950;
}
*/















  #news{
      background-color: #faf7f5;
      padding: 100px 20px;
  }

#news ul{
display: flex;
margin: auto;
justify-content: center;
}


#news ul li{

  margin: 0 20px;
}

#news ul li h3{
  background-color: #13564D;
  color: #fff;
  position: absolute;
  bottom: 0;
  padding: 5px 20px;
  border-radius: 0px 10px 0px 20px;
  left: 0;
}


#news ul li .news_img{
  width: 100%;
  height: 300px;
  position: relative;
  border-radius: 20px;
}

#news ul li .news_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 40px;
}


#news ul li .news_title{
  text-align: center;
  margin: 10px auto;
}

#news ul li .news_title time{
  font-size: 13px;
  color: #13564D;
}
#news .news_btn{
  color: #fff;
  background-color: #4FD9B3;
  padding: 10px 20px;
  border-radius: 20px;
  width: fit-content;
  margin: 50px auto;
}



/* 共通レイアウトはご提示のまま ─ 追記分だけ記載 */

/* .news_img をクリック可能にしたい場合は下記を解除 */
/* .news_img a { display:block; } */

#news ul li h3 {          /* 既存スタイルは上書きせず継承 */
  /* ここでは例として同じ装飾を踏襲 */
}

/* ─────────────
   カテゴリー別カラー
   slug 名と色だけ合わせればOK
   ───────────── */
#news ul li h3.cat-farm      { background:#13564D; }
#news ul li h3.cat-news      { background:#E5503C; }
#news ul li h3.cat-recruit   { background:#4FD9B3; }
#news ul li h3.cat-voice     { background:#3A6EE8; }
#news ul li h3.cat-diary     { background:#F0A722; }
/* 追加カテゴリーは同形式で増やしてください */


@media (max-width: 1280px) {
  #news ul li{

      margin: 0 10px;
  }

 }

 @media (max-width: 1024px) { 
  #news ul li .news_img{
      /* width: 100%; */
      height: 250px;

  }

 }

@media (max-width: 768px) {
  #news ul{
      display:block;
      margin: auto;
      justify-content: center;
      }

      #news ul li{
          display: flex;
          margin: 20px 0;
          background-color: #fff;
          border-radius: 20px; 
   
          align-items: flex-start;/* 画像に対して上揃え */
          text-align: left;       /* 親レベルで左寄せを強制 */
    
      }
      #news ul li .news_img{
          width: 50%;
          height: 250px;
          border-radius: 20px 0 0 20px;
      }

      #news ul li .news_img img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 20px 0 0 20px;
      }

      #news ul li .news_title{
width: 46%;
          padding: 1% 2%;
          display: inline-block;  /* 幅 0 問題を防ぐ */
          text-align: left !important; /* どこかに残っている中央寄せを打ち消す */
      }

      #news ul li .news_title a{
          font-size: 20px;
          display: inline-block;  /* 幅 0 問題を防ぐ */
          text-align: left;
              /* -------- 点線下線（新しい指定） -------- */
  text-decoration-line: underline;     /* 下線を引く */
  text-decoration-style: dotted;       /* 点線 */
  /* text-decoration-thickness: 1px;  好みで太さ調整 */

  /* -------- フォールバック -------- */
  /* 古いブラウザでは上記が効かない場合があるので、
     デフォルトの下線を消し、border で点線を再現します。 */
  text-decoration: none;               /* 既存下線を除去 */
  border-bottom: 2px dotted currentColor;
  padding-bottom: 2px;                 /* 点線と文字の間隔を微調整 */

      }

      /* 1) 元要素に動き用の初期設定 */
#news ul li{
  transition: transform .25s ease,          /* 拡大アニメーション */
              box-shadow .25s ease;         /* 影のフェード */
  will-change: transform;                   /* パフォーマンス最適化 */
}

/* 2) PC など “hover” があるデバイスのみ拡大 */
@media (hover: hover){                      /* モバイルの誤タップ対策 */
  #news ul li:hover{
    transform: scale(1.03);                 /* お好みで 1.02〜1.05 */
    box-shadow: 0 6px 16px rgba(0,0,0,.05); /* 影で浮かせ感アップ */
  }
}

}


















#concept{
  display: flex;
  padding: 100px 20px;
  justify-content: space-around;
  position: relative;
}


#concept .concept_title{
  text-align: left;
}


.concept_text{
  line-height: 35px;
}



#concept .concept_img img{
  width: 600px;
  object-fit: cover;
  height: 500px;
  border-radius: 50px;
}




@media (max-width: 1024px) { 
  #concept{
      display: flex;          /* 横並び→縦並びに切替 */
      flex-direction: column; /* 上から下へ */

      padding: 0px 0px;
      justify-content: space-around;
      position: relative;
  
  }
  

    /* 画像を先頭（order: -1）に */
#concept .concept_img{
  order: -1;
  margin-bottom: 40px;      
  width: 100%;
}

#concept .concept_img img{
  width: 100%;
  height: 400px;
  border-radius: 0;
}

#concept .concept_title,
.concept_text{

  width: 95%;
  margin: 0 auto 20px;
  padding: 0px 0px;

}

 }




@media (max-width: 768px)  { 
  #concept .concept_img img{
      width: 100%;
      height: 250px;
      border-radius: 0;
  }

  #concept  .concept_title{
      font-size: 24px;
  }
  

 }
@media (max-width: 600px)  { }
@media (max-width: 420px)  { 
  #concept .concept_img img{
      width: 100%;
      height: 200px;
      border-radius: 0;
  }

 }













































#takinoue{
  background-image: url("../img/top/recruit2.jpg");
  width: 100%;
  background-size: cover;
  height: 500px;
  background-position: bottom;
  position: relative;  margin: 50px auto;
}


#takinoue .takinoue_btn{
  position: absolute;
  background-color: #fff;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 20px;
  bottom: 20px;
  right: 20px;
}



@media (max-width: 1024px) {#takinoue{
background-image: url("../img/top/recruit2.jpg");
  width: 100%;
  background-size: cover;
  height: 350px;
  background-position: bottom;
  position: relative;
  margin: 50px auto;
} }
@media (max-width: 768px)  {#takinoue{
background-image: url("../img/top/recruit2.jpg");
  width: 100%;
  background-size: cover;
  height: 250px;
  background-position: bottom;
  position: relative;
}  }


































































































#work{
    display: flex;
    justify-content: center;
    padding: 150px 0;
    align-items: center;
}

#work .concept_title{
    margin: 0 auto 30px;
}

#work .work_img{
    width:50%;
    margin: 0 0 0 40px;
}

#work .work_img img{
    width: 45%;
    height: 500px;
    border-radius: 40px;
    object-fit: cover;
}

#work .work_img .work_01{
    margin: 0 10px 60px 0;
}
#work .work_img .work_02{
    margin: 60px 0 10px 0;
}


#work .work_message{
    width: 600px;
    margin: 0 30px;


}

#work .work_message li{
    display: flex;
    width: 100%;
    border-bottom: 1px solid #4FD9B3;
    padding: 10px 10px;
    margin: 10px auto;
}


.work_ul_title{
    width: 20%;
}

.work_ul_content{
    width: 75%;
}


.work_btn{
    background-color: #4FD9B3;
    border-radius: 20px;
    padding: 10px 20px;
    width: fit-content;
    margin: 30px 0;
}




@media (max-width: 1024px)  { 





    #work .work_message{
        width: 95%;
        padding: 0px 2.5px;
        margin: 0 auto;
    
    
    }

    #work{
        display: block;
        justify-content: center;
        padding: 50px 0;
        align-items: center;
    }

    #work .work_img{
       display: none;
    }

    #work ul{
        margin: 40px auto;
    }



    .work_btn{
        background-color: #4FD9B3;
        border-radius: 20px;
        padding: 10px 20px;
        width: fit-content;
        margin: 50px auto;
    }
}





















































/* ==========================================================
   FLOW Section
   ========================================================== */

/* ---------- 基本レイアウト ---------- */
#flow{
    background-image:url("../img/top/bokusou.png");
    background-size:cover;
    width:100%;
    padding:100px 30px;
    position:relative;
    overflow:hidden;
  }
  #flow::before{          /* 明るさフィルター */
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.6);
    mix-blend-mode:screen;
  }
  #flow .flow_content{
    position:relative;
    max-width:880px;
    margin:0 auto;
    background:#fff;
    border-radius:80px;
    padding:80px 60px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
  }
  
  /* ---------- タイムライン変数 ---------- */
  .flowline{
    --line-x : 38px;   /* 縦線の X 座標 */
    --badge  : 90px;   /* バッジ直径 (PC)   */
    --gap    : 32px;   /* バッジとテキストの間隔 */
    position:relative;
    padding-left:calc(var(--line-x) + var(--badge)/2 + var(--gap));
  }
  @media (max-width:600px){
    .flowline{
      --badge : 60px;  /* バッジ直径 (SP) */
      --gap   : 18px;
      padding-left:calc(var(--line-x) + var(--badge)/2 + var(--gap));
    }
  }
  
  /* ---------- 縦線 ---------- */
  .flowline::before{
    content:"";
    position:absolute;
    left:var(--line-x);
    top:0;
    width:3px;
    height:100%;
    background:#ddd;
    transform-origin:top;
    transform:scaleY(0);
    transition:transform 1.2s ease-out;
  }
  @media (max-width:600px){
    .flowline::before{

        left:10px;
   
      }
  }

  .flowline.in-view::before{ transform:scaleY(1); } /* JS で .in-view 付与 */
  
  /* ---------- STEP 行 ---------- */
  .step{
  
    display:flex;
    align-items:flex-start;
    position:relative;
    margin-bottom:56px;
    opacity:0;
    transform:translateY(40px);
    transition:opacity .6s ease-out, transform .6s ease-out;
  }
  .step.in-view{ opacity:1; transform:none; }        /* JS で .in-view 付与 */
  .step:last-child{ margin-bottom:0; }
  
  /* ---------- バッジ ---------- */
  .step-icon{
    flex-shrink:0;
    margin-right:var(--gap);
    margin-left:calc(var(--line-x) - var(--badge)/2); /* 中心を線上に */
    width:var(--badge);
    height:var(--badge);
    border-radius:50%;
    background:#13564D;
    color:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
  position: absolute;
  left: -113px;
    display:flex;                 /* 縦並びで中央配置 */
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
  .step-icon i{
    font-size:calc(var(--badge) * 0.33); /* 30px or 20px 相当 */
    margin-bottom:4px;
  }
  .step-number{
    position:static !important;
    font-size:11px;
    line-height:1;
  }
  
  /* ---------- テキスト ---------- */
  .step-content{ flex:1; }
  .step-title { font-size:20px; margin-bottom:8px; }
  .step-desc  { font-size:15px; }
  


  @media (max-width:768px){

    #flow{
      background-image:url("../img/top/bokusou.png");
      background-size:cover;
      width:100%;
      padding:20px;
      position:relative;
      overflow:hidden;
    }


    #flow .flow_content{
      position:relative;
      width:100%;
      margin:0 auto;
      background:#fff;
      border-radius:20px;
      padding:30px 20px;
      box-shadow:0 10px 25px rgba(0,0,0,.15);
    }



    .flowline::before{
    
          left:30px;
    
    }

    .step-icon{
      flex-shrink:0;
      margin-right:var(--gap);
      margin-left:calc(var(--line-x) - var(--badge)/2); /* 中心を線上に */
      width:var(--badge);
      height:var(--badge);
      border-radius:50%;
      background:#13564D;
      color:#fff;
      box-shadow:0 4px 10px rgba(0,0,0,.15);
    position: absolute;
    left: -93px;
      display:flex;                 /* 縦並びで中央配置 */
      flex-direction:column;
      justify-content:center;
      align-items:center;
    }


  }



  @media (max-width:600px){
    .step-title{ font-size:18px; }
    .step-desc { font-size:14px; line-height:1.6; 
    






    }
  }

  


















  












    /* access */


#access{

    /* background:#faf7f5; */
    padding: 100px 0 150px;
}


#access .google_map{
    width: 85%;
    position:relative;
    border-radius:24px;
margin: auto;                      /* 角丸を iframe にも適用 */
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}


#access .google_map .mark{
    position: absolute;
    top:-100px;
    right: 0;
}
#access .google_map iframe{
    width: 100%;
    margin: auto;
    border-radius:24px;
}




.access_set{
    display: flex;

    width: 90%;
    margin: 50px auto;
    justify-content: space-around;
}
.access_content{
    width: 500px;
}
 .access_content dl{
    border-bottom: 1px solid #F0A722;
    padding:  10px;
    display: flex;
   
 }

 .access_content dl dt{
    width: 100px;
 }

 .ceo{
        width: 530px;
    }


    .ceo h2{
        color: #4FD9B3;
        line-height: 50px;
        font-size: 40px;
        font-family: "Playpen Sans Arabic", cursive;

    }
 .ceo h2 span{
        color: #333;
        font-size: 20px;
        /* font-family:    font-family: "Playpen Sans Arabic", cursive; ; */
    }

.ceo .text{
        margin: 30px 0;
        line-height: 30px;
    }









@media (max-width: 1280px) { 

    .access_set{
        display: block;
    
        width: 90%;
        /* margin: 50px auto;
        justify-content: space-around; */
    }



    .access_content{
        width: 700px;
        margin: auto;
    }


     .access_content dl{
        border-bottom: 1px solid #F0A722;
        padding:  10px 20px;
        display: flex;
     }
    
     .access_content dl dt{
        width: 200px;
     }
    
     .ceo{
            width: 700px;
            margin: 80px auto 0;

        }
    
    
  
    


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


#access .google_map{
    margin: auto;
    position: relative;
    text-align: center;
}


#access .google_map .mark{
    position: absolute;
    top:-100px;
    right: 0;
    /* width: 200px; */
}

#access .google_map .mark img{
    width: 300px;
}
#access .google_map iframe{
    width: 90%;
    margin: auto;
}




.access_content{
    width: 90%;
    margin: auto;
}


 .access_content dl{
    border-bottom: 1px solid #F0A722;
    padding:  10px 20px;
    display: flex;
 }

 .access_content dl dt{
    width: 150px;
 }

 .ceo{
        width: 90%;
        margin: 80px auto 0;

    }



}


@media (max-width: 768px)  { 

    
    #access .google_map{
        width: 95%;
        margin: auto;
        position: relative;
        text-align: center;
    }
    
    
 
    
    #access .google_map .mark img{
        width: 200px;
    }
    #access .google_map iframe{
        width: 100%;
        height: 250px;
        margin: auto;
    }




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

    #access .google_map .mark{
        position: absolute;
        top:-50px;
        right: 0;
        /* width: 200px; */
    }


    #access .google_map .mark img{
        width: 150px;
    }






    .access_set{
        width: 95%;
        margin: 30px auto 0;
    }



    .access_content{
        width:95%;
    }


     .access_content dl{
        padding:  10px;
        display: block;
        font-size: 13px;
     }
    
     .access_content dl dt{
        width: 100%;
        margin: 0 0 5px 0;
        font-weight: bold;
        color: #13564D;
        font-size: 16px;
     }
    
     .ceo{
            width: 95%;
            margin: 60px auto 0;

        }


        .ceo h2{
            line-height: 40px;
            font-size: 30px;

    
        }
     .ceo h2 span{
            font-size: 16px;
        }
    
    .ceo .text{
            margin: 20px 0;
            line-height: 25px;
            font-size: 13px;
        }
    
    
}
































































    footer{
        /* background:#faf7f5; */
        background-image: url("../img/top/footer.png");
        background-size: cover;
        background-position: center;
        padding: 40px 20px;
        position: relative;
        display: flex;
        height: 590px;
        /* background-color: red; */
        justify-content: space-around;
        /* background:#faf7f5; */
    }

    footer h1{
        /* background-color: red; */
        position: absolute;
        bottom: 300px;
        width: fit-content;
        text-align: center;
    }
    footer h1 a{
        align-items: center;
        display: flex;
    }

    footer h1 a .text{
font-size: 20px;
font-family: "Playpen Sans Arabic", cursive;
line-height: 30px;
/* text-align: left; */
color: #4FD9B3;
    }


    footer h1 a .text span{
        font-size: 40px;
        color: #13564D;
        font-family: "Kiwi Maru", serif;
    }
    footer .copy-light{
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
    }


  
    @media (max-width: 1920px) { }
    @media (max-width: 1440px) { 
     
     }
    @media (max-width: 1280px) {  }
    @media (max-width: 1024px) { }
    @media (max-width: 768px)  { 

    footer{
        /* background:#faf7f5; */
        background-image: url("../img/top/footer.png");
        background-size: cover;
        background-position: center;
        padding: 40px 20px;
        position: relative;
        display: flex;
        height: 300px;
        /* background-color: red; */
        justify-content: space-around;
        /* background:#faf7f5; */
    }

    footer h1{
        /* background-color: red; */
        position: absolute;
        bottom: 130px;
        width: fit-content;
        text-align: center;
    }
    footer h1 a{
        align-items: center;
        display: flex;
    }

    footer h1 a .text{
font-size: 20px;
font-family: "Playpen Sans Arabic", cursive;
line-height: 30px;
/* text-align: left; */
color: #4FD9B3;
    }


    footer h1 a .text span{
        font-size: 33px;
        color: #13564D;
        font-family: "Kiwi Maru", serif;
    }
    footer .copy-light{
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
    }




     }
    @media (max-width: 600px)  { }
    @media (max-width: 420px)  {  }