/*
Theme Name: Formingho
Theme URI: 
Template: blankslate
Author: Web Guy
Author URI: https://opencollective.com/blankslate#section-contributors
Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/webguyio/blankslate/issues. Thank you.
Tags: accessibility-ready,one-column,two-columns,custom-menu,featured-images,microformats,sticky-post,threaded-comments,translation-ready
Version: 2025.1758723919
Updated: 2025-09-24 23:25:19

*/

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo img {
    height: 100px; /* ロゴの高さに合わせて調整 */
    vertical-align: middle;
}

.hamburger {
    display: none; /* デスクトップでは非表示 */
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #555;
    padding: 10px 20px 10px 0;
    transition: transform 0.3s ease;
}

/* ハンバーガーアイコンのアニメーション */
.hamburger.open .fas.fa-bars {
    transform: rotate(90deg); /* 開いたときに少し回転させるなど */
}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* デスクトップでは横並び */
}

.menu-list li {
    margin-left: 30px;
}

.menu-list a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    font-size: 1.1em;
    padding: 8px 0;
    transition: color 0.3s ease;
    position: relative;
}

.menu-list a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #ffb6c1; /* フラミンゴピンク */
    transition: width 0.3s ease;
}

.menu-list a:hover {
    color: #ff69b4; /* ホバーで少し濃いピンク */
}

.menu-list a:hover::after {
    width: 100%;
}

/* レスポンシブデザイン（モバイル向け） */
@media (max-width: 768px) {
    .hamburger {
        display: block; /* モバイルで表示 */
		z-index:99;
    }

    .menu-list {
        display: none; /* デフォルトで非表示 */
        flex-direction: column;
        position: absolute;
        top: 150px; /* ヘッダーの高さに合わせて調整 */
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
        z-index:98;
        padding: 0;
        animation: slideIn 0.3s forwards; /* スライドインアニメーション */
    }

    .menu-list.active {
        display: flex; /* アクティブ時に表示 */
    }

    .menu-list li {
        margin: 0;
        text-align: center;
        padding: 10px 0;
    }

    .menu-list a {
        display: block;
        padding: 10px 20px;
        color: #333;
    }

    .menu-list a::after {
        display: none; /* モバイルではアンダーラインを非表示にするか、別途スタイルを適用 */
    }

    .menu-list a:hover {
        background-color: #f0f0f0;
    }

    /* スライドインアニメーション */
    @keyframes slideIn {
        from {
            transform: translateY(-20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

/* メインコンテンツのスタイル例 */
main {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}