@charset "utf-8";

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

Layout class　レイアウト

接頭辞「l-」をつける

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

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

id block  id要素

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


/*header*/

.l-header {
    width: 100%;
    height: auto;
    -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 3px rgba(0,0,0,0.1);
  /*border-bottom: 1px solid #eee;*/
/*
    position: absolute;
    top: 0;
*/
    z-index: 99;
    background: #fff;
/*
    margin: auto;
    left: 0;
*/
/*  width: calc(100% - 20px);*/
}
/*

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


/*footer*/

.l-footer {
    clear: both;
    font-size: 13px;
    font-size: 1.3rem;
    margin: 0;
 background: url(/img/common/bg-tex.png) rgba(0,0,0,.04);
     box-shadow: inset 0px 3px 3px -3px rgba(0,0,0,0.3);
}


@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;*/
/*      background: #eee;*/
        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.flex{
  display: flex;
  flex-wrap: nowrap;
}

.l-container-inner{
/*
    width:780px;
    padding: 0 130px;
*/
   width:840px;
    padding: 0 100px;
  margin: 0 auto;
}

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

.l-widget{
  flex-basis: 22%;
  max-width: 22%;
  margin-left: 4%;
  order: 2;
  letter-spacing: 0.05em;
}

.l-content{
  flex-basis: 74%;
  max-width: 74%;
  order: 1;
}


@media screen and (max-width: 767px) {
    .l-container {
      width: 88%;
      margin: 0 auto;
      position: relative;
      box-sizing: border-box;
    }
    
    .l-container.flex {
      display: block;
    }
    
    .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;
    }
    
    .l-widget,
    .l-content {
      flex-basis: 100%;
      max-width: 100%;
    }
    
    .l-widget {
      order: 2;
      margin-left: 0;
    }
    
    .l-content {
      order: 1;
    } 
}