@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
*/

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




/* 全幅フッターウィジェット */
.footer-full-widget-area{
  width:100%;
  background:#f5f5f5; /* 任意 */
  padding:40px 0;
}
.footer-full-inner{
  width: min(1200px, 90%);
  margin: 0 auto;
}
.footer-full-widget-area .widget{
  margin-bottom:24px;
}

/* Related Media Footer */
.u-visually-hidden{
	text-align: left;
}

/* レイアウト */
.related-media{
  padding:0 0 16px;
}
.related-media__grid{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:24px 16px;
  grid-template-columns:repeat(6,1fr); /* PC 6列 */
}
@media(max-width: 767px){
  .related-media__grid{
		grid-template-columns:repeat(2,1fr)!important; /* SP 3列 */
		gap:0;
  }
	.u-visually-hidden{
		text-align: center;
	}
}
.related-media__item{
  text-align:center;
}
.related-media__link{
  display:inline-block;
}
.related-media__link img{
  max-width:80%;
  height:auto;
  display:block;
  margin:0 auto;
  /* ロゴ高さを揃えたい場合は下記例（高さ固定＋object-fit） */
  height:60px; object-fit:contain;
}

.related-media__link-app img{
  max-width:80%;
  height:auto;
  display:block;
  margin:0 auto;
  /* ロゴ高さを揃えたい場合は下記例（高さ固定＋object-fit） */
  height:90px; object-fit:contain;
}

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

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

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

/************************************
** NS-HERO-START 2026-06-17 neonsoak トップ刷新（front-top-pageのみ）
************************************/
.front-top-page{ --ns-n1:#ff5e9c; --ns-n2:#a45cff; --ns-n3:#43d4ff; --ns-ink:#13141b; }
body.front-top-page{ overflow-x:hidden; }

/* 全幅化・テーマchrome整理 */
.front-top-page #sidebar{ display:none !important; }
.front-top-page #main{ width:100% !important; }
.front-top-page .content-in{ max-width:100%; padding:0; }
.front-top-page #main .article{ padding:0; border:none; background:transparent; box-shadow:none; }
.front-top-page .entry-content{ margin:0; }
.front-top-page .entry-title,
.front-top-page .date-tags, .front-top-page .entry-tags,
.front-top-page .article-footer, .front-top-page .breadcrumb,
.front-top-page .eye-catch-wrap, .front-top-page .author-info{ display:none !important; }

/* ヘッダーをダーク化 */
.front-top-page #header-container{ background:#0c0d16 !important; }
.front-top-page #header, .front-top-page .header-in{ background:transparent !important; }
.front-top-page .site-name-text{ font-size:32px !important; font-weight:800; letter-spacing:.3px;
  background:linear-gradient(100deg,#fff 28%,var(--ns-n1),var(--ns-n2));
  -webkit-background-clip:text; background-clip:text; color:transparent !important; }
.front-top-page #navi{ background:#0c0d16 !important; border:none !important; box-shadow:none !important; }
.front-top-page #navi .menu-header > li > a{ color:#c7c9d6 !important; }
.front-top-page #navi .menu-header > li > a:hover{ color:#fff !important; }

/* Hero */
.ns-hero{ position:relative; overflow:hidden; background:#0c0d16; color:#fff;
  width:100vw; margin-left:calc(50% - 50vw); padding:66px 24px 84px; }
.ns-hero::before{ content:""; position:absolute; inset:-40% -10% auto -10%; height:135%;
  background:radial-gradient(60% 60% at 22% 28%,rgba(255,94,156,.5),transparent 60%),
            radial-gradient(55% 55% at 80% 18%,rgba(164,92,255,.46),transparent 60%),
            radial-gradient(50% 50% at 62% 85%,rgba(67,212,255,.36),transparent 60%); filter:blur(22px); }
.ns-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,#0c0d16); }
.ns-hero-in{ position:relative; z-index:2; max-width:1040px; margin:0 auto; }
.ns-h1{ font-weight:800; font-size:44px; line-height:1.24; letter-spacing:-.5px; color:#fff; margin:0; }
.ns-grad{ background:linear-gradient(100deg,var(--ns-n1),var(--ns-n2) 55%,var(--ns-n3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ns-lead{ margin:22px 0 0; font-size:16px; line-height:1.9; color:#c7c9d6; max-width:40em; }
.ns-cta{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
.ns-cta a{ display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px; font-weight:700; font-size:15px; text-decoration:none; transition:.2s; }
.ns-btn-p{ background:linear-gradient(135deg,var(--ns-n1),var(--ns-n2)); color:#fff !important; box-shadow:0 10px 30px rgba(164,92,255,.45); }
.ns-btn-p:hover{ transform:translateY(-2px); }
.ns-btn-s{ background:rgba(255,255,255,.08); color:#fff !important; border:1px solid rgba(255,255,255,.22); }
.ns-stats{ margin-top:48px; display:flex; gap:44px; flex-wrap:wrap; }
.ns-stats > div{ display:flex; flex-direction:column; }
.ns-stats b{ font-size:33px; font-weight:800; line-height:1; color:#fff; }
.ns-stats span{ font-size:12px; letter-spacing:1px; color:#9a9db0; margin-top:7px; }

/* 関連メディア/アプリ */
.front-top-page .related-media{ width:100vw; margin-left:calc(50% - 50vw); padding:72px 24px; background:#fff; }
.front-top-page #ns-apps{ background:#f7f7fb; }
.front-top-page .related-media h2{ position:static !important; width:auto !important; height:auto !important;
  clip:auto !important; clip-path:none !important; overflow:visible !important;
  max-width:1040px; margin:0 auto 34px !important; padding:0;
  font-size:27px; font-weight:800; color:var(--ns-ink); letter-spacing:-.3px; }
.front-top-page .related-media h2::before{ display:block; font-size:12px; font-weight:700; letter-spacing:2px; color:var(--ns-n2); margin-bottom:8px; }
.front-top-page #ns-media h2::before{ content:"OUR MEDIA"; }
.front-top-page #ns-apps h2::before{ content:"OUR APPS"; }
.front-top-page .related-media__grid{ max-width:1040px; margin:0 auto; display:grid; gap:18px; grid-template-columns:repeat(4,1fr); list-style:none; padding:0; }
.front-top-page .related-media__item{ background:#fff; border:1px solid #ececf2; border-radius:18px; margin:0; transition:.22s; overflow:hidden; list-style:none; }
.front-top-page .related-media__item:hover{ transform:translateY(-5px); box-shadow:0 16px 36px rgba(20,20,40,.12); border-color:transparent; }
.front-top-page .related-media__link, .front-top-page .related-media__link-app{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:22px 16px; height:100%; text-decoration:none; color:var(--ns-ink); }
.front-top-page .related-media__item br{ display:none; }
.front-top-page .related-media__item p{ margin:0; }
.front-top-page .related-media__link img{ max-width:82%; max-height:50px; width:auto; object-fit:contain; }
.front-top-page .related-media__link-app img{ width:74px; height:74px; border-radius:18px; object-fit:cover; box-shadow:0 6px 16px rgba(0,0,0,.14); }
.front-top-page .related-media__link-app span{ margin-top:13px; font-weight:700; font-size:14px; }
.front-top-page .related-media__link-app::after{ content:"App Store"; margin-top:8px; font-size:11px; font-weight:700; letter-spacing:.4px; padding:4px 11px; border-radius:999px; background:#f1f1f6; color:#3a3d4d; }

@media screen and (max-width:834px){
  .front-top-page .related-media__grid{ grid-template-columns:repeat(2,1fr); }
  .ns-h1{ font-size:31px; }
  .ns-stats{ gap:26px; }
}
/************************************
** NS-HERO-END
************************************/

/* NS-HERO-GAP-FIX 2026-06-17 */
.front-top-page #content{ padding-top:0 !important; margin-top:0 !important; }
.front-top-page #main{ padding-top:0 !important; margin-top:0 !important; }
.front-top-page .content-in{ padding-top:0 !important; margin-top:0 !important; }
.front-top-page article.article,.front-top-page #main .article{ margin-top:0 !important; padding-top:0 !important; }
.front-top-page .main-before{ display:none !important; }

/* NS-HERO-FIX2 2026-06-17 全面調整（Cocoonヘッダー撤去+自前ナビ+見出しリセット） */
.front-top-page #header-container,
.front-top-page #header-container-in,
.front-top-page #navi,
.front-top-page .navi-menu-button-wrap{ display:none !important; }
.ns-nav{ position:relative; z-index:3; max-width:1040px; margin:0 auto 46px; display:flex; align-items:center; justify-content:space-between; }
.ns-brand{ font-weight:800; font-size:30px; letter-spacing:.3px; text-decoration:none; background:linear-gradient(100deg,#fff 28%,var(--ns-n1),var(--ns-n2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ns-links{ display:flex; align-items:center; gap:28px; }
.ns-links a{ color:#c7c9d6; text-decoration:none; font-size:14px; font-weight:600; letter-spacing:.5px; transition:.2s; }
.ns-links a:hover{ color:#fff; }
.ns-links a.ns-contact{ padding:9px 20px; border:1px solid rgba(255,255,255,.25); border-radius:999px; color:#fff; }
.ns-hero{ padding-top:30px; }
/* セクション見出し Cocoon装飾の完全リセット */
.front-top-page .related-media h2{ border:none !important; border-bottom:none !important; background:none !important; background-image:none !important; box-shadow:none !important; padding:0 !important; line-height:1.3 !important; }
.front-top-page .related-media h2::after{ content:none !important; display:none !important; }
.front-top-page #ns-media h2::before{ content:"OUR MEDIA" !important; }
.front-top-page #ns-apps h2::before{ content:"OUR APPS" !important; }
.front-top-page .related-media h2::before{ display:block !important; position:static !important; width:auto !important; height:auto !important; background:none !important; border:none !important; box-shadow:none !important; font-size:12px !important; font-weight:700 !important; letter-spacing:2px !important; color:var(--ns-n2) !important; margin:0 0 8px 0 !important; }
@media screen and (max-width:834px){ .ns-nav{ margin-bottom:28px; } .ns-links{ gap:15px; } .ns-links a{ font-size:13px; } .ns-brand{ font-size:25px; } }

/* NS-HERO-FIX3 2026-06-17 h1左寄せ + スマホレスポンシブ強化 */
.front-top-page .ns-hero, .front-top-page .ns-hero-in,
.front-top-page .ns-h1, .front-top-page .ns-lead,
.front-top-page .related-media, .front-top-page .related-media h2{ text-align:left !important; }
.front-top-page .ns-h1{ text-align:left !important; }
.front-top-page .related-media h2{ padding-left:0 !important; }

@media screen and (max-width:600px){
  .ns-nav{ flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:26px; }
  .ns-links{ gap:16px; flex-wrap:wrap; }
  .ns-brand{ font-size:26px; }
  .ns-h1{ font-size:26px !important; line-height:1.3; }
  .ns-lead{ font-size:15px; }
  .ns-hero{ padding:24px 18px 56px; }
  .ns-cta{ gap:10px; }
  .ns-cta a{ padding:12px 20px; font-size:14px; }
  .ns-stats{ gap:22px; margin-top:38px; }
  .ns-stats b{ font-size:25px; }
  .front-top-page .related-media{ padding:48px 18px; }
  .front-top-page .related-media__grid{ grid-template-columns:repeat(2,1fr) !important; gap:12px; }
  .front-top-page .related-media h2{ font-size:23px; margin-bottom:24px !important; }
  .front-top-page .related-media__link-app img{ width:64px; height:64px; }
}

/* NS-HERO-FIX4 2026-06-17 フッターdark化 + モバイルボタンバー撤去（front-top-page） */
.front-top-page .mobile-menu-buttons,
.front-top-page .mobile-footer-menu-buttons{ display:none !important; }
.front-top-page #footer{ background:#0c0d16 !important; color:#9a9db0 !important; border-top:1px solid rgba(255,255,255,.07); }
.front-top-page #footer .footer-in,
.front-top-page #footer .footer-bottom,
.front-top-page #footer .footer-bottom-content,
.front-top-page #footer .footer-meta{ background:transparent !important; }
.front-top-page #footer a{ color:#c7c9d6 !important; }
.front-top-page #footer a:hover{ color:#ffffff !important; }
.front-top-page #footer .site-name-text,
.front-top-page #footer .logo-footer,
.front-top-page #footer .logo-footer a{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; background:none !important; }
.front-top-page .navi-footer{ background:#0c0d16 !important; border:none !important; box-shadow:none !important; }
.front-top-page .navi-footer a{ color:#c7c9d6 !important; }
.front-top-page .navi-footer a:hover{ color:#ffffff !important; }
.front-top-page #footer .copyright{ color:#6f7283 !important; }

/* NS-GLOBAL-TONE 2026-06-17 全ページにトンマナ適用（front-top-page以外も） */
/* ヘッダー dark + Neonsoakグラデロゴ + ナビ明色 */
body:not(.front-top-page) #header-container,
body:not(.front-top-page) #header-container-in,
body:not(.front-top-page) #header,
body:not(.front-top-page) .header-in{ background:#0c0d16 !important; }
body:not(.front-top-page) #navi{ background:#0c0d16 !important; border:none !important; box-shadow:none !important; }
body:not(.front-top-page) .site-name-text{ font-size:30px !important; font-weight:800; letter-spacing:.3px;
  background:linear-gradient(100deg,#fff 28%,#ff5e9c,#a45cff); -webkit-background-clip:text; background-clip:text; color:transparent !important; }
body:not(.front-top-page) #navi .menu-header > li > a,
body:not(.front-top-page) #navi .item-label{ color:#c7c9d6 !important; }
body:not(.front-top-page) #navi .menu-header > li > a:hover .item-label{ color:#fff !important; }
body:not(.front-top-page) .tagline{ color:#9a9db0 !important; }

/* フッター dark（全ページ） */
#footer{ background:#0c0d16 !important; color:#9a9db0 !important; border-top:1px solid rgba(255,255,255,.07); }
#footer .footer-in, #footer .footer-bottom, #footer .footer-bottom-content, #footer .footer-meta{ background:transparent !important; }
#footer a{ color:#c7c9d6 !important; }
#footer a:hover{ color:#fff !important; }
#footer .site-name-text, #footer .logo-footer, #footer .logo-footer a{ color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important; }
.navi-footer{ background:#0c0d16 !important; border:none !important; box-shadow:none !important; }
.navi-footer a{ color:#c7c9d6 !important; }
.navi-footer a:hover{ color:#fff !important; }
#footer .copyright{ color:#6f7283 !important; }

/* NS-HEADER-LAYOUT 2026-06-17 サブページヘッダーを「ロゴ左+ナビ右」横並びに（トップと一致） */
body:not(.front-top-page) #header-container{
  display:flex !important; align-items:center; justify-content:space-between; flex-wrap:wrap; row-gap:6px;
  padding:14px max(24px, calc(50vw - 540px)) !important;
}
body:not(.front-top-page) #header-container-in{ background:transparent !important; padding:0 !important; margin:0 !important; flex:0 0 auto; width:auto !important; }
body:not(.front-top-page) #header{ padding:0 !important; margin:0 !important; min-height:0 !important; }
body:not(.front-top-page) #header-in{ padding:0 !important; margin:0 !important; max-width:none !important; width:auto !important; min-height:0 !important; }
body:not(.front-top-page) .logo-header{ text-align:left !important; margin:0 !important; padding:0 !important; }
body:not(.front-top-page) .tagline{ display:none !important; }
body:not(.front-top-page) #navi{ flex:0 0 auto; width:auto !important; margin:0 !important; }
body:not(.front-top-page) #navi-in{ padding:0 !important; margin:0 !important; max-width:none !important; width:auto !important; }
body:not(.front-top-page) .menu-header{ display:flex !important; gap:28px; justify-content:flex-end; float:none !important; margin:0 !important; }
body:not(.front-top-page) .menu-header > li{ border:none !important; background:none !important; }
body:not(.front-top-page) .menu-header > li > a{ padding:6px 0 !important; height:auto !important; line-height:1.4 !important; }
body:not(.front-top-page) .menu-header .item-label{ font-size:14px !important; }
/* Cocoonモバイルメニューボタンは使わない（PCナビをそのまま出す） */
body:not(.front-top-page) .navi-menu-button-wrap,
body:not(.front-top-page) #navi .menu-button,
body:not(.front-top-page) .menu-drawer-button{ display:none !important; }
@media screen and (max-width:600px){
  body:not(.front-top-page) #header-container{ flex-direction:column; align-items:flex-start; gap:12px; padding:14px 18px !important; }
  body:not(.front-top-page) .menu-header{ gap:18px; flex-wrap:wrap; justify-content:flex-start; }
}

/* NS-SITEHEADER 2026-06-17 全ページ共通の自前ヘッダー + Cocoonヘッダー全非表示 */
#header-container, #navi{ display:none !important; }
.ns-siteheader{ background:#0c0d16; }
.ns-siteheader-in{ max-width:1080px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; }
.ns-siteheader .ns-brand{ font-weight:800; font-size:30px; letter-spacing:.3px; text-decoration:none; background:linear-gradient(100deg,#fff 28%,#ff5e9c,#a45cff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ns-sitenav{ display:flex; align-items:center; gap:28px; }
.ns-sitenav a{ color:#c7c9d6; text-decoration:none; font-size:14px; font-weight:600; letter-spacing:.5px; transition:.2s; }
.ns-sitenav a:hover{ color:#fff; }
.ns-sitenav a.ns-contact{ padding:9px 20px; border:1px solid rgba(255,255,255,.25); border-radius:999px; color:#fff !important; }
.front-top-page #main{ background:transparent !important; }
@media screen and (max-width:600px){
  .ns-siteheader-in{ flex-direction:column; align-items:flex-start; gap:12px; padding:14px 18px; }
  .ns-sitenav{ gap:16px; flex-wrap:wrap; }
  .ns-siteheader .ns-brand{ font-size:26px; }
}

/* NS-SITEHEADER-OVERRIDE 2026-06-17 Cocoonヘッダーを全ページ確実に隠す（flex指定に後勝ち） */
body:not(.front-top-page) #header-container,
body:not(.front-top-page) #navi,
body.front-top-page #header-container,
body.front-top-page #navi{ display:none !important; }