@charset "UTF-8";

/*=============================================
レイアウトに関するCSS
=============================================*/

body{
    background: var(--grey-bg);
}

.container{
    max-width: 1000px;
    margin-inline:auto;
    @media(max-width:1000px){
        padding:0 3%;
    }
}

/*---------------------------------
header
---------------------------------*/

header{
    /* position:relative; */
    position: sticky;
    position: -webkit-sticky; /* Safari */
    top: 0;
    z-index: 1000;
    padding-bottom:20px;
    background: rgba(249, 248, 244, 0.9);
    &:has(.home){
        margin-bottom:4em;
    }
}
.home header{
    @media(min-width: 768px){
        margin-bottom:4em;
    }
}

/* ロゴの表示・レスポンシブでずれるため細かく設定 */
.home .head-logo{    
    width:240px;
    @media(min-width: 1200px){
        position:absolute;       
        top:40px;
        left:50%;
        transform:translate(-300%);
    }
    @media(max-width:600px){
        width:160px;
    }
    @media( min-width:600px){
        position:absolute;
    }
    &.is-active{
        top:0;
    }    
}

.header-inner{
    padding-right:100px;
}

/* 下層ページのヘッダー */

.header-inner-page{
    display: grid;
    grid-template-columns: auto 1fr;
    padding-right:100px;
        padding-left: 20px;
    h1 img{
        max-width: 200px;
    }
}

/*---------------------------------
main
---------------------------------*/
@media(max-width:767px){
    main{
        padding-bottom:100px;
    }
}


/*---------------------------------
footer
---------------------------------*/
footer{
    background: var(--blue-dark);
    @media(min-width: 768px){
        padding:1em;
    }
}

@media(max-width:767px){
    .footer.show{
        position: fixed;
        bottom:0;
        left:0;
        width:100%;
        z-index: 1000;
        margin-top:100px;
    }
}
.footer-inner{
    display: grid;
    justify-content:center;
    grid-template-columns: repeat(3,240px);
    column-gap: 3em;
}
.foot-nav{
    li{
        font-size:1.3rem;
        color:#fff;
    }
}
.foot-nav-first a{
    border:1px solid #fff;
    padding:0.4em;
    margin-bottom: 1em;
    display: block;
    text-align: center;
}
footer h5{
    color:#fff;
}

/* コピーライト */
.foot-copyright{
    text-align: center;
    font-size:clamp(1.2rem,1.3vw,1.3rem);
    color: #fff;
    padding-bottom:0.5em;
    @media(min-width: 768px){
        margin-block: 2em;
    }
}

/*---------------------------------
スマホ用ナビゲーション
---------------------------------*/

.s-foot-nav-wrapper{
    display: fixed;
    bottom:0;
    left:0;
    background: var(--blue-dark);
}

.s-foot-nav{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-bottom:1px solid #fff;
    li{
        text-align: center;
        padding:0.5em 0;
    }
    li:not(:last-of-type){              
        border-right:1px solid #fff;
    }
        a{
            text-decoration: none;            
            color:#fff;
        }
    }

/*---------------------------------
ページトップへ戻るボタン
---------------------------------*/

#scrollTopBtn{
    position: fixed;
    bottom: 0;
    right: 0;
    cursor: pointer;
    z-index: 100;
}


/*---------------------------------
ページトップへ戻るボタン
---------------------------------*/
.container-green{
    background: var(--green-bg);
}