/*
Theme Name: Sydney Child (Gosh)
Theme URI: https://gosh-hiphop.com
Description: 株式会社Gosh コーポレートサイト用の子テーマ。親テーマ Sydney を更新しても、ここの変更は残ります。
Author: 株式会社Gosh
Template: sydney
Version: 1.0.0
*/

/* =========================================================
   カラーパレット
   ここの値を変えるだけでサイト全体の配色が変わります
   ========================================================= */
:root {
    --gosh-bg:            #000000;  /* 背景（完全な黒）*/
    --gosh-surface:       #0E0E11;  /* カード・セクションの下地 */
    --gosh-surface-2:     #17171C;  /* さらに一段明るい面 */
    --gosh-border:        rgba(255, 255, 255, 0.12);
    --gosh-text:          #FFFFFF;
    --gosh-text-muted:    rgba(255, 255, 255, 0.68);
    --gosh-accent:        #3B82F6;  /* アクセント青 */
    --gosh-accent-hover:  #60A5FA;
}

/* =========================================================
   ベース
   ========================================================= */
body,
#page,
.site,
.site-content,
#content,
.content-area {
    background-color: var(--gosh-bg);
    color: var(--gosh-text);
}

body.custom-background {
    background-color: var(--gosh-bg) !important;
    background-image: none !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-title a {
    color: var(--gosh-text);
}

p, li, dd, dt, td, th,
.entry-content,
.site-content {
    color: var(--gosh-text-muted);
}

a {
    color: var(--gosh-accent);
}

a:hover,
a:focus {
    color: var(--gosh-accent-hover);
}

/* =========================================================
   ヘッダー / ナビゲーション
   ========================================================= */
.site-header,
.site-header.has-sticky,
.header-clone {
    background-color: var(--gosh-bg);
    border-bottom: 1px solid var(--gosh-border);
}

.site-header.transparent-header {
    background-color: transparent;
    border-bottom: 0;
}

.main-navigation a,
.main-navigation ul li a,
.site-title a,
.site-description {
    color: var(--gosh-text);
}

.main-navigation a:hover,
.main-navigation ul li a:hover,
.main-navigation .current-menu-item > a {
    color: var(--gosh-accent);
}

.main-navigation ul ul {
    background-color: var(--gosh-surface-2);
    border: 1px solid var(--gosh-border);
}

/* =========================================================
   ヒーロー（スライダー）
   ========================================================= */
#slideshow,
.header-slider,
.slide-inner {
    background-color: var(--gosh-bg);
}

#slideshow .maintitle,
#slideshow .subtitle,
.header-slider .maintitle,
.header-slider .subtitle {
    color: var(--gosh-text);
}

/* スライダー画像を暗くして文字を読みやすく */
#slideshow .slide-item::after,
.header-slider .slide-item::after {
    background: rgba(0, 0, 0, 0.55);
}

/* =========================================================
   ボタン
   ========================================================= */
.roll-button,
.button,
button,
input[type="submit"],
.wp-block-button__link,
.wpcf7-submit {
    background-color: var(--gosh-accent);
    border-color: var(--gosh-accent);
    color: #FFFFFF;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.roll-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wpcf7-submit:hover {
    background-color: var(--gosh-accent-hover);
    border-color: var(--gosh-accent-hover);
    color: #FFFFFF;
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--gosh-accent);
    border: 1px solid var(--gosh-accent);
}

/* =========================================================
   セクション / ブロック
   ========================================================= */
.panel-grid,
.panel-row-style,
.wp-block-group,
.wp-block-cover,
.wp-block-columns {
    background-color: transparent;
}

.wp-block-table table,
.flexible-table-block table {
    background-color: var(--gosh-surface);
    color: var(--gosh-text-muted);
    border-color: var(--gosh-border);
}

.wp-block-table th,
.flexible-table-block th {
    background-color: var(--gosh-surface-2);
    color: var(--gosh-text);
    border-color: var(--gosh-border);
}

.wp-block-table td,
.flexible-table-block td {
    border-color: var(--gosh-border);
}

hr,
.wp-block-separator {
    border-color: var(--gosh-border);
    background-color: var(--gosh-border);
}

/* =========================================================
   フォーム（Contact Form 7）
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
    background-color: var(--gosh-surface);
    color: var(--gosh-text);
    border: 1px solid var(--gosh-border);
    border-radius: 4px;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--gosh-accent);
    outline: none;
}

label {
    color: var(--gosh-text);
}

/* =========================================================
   フッター
   ========================================================= */
.site-footer,
.footer-widgets,
.site-info {
    background-color: var(--gosh-bg);
    color: var(--gosh-text-muted);
    border-top: 1px solid var(--gosh-border);
}

.site-info a,
.site-footer a {
    color: var(--gosh-text-muted);
}

.site-info a:hover,
.site-footer a:hover {
    color: var(--gosh-accent);
}

/* =========================================================
   細部
   ========================================================= */
::selection {
    background: var(--gosh-accent);
    color: #FFFFFF;
}

img {
    max-width: 100%;
    height: auto;
}

/* スクロールバー（WebKit）*/
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gosh-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--gosh-surface-2);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gosh-accent);
}

/* =========================================================
   ボタンの色を確実に上書きする
   Sydney のカスタマイザーが出すインラインCSSに勝つため、
   セレクタを具体的にして詳細度を上げている
   ========================================================= */
.wp-block-buttons .wp-block-button .wp-block-button__link,
.wp-block-buttons .wp-block-button .wp-block-button__link.wp-element-button {
    background-color: var(--gosh-accent);
    border: 1px solid var(--gosh-accent);
    color: #FFFFFF;
}

.wp-block-buttons .wp-block-button .wp-block-button__link:hover,
.wp-block-buttons .wp-block-button .wp-block-button__link.wp-element-button:hover {
    background-color: var(--gosh-accent-hover);
    border-color: var(--gosh-accent-hover);
    color: #FFFFFF;
}

/* アウトライン（枠線）ボタン */
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button {
    background-color: transparent;
    border: 1px solid var(--gosh-accent);
    color: var(--gosh-accent);
}

.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover {
    background-color: var(--gosh-accent);
    border-color: var(--gosh-accent);
    color: #FFFFFF;
}

/* ボタン共通の形 */
.wp-block-buttons .wp-block-button__link {
    padding: 14px 28px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: none;
}

/* ボタン同士の間隔 */
.wp-block-buttons {
    gap: 16px;
}

/* =========================================================
   プロダクト名の下のリンク（Days AI 参考）
   ========================================================= */
.gosh-product-link {
    font-size: 0.95em;
}

.gosh-product-link a {
    color: var(--gosh-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.gosh-product-link a:hover {
    color: var(--gosh-accent-hover);
}

/* =========================================================
   会社概要テーブル
   HTMLに色がインラインで書かれているので !important で上書き
   ========================================================= */
.wp-block-flexible-table-block-table table td {
    color: var(--gosh-text) !important;
    background-color: transparent !important;
}

/* 左列（項目名）は太字の白 */
.wp-block-flexible-table-block-table table td:first-child {
    color: #FFFFFF !important;
    font-weight: 700;
}

.wp-block-flexible-table-block-table table td:first-child strong {
    color: #FFFFFF !important;
}

/* 右列（値）も白 */
.wp-block-flexible-table-block-table table td:last-child {
    color: #FFFFFF !important;
}

/* 罫線を控えめに */
.wp-block-flexible-table-block-table table td {
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

/* =========================================================
   プロダクト行（ロゴ / QR / App Store バッジ を横並び）
   ⚠️ 以前はカラム＋白枠で組んでいたが、カラム幅の指定で
      白枠が潰れる事故が続いたので、flex 一段に作り直した。
   ========================================================= */
.gosh-product-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 0 auto;
}

.gosh-product-row figure {
    margin: 0 !important;
    line-height: 0;
}

/* アプリアイコン */
.gosh-app-icon img {
    width: 120px !important;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

/* QRコードは黒背景から浮かせるため白地に */
.gosh-qr img {
    width: 120px !important;
    height: auto;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 6px;
    box-sizing: content-box;
}

/* App Store バッジ */
.gosh-badge img {
    width: 160px !important;
    height: auto;
    border-radius: 8px;
}

.gosh-app-icon a:hover img,
.gosh-badge a:hover img {
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

/* 見出し・リンクの既定マージンを詰める */
h3.wp-block-heading.has-text-align-center,
.gosh-product-link {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 600px) {
    .gosh-product-row {
        gap: 20px;
    }
}

/* テーブル最下部の白線を消す（HTMLの border-bottom-color:#abb8c3 を打ち消す）*/
.wp-block-flexible-table-block-table table,
.wp-block-flexible-table-block-table table tbody,
.wp-block-flexible-table-block-table table tr:last-child td {
    border-bottom: 0 !important;
}

/* =========================================================
   見出し・段落の既定マージンを削って縦を詰める
   ========================================================= */
.page-template-page_front-page .entry-content h2.wp-block-heading,
.page-template-page_front-page .entry-content h3.wp-block-heading {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.page-template-page_front-page .entry-content p {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

.page-template-page_front-page .entry-content .wp-block-buttons {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 画像行の直後は余白ゼロ */
.gosh-product-row {
    margin-bottom: 0 !important;
}

/* =========================================================
   お問い合わせフォームを中央揃えにする（Contact Form 7）
   ========================================================= */
.wpcf7 {
    max-width: 520px;
    margin: 0 auto;
}

.wpcf7-form p {
    text-align: left;
    margin-bottom: 18px !important;
}

.wpcf7-form label {
    display: block;
    margin-bottom: 6px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
}

/* 送信ボタンだけ中央に */
.wpcf7-form p:has(.wpcf7-submit),
.wpcf7-form .wpcf7-submit {
    text-align: center;
}

.wpcf7-form .wpcf7-submit {
    display: block;
    margin: 0 auto;
    padding: 14px 48px;
}

/* =========================================================
   ヒーローがヘッダーに潜らないようにする
   transparent-header のぶんだけ上部に余白を確保
   ========================================================= */
.page-template-page_front-page .entry-content {
    padding-top: 0;
}

.page-template-page_front-page #content {
    padding-top: 40px;
}

/* プロダクト名（見出しではなく通常テキスト）*/
.gosh-product-name {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--gosh-text);
    letter-spacing: 0.04em;
    margin: 0 !important;
}

/* =========================================================
   Mission のステートメント
   Product のプロダクト名と同格の見え方にする
   ========================================================= */
.gosh-mission-statement {
    font-size: 1.9em;
    font-weight: 700;
    color: var(--gosh-text);
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .gosh-mission-statement {
        font-size: 1.4em;
    }
}

/* =========================================================
   プロダクト名とミッションを確実に白くする
   Sydney のインラインCSSに詳細度で負けていたため
   セレクタを厚くして !important を付ける
   ========================================================= */
.page-template-page_front-page .entry-content p.gosh-product-name,
p.gosh-product-name {
    color: #FFFFFF !important;
    font-size: 1.6em !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    margin: 0 !important;
}

.page-template-page_front-page .entry-content p.gosh-mission-statement,
p.gosh-mission-statement {
    color: #FFFFFF !important;
    font-size: 1.9em !important;
    font-weight: 700 !important;
    line-height: 1.5;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .page-template-page_front-page .entry-content p.gosh-mission-statement,
    p.gosh-mission-statement {
        font-size: 1.4em !important;
    }
    .page-template-page_front-page .entry-content p.gosh-product-name,
    p.gosh-product-name {
        font-size: 1.3em !important;
    }
}

/* お問い合わせフォームの上余白を詰める */
.page-template-page_front-page .wpcf7 {
    margin-top: 0 !important;
}

.page-template-page_front-page .wpcf7-form p:first-child {
    margin-top: 0 !important;
}

/* CVERSE は Product より細く（見出しとの階層をつける）*/
.page-template-page_front-page .entry-content p.gosh-product-name,
p.gosh-product-name {
    font-weight: 500 !important;
}

/* =========================================================
   下層ページ（プライバシーポリシー等）
   ⚠️ フロントページは page_front-page テンプレート、
      それ以外は page-template-default で別物。
      .page-template-page_front-page に限定した指定はここに届かない。
   ========================================================= */

/* サイドバーの白背景を消す（Sydney が #secondary{background:#fff} を出す）*/
#secondary,
.widget-area,
#secondary .widget {
    background-color: transparent !important;
    color: var(--gosh-text-muted);
}

#secondary .widget-title,
#secondary h1,
#secondary h2,
#secondary h3 {
    color: var(--gosh-text);
}

#secondary a {
    color: var(--gosh-accent);
}

/* 本文エリアの背景と文字色 */
.page-template-default .content-area,
.page-template-default #primary,
.single .content-area,
.archive .content-area,
.search .content-area,
.error404 .content-area {
    background-color: var(--gosh-bg);
}

/* 下層ページの見出しと本文 */
.page-template-default .entry-title,
.single .entry-title,
.archive .entry-title {
    color: var(--gosh-text);
}

.page-template-default .entry-content,
.single .entry-content,
.archive .entry-content {
    color: var(--gosh-text-muted);
    line-height: 1.9;
}

.page-template-default .entry-content h1,
.page-template-default .entry-content h2,
.page-template-default .entry-content h3,
.page-template-default .entry-content h4,
.single .entry-content h2,
.single .entry-content h3 {
    color: var(--gosh-text);
    margin-top: 2em;
    margin-bottom: 0.6em;
}

.page-template-default .entry-content p,
.single .entry-content p {
    margin-bottom: 1.4em;
}

.page-template-default .entry-content ul,
.page-template-default .entry-content ol,
.single .entry-content ul,
.single .entry-content ol {
    margin-bottom: 1.4em;
    padding-left: 1.6em;
}

.page-template-default .entry-content li {
    margin-bottom: 0.5em;
}

/* ページ全体の上下余白 */
.page-template-default .site-content,
.single .site-content {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* ヘッダーが被らないように */
.page-template-default .site-header,
.single .site-header,
.archive .site-header {
    position: relative;
    background-color: var(--gosh-bg) !important;
}

/* ヘッダーの検索アイコンを非表示にする */
.header-search,
.header-search-form,
.sydney-svg-icon.search-icon,
.main-navigation .search-item,
li.header-search,
.site-header .search-icon,
.header-elements .search-item {
    display: none !important;
}

/* =========================================================
   ヘッダーを黒に（Sydney が rgba(38,50,70,.9) の紺を出す）
   ========================================================= */
.site-header,
.site-header.has-sticky,
.header-clone,
.site-header.transparent-header.has-sticky {
    background-color: #000000 !important;
    border-bottom: 1px solid var(--gosh-border);
}

/* 最上部にいるときだけ透過 */
.site-header.transparent-header:not(.has-sticky) {
    background-color: transparent !important;
    border-bottom: 0;
}

/* =========================================================
   アンカーリンクで見出しがヘッダーに隠れるのを防ぐ
   ========================================================= */
html {
    scroll-padding-top: 110px;
}

#cverse,
#company,
#contact,
#mission {
    scroll-margin-top: 110px;
}

@media (max-width: 767px) {
    html {
        scroll-padding-top: 80px;
    }
    #cverse,
    #company,
    #contact,
    #mission {
        scroll-margin-top: 80px;
    }
}

/* フッターのプライバシーポリシーリンク */
.gosh-privacy-link {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--gosh-text-muted) !important;
    font-size: 0.95em;
}

.gosh-privacy-link:hover {
    color: var(--gosh-accent) !important;
}

/* ヘッダー直下の余白を詰める（ヘッダーが不透明になったため） */
.page-template-page_front-page #content {
    padding-top: 0 !important;
}

.page-template-page_front-page .entry-content > .wp-block-spacer:first-child {
    max-height: 60px;
}

/* =========================================================
   ヘッダーを黒にする（本命）
   ⚠️ Sydney のヘッダーは .site-header ではなく
      #masthead.main-header。.site-header を狙っても効かない。
   ========================================================= */
#masthead,
#masthead.main-header,
#masthead-mobile,
#masthead-mobile.main-header,
.main-header,
.header-clone,
.site-header-inner {
    background-color: #000000 !important;
}

#masthead.sticky-header,
#masthead.sticky-always,
.main-header.sticky-header {
    background-color: #000000 !important;
}

/* 下辺に細い境界だけ残す */
#masthead {
    border-bottom: 1px solid var(--gosh-border);
}

.header-clone {
    border-bottom: 0;
}

/* ヘッダーの下線を消す */
#masthead,
#masthead.main-header,
#masthead-mobile,
.main-header,
.header-clone,
.site-header,
.site-header-inner {
    border-bottom: 0 !important;
    box-shadow: none !important;
}