@charset "UTF-8";
/*--------------------------------------------------------------
 # Global @MEDIA QUERY
----------------------------------------------------------------

 · SCSS DIR :: \wp-content\themes\tequilajournal\renewal\css\.scss
 · $ scss --watch --style compressed -E UTF-8 ./:../
 · $ scss --watch -E UTF-8 ./:../
--------------------------------------------------------------*/
/*--------------------------------------------------------------
 # Global @FUNCTION
--------------------------------------------------------------*/
/*--------------------------------------------------------------
 # Global @MIXIN :: Default
--------------------------------------------------------------*/
/*--------------------------------------------------------------
 # Global @MIXIN :: Text
--------------------------------------------------------------*/
/*--------------------------------------------------------------
 # Global @MIXIN :: Container (Layout)
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# transition
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# animation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
 # @MEDIA QUERY
----------------------------------------------------------------
 · SCSS DIR :: \Site\TCA-LP\20221015\css\.scss
 · $ scss --watch --style compressed -E UTF-8 ./:../
 · $ scss --watch -E UTF-8 ./:../

 · Mobile(SP)
 ① XS : 0 ~ 359px
 ② S : 360 ~ 599px 
 · Tablet
 ① M : 600 ~ 904px 
 · PC
 ① L : 905 ~ 1279px 
 ② XL : 1280 ~ 1439px
 ③ XXL : 1440 ~
--------------------------------------------------------------*/
/*--------------------------------------------------------------
 # common pages 
--------------------------------------------------------------*/
/*--------------------------------------------------------------
 # tabnav-page
--------------------------------------------------------------*/
.tabnav-page {
  font-family: 'Noto Sans JP',  "Meiryo", "メイリオ", 'Arial', 'Notosans', sans-serif;
  display: -ms-flexbox;
  display: -moz-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-box-lines: single;
  -moz-box-lines: single; }
  .tabnav-page .tabnav-item {
    position: relative;
    padding: 0 10px;
    margin: 0 0 20px;
    height: 50px;
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -moz-box-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    background-color: #339999;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .tabnav-page .tabnav-item::before {
      content: '';
      position: absolute;
      display: block;
      z-index: 0;
      left: 0;
      top: 0;
      width: 0;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      -o-transition: width 500ms ease-in-out;
      -ms-transition: width 500ms ease-in-out;
      -moz-transition: width 500ms ease-in-out;
      -webkit-transition: width 500ms ease-in-out;
      transition: width 500ms ease-in-out; }
    .tabnav-page .tabnav-item i:not(.end) {
      font-family: 'lumberjack-inline-rough', sans-serif;
      margin-right: 1rem;
      font-size: 24px;
      font-style: normal;
      color: #000; }
    .tabnav-page .tabnav-item i.end {
      position: absolute;
      z-index: 0;
      right: 0;
      bottom: 0;
      width: 30px;
      height: 30px;
      overflow: hidden; }
      .tabnav-page .tabnav-item i.end::before {
        content: '';
        position: absolute;
        right: -15px;
        bottom: -15px;
        width: 100%;
        height: 100%;
        background-color: #000;
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg); }
      .tabnav-page .tabnav-item i.end, .tabnav-page .tabnav-item i.end::before {
        -o-transition: all 150ms ease;
        -ms-transition: all 150ms ease;
        -moz-transition: all 150ms ease;
        -webkit-transition: all 150ms ease;
        transition: all 150ms ease; }
    .tabnav-page .tabnav-item span {
      position: relative;
      z-index: 1;
      color: #ffffff;
      font-size: 1rem;
      font-weight: bold; }
    @media (hover: hover), (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .tabnav-page .tabnav-item:hover::before {
        width: 100%; }
      .tabnav-page .tabnav-item:hover i.end {
        width: 34px;
        height: 34px; }
        .tabnav-page .tabnav-item:hover i.end::before {
          right: -17px;
          bottom: -17px; } }

.mobile-0 .tabnav-page .tabnav-item {
  -webkit-box-flex: 0;
  -ms-flex: 1 1 23.5%;
  flex: 1 1 23.5%; }
  .mobile-0 .tabnav-page .tabnav-item:nth-child(4n+1), .mobile-0 .tabnav-page .tabnav-item:nth-child(4n+2), .mobile-0 .tabnav-page .tabnav-item:nth-child(4n+3) {
    margin-right: 2%; }

.mobile-1 .tabnav-page .tabnav-item {
  margin: 0 0 1em; }
  .mobile-1 .tabnav-page .tabnav-item i:not(.end) {
    font-size: 18px; }
  @media screen and (max-width: 479px) {
    .mobile-1 .tabnav-page .tabnav-item span br {
      display: none; } }
  @media screen and (max-width: 374px) {
    .mobile-1 .tabnav-page .tabnav-item {
      -webkit-box-flex: 0;
      -ms-flex: 1 1 100%;
      flex: 1 1 100%; } }
  @media screen and (min-width: 375px) {
    .mobile-1 .tabnav-page .tabnav-item {
      -webkit-box-flex: 0;
      -ms-flex: 1 1 49%;
      flex: 1 1 49%; }
      .mobile-1 .tabnav-page .tabnav-item:nth-child(2n+1) {
        margin-right: 2%; } }

/*# sourceMappingURL=common-page.css.map */