/* ==========================================================
   HEADER.CSS
   Project : Palette Global
   CMS     : SocialCast
   Version : 2.0
   ========================================================== */

/* ==========================================================
   01. CSS Variables
   ========================================================== */

:root{

    /* Layout */
    --container-width:1280px;
    --header-height:100px;
    --logo-width:210px;

    /* Spacing */
    --space-xs:8px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:32px;
    --space-xl:48px;

    /* Brand Color */
    --color-primary:#674498;
    --color-primary-hover:#5b3d87;
    --color-accent:#674498;

    /* Base Color */
    --color-white:#ffffff;
    --color-text:#333333;
    --color-border:#e5e5e5;
    --color-background:#ffffff;

    /* Animation */
    --transition:.3s ease;

}

/* ==========================================================
   02. Common Container
   ========================================================== */

.site-container{

    width:100%;
    max-width:var(--container-width);

    margin:0 auto;

    padding-left:var(--space-md);
    padding-right:var(--space-md);

}

/* ==========================================================
   03. Header
   ========================================================== */

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:var(--header-height);

    background:#fff;

    border-bottom:1px solid var(--color-border);

    z-index:1000;

    transition:
        box-shadow .3s ease,
        background-color .3s ease;

}

.site-header:hover{

    box-shadow:0 8px 30px rgba(0,0,0,.05);

}

/* ==========================================================
   04. Header Inner
   ========================================================== */

.site-header__inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:100%;

    gap:40px;

}

/* ==========================================================
   05. Logo
   ========================================================== */

.site-logo{

    width:220px;

    flex:0 0 auto;

    padding-top:8px;

}

.site-logo a{

    display:block;

}

.site-logo__image{

    display:block;

    width:100%;
    max-width:var(--logo-width);

    height:auto;

    transition:var(--transition);

}

.site-logo__image:hover{

    opacity:.9;

}

/* ==========================================================
   06. Navigation Wrapper
   ========================================================== */

.site-nav{

    flex:1;

    display:flex;

    justify-content:center;

    min-width:0;

}

/* ==========================================================
   07. Global Navigation
   ========================================================== */

.site-nav__list{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:48px;

    margin:0;
    padding:0;

    list-style:none;

}

.site-nav__item{

    margin:0;
    padding:0;

    flex-shrink:0;

}

.site-nav__link{

    position:relative;

    display:block;

    padding:8px 0;

    color:var(--color-text);

    font-size:18px;

    font-weight:500;

    text-decoration:none;

    letter-spacing:.05em;

    white-space:nowrap;

    transition:var(--transition);

}

.site-nav__link::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-6px;

    width:0;
    height:2px;

    background:var(--color-accent);

    transform:translateX(-50%);

    transition:var(--transition);

}

.site-nav__link:hover{

    color:var(--color-primary);

    text-decoration:none;

}

.site-nav__link:hover::after{

    width:100%;

}

/* ==========================================================
   08. Account Area
   ========================================================== */

.site-account{

    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

}

/* Bootstrapボタンを上書き */

.site-account .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:110px;
    height:42px;

    padding:0 18px;

    border-radius:999px;

    font-size:14px;

    font-weight:600;

    transition:var(--transition);

}

/* 新規登録 */

.site-account .btn-accent,
.site-account .btn-accent:link,
.site-account .btn-accent:visited{

    color:#333333 !important;

    background:#ffffff !important;

    border:1px solid #dddddd !important;

}

.site-account .btn-accent:hover{

    color:var(--color-primary) !important;

    background:#ffffff !important;

    border-color:var(--color-primary) !important;

}

/* ログイン */

.site-account .btn-theme{

    color:#fff;

    background:var(--color-primary);

    border:1px solid var(--color-primary);

}

.site-account .btn-theme:hover{

    color:#fff;

    background:var(--color-primary-hover);

    border-color:var(--color-primary-hover);

}

/* アイコン */

.site-account .btn i{

    margin-left:8px;

    font-size:13px;

}

/* ==========================================================
   09. Logged In User
   ========================================================== */

.box-dropdown-key{

    display:flex;

    align-items:center;

    gap:8px;

    height:42px;

    padding:0 18px;

    border-radius:999px;

    cursor:pointer;

}

.box-dropdown-key i{

    font-size:14px;

}

/* ==========================================================
   10. Dropdown
   ========================================================== */

.dropdown-wrapper{

    position:relative;

}

.dropdown-container{

    position:absolute;

    top:calc(100% + 12px);
    right:0;

    min-width:240px;

    background:#fff;

    border:1px solid var(--color-border);

    border-radius:12px;

    box-shadow:0 12px 32px rgba(0,0,0,.08);

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:var(--transition);

    z-index:100;

}

.dropdown-wrapper:hover .dropdown-container{

    opacity:1;
    visibility:visible;

    transform:translateY(0);

}

.box-dropdown-target{

    margin:0;
    padding:12px 0;

    list-style:none;

}

.box-dropdown-target li{

    margin:0;

}

.box-dropdown-target a{

    display:block;

    padding:12px 20px;

    color:var(--color-text);

    text-decoration:none;

    transition:var(--transition);

}

.box-dropdown-target a:hover{

    color:var(--color-primary);

    background:#f8f6fc;

}

/* ==========================================================
   11. Body Offset
   ========================================================== */

body{

    padding-top:var(--header-height);

}

/* ==========================================================
   12. Accessibility
   ========================================================== */

.site-nav__link:focus,
.site-account .btn:focus,
.box-dropdown-target a:focus{

    outline:none;

    box-shadow:0 0 0 3px rgba(103,68,152,.18);

    border-radius:6px;

}

/* ==========================================================
   13. Selection
   ========================================================== */

::selection{

    color:#333;

    background:rgba(103,68,152,.18);

}

/* ==========================================================
   14. Utility
   ========================================================== */

.site-header *{

    box-sizing:border-box;

}

.site-header a{

    transition:var(--transition);

}

/* 未使用のスマホメニューボタンは非表示 */

.site-menu-button{

    display:none;

}

/* ==========================================================
   15. Small Desktop
   1101px - 1280px
   ========================================================== */

@media screen and (max-width:1280px) and (min-width:1101px){

    .site-header__inner{

        gap:24px;

    }

    .site-logo{

        width:190px;

    }

    .site-nav__list{

        gap:30px;

    }

    .site-nav__link{

        font-size:18px;

    }

    .site-account{

        gap:8px;

    }

    .site-account .btn{

        min-width:96px;

        padding:0 14px;

        font-size:13px;

    }

}

/* ==========================================================
   16. Narrow Desktop
   901px - 1100px
   ========================================================== */

@media screen and (max-width:1100px) and (min-width:901px){

    .site-container{

        padding-left:16px;
        padding-right:16px;

    }

    .site-header__inner{

        gap:14px;

    }

    .site-logo{

        width:150px;

        padding-top:4px;

    }

    .site-nav__list{

        gap:15px;

        flex-wrap:nowrap;

    }

    .site-nav__link{

        font-size:18px;

        letter-spacing:.02em;

    }

    .site-account{

        gap:6px;

    }

    .site-account .btn{

        min-width:84px;
        height:40px;

        padding:0 11px;

        font-size:12px;

    }

    .site-account .btn i{

        margin-left:5px;

    }

}

/* ==========================================================
   17. Very Narrow Desktop / Browser Reduced
   768px - 900px
   ========================================================== */

@media screen and (max-width:900px) and (min-width:768px){

    :root{

        --header-height:145px;

    }

    .site-container{

        padding-left:16px;
        padding-right:16px;

    }

    .site-header{

        height:var(--header-height);

    }

    .site-header__inner{

        flex-wrap:wrap;

        align-content:center;

        gap:8px 16px;

        padding-top:10px;
        padding-bottom:10px;

    }

    .site-logo{

        width:155px;

        padding-top:0;

    }

    .site-account{

        margin-left:auto;

        gap:8px;

    }

    .site-account .btn{

        min-width:90px;
        height:40px;

        padding:0 12px;

        font-size:12px;

    }

    .site-account .btn i{

        margin-left:5px;

    }

    .site-nav{

        order:3;

        flex:0 0 100%;

        width:100%;

        justify-content:center;

    }

    .site-nav__list{

        width:100%;

        gap:32px;

        flex-wrap:nowrap;

    }

    .site-nav__link{

        padding:8px 0;

        font-size:13px;

        white-space:nowrap;

    }

    body{

        padding-top:var(--header-height);

    }

}

/* ==========================================================
   18. PC Browser Reduced Below 768px
   マウス操作のPCブラウザのみ対象
   実機スマホ用CSSとの干渉を避ける
   ========================================================== */

@media screen and (max-width:767px) and (hover:hover) and (pointer:fine){

    :root{

        --header-height:150px;

    }

    .site-header{

        height:var(--header-height);

    }

    .site-container{

        padding-left:16px;
        padding-right:16px;

    }

    .site-header__inner{

        display:flex;

        flex-wrap:wrap;

        align-content:center;

        gap:8px 16px;

        padding-top:10px;
        padding-bottom:10px;

    }

    .site-logo{

        width:150px;

        padding-top:0;

    }

    .site-account{

        margin-left:auto;

        gap:8px;

    }

    .site-account .btn{

        min-width:auto;
        height:38px;

        padding:0 13px;

        font-size:12px;

    }

    .site-account .btn i{

        margin-left:5px;

    }

    .site-nav{

        order:3;

        flex:0 0 100%;

        width:100%;

        justify-content:center;

    }

    .site-nav__list{

        width:100%;

        gap:20px;

        flex-wrap:nowrap;

    }

    .site-nav__link{

        padding:8px 0;

        font-size:13px;

        white-space:nowrap;

    }

    body{

        padding-top:var(--header-height);

    }

}

/* ==========================================================
   19. Extra Narrow PC Browser
   ========================================================== */

@media screen and (max-width:560px) and (hover:hover) and (pointer:fine){

    :root{

        --header-height:145px;

    }

    .site-container{

        padding-left:12px;
        padding-right:12px;

    }

    .site-header__inner{

        gap:8px 10px;

    }

    .site-logo{

        width:130px;

    }

    .site-account{

        gap:6px;

    }

    .site-account .btn{

        height:36px;

        padding:0 11px;

        font-size:11px;

    }

    .site-account .btn i{

        margin-left:4px;

        font-size:11px;

    }

    .site-nav__list{

        gap:16px;

    }

    .site-nav__link{

        font-size:12px;

    }

}

/* ==========================================================
   End Header
   ========================================================== */