@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ======================================
   会社CSS
   ====================================== */

:root{
      --brand:#1769ff;            /* ベース青 */
      --brand-2:#0a3ba6;          /* 濃い青 */
      --ink:#0b1220;              /* 見出し色 */
      --muted:#5c6c80;            /* 補助文字 */
      --bd:#e6edf4;               /* 枠線 */
      --card:#ffffff;             /* カード背景 */
      --hero-grad:linear-gradient(180deg, rgba(10,59,166,.85), rgba(23,105,255,.65));
      --shadow:0 10px 30px rgba(3, 21, 60, .15);
      --nav-h:56px;               /* ナビ高（JSで実寸反映） */
}
    
body {
color:#1d2939;
}

/* =======================================
   11.html風フォント設定（Cocoon対応）
   ======================================= */

/* 本文全体（Noto Sans JPベース） */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
               "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.8;
  color: #1d2939;
  letter-spacing: 0.02em;
}

/* 見出し（h1〜h3）はやや太く、間隔をコンパクトに */
h1, h2, h3 {
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  color: #0b1220;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin-top: 1.5em;
  margin-bottom: 0.6em;
}

/* h4以下は少し軽め */
h4, h5, h6 {
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-weight: 600;
  color: #0b1220;
  line-height: 1.4;
}

/* 小さめ文字（補足・キャプションなど） */
small, .small-text {
  font-size: 0.9rem;
  color: #5c6c80;
}

/* リンク色（11.htmlトーンに合わせて青ベース） */
a {
  color: #1769ff;
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: #0f55d9;
}



    /* NAV */
    .navbar{
      box-shadow:0 1px 0 var(--bd);
      position:relative;
      z-index:1060; /* オーバーレイ(#nav)より上に */
      background:#fff;
    }
    .navbar-brand b{color:var(--brand)}
    /* トグルアイコンの視認性を少し上げる（任意） */
    .navbar-toggler-icon{filter:contrast(120%) saturate(120%);}
	
	/* 1) トグルボタンの「×」を黒＋半透明で表示（開いている間） */
.navbar-toggler {
  position: relative;
  z-index: 1061; /* オーバーレイより手前で常に押せる */
}

/* 開いている時はハンバーガーアイコン→黒い「×」へ切替 */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
  /* 黒インク色（#0b1220）で描画、半透明（不透明度は下で調整） */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
  <path d='M2 2 L14 14 M14 2 L2 14' stroke='%230b1220' stroke-width='2.2' stroke-linecap='round'/>\
</svg>");
  opacity: .9;                 /* ← 半透明（見づらければ .95 へ） */
  transition: opacity .2s ease;
}
.navbar-toggler[aria-expanded="true"]:hover .navbar-toggler-icon{
  opacity: 1;
}

/* 2) オーバーレイ背景を半透明に（モバイル時） */
@media (max-width: 991.98px){
  #nav{
    /* 既存の background を少し透明に＆ブラーを少し強めに */
    background: linear-gradient(
      180deg,
      rgba(10,59,166,.85),   /* ← 0.96 → 0.85 に下げて透明度UP */
      rgba(23,105,255,.80)   /* ← 0.92 → 0.80 に下げて透明度UP */
    );
    backdrop-filter: saturate(150%) blur(6px); /* 4px → 6px に */
  }
}
	
/* HERO */
.hero{position:relative;min-height:60vh;display:flex;align-items:center;overflow:hidden;background:var(--brand-2);color:#fff;}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;filter:brightness(.8);}
.hero::after{content:"";position:absolute;inset:0;background:rgba(10,59,166,.65);z-index:1;}
.hero .container{position:relative;z-index:2;}
.hero h1{font-size:clamp(26px,4vw,42px);font-weight:800;line-height:1.2;}
.hero p{color:#e6edff;max-width:50ch;}
.hero img{max-width:80%;height:auto;border-radius:12px;box-shadow:var(--shadow);}

@media(max-width:768px){
.hero {
flex-direction:column;
min-height:auto;
text-align:center;
padding:40px 0;
    }
	
.hero img {
max-width:60%;
padding-bottom: 20px;
	}
	
}

    /* SECTION 共通 */
    section{padding:72px 0}
    .section-hd{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:24px}
    .section-hd h2{font-size:clamp(22px,3.2vw,34px); color:var(--ink); margin:0}
    .section-hd p{color:var(--muted); margin:0}

    /* WORKS */
    .work-card{border:1px solid var(--bd); border-radius:14px; overflow:hidden; background:var(--card); box-shadow:var(--shadow)}
    .work-card .img{aspect-ratio:16/9; background:#f5f7fb; overflow:hidden}
    .work-card .img img{width:100%; height:100%; object-fit:cover}

    /* NEWS */
    .news-list{border-top:1px solid var(--bd)}
    .news-item{display:grid; grid-template-columns:140px 1fr 120px; gap:16px; padding:18px 0; border-bottom:1px solid var(--bd)}
    .news-item time{color:#4a5b77}
    .news-item .badge{height:fit-content}
    @media (max-width: 768px){
      .news-item{grid-template-columns:1fr; gap:8px}
    }

    /* RECRUIT */
    .job{border:1px solid var(--bd); border-radius:14px; padding:20px; background:#fff; box-shadow:var(--shadow)}

    /* CONTACT */
    .contact-panel{border:1px solid var(--bd); border-radius:16px; padding:24px; background:#fff; box-shadow:var(--shadow)}

    /* 補助 */
    .btn-brand{background:var(--brand); border-color:var(--brand)}
    .btn-brand:hover{background:#0f55d9; border-color:#0f55d9}
    .link-brand{color:var(--brand)}
    footer{border-top:1px solid var(--bd); color:#6b7a90}
	
	
	
	  /* =========================
     CTA strip
     ========================= */
  .cta{
    background: linear-gradient(90deg, var(--brand-2), var(--brand-2));
    color:#fff; border-radius:24px; padding:38px 28px;
  }


    /* ===== モバイル：フルスクリーンオーバーレイ + 背景固定 ===== */
    @media (max-width: 991.98px){
      /* collapse対象 (#nav) を上部固定の全画面に */
      #nav{
        position:fixed !important;
        top:0; left:0; right:0;
        height:100dvh;                 /* 全高（モバイルでのURLバーに強い） */
        background:linear-gradient(180deg, rgba(10,59,166,.96), rgba(23,105,255,.92));
        padding:calc(var(--nav-h) + 16px) 24px 32px; /* 見た目はナビ直下から */
        display:grid !important;
        grid-template-rows:auto 1fr auto;
        row-gap:16px;
        overflow:auto;                 /* メニュー内はスクロール可 */
        visibility:hidden; opacity:0;
        transition:opacity .25s ease, visibility .25s ease;
        z-index:1050;                  /* .navbar(1060) より下：トグルが押せる */
        backdrop-filter:saturate(150%) blur(4px);
      }
      #nav.show{
        visibility:visible;
        opacity:1;
      }

      /* リンクの見た目をオーバーレイ向けに */
      #nav .nav-link{
        color:#fff !important;
        font-weight:700;
        font-size:clamp(18px, 4.6vw, 22px);
      }
      #nav .nav-link:hover{opacity:.9;}
      /* 背景固定：開いている間だけbodyをロック */
      body.menu-open{overflow:hidden;}
    }
	
/* ===== トグル(×)を常に上部固定で表示 ===== */
.navbar-toggler {
  position: fixed;          /* ← 常に画面上部に固定 */
  right: 16px;              /* 右上に配置 */
  z-index: 2000;            /* すべての要素より上 */
  background: rgba(255,255,255,0.4); /* 背景を半透明で浮かせる */
  backdrop-filter: blur(6px); /* 少しぼかし */
  border-radius: 8px;
  padding: 1%;
  transition: background .3s ease;
}
.navbar-toggler:hover {
  background: rgba(255,255,255,0.6);
}

/* 閉じる状態（×）の見た目を黒で統一 */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("http://hachihachis.com/wp-content/uploads/2025/10/batu.png");
  opacity: 0.9;
}

/* ===== オーバーレイ背景（ナビ全画面時） ===== */
@media (max-width: 991.98px){
  #nav {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: 100dvh;
    background: linear-gradient(
      180deg,
      rgba(10,59,166,.85),
      rgba(23,105,255,.80)
    );
    backdrop-filter: saturate(150%) blur(6px);
    padding: calc(var(--nav-h) + 24px) 24px 32px;
    display: grid !important;
    grid-template-rows: auto 1fr auto;
    overflow: auto;
    visibility: hidden; opacity: 0;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 1000;
  }
  #nav.show {
    visibility: visible;
    opacity: 1;
  }
  #nav .nav-link {
    color: #fff !important;
    font-weight: 700;
    font-size: clamp(18px, 4.6vw, 22px);
  }
  body.menu-open { overflow: hidden; }
}

/* ==========================
   11.html 完全再現 最終版
   page-id-12 / 145 / 158 / 244 / 246 / 287 共通
   ========================== */

/* 1. Cocoon構造を完全リセット */
.page-id-12 #content, .page-id-12 .main, .page-id-12 .wrap, .page-id-12 .content, .page-id-12 .entry, .page-id-12 .container,
.page-id-145 #content, .page-id-145 .main, .page-id-145 .wrap, .page-id-145 .content, .page-id-145 .entry, .page-id-145 .container,
.page-id-158 #content, .page-id-158 .main, .page-id-158 .wrap, .page-id-158 .content, .page-id-158 .entry, .page-id-158 .container,
.page-id-244 #content, .page-id-244 .main, .page-id-244 .wrap, .page-id-244 .content, .page-id-244 .entry, .page-id-244 .container,
.page-id-246 #content, .page-id-246 .main, .page-id-246 .wrap, .page-id-246 .content, .page-id-246 .entry, .page-id-246 .container,
.page-id-287 #content, .page-id-287 .main, .page-id-287 .wrap, .page-id-287 .content, .page-id-287 .entry, .page-id-287 .container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 2. WordPress全体の余白をゼロに */
.page-id-12 body, .page-id-12 .entry-content,
.page-id-145 body, .page-id-145 .entry-content,
.page-id-158 body, .page-id-158 .entry-content,
.page-id-244 body, .page-id-244 .entry-content,
.page-id-246 body, .page-id-246 .entry-content,
.page-id-287 body, .page-id-287 .entry-content {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: #fff !important;
}

/* 3. heroセクションの左右ズレを完全に除去 */
.page-id-12 .hero, .page-id-145 .hero, .page-id-158 .hero, .page-id-244 .hero, .page-id-246 .hero, .page-id-287 .hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  overflow: hidden;
  background: transparent !important;
  border: none;
  padding: 0 !important;
}

/* hero 背景再現 */
.page-id-12 .hero::before, .page-id-145 .hero::before, .page-id-158 .hero::before, .page-id-244 .hero::before, .page-id-246 .hero::before, .page-id-287 .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('http://hachihachis.com/wp-content/uploads/2025/11/hh_top.png') center/cover no-repeat;
  filter: brightness(0.8);
  z-index: 0;
}
.page-id-12 .hero > *, .page-id-145 .hero > *, .page-id-158 .hero > *, .page-id-244 .hero > *, .page-id-246 .hero > *, .page-id-287 .hero > * {
  position: relative;
  z-index: 1;
}

/* 4. navライン削除＆高さ調整 */
.page-id-12 .navbar, .page-id-145 .navbar, .page-id-158 .navbar, .page-id-244 .navbar, .page-id-246 .navbar, .page-id-287 .navbar {
  box-shadow: none !important;
  border-bottom: none !important;
  height: 56px;
  background: #fff !important; /* ← 白固定 */
}
.page-id-12 .navbar-brand, .page-id-145 .navbar-brand, .page-id-158 .navbar-brand, .page-id-244 .navbar-brand, .page-id-246 .navbar-brand, .page-id-287 .navbar-brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: #0b1220 !important;
}

/* 5. footer削除 */
.page-id-12 #footer, .page-id-12 .footer, .page-id-12 .footer-bottom, .page-id-12 #footer-in,
.page-id-145 #footer, .page-id-145 .footer, .page-id-145 .footer-bottom, .page-id-145 #footer-in,
.page-id-158 #footer, .page-id-158 .footer, .page-id-158 .footer-bottom, .page-id-158 #footer-in,
.page-id-244 #footer, .page-id-244 .footer, .page-id-244 .footer-bottom, .page-id-244 #footer-in,
.page-id-246 #footer, .page-id-246 .footer, .page-id-246 .footer-bottom, .page-id-246 #footer-in,
.page-id-287 #footer, .page-id-287 .footer, .page-id-287 .footer-bottom, .page-id-287 #footer-in {
  display: none !important;
}

/* 6. Bootstrapブロック全幅対応 */
.page-id-12 .wp-block-html, .page-id-145 .wp-block-html, .page-id-158 .wp-block-html, .page-id-244 .wp-block-html, .page-id-246 .wp-block-html, .page-id-287 .wp-block-html {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  background: none !important;
}

/* 7. sectionやctaの背景統一 */
.page-id-12 section, .page-id-145 section, .page-id-158 section, .page-id-244 section, .page-id-246 section, .page-id-287 section {
  background: #fff !important;
  padding-block: 72px !important;
}

/* 8. CTA帯 */
.page-id-12 .cta, .page-id-145 .cta, .page-id-158 .cta, .page-id-244 .cta, .page-id-246 .cta, .page-id-287 .cta {
  background: linear-gradient(90deg, #0a3ba6, #1769ff);
  color: #fff;
  border-radius: 20px;
  padding: 38px 28px;
  box-shadow: 0 10px 30px rgba(10,59,166,.25);
}

/* 9. 文字色統一 */
.page-id-12 h1, .page-id-12 h2, .page-id-12 h3,
.page-id-145 h1, .page-id-145 h2, .page-id-145 h3,
.page-id-158 h1, .page-id-158 h2, .page-id-158 h3,
.page-id-244 h1, .page-id-244 h2, .page-id-244 h3,
.page-id-246 h1, .page-id-246 h2, .page-id-246 h3,
.page-id-287 h1, .page-id-287 h2, .page-id-287 h3 {
  color: #0b1220;
  font-weight: 700;
}
.page-id-12 p, .page-id-145 p, .page-id-158 p, .page-id-244 p, .page-id-246 p, .page-id-287 p {
  color: #5c6c80;
  line-height: 1.7;
}

/* ==========================
   WORKS以下の横幅を1296pxに固定
   ========================== */
.page-id-12 section, .page-id-145 section, .page-id-158 section, .page-id-244 section, .page-id-246 section, .page-id-287 section {
  max-width: 1296px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  margin-top: -100px;
}

/* heroは全幅 */
.page-id-12 .hero, .page-id-145 .hero, .page-id-158 .hero, .page-id-244 .hero, .page-id-246 .hero, .page-id-287 .hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

/* モバイル時は全幅 */
@media (max-width: 768px) {
  .page-id-12 section, .page-id-145 section, .page-id-158 section, .page-id-244 section, .page-id-246 section, .page-id-287 section {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ===========================================
   ナビ・HERO内部を1320pxに固定
   =========================================== */
.page-id-12 .navbar > .container, .page-id-12 .navbar > .container-fluid,
.page-id-145 .navbar > .container, .page-id-145 .navbar > .container-fluid,
.page-id-158 .navbar > .container, .page-id-158 .navbar > .container-fluid,
.page-id-244 .navbar > .container, .page-id-244 .navbar > .container-fluid,
.page-id-246 .navbar > .container, .page-id-246 .navbar > .container-fluid,
.page-id-287 .navbar > .container, .page-id-287 .navbar > .container-fluid {
  max-width: 1320px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* HERO内容1320px中央寄せ */
.page-id-12 .hero .container, .page-id-145 .hero .container, .page-id-158 .hero .container, .page-id-244 .hero .container, .page-id-246 .hero .container, .page-id-287 .hero .container {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* =======================================
   控えめで上品なカード影
   ======================================= */
.page-id-12 .card, .page-id-12 .work-card, .page-id-12 .news-item, .page-id-12 .job, .page-id-12 .contact-panel,
.page-id-145 .card, .page-id-145 .work-card, .page-id-145 .news-item, .page-id-145 .job, .page-id-145 .contact-panel,
.page-id-158 .card, .page-id-158 .work-card, .page-id-158 .news-item, .page-id-158 .job, .page-id-158 .contact-panel,
.page-id-244 .card, .page-id-244 .work-card, .page-id-244 .news-item, .page-id-244 .job, .page-id-244 .contact-panel,
.page-id-246 .card, .page-id-246 .work-card, .page-id-246 .news-item, .page-id-246 .job, .page-id-246 .contact-panel,
.page-id-287 .card, .page-id-287 .work-card, .page-id-287 .news-item, .page-id-287 .job, .page-id-287 .contact-panel {
  background: #fff;
  border: 1px solid #e6edf4;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(3, 21, 60, .08);
  transition: none;
}
.page-id-12 .card:hover, .page-id-145 .card:hover, .page-id-158 .card:hover, .page-id-244 .card:hover, .page-id-246 .card:hover, .page-id-287 .card:hover {
  box-shadow: 0 4px 16px rgba(3, 21, 60, .08);
  transform: none;
}

/* ==========================================================
   page-id-246 ヘッダー白固定
   ========================================================== */
.page-id-246 header,
.page-id-246 .header-container,
.page-id-246 #navi,
.page-id-246 .navbar,
.page-id-246 .navi-in {
  background: #fff !important;
  backdrop-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  border: none !important;
  position: relative !important;
  z-index: 2000 !important;
}
.page-id-246 .navbar-brand,
.page-id-246 .site-title,
.page-id-246 #navi a,
.page-id-246 .navbar a,
.page-id-246 .navi-in a {
  color: #0b1220 !important;
  text-shadow: none !important;
  background: none !important;
}



/* ===========================================
   Cocoon モバイル固定フッターメニューを非表示
   =========================================== */

/* 全ページで消す場合 */
#footer-mobile-buttons,
.mobile-menu-buttons,
.mobile-menu,
#mobile-menu,
#navi-footer,
.footer-mobile-menu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 画面下の余白を補正（無駄な隙間をゼロに） */
body {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


@media (max-width: 768px) {
.hero {
    min-height: 60vh !mportant;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
.hero::before {
    background-position: center top 20% !important;
  }	
h1, h2, h3 {
    margin-top: 30px !important;
}

}