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

layout(構造体)
   body
      allwrapper
        header
          nav > gnav > li, submenu > li
        main
          article
            container
            contents
            main-content, side-content
              flex, flex-reverse, flex-left, flex-right, flex-item-col-1, flex-item-nest
              flex-label, flex-table-group, flex-table-label, flex-input, flex-textarea(フレックステーブル用)
            section
              part, widget
            wrapper
          aside
        footer
          footer-info
          fnav > li

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

/*--------------
  主要構造体
  --------------*/
article {}

.allwrapper {
  margin: 0 auto;
  min-height: calc(100vh - 188px);
}

.header {
  /* background-color: #fff; */
}

.wrapper {}

.section {
  padding: 3rem 0;
}

.container {}

.contents {
  padding: 0 1rem;
}

.footer {
  clear: both;
  padding: 3rem 0;
  background-color: #fff;
}

.footer_nav {}

.footer_nav li {
  font-size: 1.6rem;
}

.footer_nav li span {
  display: flex;
  margin: 1rem 0;
  color: #fff;
}

.sticky-footer {
  /* height: 138px; */
}

@media screen and (min-width: 768px) {
  .header {}

  .section {
    padding: 3rem 0;
  }

  .container {}

  .contents {
    padding: 0;
    width: 960px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 920px) {}


/*--------------
  グローバルナビゲーション
  --------------*/
.nav {
  position: relative;
  z-index: 9;
  padding: 0;
  border-top: 0.5px solid #ccc;
}

.nav_admin {
  position: relative;
}

.gnav {
  display: none;
  color: #4b2520;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  position: absolute;
  z-index: 10;
  border-bottom: thin solid #ccc;
}

.gnav > li {
  list-style-type: none;
  text-align: center;
  position: relative;
  border-left: thin solid #fff;
  transition: all 0.3s;
  background-color: #f08300;
}

.gnav > li:hover {
  transition-duration: 0.4s;
  background-color: #ffc6b0;
}

.gnav > li a {
  line-height: 5rem;
  position: relative;
  height: 5rem;
  text-align: center;
  text-decoration: none;
  color: #fff;
  display: block;
}

.gnav > li a:hover {}

.gnav > li:last-child {
  border-right: thin solid #fff;
}

/*--- サブメニュー ---*/
.submenu {
  display: none;
  z-index: 10;
  width: 100%;
}

.submenu > li {
  display: block;
  width: 100%;
  list-style-type: none;
  background-color: #727171;
  opacity: 0.6;
}

.submenu > li > a {
  line-height: 5rem;
  display: block;
  height: 5rem;
  text-align: center;
  text-decoration: none;
  /* border-right: thin solid #ccc;
    border-left: thin solid #ccc; */
}

@media screen and (min-width: 768px) {
  .nav {
    border-top: none;
    background-color: #f08300;
  }

  .nav:focus {
    color: red;
  }

  .nav_admin {
    border-bottom: 1px solid #ccc;
    background-color: #f08300;
  }

  .nav_users {
    background-color: #707070 !important;
  }

  .gnav {
    z-index: 2;
    display: flex;
    position: static;
    padding: 0;
    border-bottom: none;
  }

  .gnav_admin {
    margin: 0 1rem;
  }

  .gnav_users {
    background-color: #707070 !important;
  }

  .gnav > li {
    /* width: 16.66666666666667%; */
    width: 25%;
  }

  .gnav > li:hover {

  }

  /*--- ナビ装飾 ---*/
  /* .gnav > li > a::before {
      display: block;
      width: 0;
      margin: 0 auto;
      content: "";
      transition: width 0.3s ease-in-out;
      border-bottom: 1px solid #ccc;
    }

    .gnav > li > a:hover::before {
      width: 50%;
    } */

  /*--- ナビ区切り線 ---*/
  /* .gnav > li > a::after {
      position: absolute;
      top: 1.1rem;
      right: 0;
      display: block;
      width: 1px;
      height: 2rem;
      content: "";
      background-color: #b53942;
    }

    .gnav > li:last-child > a::after {
      background-color: transparent;
    } */


  /*--- サブメニュー ---*/
  .submenu {
    position: absolute;
    /* width: 15%; */
    width: 100%;
  }

  .submenu > li {
    border: none;
    background-color: #727171;
  }

  .submenu > li:last-child {
    border-bottom: thin solid #ccc;
  }

  .submenu > li > a {
    border-right: thin solid #fff;
    border-left: thin solid #fff;
  }

  .submenu > li > a:hover {
    background-color: #f08300;
    color: #fff;
  }

  .submenu_admin > li > a:hover {
    background-color: #707070 !important;
  }

  .submenu_users > li > a:hover {
    background-color: #707070 !important;
  }
}

@media screen and (min-width: 920px) {}


/*--------------
  カラムレイアウト
  --------------*/
.main-content {
  width: 100%;
}

.side-content {
  width: 100%;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

@media screen and (min-width: 768px) {
  .main-content {
    /* max-width: 820px; */
    width: 660px;
    padding-bottom: 2rem;
  }

  .side-content {
    max-width: 300px;
    margin-top: 0;
  }
}

@media screen and (min-width: 920px) {
  .main-content {
  }
}

/*--------------
  フレックスレイアウト
  --------------*/
.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-reverse {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-left {
  display: flex;
  justify-content: flex-start;
  /* align-content:flex-start; */
  flex-wrap: wrap;
}

.flex-right {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.flex-item-col-1,
.flex-item-col-10,
.flex-item-col-11,
.flex-item-col-12,
.flex-item-col-2,
.flex-item-col-3,
.flex-item-col-4,
.flex-item-col-5,
.flex-item-col-6,
.flex-item-col-7,
.flex-item-col-8,
.flex-item-col-9 {
  width: 100%;
  /* padding: 0.5rem 0; */
}

@media screen and (min-width: 768px) {
  .flex-item-col-1,
  .flex-item-col-10,
  .flex-item-col-11,
  .flex-item-col-12,
  .flex-item-col-2,
  .flex-item-col-3,
  .flex-item-col-4,
  .flex-item-col-5,
  .flex-item-col-6,
  .flex-item-col-7,
  .flex-item-col-8,
  .flex-item-col-9 {
    /* padding: 0 0 1rem; */
  }

  .flex-item-col-1 {
    width: 8.333%;
  }

  .flex-item-col-2 {
    width: 16.667%;
  }

  .flex-item-col-3 {
    width: 25%;
  }

  .flex-item-col-4 {
    width: 33.333%;
  }

  .flex-item-col-5 {
    width: 41.666%;
  }

  .flex-item-col-6 {
    width: 50%;
  }

  .flex-item-col-7 {
    width: 58.333%;
  }

  .flex-item-col-8 {
    width: 66.666%;
  }

  .flex-item-col-9 {
    width: 75%;
  }

  .flex-item-col-10 {
    width: 83.33%;
  }

  .flex-item-col-11 {
    width: 91.666%;
  }

  .flex-item-col-12 {
    width: 100%;
  }

  .flex-item-col-6:nth-child(2n) {
    width: 50%;
    /* padding-right: 0; */
  }
}

@media screen and (min-width: 920px) {}

.flex-item-nest {
  padding: 0.2rem 0 0;
}

.flex-item-nest:last-child {}

@media screen and (min-width: 768px) {
  .flex-item-nest {
    width: 50%;
    float: left;
    padding: 0;
  }

  .flex-item-nest:last-child {
    padding-left: 0.7rem;
  }
}

@media screen and (min-width: 920px) {}


/*--------------
  フレックステーブル用
  --------------*/
.flex-table-group {
  margin-bottom: 1rem;
}

.flex-label,
.flex-label-textarea {
  font-size: 1.4rem;
  display: inline-block;
}

@media screen and (min-width: 768px) {
  .flex-table-group {
    padding: 0.5rem 0 1rem;
    border-radius: 5px;
  }

  .flex-table-label {
    vertical-align: middle;
  }

  .flex-table-label-textarea {
    vertical-align: top;
  }

  .flex-input,
  .flex-textarea {
    width: 100%;
  }
}

@media screen and (min-width: 920px) {}