/*
Theme Name: cocolozashi-theme
Theme URI: https://cocolozashi.jp
Author: COCOLOZASHI
Description: COCOLOZASHI 公式サイト用オリジナルテーマ
Version: 1.0
Text Domain: cocolozashi-theme
*/

body{
  margin:0;
  font-family:Arial, sans-serif;
  background:#fff;
  color:#071523;
  line-height:1.6;
}

/* =========================
   Header 共通
   ========================= */
/* =========================
   Header 共通
   ========================= */
.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  padding:4px 32px;
  background:#071523;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:1000;
  height:48px;
}

/* ===== PC専用ヘッダー指定 ===== */
@media (min-width: 769px){
  .header img{
    height:210px;
  }

  .header nav{
    position:absolute;
    right:120px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    gap:22px;
    align-items:center;
  }
}

.spacer{
  height:48px;
}
/* =========================
   Hero 共通
   ========================= */
.hero{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  text-align:center;
  color:#fff;
}
.hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(0.62);
}
.hero .content{
  position:relative;
  z-index:2;
}
.hero h1{
  font-size:64px;
  margin:0;
  font-family:"Hiragino Mincho ProN",serif;
}
.hero p{
  margin-top:20px;
  font-size:20px;
  opacity:0.92;
}

/* トップページ用 Hero（92vh） */
.hero--top{
  height:92vh;
}

/* 会社概要・サービス用 Hero（55vh） */
.hero--mid{
  height:55vh;
}

/* お問合せ Hero（トップと同じ高さ + 下寄せ） */
.hero--contact{
  height:92vh;
}
.hero--contact img{
  object-position:center 35%;
}

/* サンクスページ Hero */
.hero--thanks{
  height:60vh;
  background:#071523;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
}
.hero--thanks h1{
  font-size:48px;
  margin:0;
  font-family:"Hiragino Mincho ProN", serif;
  letter-spacing:2px;
}
.hero--thanks p{
  margin-top:20px;
  font-size:18px;
  opacity:0.9;
  max-width:600px;
  line-height:1.8;
  white-space:pre-line;
}

/* =========================
   共通セクション
   ========================= */
section{
  padding:120px 20px;
}
.section-title{
  text-align:center;
  font-size:36px;
  font-weight:300;
  margin-bottom:14px;
}
.section-sub{
  text-align:center;
  font-size:16px;
  color:#555;
  margin-bottom:64px;
}

/* =========================
   TOP: Our Strengths / Selling Guide / Video Production
   ========================= */
.grid-3{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}
.card{
  border-radius:16px;
  position:relative;
  height:240px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  background-size:cover;
  background-position:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.1);
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  background:rgba(0,0,0,0.36);
}
.card > *{
  position:relative;
  z-index:2;
}
.card p{
  margin:0;
}

/* Selling Guide 背景色 */
.bg-light{
  background:#f8f8f8;
}

/* Video Production のカード高さ（画像に合わせて少し低め） */
.card--video{
  height:200px;
}

/* =========================
   Featured Videos
   ========================= */
.featured-wrap{
  background-image:url('assets/img/2042026_m.jpg');
  background-size:cover;
  background-position:center;
  padding:80px 20px;
}
.featured-overlay{
  background:rgba(255,255,255,0.92);
  padding:40px;
  border-radius:12px;
}
.video-frame{
  width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,0.15);
}

/* =========================
   More（実家じまい）
   ========================= */
.jikka-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}
.jikka-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  height:360px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.1);
}

/* 実家じまい背景画像 */
.jikka-card.jikka-1::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('assets/img/22042026_m.jpg');
  background-size:cover;
  background-position:center;
  opacity:0.55;
}

/* 白ぼかしベース（やや上寄せ） */
.jikka-blur{
  position:absolute;
  top:20%;
  width:80%;
  height:110px;
  background:rgba(255,255,255,0.45);
  filter:blur(16px);
  border-radius:16px;
  z-index:1;
}

/* ロゴ＆テキストは前面 */
.jikka-card > *{
  position:relative;
  z-index:2;
  color:#fff;
}
.jikka-card img{
  max-width:240px;
  margin-bottom:14px;
}

/* Coming Soon カード */
.jikka-card.comingsoon{
  background:#e0e0e0;
  color:#555;
}
.jikka-card.comingsoon::before{
  display:none!important;
}

/* =========================
   Services / Company 用
   ========================= */
.page-main{
  max-width:1100px;
  margin:0 auto;
  padding:120px 20px;
  position:relative;
}
.section-lead{
  font-size:20px;
  color:#333;
  margin-bottom:40px;
  line-height:1.8;
  white-space:pre-line;
}
.bg-block{
  background:#f4f6f7;
  border-radius:12px;
  padding:60px 40px;
  position:relative;
  margin-bottom:80px;
}
.right-image{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:42%;
  opacity:0.28;
  object-fit:contain;
}
.flow-list{
  list-style:none;
  padding:0;
  margin-top:20px;
}
.flow-list li{
  margin-bottom:10px;
  font-size:16px;
}

/* Company 用テキスト */
.block-text{
  font-size:16px;
  line-height:1.9;
  color:#333;
  white-space:pre-line;
  margin-bottom:40px;
}

/* 会社概要テーブル風ボックス */
.company-box{
  max-width:700px;
  margin:0 auto;
  padding:32px 24px;
  position:relative;
  border-top:2px solid #ccc;
  border-bottom:2px solid #ccc;
}
.company-box-row{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:16px;
  line-height:1.9;
  color:#333;
}
.company-box-row strong{
  min-width:72px;
}
.company-box-divider{
  border-left:1px solid #bbb;
  height:20px;
  margin:0 8px;
}

/* =========================
   Contact ページ
   ========================= */
.form-wrap{
  padding:120px 20px;
  max-width:800px;
  margin:0 auto;
}
.form-wrap .section-title{
  font-size:32px;
}
.form-wrap .section-sub{
  font-size:16px;
  margin-bottom:40px;
}
form label{
  font-weight:600;
  color:#071523;
  display:block;
  margin-bottom:8px;
  margin-top:22px;
}
form input,
form select,
form textarea{
  width:100%;
  padding:14px;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:15px;
  box-sizing:border-box;
}
form textarea{
  height:140px;
  resize:vertical;
}
.form-check{
  display:flex;
  align-items:center;
  margin-top:20px;
}
.form-check input{
  width:auto;
  margin-right:10px;
}
button,
input[type="submit"]{
  margin-top:32px;
  width:100%;
  background:#071523;
  color:#fff;
  padding:16px;
  border:none;
  border-radius:8px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}
button:hover,
input[type="submit"]:hover{
  opacity:0.85;
}

/* =========================
   Thanks ページ
   ========================= */
.main-thanks{
  max-width:800px;
  margin:80px auto;
  padding:0 20px;
  text-align:center;
}
.main-thanks p{
  font-size:16px;
  color:#333;
  line-height:1.9;
}
.main-thanks a{
  display:inline-block;
  margin-top:26px;
  background:#071523;
  color:#fff;
  padding:14px 34px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
}
.main-thanks a:hover{
  opacity:0.85;
}

/* =========================
   Footer
   ========================= */
footer{
  background:#071523;
  color:#fff;
  text-align:center;
  padding:40px 24px;
  font-size:13px;
  line-height:1.9;
}
footer .footer-inner{
  max-width:1100px;
  margin:0 auto;
}

/* =========================
   レスポンシブ（簡易）
   ========================= */
@media (max-width: 900px){
  .header nav{
    right:16px;
    gap:12px;
  }
  .hero h1{
    font-size:40px;
  }
  .hero p{
    font-size:16px;
  }
  .grid-3{
    grid-template-columns:1fr;
  }
  .jikka-grid{
    grid-template-columns:1fr;
  }
  .bg-block{
    padding:40px 20px;
  }
  .right-image{
    display:none;
  }
}

/* =========================
   WP ログイン時の管理バー回避
   ========================= */
body.admin-bar .header{
  top:32px;        /* 管理バーの高さぶん下げる */
}
body.admin-bar .spacer{
  height:80px;     /* ヘッダーぶん余白を少し増やす */
}

/* ============================
   ヘッダー直下の白い余白 完全除去
============================ */

.spacer{
  height: 0 !important;
}

body.admin-bar .spacer{
  height: 80px !important;
}

.hero{
  margin-top: 0 !important;
  padding-top: 0 !important;
  top: 0 !important;
}

body{
  margin-top: 0 !important;
}

/* ============================
   ヘッダー直下の白い余白 最終完全対策
============================ */

/* WordPress が自動生成する余白を完全無効化 */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}

/* hero そのものを完全密着 */
.hero{
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
}

/* WordPress ブロック由来の謎余白を殺す */
.wp-site-blocks,
.wp-block-group,
.wp-block-group__inner-container{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* spacer は通常時完全無効 */
.spacer{
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 管理バー表示時のみ spacer を復活 */
body.admin-bar .spacer{
  height: 80px !important;
}

/* =========================
   Hero 共通（正規版）
========================= */
.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  margin:0;
  padding:0;
}

.hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(0.62);
}

.hero .content{
  position:relative;
  z-index:2;
}

.hero h1{
  font-size:64px;
  margin:0;
  font-family:"Hiragino Mincho ProN",serif;
}
.hero p{
  margin-top:20px;
  font-size:20px;
  opacity:0.92;
}

/* ページ別高さ */
.hero--top{ height:92vh; }
.hero--mid{ height:92vh; }
.hero--contact{ height:92vh; }
.hero--thanks{ height:92vh; }

/* Contactだけ見せ方を下寄せ */
.hero--contact img{
  object-position:center 35%;
}

.hero .content{
  position: relative;
  z-index: 2;
}

/* ======================================
   スマホ最適化：ヘッダー完全安定版
====================================== */
@media (max-width: 768px){

  .header{
    position: fixed !important;
    top: 0;
    left: 0;

    width: 100%;
    height: auto;

    padding: 10px 14px 8px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    background: #071523;
    z-index: 1000;
  }

  /* ロゴ：必ず左 */
  .header-logo{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }

  .header-logo img{
    height: 36px !important;
    max-width: 180px;
  }

  /* ナビ：2段・切れない */
  .header nav{
    position: static !important;
    transform: none !important;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    gap: 8px 12px;
    margin-top: 8px;

    width: 100%;
    white-space: normal;
  }

  .header nav a{
    font-size: 13px;
    padding: 6px 8px;
    white-space: nowrap;
  }

  /* ヘッダー分の余白 */
  .spacer{
    height: 96px !important;
  }

  body.admin-bar .header{
    top: 32px;
  }
  body.admin-bar .spacer{
    height: 128px !important;
  }
}

/* ======================================
   【最終強制修正】ヘッダー完全安定パッチ
   iPhone Safari / Android / PC 対応
====================================== */

/* ナビリンクの色・下線を強制 */
.header nav a{
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ===== スマホ専用：構造を完全固定 ===== */
@media (max-width: 768px){

  .header{
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;

    padding: 10px 14px 8px !important;
    height: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    background: #071523;
    z-index: 1000;
  }

  /* ロゴは必ず左 */
  .header-logo{
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
  }

  .header-logo img{
    height: 36px !important;
    width: auto !important;
    max-width: 180px !important;
  }

  /* ナビ：absolute完全無効化 */
  .header nav{
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;

    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;

    gap: 8px 12px !important;
    margin-top: 8px !important;

    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .header nav a{
    font-size: 13px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }

  /* ヘッダー分の余白 */
  .spacer{
    height: 96px !important;
  }

  body.admin-bar .spacer{
    height: 128px !important;
  }
}

/* ======================================
   スマホ最終安定パッチ
   ① ロゴ拡大
   ② ヒーロー文字を1行に
   ③ ヘッダー直下の白い余白を完全除去
====================================== */
@media (max-width: 768px){

  /* ===== ① ロゴ拡大（左固定・安全） ===== */
  .header-logo img{
    height: 44px !important;
    width: auto !important;
    max-width: 220px !important;
  }

  /* ===== ② ヒーロー見出しを1行に固定 ===== */
  .hero h1{
    font-size: 34px !important;
    white-space: nowrap !important;   /* 強制1行 */
    letter-spacing: 0.04em;
    line-height: 1.2;
  }

  /* ===== ③ ヘッダー直下の白い余白を完全に殺す ===== */
  section.hero{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .hero{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ヘッダー固定分だけ余白を確保 */
  .spacer{
    height: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 管理バー表示時 */
  body.admin-bar .spacer{
    height: 128px !important;
  }
}

/* =========================
   ロゴ切り替え（安全確定版）
========================= */

/* 初期状態：PC */
.logo-sp{
  display: none;
}

/* スマホのみ */
@media (max-width: 768px){
  .logo-pc{
    display: none;
  }

  .logo-sp{
    display: block;
    height: 56px;   /* ← ここで大きさ調整 */
    width: auto;
  }
}