/* =========================================================
   layout.css
   レイアウト
   ========================================================= */


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

.site-header {

    background: #ffffff;

    box-shadow: 0 2px 8px rgba(0,0,0,.08);

}


/* ---------------------------------------------------------
   Brand
   --------------------------------------------------------- */

.site-brand {

    background: var(--color-main);

}

.site-brand .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    min-height: 84px;

}


/* 左側 */

.site-brand-left {

    display: flex;

    align-items: center;

    gap: 16px;

    flex: 1;

    min-width: 0;

}

.site-brand-home {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    flex-shrink: 0;

    white-space: nowrap;

}


/* ロゴ */

.site-logo {

    width: 44px;

    height: 44px;

    flex-shrink: 0;

}


/* タイトル */

.site-brand-text {

    min-width: 0;

}

.site-title {

    margin: 0;

    color: #ffffff;

    font-size: 1.85rem;

    font-weight: 700;

    line-height: 1.1;

}

.site-subtitle {

    margin: 2px 0 0;

    color: rgba(255,255,255,.8);

    font-size: .85rem;

    line-height: 1.2;

}


/* 右側SNS */

.site-brand-right {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

}

.header-sns img {

    display: block;

    width: 44px;

    height: 44px;

}


/* =========================================================
   Navigation
   ========================================================= */

.global-nav {

    background: #ffffff;

    border-bottom: 1px solid #dddddd;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

}

.navigation-menu {

    display: flex;

    margin: 0;
    padding: 0;

    list-style: none;

}

.navigation-menu li {

    flex: 1;

}

.navigation-menu a {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    height: 42px;

    text-align: center;

    font-size: .9rem;

    color: #333;

    font-weight: 700;

    white-space: nowrap;

    text-decoration: none;

    border-bottom: 4px solid transparent;

    transition: .2s;

}

.navigation-menu i {

    flex-shrink: 0;

    font-size: 1rem;

    line-height: 1;

}

.navigation-menu a:hover {

    color: var(--color-main);

    border-bottom-color: var(--color-main);

}


/* =========================================================
   Main
   ========================================================= */

main {

    padding: 16px 0 0;

}


/* =========================================================
   Page Layout
   ========================================================= */

.page-layout{

    display:block;

}

.sidebar{

    display:none;

}

.ad-inline{

    display:flex;

    justify-content:center;

    width:100%;

    margin:24px 0;

    overflow:hidden;

    text-align:center;

}

.ad-placeholder{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:320px;

    max-width:100%;

    height:50px;

    background:#f5f5f5;

    color:#777777;

    border:1px dashed #aaaaaa;

    border-radius:6px;

    line-height:1.2;

}

.ad-placeholder-title{

    font-size:.7rem;

    font-weight:700;

    letter-spacing:.08em;

}

.ad-placeholder-size{

    margin-top:2px;

    font-size:.65rem;

}

.ad-placeholder-sidebar{

    width:300px;

    height:250px;

}

.mobile-bottom-ad{

    display:none;

}

@media (min-width:1200px){

    .page-layout{

        display:flex;

        align-items:flex-start;

        justify-content:center;

        gap:32px;

    }

    .main-content{

        width:780px;

        flex:none;

    }

    .sidebar{

        display:block;

        width:300px;

        flex:none;

    }

    .sidebar-card{

        margin-bottom:24px;

        min-height:250px;

        background:#fff;

        border:1px solid #ddd;

        border-radius:8px;

        box-shadow:0 2px 6px rgba(0,0,0,.06);

    }

}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width:1199.98px){

    body{

        padding-bottom:calc(50px + env(safe-area-inset-bottom, 0px));

    }

    .mobile-bottom-ad{

        position:fixed;

        right:0;

        bottom:0;

        left:0;

        z-index:1030;

        display:flex;

        align-items:center;

        justify-content:center;

        height:calc(50px + env(safe-area-inset-bottom, 0px));

        padding-bottom:env(safe-area-inset-bottom, 0px);

        overflow:hidden;

        background:#ffffff;

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

        box-shadow:0 -2px 8px rgba(0,0,0,.08);

    }

    .mobile-bottom-ad .ad-placeholder{

        flex-shrink:0;

    }

}

@media (max-width:599px){

    .site-header{

        position:sticky;

        top:-56px;

        z-index:1020;

    }

    .site-brand .container{

        min-height:56px;

    }

    .site-brand-home{

        gap:8px;

    }

    .site-logo{

        width:28px;

        height:28px;

    }

    .site-title{

        font-size:1.1rem;

    }

    .site-subtitle{

        font-size:.58rem;

    }

    .header-sns img{

        width:32px;

        height:32px;

    }

    .navigation-menu a{

        gap:2px;

        height:36px;

        font-size:.7rem;

    }

    .navigation-menu i{

        font-size:.8rem;

    }

}


/* =========================================================
   Footer
   ========================================================= */

.site-footer {

    margin-top: 56px;

    padding: 20px 0;

    background: var(--color-main);

    color: rgba(255,255,255,.85);

}

.footer-title {

    font-size: 1.2rem;

    font-weight: bold;

}

.footer-subtitle {

    margin-bottom: 1rem;

    color: rgba(255,255,255,.75);

    font-size: .9rem;

}