/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 11 2025 | 09:53:27 */
/* ====================================================================
   グローバル・リセット設定
   ==================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: inherit;
}
ul {
    list-style: none;
}

html {
    scroll-behavior: smooth;
}

/* ====================================================================
   ヘッダー共通スタイル (固定・半透明)
   ==================================================================== */
#header {
    /* 地の色を半透明に固定 */
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(3px); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s, box-shadow 0.3s; 
	font-family: 'Zen Kaku Gothic New';
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
}

.site-title a {
    background-image: url('https://kameda-toshi.com/wp-content/uploads/2025/10/site_title_b.svg');
    background-repeat: no-repeat;
    background-size: contain; /* ヘッダーの高さに合わせて画像を縮小・拡大 */
    background-position: left center; /* 左寄せ中央揃え */
    
    /* 2. 画像の表示サイズを設定 (ロゴ画像のサイズに合わせて調整してください) */
    display: block;
    width: 270px; 
    height: 41px;
	
    /* 3. 元のテキストを画面外に移動させて隠す (SEO対策) */
    font-size: 0; /* 古いブラウザ向け */
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}

/* ====================================================================
   SNSアイコンの基本スタイル (グローバル)
   ==================================================================== */
/* アイコン要素が確実に表示されるように、ここでサイズと形を定義 */
.header-sns .sns-icon {
    display: block;
    width: 30px; 
    height: 30px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.3s;
}
.header-sns .sns-icon:hover {
    opacity: 0.7;
}

/* アイコンのプレースホルダー色 (グローバル) */
.header-sns .line { background-image: url('https://kameda-toshi.com/wp-content/uploads/2025/09/icon_line.png');  }
.header-sns .facebook { background-image: url('https://kameda-toshi.com/wp-content/uploads/2025/09/icon_facebook.png'); }
.header-sns .twitter { background-image: url('https://kameda-toshi.com/wp-content/uploads/2025/09/icon_x.png'); }
.header-sns .instagram { background-image: url('https://kameda-toshi.com/wp-content/uploads/2025/09/icon_instagram.png'); }
.header-sns .youtube { background-image: url('https://kameda-toshi.com/wp-content/uploads/2025/09/icon_youtube.png'); }
.header-sns .note { background-image: url('https://kameda-toshi.com/wp-content/uploads/2025/09/icon_note.png'); }

/* ====================================================================
   ハンバーガーメニューボタンの共通スタイル (省略 - 前回から変更なし)
   ==================================================================== */
.menu-toggle {
    background: none;
    border: none;
    width: 30px;
    height: 24px;
    position: relative;
    cursor: pointer;
    z-index: 1001; 
    padding: 0;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    margin-bottom: 6px;
    transition: transform 0.3s, opacity 0.3s;
}
.menu-toggle span:last-child {
    margin-bottom: 0;
}

.menu-toggle.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* ====================================================================
   デスクトップ (PC) スタイル: 1024px 以上
   ==================================================================== */
@media (min-width: 1024px) {
    /* ハンバーガーボタンは非表示 */
    .menu-toggle {
        display: none;
    }

    /* main-navの基本設定 (横並び) */
    .main-nav {
        display: flex; 
        align-items: center; 
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* 1. スクロール前の状態: メニューとSNSアイコンを非表示にする */
    .main-nav {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none; 
    }

    /* 2. スクロール後の状態: is-scrolledクラスが付いたら表示する */
    #header.is-scrolled .main-nav {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* メニューリスト */
    .main-nav ul {
        display: flex; 
    }
    .main-nav li a {
        display: block;
        padding: 10px 15px;
        color: #333;
        font-weight: 500;
    }
    .main-nav li a:hover {
        color: #0065b2;
    }

    /* SNSアイコンコンテナ (レイアウト) */
    .header-sns {
        display: flex;
        gap: 10px;
        margin-left: 20px; 
    }
    
    /* SNSアイコンのサイズはグローバルで定義済み
    .header-sns .sns-icon { width: 30px; height: 30px; } */
}


/* ====================================================================
   モバイル / タブレット (スマホ) スタイル: 1023px 以下
   ==================================================================== */
@media (max-width: 1023px) {
    /* ハンバーガーボタンは表示 */
    .menu-toggle {
        display: block;
    }
    
    /* main-navの初期状態 (右外に隠す) */
    .main-nav {
        opacity: 1; 
        pointer-events: auto;
        transition: transform 0.3s ease-in-out; 
        
        display: block; 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: auto; 
        background-color: rgba(255, 255, 255, 0.95);
        
        transform: translateX(100%); 
        
        padding-top: 80px; 
		padding-bottom: 50px;
        overflow-y: auto;
    }

    /* .is-activeクラスが付いたときだけ表示 (クリック制御) */
    .main-nav.is-active {
        transform: translateX(0);
    }

    /* メニューリスト (縦並び) */
    .main-nav ul {
        display: block; 
        text-align: center;
    }
    .main-nav li a {
		display: block;
        padding: 10px 20px;
        font-size: 18px;
		border-bottom: none; 
    }
    .main-nav li:last-child a {
        border-bottom: none;
    }

    /* SNSアイコンコンテナ (レイアウト - 中央寄せ) */
    .header-sns {
        display: flex;
        justify-content: center; 
        gap: 20px;
        padding: 20px;
        margin: 0; 
    }

    /* SNSアイコンのサイズ調整 (グローバル設定を上書き) */
    .header-sns .sns-icon {
        width: 35px;
        height: 35px;
    }
}