/*
Theme Name: Maho's Portfolio
Author: Maho Oda
Description: 真帆のポートフォリオ用オリジナルテーマ
Version: 2026.02.06 (Stable Restore)
*/

/* ==================================================
   1. Global Settings (全体設定)
   ================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f4f4f4;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

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

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==================================================
   2. Header & Navigation (ヘッダー)
   ================================================== */
header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* ★修正点1：ここを「10000」にして、タイトル(9999)より強くしました！ */
    z-index: 10000; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.header-logo { display: flex; align-items: center; }

.text-logo {
    font-family: 'Montserrat', sans-serif; /* ロゴのフォント */
    font-weight: 800;
    font-size: 1.5rem;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color 0.3s;
}

/* ナビゲーション */
nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }

nav ul li a { 
    font-size: 1rem; 
    color: #fff; 
    font-weight: bold; 
    position: relative; 
    padding-bottom: 5px; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3); 
    white-space: nowrap;
    
    /* ★修正点2：メニューにも同じカッコいいフォントを適用！ */
    font-family: 'Montserrat', sans-serif; 
    letter-spacing: 0.05em; /* 少し文字間隔を空けるとオシャレ */
}

nav ul li a::after { 
    content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; 
    background-color: #FDDC35; transition: all 0.3s; transform: translateX(-50%); 
}
nav ul li a:hover::after { width: 100%; }

/* ナビアイコン */
.nav-menu li a i {
    margin-right: 10px; color: #FDDC35; width: 20px; text-align: center;
}

/* ハンバーガー（PC非表示） */
.burger-btn { display: none; }

/* スクロール時のヘッダー変化 */
header.scrolled { 
    position: fixed; top: 0; left: 0; width: 100%; 
    background-color: #FDDC35; box-shadow: 0 3px 10px rgba(0,0,0,0.1); 
    padding: 15px 40px; animation: slideDown 0.3s ease-out; 
    
    /* スクロール時も最強の強さを維持 */
    z-index: 10000; 
}

/* スクロール時の文字色変化 */
header.scrolled .text-logo { color: #333 !important; }
header.scrolled nav ul li a { color: #333 !important; text-shadow: none; }
header.scrolled .burger-btn .bar { background-color: #333; }

@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
/* ==================================================
   3. Hero Area (ヒーローエリア)
   ================================================== */
.hero-wrapper {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: #333;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}

/* 背景スライダー */
.slider-box {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}
.slide-item {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; animation: slideAnime 15s infinite;
}
.slide-item:nth-child(1) { animation-delay: 0s; }
.slide-item:nth-child(2) { animation-delay: 5s; }
.slide-item:nth-child(3) { animation-delay: 10s; }

@keyframes slideAnime {
    0% { opacity: 0; transform: scale(1); }
    4% { opacity: 1; }
    33% { opacity: 1; }
    37% { opacity: 0; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1); }
}

.slider-box::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 2;
}

/* FVのコンテンツエリア（タイトル＋ロゴ） */
.hero-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999 !important; /* 最前面に */
    text-align: center;
    width: 100%;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    opacity: 1 !important;
    visibility: visible !important;
}

/* FVのロゴ画像 */
.hero-top-logo {
    width: 280px;
    height: auto;
    margin-bottom: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.8));
}

/* タイトルたち */
.main-title {
    font-size: 4rem; font-weight: 800; margin: 0 0 10px; line-height: 1.1; letter-spacing: 0.05em;
    opacity: 1 !important; animation: none !important;
}
.sub-title {
    font-size: 1.5rem; font-weight: 700; margin-bottom: 10px;
    opacity: 1 !important; animation: none !important;
}
.sub-title-en {
    display: block; font-size: 1rem; letter-spacing: 0.1em;
    opacity: 1 !important; animation: none !important;
}

/* ★ニュースティッカー（修正：背景を消して文字だけ流す！）★ */
/* ★ニュースティッカー（元通りの白帯バージョン）★ */
    .ticker-wrap {
        position: absolute;
        bottom: 100px; /* 位置はお好みで調整してください */
        left: -5%;
        width: 110%;
        height: 60px;
        background-color: #fff; /* ★白帯復活！ */
        transform: rotate(-3deg);
        z-index: 50;
        overflow: hidden;
        display: flex;
        align-items: center;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        pointer-events: none;
    }

    /* 文字を流すアニメーション */
    .ticker {
        display: flex;
        white-space: nowrap;
        animation: ticker-slide 60s linear infinite;
    }

    /* 流れる文字のデザイン */
    .ticker-item {
        color: #333; /* ★黒文字に戻す！ */
        font-size: 1.2rem;
        padding-right: 0;
        font-weight: bold;
        letter-spacing: 0.1em;
        margin-right: 50px;
        font-family: 'Montserrat', sans-serif;
        text-shadow: none; /* 影も消す */
    }

    /* ループのつなぎ目をなくす動き */
    @keyframes ticker-slide {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    /* スマホ対応 */
    @media (max-width: 768px) {
        .ticker-wrap { bottom: 80px; height: 50px; }
        .ticker-item { font-size: 1rem; }
    }
    /* ==================================================
   4. Common Titles & Sections
   ================================================== */
.section-title {
    text-align: center; font-size: 2.5rem; font-family: 'Montserrat', sans-serif; 
    margin-bottom: 60px; font-weight: 700; display: flex; flex-direction: column; 
    align-items: center; line-height: 1.2; letter-spacing: 0.05em;
}
.ja-title { 
    display: block; font-size: 1rem; color: #888; font-weight: normal; 
    margin-top: 12px; letter-spacing: 0.1em; font-family: "Yu Gothic", "Helvetica Neue", sans-serif; 
}

/* スクロール連動アニメーション */
.js-fade { opacity: 0; transform: translateY(30px); transition: opacity 1.0s, transform 1.0s; }
.js-fade.in-view { opacity: 1; transform: translateY(0); }

/* ==================================================
   5. Concept Section
   ================================================== */
.concept-section { 
    padding: 120px 0; background-color: #fff; text-align: center; 
    position: relative; overflow: hidden; z-index: 1;
}
.concept-lead { font-size: 2rem; font-weight: bold; color: #000; margin-bottom: 50px; line-height: 1.6; }
.concept-text { font-size: 1.1rem; line-height: 2.4; color: #555; margin-bottom: 30px; }
.concept-text strong { background: linear-gradient(transparent 60%, #FDDC35 60%); font-weight: bold; color: #333; }

/* 装飾 */
.concept-section::before {
    content: "CONCEPT"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 15vw; font-family: 'Montserrat', sans-serif; font-weight: 900; 
    color: #FDDC35; opacity: 0.15; z-index: -1; white-space: nowrap; pointer-events: none;
}
.concept-section::after {
    content: "\f13d"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; bottom: -20px; right: 5%; font-size: 10rem; color: #81D4FA; 
    opacity: 0.15; z-index: -1; transform: rotate(-15deg);
}

/* ==================================================
   6. Works Section (牛乳石鹸風スライダー版)
   ================================================== */
.works-section { 
    padding: 80px 0 160px; 
    overflow: hidden; /* 画面外にはみ出した分を隠す */
    width: 100%;
    position: relative;
}

.works-slider-wrap {
    width: 100%;
    margin-top: 0; 
    padding-top: 60px; /* タイトルとカードの距離 */
    padding-bottom: 20px; /* カードの下の影が見切れないように少し確保 */
}
   
/* ★重要：これを書くと「スーッ」と等速で流れます */
.swiper-wrapper {
    transition-timing-function: linear; 
}

/* スライド1枚のサイズ設定 */
.works-slide-item {
    width: 320px; /* カードの幅 */
    height: auto;
    margin-right: 40px; /* 右の隙間 */
}

/* カードの中身のデザイン */
.works-item-inner {
    background: #fff;
    padding:  30px 25px;
    border-radius: 20px; /* 丸く可愛く */
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border: 3px solid #f0f0f0; /* 薄い枠線 */
    transition: transform 0.3s, border-color 0.3s;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ホバーした時の可愛い動き */
.works-item-inner:hover {
    transform: translateY(-10px); /* ぴょこっと浮く */
    border-color: #FDDC35; /* 枠が黄色になる */
}

/* サムネイル */
.works-thumbnail img {
    width: 100%;
    height: 180px; /* 画像の高さを揃える */
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;
    border: 1px solid #eee;
}

/* タイトル */
.works-title {
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

/* ツールタグ */
.works-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}
.mini-tag {
    font-size: 0.75rem;
    background: #f4f4f4;
    padding: 4px 10px;
    border-radius: 4px;
    color: #666;
    font-weight: bold;
}

/* ボタン */
.works-btn-mini {
    margin-top: auto; /* ボタンを一番下に固定 */
}
.works-btn-mini a {
    display: inline-block;
    padding: 10px 25px;
    background: #FDDC35;
    color: #333;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s;
}
.works-btn-mini a:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .works-slide-item {
        width: 280px; /* スマホでは少し小さく */
        margin-right: 25px;
    }
    .works-section {
        /* 上下 60px にしています */
        padding: 60px 0 100px !important;
    }
    .works-slider-wrap {
        padding-top: 40px; /* スマホでのタイトルとの距離 */
    }
}
/* ==================================================
   7. About & Skills
   ================================================== */
.about-section { padding: 120px 0; background-color: #fff; }
.about-content { display: flex; align-items: center; justify-content: center; gap: 80px; }
.profile-circle { 
    width: 280px; height: 280px; background-color: #eee; border-radius: 50%; 
    background-image: url('images/profile.jpg'); background-size: cover; background-position: center; 
    border: 5px solid #81D4FA; flex-shrink: 0; box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
}
.about-text { padding: 0 20px; max-width: 600px; }
.about-text h3 { font-size: 1.8rem; margin-bottom: 30px; line-height: 1.4; }
.about-text p { font-size: 1.05rem; line-height: 2.2; margin-bottom: 25px; }

/* Skills */
.skills-container { max-width: 1000px; margin: 100px auto 0; padding-top: 80px; border-top: 2px dashed #ddd; }
.skills-title { text-align: center; font-size: 1.4rem; margin-bottom: 60px; font-weight: bold; letter-spacing: 0.1em; }
.skills-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; justify-content: center; max-width: 900px; margin: 0 auto; padding: 0 20px; }

.skill-item { text-align: center; }
.skill-item i { font-size: 50px; color: #81D4FA; margin-bottom: 20px; transition: all 0.3s ease; }
.skill-item:hover i { color: #FDDC35 !important; transform: scale(1.1); }
.skill-name { font-size: 1.2rem; font-weight: bold; margin-bottom: 10px; }
.skill-desc { font-size: 1rem; color: #666; line-height: 1.6; }

/* ==================================================
   8. Contact & Footer
   ================================================== */
.contact-section { padding: 120px 0 180px; background: #f9f9f9; text-align: center; }
.contact-message { font-size: 1.1rem; line-height: 2.2; margin-bottom: 50px; }

.footer { background: #FDDC35; padding: 50px 0 30px; text-align: center; }
.footer-nav { display: flex; justify-content: center; gap: 40px; list-style: none; padding: 0; margin-bottom: 30px; }
.footer-logo {
    font-family: 'Montserrat', sans-serif; /* ★ここが重要！メインと同じフォント */
    font-weight: 800; /* 太くする */
    font-size: 2.2rem; /* 文字を大きく */
    color: #333; /* 文字色（黒） */
    margin-bottom: 20px;
    letter-spacing: 0.05em; /* 文字の間隔を少し空ける */
    padding: 0;
}

/* スマホの時は少し小さく調整 */
@media screen and (max-width: 768px) {
    .footer-logo {
        font-size: 1.8rem;
    }
}
/* ==================================================
   9. Extra Effects (Loading, Ripple, PageTop)
   ================================================== */
/* ローディング画面 */
#loading {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #FDDC35; 
    z-index: 999999; display: flex; justify-content: center; align-items: center; transition: all 0.8s ease-out;
}
#loading.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-text { font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: bold; color: #333; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }

/* クリック波紋 */
.ripple {
    position: absolute; border-radius: 50%; background-color: rgba(253, 220, 53, 0.8);
    transform: scale(0); pointer-events: none; animation: rippleAnim 0.6s linear; z-index: 9999;
}
@keyframes rippleAnim { to { transform: scale(1.5); opacity: 0; } }

/* ページトップボタン */
#page-top {
    position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background-color: #FDDC35; 
    border-radius: 50%; text-align: center; line-height: 60px; color: #333; font-size: 1.5rem; 
    z-index: 999; box-shadow: 0 4px 10px rgba(0,0,0,0.2); opacity: 0; visibility: hidden; 
    transform: translateY(20px); transition: all 0.5s ease; cursor: pointer;
}
#page-top:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.3); }
#page-top:hover i { transform: translateY(-3px); }
#page-top.show { opacity: 1; visibility: visible; transform: translateY(0); }


/* ==================================================
   10. Mobile Responsive (スマホ対応・緊急修正版)
   ================================================== */
@media screen and (max-width: 768px) {
    
    /* ----------------------------------
       1. 全体の土台（横揺れ防止）
    ---------------------------------- */
    body, html {
        overflow-x: hidden; /* 横スクロールを強制禁止 */
        width: 100%;
    }

    .container { 
        width: 100% !important; 
        padding-left: 20px !important; 
        padding-right: 20px !important; 
        box-sizing: border-box !important; 
        max-width: 100% !important;
    }
    
    .section {
        padding-top: 60px !important; 
        padding-bottom: 60px !important;
        overflow: hidden; /* はみ出し防止 */
    }

    /* ----------------------------------
       2. ヘッダー（消えたヘッダーを救出）
    ---------------------------------- */
    header {
        position: absolute !important;
        top: 0; left: 0; width: 100%;
        padding: 15px 20px !important;
        /* Flexboxで左右の要素を「上下中央」に揃える */
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important; /* ★これがズレを直す鍵！ */
        height: 60px; /* 高さを固定して安定させる */
        z-index: 99999 !important;
    }
    
   .header-logo {
        display: flex;
        align-items: center;
        height: 100%; /* 親要素の高さに合わせる */
    }
    .text-logo {
        font-size: 1.2rem !important;
        line-height: 1; /* 行間を締めてズレ防止 */
        color: #fff !important;
    }

    /* スクロール時のヘッダー */
    header.scrolled {
        position: fixed !important;
        background-color: #FDDC35;
    }
    header.scrolled .text-logo {
        color: #333 !important;
    }

    /* ハンバーガーボタンの位置 */
    @media screen and (max-width: 768px) {
    .burger-btn {
        display: block !important;
        position: absolute !important; /* absoluteで細かく指定 */
        top: 50% !important; /* 親要素の高さの50%の位置に */
        right: 20px !important;
        transform: translateY(-50%) !important; /* 自身の高さの半分だけ上に戻す（これで完全な上下中央になる！） */
        width: 30px !important;
        height: 24px !important; /* ボタンエリアのサイズ調整 */
        z-index: 999999 !important;
        margin: 0 !important;
    }
    .burger-btn .bar {
        display: block !important;
        width: 100%;
        height: 2px; /* 少し細くして上品に */
        background-color: #fff !important;
        border-radius: 2px;
        position: absolute;
        left: 0;
        transition: all 0.3s;
    }
    .bar_top { top: 0; }
    .bar_mid { top: 50%; transform: translateY(-50%); } /* 真ん中 */
    .bar_bottom { bottom: 0; }

    .burger-btn.close .bar_top { transform: translate(0, 11px) rotate(45deg); }
    .burger-btn.close .bar_mid { opacity: 0; }
    .burger-btn.close .bar_bottom { transform: translate(0, -11px) rotate(-45deg); }
    
    header.scrolled .burger-btn .bar,
    .burger-btn.close .bar {
        background-color: #333 !important;
    }

    /* スマホメニュー（黄色い画面） */
    nav.sp-nav {
        display: block !important;
        position: fixed;
        top: 0; right: -100%;
        width: 100%;
        height: 100vh; /* 画面いっぱいに */
        background-color: #FDDC35; /* 黄色 */
        z-index: 99998;
        transition: right 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); /* シュッと気持ちよく動く */
        opacity: 1 !important;
        visibility: visible !important;
        
        /* 中身をど真ん中に配置 */
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    nav.sp-nav.slide-in { right: 0 !important; }
    nav.sp-nav ul {
        width: 100%;
        height: auto; /* 高さは中身に合わせる */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 35px; /* メニューの間隔を広げてタップしやすく */
        padding: 0;
        margin: 0;
    }

    nav.sp-nav ul li {
        width: 100%;
        text-align: center;
        opacity: 0; /* 最初は隠しておく */
        transform: translateY(20px); /* 少し下から */
        animation: menuFadeIn 0.5s forwards; /* ふわっと出す */
    }
    
    /* 順番にふわっと出す演出 */
    nav.sp-nav.slide-in ul li:nth-child(1) { animation-delay: 0.3s; }
    nav.sp-nav.slide-in ul li:nth-child(2) { animation-delay: 0.4s; }
    nav.sp-nav.slide-in ul li:nth-child(3) { animation-delay: 0.5s; }
    nav.sp-nav.slide-in ul li:nth-child(4) { animation-delay: 0.6s; }
    nav.sp-nav.slide-in ul li:nth-child(5) { animation-delay: 0.7s; }

    @keyframes menuFadeIn {
        to { opacity: 1; transform: translateY(0); }
    }

    nav.sp-nav ul li a {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.8rem; /* 大きく見やすく */
        font-weight: 800;
        color: #fff !important;
        text-decoration: none;
        display: inline-block;
        position: relative;
    }

    /* アイコンは少し小さく */
    nav.sp-nav ul li a i {
        font-size: 1.2rem;
        color: #fff; /* アイコンも黒に */
        vertical-align: middle;
    }
}

    /* ----------------------------------
       3. ヒーローエリア（FV）
    ---------------------------------- */
    .main-title { 
        font-size: 2.2rem !important; /* デカすぎたので縮小 */
        line-height: 1.2 !important;
        width: 100%;
        word-break: break-all;
    }
    .sub-title { font-size: 1rem !important; margin-top: 10px !important; }
    .hero-top-logo { width: 100px !important; margin-bottom: 20px !important; }
    
    /* ニュースティッカーの位置 */
    .ticker-wrap { bottom: 100px !important; height: 40px !important; }
    .ticker-item { font-size: 0.9rem !important; }

    .concept-lead {padding: 0 15px !important; }
    .concept-text {padding: 0 15px !important; }

    /* ----------------------------------
       4. 実績エリア（崩れ修正）
    ---------------------------------- */
    .works-list { 
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important; 
        margin-top: 30px !important;
    }
    
    .works-item { 
        padding: 20px !important; 
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 画像をカード内に収める */
    .works-thumbnail {
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }
    .works-thumbnail img {
        width: 100% !important;
        height: auto !important;
    }

    /* タイトルや文字のサイズ調整 */
    .section-title { font-size: 1.8rem !important; margin-bottom: 40px !important; }
    .works-title { font-size: 1.4rem !important; margin-top: 10px !important; }
    
    /* ボタン */
    .works-btn-wrap { margin-top: 20px !important; padding-top: 0 !important; }
    .works-btn-wrap a { width: 100%; box-sizing: border-box; padding: 15px; }

    /* ----------------------------------
       5. About（巨大画像の修正）
    ---------------------------------- */
    .about-content { 
        flex-direction: column !important; 
        gap: 30px !important; 
    }
    
    /* ★ここが犯人でした！サイズを強制指定 */
    .profile-circle { 
        width: 150px !important; 
        height: 150px !important; 
        flex-shrink: 0;
        margin: 0 auto !important; /* 真ん中に */
        border-width: 3px !important;
    }
    
    .about-text { padding: 0 15px !important; text-align: left; }
    .about-text h3 { font-size: 1.3rem !important; text-align: center; }

    /* スキルアイコン */
    .skills-list { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 30px 15px !important; /* 縦 横 の隙間 */
    }
    .skill-item i { font-size: 40px !important; }

    /* ----------------------------------
       6. Contact & Footer（デカ文字修正）
    ---------------------------------- */
   
    .footer { padding: 40px 0 20px !important; }
    
    /* フッターのメニューを縦並びに */
    .footer-nav { 
        flex-direction: column; 
        gap: 15px !important; 
        margin-bottom: 30px !important;
    }
    
    /* ★フッターロゴを小さく！ */
    .footer-logo {
        font-size: 1.5rem !important; /* 2.5remから縮小 */
        margin-bottom: 20px !important;
    }
    
    .copyright { font-size: 0.7rem !important; }
}


/* ====================================
   ローディング画面（船プカプカver）
   ==================================== */

/* 1. 画面全体を覆う黄色い幕 */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #FDDC35; /* 黄色 */
    z-index: 999999;
    
    /* 中身をど真ん中に */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.8s ease-out; /* ふわっと消える */
}

/* 中身を縦に並べるための箱 */
.loading-content {
    text-align: center;
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center;
}

/* 2. 船のアニメーション（プカプカ波乗り） */
.loading-ship {
    width: 80px; /* 船のサイズ（お好みで調整！） */
    height: auto;
    margin-bottom: 15px; /* 文字との隙間 */
    
    /* ★ここが動きのポイント！ */
    animation: ship-bob 2.5s ease-in-out infinite;
}

/* 船が波に揺れる動き */
@keyframes ship-bob {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(-5deg); } /* 上に浮きながら少し傾く */
    100% { transform: translateY(0) rotate(0deg); }
}

/* 3. 下の文字（点滅） */
.loading-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    letter-spacing: 0.1em;
    animation: text-pulse 1.5s infinite;
}

@keyframes text-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* 4. 読み込み完了後に「消える」ためのクラス */
#loading.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* ==================================================
   お問い合わせフォーム (Contact Form 7) のデザイン
   ================================================== */

/* フォーム全体の幅と中央寄せ */
.wpcf7 {
    max-width: 700px; /* PCで横に広がりすぎないように */
    margin: 40px auto; /* 中央に配置 */
    padding: 0 20px; /* スマホで端が詰まらないように */
}

/* 各入力項目のラベル（「お名前」など） */
.wpcf7 label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    font-size: 1.1rem;
}

/* 入力エリア（テキストボックス、エリア） */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100%; /* 幅いっぱい */
    padding: 15px; /* 内側の余白を広げて入力しやすく */
    border: 2px solid #ddd; /* 薄いグレーの枠線 */
    border-radius: 10px; /* 角を少し丸く */
    background: #f9f9f9; /* 薄いグレーの背景色 */
    font-size: 1rem;
    transition: all 0.3s ease; /* 入力時の変化を滑らかに */
    box-sizing: border-box; /* paddingを含めた幅計算にする */
}

/* テキストエリア（メッセージ本文）の高さ */
.wpcf7 textarea {
    height: 200px; /* 少し高さを出す */
}

/* 入力エリアをクリックした時のデザイン */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    border-color: #FDDC35; /* 枠線を黄色に */
    background: #fff; /* 背景を白に */
    outline: none; /* デフォルトの青い枠を消す */
    box-shadow: 0 0 10px rgba(253, 220, 53, 0.3); /* 黄色い光をまとわせる */
}

/* 送信ボタン */
.wpcf7 input[type="submit"] {
    display: block;
    width: 300px; /* ボタンの幅 */
    margin: 40px auto 0; /* 中央寄せ */
    padding: 15px;
    background: #FDDC35; /* テーマカラーの黄色 */
    color: #333;
    font-weight: 800;
    font-size: 1.2rem;
    border: none;
    border-radius: 50px; /* 丸いボタンに */
    cursor: pointer; /* カーソルを指マークに */
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 影をつけて浮かせる */
    font-family: 'Montserrat', sans-serif; /* 英語フォントでカッコよく */
}

/* 送信ボタンをホバーした時 */
.wpcf7 input[type="submit"]:hover {
    background: #333; /* 黒色に反転 */
    color: #FDDC35; /* 文字を黄色に */
    transform: translateY(-3px); /* 少し浮き上がる */
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* 影を濃く */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .wpcf7 { margin: 20px auto; }
    .wpcf7 label { font-size: 1rem; }
    .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { padding: 12px; }
    .wpcf7 input[type="submit"] { width: 100%; /* スマホではボタンを横幅いっぱいに */ }
}
/* ==================================================
   マウスストーカーのデザイン
   ================================================== */
#mouse-stalker {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px; /* 通常時の大きさ */
    height: 20px;
    background: rgba(253, 220, 53, 0.6); /* テーマカラーの黄色（少し透けさせる） */
    border-radius: 50%; /* まんまるにする */
    pointer-events: none; /* クリックの邪魔をしないようにする（超重要） */
    z-index: 9999; /* 全ての要素の一番上に表示 */
    transition: width 0.3s, height 0.3s, background 0.3s, transform 0.1s ease-out; /* 動きを滑らかに */
    mix-blend-mode: multiply; /* 背景と重なった時に少し色が変わるオシャレ仕様 */
}

/* リンクに乗った時の変化（大きく薄くなる） */
#mouse-stalker.is-hovering {
    width: 50px;
    height: 50px;
    background: rgba(253, 220, 53, 0.4); /* さらに透けさせる */
}

/* スマホ・タブレットでは非表示（指で操作する時は邪魔なので） */
@media (max-width: 768px) {
    #mouse-stalker {
        display: none;
    }
}
/* ==================================================
   スキルバーのアニメーション
   ================================================== */
.skill-item {
    
    position: relative;
    padding-bottom: 20px;
    transition: transform 0.3s;
}

.skill-item:hover {
    transform: translateY(-5px); 
}


/* .skill-bar-wrap {
    width: 80%;
    height: 6px;
    background: #eee;
    margin: 15px auto 0; 
    border-radius: 10px;
    overflow: hidden; 
    position: relative;
}


.skill-bar {
    display: block;
    height: 100%;
    background: #FDDC35; 
    border-radius: 10px;
    
   
    width: 0; 
    max-width: 0; 
    transition: max-width 1.5s ease-out; 
}


.js-fade.in-view .skill-bar {
    max-width: 100%; 
} */
/* ==================================================
   お問い合わせボタンの修正（レスポンシブ対応版）
   ================================================== */
.contact-button-area {
    text-align: center; /* ボタンを親要素の中央に配置 */
    margin-top: 30px;
    padding: 0 20px; /* スマホで端っこにくっつかないように */
}

.contact-btn {
    display: inline-block; /* ブロック要素にして幅や余白を効かせる */
    box-sizing: border-box; /* paddingを含めたサイズ計算にする（超重要） */
    
    width: 100%; /* 基本は親要素いっぱいに広げる */
    max-width: 320px; /* ただしPCでデカくなりすぎないように制限 */
    
    padding: 18px 30px; /* 上下の余白で高さを出す */
    background: #FDDC35; /* テーマカラー */
    color: #333;
    font-weight: 800;
    font-size: 1.1rem;
    border-radius: 50px; /* 丸く */
    text-decoration: none; /* 下線を消す */
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    
    /* 文字の位置調整 */
    line-height: 1.2; 
    text-align: center;
}

/* ホバー時の動き */
.contact-btn:hover {
    background: #333;
    color: #FDDC35;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* スマホ用の微調整 */
@media (max-width: 768px) {
    .contact-btn {
        max-width: 100%; /* スマホなら横幅いっぱい使う */
        font-size: 1rem; /* 文字を少し小さくして収まりよくする */
        padding: 15px; /* パディングも少しスリムに */
    }
}