@charset "UTF-8";

/* ===============================
   0) Reset / Base / Helpers
   =============================== */

/* ===============================
   1) PC（デフォルト）
   =============================== */


/* ===== simple header ===== */

.header{
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 90px;
  background-color:#166356 !important; 
  display:flex; 
  flex-direction:column; 
  align-items:center;
  z-index:10000;
}
.header_inner{
  width: 90%; 
  height: 100%;
  display: flex; 
  justify-content: flex-start; 
  align-items: center;
}
.header_logo{ 
  display:inline-flex; 
  align-items:center; 
}
.header_logo img{ 
  height:55px; 
  width:auto; 
  display:block; 
}
.header_navgroup{
  margin-left:auto; 
  display:flex; 
  gap:60px;
}


/* Nav: hover色 & active下線（最小改変） */
.header__navitem{
    font-size: 16px;
  color: #fff;
  cursor: pointer;
  border-bottom: 2px solid transparent;  
  transition: color .2s ease, border-color .2s ease;
}
.header_navitem{
  display:inline-block; 
  padding-bottom:2px;
  font-size:16px; 
  color:#fff; 
  text-decoration:none; 
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.header_navitem:hover{ color:#A8BF89; }
.header_navitem.is-active{
  color:#A8BF89; 
  border-bottom-color: currentColor;
}

/* ーーーーーーーーーなみなみーーーーーーーーー */

/* 変数（必要なら調整） */
:root{
  --header-h: 90px;   /* 実際のheader高さに揃える */
  --wave-overlap: 20px;    /* ここを好みで 16〜40px くらい */
  --wave-h:   80px;   /* 波の高さ */
  --wave-w:  240px;   /* 1山の横幅（数を増やす→小さく） */
}

/* 既存の header はそのまま（position:fixed） */
.header{ position: fixed; top:0; left:0; width:100%; height: var(--header-h); background:#fff; z-index:10000; }

/* ここが新しい“波”本体 */
.header::after{
  content:"";
  position: absolute;
  left:0; right:0; 
  bottom: calc(-0.6 * var(--wave-h)); 
  height: var(--wave-h);
  /* 波の色は“ヘッダーの色”を見せる。= 白でOK */
  background-color:#166356;

  /* SVGを横方向に繰り返すマスク（WebKit併記） */
  -webkit-mask: url("../img/wave.svg") center bottom / var(--wave-w) 100% repeat-x;
          mask: url("../img/wave.svg") center bottom / var(--wave-w) 100% repeat-x;

  transform: scaleY(-1);
  transform-origin: center;
    pointer-events: none;
  z-index: 10001;               /* ヘッダーより前面（必要なら） */
}

/* ーーーーーーーーーなみなみーーーーーーーーー */
















/* ===============================
   Works セクション
   =============================== */

.works{
  width: 100%;
  background-color: #fff;
}
.works-head{
  width: 100%;
  padding-top: 170px;
  text-align: center;
}
.works-eyebrow{
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
letter-spacing: 2px;
text-align:center; 
color: #166356;
}
.works-title{
  font-family: gelica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  letter-spacing:.3em; 
    text-align:center; 
  color:#166356 ;
}










/* ===== 並び替えボタン ===== */
.sort-btn{
  display:flex; justify-content:center; flex-wrap:wrap; gap:12px;
  padding: 28px 16px;
}
.sort-btn li{
  list-style:none; cursor:pointer; padding:10px 16px; border-radius:999px;
  background:#eee; transition:.2s;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-size:16px; letter-spacing:2px;
}
.sort-btn li.active, .sort-btn li:hover{ background:#ccc; }

/* ===== グリッド（中央寄せ & レスポンシブ） ===== */
.grid{
  /* コンテナ自体を中央に */
  width: min(1100px, 92vw);
  margin: 0 auto;

  /* 横並びはCSS Gridに任せる。列数は自動調整 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;

  /* アイテムを各セル内で中央寄せに見せる */
  justify-items: center;
  align-items: start;
}

.card{ list-style:none; width:100%; max-width: 360px; }
.card img{ width:100%; height:auto; display:block; border-radius:12px; }

/* フィルタで非表示にするクラス */
.is-hidden{ display:none !important; }



















/* ===== Contact CTA（配置用）===== */
.contact-cta{
  width: 100%;
  text-align: center;
  margin-top: 100px;
  margin-bottom: 150px;
  z-index: 5;          /* 背景より前 */
}
.cwin-open{
  background: transparent;
  color: #166356;
  border: 1.5px solid #166356;
  padding: 12px 22px;
  border-radius: 999px;

    font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;


  letter-spacing: .05em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .08s ease;
  backdrop-filter: blur(2px);
}
.cwin-open:hover{ 
background: rgba(22, 99, 86, 0.7);
  color: #fff;
}
.cwin-open:active{ transform: scale(.98); }

/* ===== Contact Window（モーダル。名前空間 cwin-）===== */
/* オーバーレイ */
.cwin{
  display: none;
  position: fixed;
  inset: 0;
  padding: 16px;                 /* 余白はお好みで */
  background: rgba(0,0,0,.35);
  z-index: 20000;
}

/* 中央に固定配置するフォーム本体 */
.cwin-form{
  width: min(560px, 92vw);
  background: #fff;
  color: #333;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 28px 24px 24px;

  /* ここがポイント（positionは absolute だけにする） */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  margin: 0;                          /* 中央配置に合わせてリセット */
  max-height: calc(100dvh - 64px);    /* 画面より大きい時に備える */
  overflow: auto;                     /* 中でスクロール */
}
.cwin-title{
  margin: 0 0 12px;
  text-align: center;
  letter-spacing: .2em;
  font-weight: 800;
}
.cwin-row{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cwin-input{
  flex: 1 1 240px;
  min-width: 0;
  border: 0;
  border-bottom: 2px solid #166356;
  padding: 10px;
}
.cwin-textarea{
  width: 100%;
  min-height: 120px;
  border: 0;
  border-bottom: 2px solid #166356;
  padding: 10px;
}
.cwin-submit{
  display: inline-block;
  margin: 16px auto 4px;
  padding: 12px 24px;
  border: 2px solid #166356;
  background: none;
  color: #166356;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.cwin-submit:hover{ background:#166356; color:#fff; }

.cwin-close{
  position:absolute;
  top: 6px; right: 10px;
  font-size: 28px;
  line-height: 1;
  background: none; border: 0;
  color: #166356;
  cursor: pointer;
}






/* ===== Footer ===== */
:root{
  --footer-h: 90px;   /* フッター高さ */
  --wave-h:   80px;   /* 波の高さ */
  --wave-w:  240px;   /* 1山の横幅 */
}

/* 本体 */
.site-footer{
  position: relative;
  height: var(--footer-h);
  background-color:#166356 !important; 
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;               /* 基準の層 */
}

/* 波（上向き） */
.site-footer::before{
  content: "";
  position: absolute;
  top: calc(-0.6 * var(--wave-h));   /* ← かぶせ量。pxでもOK */
  left: 0;
  right: 0;
  height: var(--wave-h);
  background: #166356;                  /* 波の色 = フッター地色 */

  /* 横にリピートするマスク（WebKit併記） */
  -webkit-mask: url("../img/wave.svg") center top / var(--wave-w) 100% repeat-x;
          mask: url("../img/wave.svg") center top / var(--wave-w) 100% repeat-x;

  pointer-events: none;
  z-index: 0;                         /* テキストより背面 */
}

/* 表示テキスト */
.copyright{
  margin: 0;
  position: relative;
  z-index: 1;                         /* 波より前面に */
  font-family: fot-tsukuardgothic-std, sans-serif;
  color: #fff;
}





























































/* === Mobile: header wave seam killer === */
@media (max-width: 768px){
  .header{ background:#fff; transform: translateZ(0); } /* 描画にじみ抑制 */
  .header::after{
    bottom: calc(-5px - 0.6 * var(--wave-h)) !important;
    height: calc(var(--wave-h) + 6px) !important;
    backface-visibility: hidden; will-change: transform;
  }
  .header::before{
    content:""; position:absolute; left:0; right:0; bottom:-1px;
    height:1px; background:#fff; z-index:10002;
  }
}

/* === Hamburger（共通） === */
.nav_toggle{
  margin-left:auto; display:none; position:relative;
  width:42px; height:42px; border:0; background:transparent; cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav_toggle span,
.nav_toggle::before,
.nav_toggle::after{
  content:""; position:absolute; left:9px; right:9px; height:2px;
  background:#fff; transition:transform .25s ease, opacity .25s ease, top .25s ease;
}
.nav_toggle span{ top:20px; }
.nav_toggle::before{ top:12px; }
.nav_toggle::after{ top:28px; }

@media (max-width:768px){
  .nav_toggle{ display:block; z-index:10003; }
  .header_navgroup{
    position: fixed; top: var(--header-h, 90px); left:12px; right:12px;
    display:flex; flex-direction:column; gap:14px;
    padding:16px 16px 18px; background:#166356; border-radius:16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    transform-origin: top center; transform: translateY(-8px) scaleY(.96);
    opacity:0; visibility:hidden; pointer-events:none;
    transition: transform .36s cubic-bezier(.22,1,.36,1), opacity .24s ease, visibility 0s linear .36s;
    z-index:10002;
  }
  .header.is-open .header_navgroup{
    transform:none; opacity:1; visibility:visible; pointer-events:auto;
    transition: transform .44s cubic-bezier(.22,1,.36,1), opacity .28s ease, visibility 0s;
  }
  .header.is-open .nav_toggle::before{ top:20px; transform: rotate(45deg); }
  .header.is-open .nav_toggle span{ opacity:0; }
  .header.is-open .nav_toggle::after{ top:20px; transform: rotate(-45deg); }

  /* 背景の半透明オーバーレイ（見た目だけ） */
  .header::before{
    content:""; position:fixed; left:0; right:0; top: var(--header-h, 90px); bottom:0;
    background: rgba(0,0,0,.18); backdrop-filter: blur(2px);
    opacity:0; pointer-events:none; transition: opacity .24s ease; z-index:10001;
  }
  .header.is-open::before{ opacity:1; pointer-events:auto; }
}





















/* ===== Tablet ≤960px ===== */
@media (max-width: 960px){
  .works-head{ padding-top: 140px; }
  .grid{ width:min(1000px, 92vw); grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:20px; }
  .sort-btn{ padding:20px 12px; gap:10px; }
}

/* ===== Phone ≤768px ===== */
@media (max-width: 768px){
  .works-head{ padding-top: 120px; }
  .works-title{ font-size:26px; }
  .grid{ width:90vw; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:14px; }
  .card{ max-width: 320px; }
  .sort-btn li{ padding:8px 14px; font-size:14px; }
}


/* === SP: ハンバーガーのパネルを半分くらい・右端寄せに === */
@media (max-width: 768px){
  .header_navgroup{
    /* フル幅→右端に寄せた半分幅へ */
    left: auto;
    right: max(12px, env(safe-area-inset-right)); /* iPhoneのノッチも考慮 */
    width: clamp(240px, 50vw, 360px);             /* 最小240px〜最大360pxで“だいたい半分” */
    margin-left: auto;
    border-radius: 16px;
    transform-origin: top right;                  /* 開閉の基点を右上に */
    padding: 14px 16px;
  }

  /* リンクの見た目をコンパクトに（長い文でも折りやすく） */
  .header_navgroup a{
    display:block;
    padding: 10px 6px;
    text-align: left;
    white-space: normal;
    word-break: break-word;
  }
}