@charset "UTF-8";

/* 1. フォント読み込み：必ず一番上に配置 */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

/************************************
** 子テーマ用のスタイル
************************************/

/* 投稿日を非表示 */
.post-date {
  display: none;
}

/* キャプション hover */
.caption-wrap:hover {
  color: #505050;
  border-bottom: 3px solid #505050;
}

/* =========================
   記事エリア共通：中央揃え
========================= */
.article {
  text-align: center;
}

/* =========================
   見出し装飾
========================= */

/* h1 */
.article h1 {
  font-size: 36px;
  position: relative;
  display: inline-block;
}

/* h2 */
.article h2 {
  font-size: 28px;
  position: relative;
  display: inline-block;
}

.article h2::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 5px;
  background-color: #000;
  border-radius: 2px;
}

/* h3 */
.article h3 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

.article h3::before,
.article h3::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 45px;
  height: 1px;
  background-color: #000;
}

.article h3::before {
  left: 0;
}

.article h3::after {
  right: 0;
}

/* h4（中央揃えのみ） */
.article h4 {
  text-align: center;
}

/* ロゴ余白 */
.logo {
  margin-top: 2em;
}

/* =========================
   フォント設定
========================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

/* サイト全体 */
body,
button,
input,
textarea,
select {
  font-family:
    'Roboto Mono',
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3",
    "Meiryo",
    sans-serif !important;
}



/* 見出し */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Mono';
}

/* ナビ・ウィジェット */
.navi-in a,
.widget,
.sidebar,
.footer {
  font-family: 'Roboto Mono';
}

p,
li,
dt,
dd,
span {
  font-family: inherit;
}

/* 1. フォントの読み込み（念のため継続） */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

/* 2. メインロゴ（MY WORKS）を白にする */
.logo-header .site-name a {
    font-family: 'Roboto Mono' !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase;
    color: #ffffff !important;         /* 文字色を白に設定 */
    line-height: 1.1 !important;
}

/* 3. キャッチフレーズ（WEB × MARKETING）を白にする */
.tagline {
    font-family: 'Roboto Mono' !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.25em !important;
    margin-top: 8px !important;
    color: #ffffff !important;
    display: block;
}





/* =========================
   サイトロゴ（白・Roboto Mono）
========================= */
/* 1. メインロゴをさらに大きく（お手本サイト風） */
header .logo-header .site-name a,
header .logo-header .site-name-text {
    font-size: 64px !important;       /* 44pxから64pxへ大幅アップ */
    letter-spacing: -0.05em !important; /* 大きくした分、さらに字間を詰めて密度を出す */
    margin-bottom: 0 !important;
}

/* 2. キャッチフレーズのサイズと位置調整 */
header .tagline {
    font-size: 16px !important;
    margin-top: 0px !important;        /* ロゴとの隙間をゼロに */
    margin-bottom: 20px !important;    /* 下のメニューとの距離 */
}
.front-top-page,
.eye-catch-wrap {
  margin-bottom: 0 !important;
}

.main {
  padding-top: 0 !important;
}





/* ヒーロー（アイキャッチ）直下の余白をさらに削る */
.eye-catch-wrap {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* トップページのコンテンツ上余白を削除 */
.front-top-page .content-in {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Works セクション全体の上余白を削る */
.front-top-page .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 「Works」見出し直前の余白を最小化 */
.front-top-page h2 {
  margin-top: 0 !important;
}

/* ヘッダーヒーロー全体に黒オーバーレイ */
.hlt-center-logo-top-menu {
  position: relative;
}

.hlt-center-logo-top-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* 黒の濃さ：0.25〜0.45で調整 */
  z-index: 1;
  pointer-events: none;
}


/* ロゴ・メニューをオーバーレイより前面に */
.hlt-center-logo-top-menu .logo-header,
.hlt-center-logo-top-menu .navi {
  position: relative;
  z-index: 2;
}


.hlt-center-logo-top-menu::before {
  background: linear-gradient(
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.55)
  );
}

/* ヘッダー内テキストをオーバーレイより前面に出す */
.tagline {
  position: relative;
  z-index: 2;
}




/* 文字アニメーション用 */
.site-name-text span {
  display: inline-block;
  will-change: opacity, transform;
}


.logo-header .site-name a span {
  display: inline-block;
}


/* 1文字ごとの初期状態 */
.digital-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: none;
}

/* 表示開始 */
.digital-char.is-active {
  animation:
    digital-pop 0.6s steps(5, end) forwards,
    digital-glitch 0.15s steps(2, end) 2;
}

/* ガクガク出現 */
@keyframes digital-pop {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  40% {
    opacity: 1;
    transform: translateY(20px);
  }
  70% {
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 一瞬ブレるノイズ感 */
@keyframes digital-glitch {
  0% { transform: translateX(0); }
  50% { transform: translateX(-1px); }
  100% { transform: translateX(1px); }
}



/* カーソル */
.digital-cursor {
  display: inline-block;
  margin-left: 1px;
  opacity: 0;
  animation: none;
  /* font-family は指定しない */
}

/* 点滅開始 */
.digital-cursor.is-active {
  opacity: 1;
  animation: blink 1s steps(1, end) infinite;
}

@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}



/************************************
** レスポンシブ
************************************/

/*1240px以下*/
@media screen and (max-width: 1240px){
}

/*1023px以下*/
@media screen and (max-width: 1023px){
}

/*834px以下*/
@media screen and (max-width: 834px){
}

/*480px以下*/
@media screen and (max-width: 480px){
}