@charset "utf-8";

/*=========================================================================

【設計思想】
1.枠とモジュールを分ける
2.構造とスキンを分ける
3.なるべく使いまわせるスタイル
4.詳細度は使ったとしても浅めに
5.マルチクラス設計
6.極力スタイルの打ち消し・上書きを使わない
7.拡張性を高める
8.classにセレクタを付けない

【命名規則】
1.接頭辞をつける
2.見た目ではなく意味でつける
3.日本語のローマ字読みは×
4.誰が見てもわかるようにつける
5.Helper class　汎用クラス以外は略語禁止
6.冗長＜わかりやすさ

=========================================================================*/


/*=============================================================================

Layout class　レイアウト

接頭辞「l-」をつける
gridを12分割したレイアウト
gridの個数に応じた数字が付与されている
合計で12以上になるとカラム落ちする
サイズはコメント内参照

=============================================================================*/

/*-------------------------------------

id block  id要素

--------------------------------------*/

/*header*/

.l-header {
    width: 100%;
    height: auto;
    background: #fff;
    position: fixed;
    z-index: 999;
    top: 0;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    box-shadow: 0 0 5px rgba(0,0,0,0)
}

.l-header + div,
.l-header + section{
    margin-top: 168px;
}


/*footer*/

.l-footer {
    clear: both;
    font-size: 13px;
    font-size: 1.3rem;
    margin: 100px 0 0 0;
    background: #F4F3F0;
}


@media screen and (max-width: 767px) {
    
    .l-header + div,
    .l-header + section{
    margin-top: 56px;
    }
    
    nav {
        clear: both;
    }
    
    .l-footer {
        width: 100%;
        clear: both;
        background: #F4F3F0;
        font-size: 13px;
        font-size: 1.3rem;
        margin-top: 60px;
    }
    
    .l-header .c-header-title {
        display: none;
    }

}

/*-------------------------------------

Container コンテナー

--------------------------------------*/


.l-container {
    width: 1040px;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

.l-container-inner{
    width:770px;
    padding: 0 135px;
}

.l-container--footer{
    display: flex;
    padding: 40px 0;
}


@media screen and (max-width: 767px) {
    
    .l-container {
    width: 88%;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    }
    
    .l-header > .l-container{
        width: 100%;
      box-sizing: border-box;
    }

    .l-container-inner{
        width:100%;
        padding: 0;
    }

    .l-container--footer{
        display: block;
        padding: 40px 0;
    }

    
}