/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 28 2026 | 09:03:07 */
/* 1. Serviceページ全体（画面の端から端まで）の背景を紺色にする */
.page-id-239 body, /* ServiceページのIDが239の場合 */
.page-id-239 .site-content-contain,
.page-id-239 .site-content {
    background-color: #01243a !important; /* カバーブロックと同じ紺色 */
}

/* 2. コンテンツエリアの白い背景を透明にして、紺色を見せる */
.page-id-239 .panel-content .entry-content,
.page-id-239 .entry-header {
    background-color: transparent !important;
}

/* 3. ヘッダーとフッターも紺色に統一して、完全な没入感を出す */
.page-id-239 .site-header,
.page-id-239 .site-footer {
    background-color: #01243a !important;
}

/* 4. 文字を白にして、紺色の上で読めるようにする */
.page-id-239 .entry-title,
.page-id-239 .entry-content p {
    color: #ffffff !important;
}/* 1. 背景全体を #153448 に染める */
body,
.site-content-contain,
#content,
.site-footer {
    background-color: #153448 !important;
}

/* 2. トップページの白い「パネル」を透明化して背景を見せる */
.twentyseventeen-panel .panel-content,
.site-content .wrap {
    background-color: transparent !important;
    border: none !important; /* 余計な境界線も抹消 */
}

/* 3. カバーブロックの背景も同じ色にして境界線を消す */
.wp-block-cover,
.wp-block-cover-main {
    background-color: #153448 !important;
}

/* 4. 文字を白にして、深いネイビーに浮かび上がらせる */
.entry-title, 
.entry-content, 
.entry-content p,
.panel-content .entry-header {
    color: #ffffff !important;
}/* 1. コンテンツを囲む「箱」の幅を広げる（デフォルトは700px程度） */
.site-content .wrap {
    max-width: 1200px !important; /* 好みの広さに調整してください */
    width: 90% !important; /* スマホやタブレットでも端に寄りすぎないように */
}

/* 2. カラムブロック自体の制限も解除 */
.wp-block-columns {
    width: 100% !important;
    max-width: none !important;
}

/* 3. 各カラムの間の余白を調整（必要なら） */
.wp-block-column {
    padding-left: 20px;
    padding-right: 20px;
}

}/* 1. トップページの「パネル1」セクション全体の背景を #3c5b6f にする */
#panel1 .panel-content,
#panel1 .site-content .wrap {
    background-color: #3c5b6f !important;
}

/* 2. パネル内のカバーブロックの余白を消して、端まで色を広げる */
#panel1 .wp-block-cover.alignfull {
    background-color: #3c5b6f !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* 3. パネル自体の上下の余白（白い隙間）も同色で埋める */
#panel1.twentyseventeen-panel {
    background-color: #3c5b6f !important;
}

/* 4. 文字を白くして、視認性を確保 */
#panel1 .entry-title, 
#panel1 .entry-content, 
#panel1 .entry-content p {
    color: #ffffff !important;
}

}
}/* 1. ヘッダーを画像の上に浮かせ、透明にする */
.site-header {
    position: absolute !important;
    top: 0;
    width: 100%;
    z-index: 999;
    background: transparent !important;
}

/* 2. メニューを右端に寄せる */
.navigation-top {
    background: transparent !important;
    border: none !important;
}

.main-navigation ul {
    text-align: right !important; /* 文字を右寄せ */
    background: transparent !important;
}

.main-navigation li {
    display: inline-block !important; /* 横並びを維持 */
    float: none !important;
}

/* 3. ページの中身が消えるのを防ぐ（ヘッダーの高さ分だけ中身を下げる） */
.site-content-contain {
    padding-top: 0 !important; /* absoluteにした分、ここを調整 */
}

/* 4. メニューの文字を白く、上品に */
.main-navigation a {
    color: #ffffff !important;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    padding: 15px 20px !important;
}

/* 5. 白い帯を徹底的に抹消 */
.wrap, .site-navigation-container, .menu-menu-1-container {
    background: transparent !important;
    background-color: transparent !important;
}/* ヘッダー画像の下にあるスクロールダウン矢印を非表示にする */
.menu-scroll-down {
    display: none !important;
}

}/* 1. 「パネル2」セクション全体の背景を指定色にする */
#panel2 .panel-content,
#panel2 .site-content .wrap {
    background-color: #948979 !important;
}

/* 2. パネル2自体の上下の隙間も埋める */
#panel2.twentyseventeen-panel {
    background-color: #948979 !important;
}

/* 3. 中にあるカバーブロックも同色にして一体化させる */
#panel2 .wp-block-cover.alignfull {
    background-color: #948979 !important;
}

/* 4. 文字を白にして、グレージュの上で綺麗に見せる */
#panel2 .entry-title, 
#panel2 .entry-content, 
#panel2 .entry-content p {
    color: #ffffff !important;
}/* 1. お問い合わせフォームの「入力ボックス（一行・複数行）」を指定色にする */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    background-color: #3c5b6f !important; /* ボックスの中身を渋いブルーに */
    color: #ffffff !important;           /* ボックス内の文字を白に */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* 繊細な白い枠線をうっすらと */
}

/* 2. 入力中（フォーカス時）のボックスの見た目を少し強調 */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
    background-color: #3c5b6f !important;
    border: 1px solid #ffffff !important; /* 枠線をくっきり白に */
    outline: none !important; /* 黄色い線を消す */
}

/* 3. 「氏名」「メールアドレス」などのラベル文字も白にする */
.wpcf7-form label,
.wpcf7-form p {
    color: #ffffff !important;
}

/* 4. 送信ボタンを少し白く、見やすくする（もし今のままが良いなら不要です） */
.wpcf7-form input[type="submit"] {
    background-color: #ffffff !important;
    color: #948979 !important; /* 文字色は背景のグレージュに */
    border: none !important;
}/* 1. 送信ボタンの通常時のスタイル */
.wpcf7-form input[type="submit"] {
    background-color: #3c5b6f !important; /* ボックスとお揃いのブルー */
    color: #ffffff !important;           /* 文字は白 */
    border: none !important;
    padding: 15px 40px !important;       /* ボタンを少し大きくして押しやすく */
    border-radius: 2px !important;       /* ほんの少しだけ角を丸める（お好みで） */
    transition: background-color 0.3s ease !important; /* 色の変化を滑らかに */
    cursor: pointer !important;
}

/* 2. マウスを乗せた時（ホバー時）のスタイル */
.wpcf7-form input[type="submit"]:hover {
    background-color: #dfd0b8 !important; /* ご指定のベージュ系 */
    color: #3c5b6f !important;           /* 文字色をブルーにしてコントラストを出す */
}

/* 3. エラーメッセージ（入力内容に問題があります）の枠線や色も馴染ませる */
.wpcf7-response-output {
    border-color: #dfd0b8 !important;
    color: #ffffff !important;
    margin-top: 20px !important;
}/* 1. パネル同士の間にある白い境界線を消す */
.panel-content .wrap,
.twentyseventeen-panel {
    border: none !important;
}

/* 2. セクションの上下にある微妙な余白も削って密着させる */
.site-main article.twentyseventeen-panel {
    margin-bottom: 0 !important;
}

/* 3. もしこれでも線が残る場合は、疑似要素の線を消す */
.panel-content .wrap::before {
    display: none !important;
}/* ナビの背景を完全削除 */
.navigation-top,
.navigation-top .wrap,
.site-header,
.site-header .wrap {
    background: none !important;
    background-color: transparent !important;
}

}/* ヘッダー本体ごと消す */
.page-id-3 header#masthead {
    display: none !important;
}

/* 残る余白も強制削除 */
.page-id-3 .custom-header {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* コンテンツ上の余白も消す */
.page-id-3 .site-content-contain {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

}/* このページの中身をフル幅にする */
.page-id-51 .site-content-contain .wrap {
    max-width: 100% !important;
    padding: 0 !important;

}/* ブロックエディタの制限解除 */
.page-id-51 .entry-content,
.page-id-51 .entry-content > * {
    max-width: 100% !important;
    width: 100% !important;
}/* ブロックの全幅を有効化 */
.alignfull {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
}/* 背景を画面全体に強制表示 */
.page-id-51 {
    position: relative;
    z-index: 0;
}

.page-id-51::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url("https://craftboogie.jp/wp-content/uploads/2026/03/db02e94f0f45b77bde97976d717b4eee.png") center / cover no-repeat;
    z-index: -1;
}.page-id-51 .site,
.page-id-51 .site-content-contain,
.page-id-51 #content,
.page-id-51 .wrap,
.page-id-51 .content-area,
.page-id-51 .entry-content,
.page-id-51 article {
    background: transparent !important;
}

/* 767px以下のモバイル環境で強制適用 */
@media screen and (max-width: 767px) {
    /* 1. 【最優先】通常時はメニューリストを完全に消去 */
    .js .main-navigation ul, 
    .main-navigation ul {
        display: none !important;
    }

    /* 2. 【最優先】ボタンが押された時（toggled-on）だけ縦に見せる */
    .main-navigation.toggled-on ul {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        background-color: rgba(21, 52, 72, 0.95) !important;
    }

    /* 3. 文字を小さく、縦一列に強制固定 */
    .main-navigation.toggled-on li {
        display: block !important;
        float: none !important;
        text-align: center !important;
    }

    .main-navigation.toggled-on li a {
        padding: 8px 0 !important;
        font-size: 11px !important; /* さらに少し小さくしました */
        letter-spacing: 0.15em !important;
        color: #ffffff !important;
        text-transform: uppercase; /* 英字なら大文字でスッキリ */
    }

    /* 4. ハンバーガーボタン自体の設定 */
    .menu-toggle {
        display: block !important;
        width: auto !important;
        background: transparent !important;
        color: #ffffff !important;
        border: none !important;
        font-size: 13px !important;
    }
}
}}/* ヘッダー本体ごと消す */
.page-id-13 header#masthead {
    display: none !important;
}

/* 残る余白も強制削除 */
.page-id-13 .custom-header {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* コンテンツ上の余白も消す */
.page-id-13 .site-content-contain {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

}/* このページの中身をフル幅にする */
.page-id-13 .site-content-contain .wrap {
    max-width: 100% !important;
    padding: 0 !important;

}/* ブロックエディタの制限解除 */
.page-id-13 .entry-content,
.page-id-13 .entry-content > * {
    max-width: 100% !important;
    width: 100% !important;
}/* ブロックの全幅を有効化 */
.alignfull {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
}/* 背景を画面全体に強制表示 */
.page-id-13 {
    position: relative;
    z-index: 0;
}

.page-id-13::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url("https://craftboogie.jp/wp-content/uploads/2026/03/95f664c616ac4f4480385201ca701f7d.png") center / cover no-repeat;
    z-index: -1;
}.page-id-13 .site,
.page-id-13 .site-content-contain,
.page-id-13 #content,
.page-id-13 .wrap,
.page-id-13 .content-area,
.page-id-13 .entry-content,
.page-id-13 article {
    background: transparent !important;
}html {
    scroll-behavior: smooth;
}/* ここにCSSコードを追加

例:
.example {
    color: red;
}

CSS の知識に磨きをかけるためにご覧ください。
http://www.w3schools.com/css/css_syntax.asp

コメント終わり */