@charset "utf-8";


/* ==================================================================== */
/* 全ページ共通のユーティリティ用CSS */
/* リニューアルの際にはファイルを正しく分ける。 */
/* ==================================================================== */

//media quiery
$breakpoints: (
        'small': 'screen and (max-width: 350px)',
        'medium': 'screen and (max-width: 768px)',
        'large': 'screen and (min-width: 769px)',
        'xlarge': 'screen and (min-width: 1060px)',
) !default;

//@include media(sm) { ..... } こんな感じで呼び出す

@mixin media($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media #{unquote(map-get($breakpoints, $breakpoint))} {
      @content;
    }
  } @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

$space-xl: 4rem;
$space-l: 3rem;
$space-m: 2rem;
$space-s: 1.5rem;
$space-xs: 1rem;



/* 継承の優先順位を上げるために#wrapを指定。リニューアルなどの際には適宜書き換えること。 */
#wrap{

  a.color-primary{
    color: #E4CE9A;
    &:hover{
      color: #f8e2ac;
    }
  }

  /*margin.css*/
  .margin{
    &-5px{ margin: 5px; }
    &-6px{ margin: 6px; }
    &-7px{ margin: 7px; }
    &-8px{ margin: 8px; }
    &-9px{ margin: 9px; }
    &-10px{ margin: 10px; }
    &-xl{ margin: $space-xl; }
    &-l{ margin: $space-l; }
    &-m{ margin: $space-m; }
    &-s{ margin: $space-s; }
    &-xs{ margin: $space-xs; }
    &-auto { margin: auto; }
    &-top{
      &-5px{ margin-top: 5px; }
      &-6px{ margin-top: 6px; }
      &-7px{ margin-top: 7px; }
      &-8px{ margin-top: 8px; }
      &-9px{ margin-top: 9px; }
      &-10px{ margin-top: 10px; }
      &-xl{ margin-top: $space-xl; }
      &-l{ margin-top: $space-l; }
      &-m{ margin-top: $space-m; }
      &-s{ margin-top: $space-s; }
      &-xs{ margin-top: $space-xs; }
      &-auto { margin-top: auto;}
    }
    &-right{
      &-5px{ margin-right: 5px; }
      &-6px{ margin-right: 6px; }
      &-7px{ margin-right: 7px; }
      &-8px{ margin-right: 8px; }
      &-9px{ margin-right: 9px; }
      &-10px{ margin-right: 10px; }
      &-xl{ margin-right: $space-xl; }
      &-l{ margin-right: $space-l; }
      &-m{ margin-right: $space-m; }
      &-s{ margin-right: $space-s; }
      &-xs{ margin-right: $space-xs; }
      &-auto { margin-right: auto; }
    }
    &-bottom{
      &-5px{ margin-bottom: 5px; }
      &-6px{ margin-bottom: 6px; }
      &-7px{ margin-bottom: 7px; }
      &-8px{ margin-bottom: 8px; }
      &-9px{ margin-bottom: 9px; }
      &-10px{ margin-bottom: 10px; }
      &-xl{ margin-bottom: $space-xl; }
      &-l{ margin-bottom: $space-l; }
      &-m{ margin-bottom: $space-m; }
      &-s{ margin-bottom: $space-s; }
      &-xs{ margin-bottom: $space-xs; }
      &-auto { margin-bottom: auto; }
    }
    &-left{
      &-5px{ margin-left: 5px; }
      &-6px{ margin-left: 6px; }
      &-7px{ margin-left: 7px; }
      &-8px{ margin-left: 8px; }
      &-9px{ margin-left: 9px; }
      &-10px{ margin-left: 10px; }
      &-xl{ margin-left: $space-xl; }
      &-l{ margin-left: $space-l; }
      &-m{ margin-left: $space-m; }
      &-s{ margin-left: $space-s; }
      &-xs{ margin-left: $space-xs; }
      &-auto { margin-left: auto; }
    }
    &-horizontal{
      &-5px{ margin-right: 5px; margin-left: 5px; }
      &-6px{ margin-right: 6px; margin-left: 6px; }
      &-7px{ margin-right: 7px; margin-left: 7px; }
      &-8px{ margin-right: 8px; margin-left: 8px; }
      &-9px{ margin-right: 9px; margin-left: 9px; }
      &-10px{ margin-right: 10px; margin-left: 10px; }
      &-xl{ margin-right: $space-xl; margin-left: $space-xl; }
      &-l{ margin-right: $space-l; margin-left: $space-l; }
      &-m{ margin-right: $space-m; margin-left: $space-m; }
      &-s{ margin-right: $space-s; margin-left: $space-s; }
      &-xs{ margin-right: $space-xs; margin-left: $space-xs; }
      &-auto { margin-left: auto; margin-right: auto; }
    }
    &-vertical{
      &-5px{ margin-top: 5px; margin-bottom: 5px; }
      &-6px{ margin-top: 6px; margin-bottom: 6px; }
      &-7px{ margin-top: 7px; margin-bottom: 7px; }
      &-8px{ margin-top: 8px; margin-bottom: 8px; }
      &-9px{ margin-top: 9px; margin-bottom: 9px; }
      &-10px{ margin-top: 10px; margin-bottom: 10px; }
      &-xl{ margin-top: $space-xl; margin-bottom: $space-xl; }
      &-l{ margin-top: $space-l; margin-bottom: $space-l; }
      &-m{ margin-top: $space-m; margin-bottom: $space-m; }
      &-s{ margin-top: $space-s; margin-bottom: $space-s; }
      &-xs{ margin-top: $space-xs; margin-bottom: $space-xs; }
      &-auto { margin-top: auto; margin-bottom: auto; }
    }
  }
  .no-margin {
    margin: 0 !important;
    &-horizontal { margin-left: 0 !important; margin-right: 0 !important; }
    &-vertical { margin-top: 0 !important; margin-bottom: 0 !important; }
    &-top { margin-top: 0 !important; }
    &-right { margin-right: 0 !important; }
    &-bottom { margin-bottom: 0 !important; }
    &-left { margin-left: 0 !important; }
  }



  /*padding.css*/
  .padding,
  .gutter{
    &-5px{ padding: 5px; }
    &-6px{ padding: 6px; }
    &-7px{ padding: 7px; }
    &-8px{ padding: 8px; }
    &-9px{ padding: 9px; }
    &-10px{ padding: 10px; }
    &-xl{ padding: $space-xl; }
    &-l{ padding: $space-l; }
    &-m{ padding: $space-m; }
    &-s{ padding: $space-s; }
    &-xs{ padding: $space-xs; }
    &-top{
      &-5px{ padding-top: 5px; }
      &-6px{ padding-top: 6px; }
      &-7px{ padding-top: 7px; }
      &-8px{ padding-top: 8px; }
      &-9px{ padding-top: 9px; }
      &-10px{ padding-top: 10px; }
      &-xl{ padding-top: $space-xl; }
      &-l{ padding-top: $space-l; }
      &-m{ padding-top: $space-m; }
      &-s{ padding-top: $space-s; }
      &-xs{ padding-top: $space-xs; }
    }
    &-right{
      &-5px{ padding-right: 5px; }
      &-6px{ padding-right: 6px; }
      &-7px{ padding-right: 7px; }
      &-8px{ padding-right: 8px; }
      &-9px{ padding-right: 9px; }
      &-10px{ padding-right: 10px; }
      &-xl{ padding-right: $space-xl; }
      &-l{ padding-right: $space-l; }
      &-m{ padding-right: $space-m; }
      &-s{ padding-right: $space-s; }
      &-xs{ padding-right: $space-xs; }
    }
    &-bottom{
      &-5px{ padding-bottom: 5px; }
      &-6px{ padding-bottom: 6px; }
      &-7px{ padding-bottom: 7px; }
      &-8px{ padding-bottom: 8px; }
      &-9px{ padding-bottom: 9px; }
      &-10px{ padding-bottom: 10px; }
      &-xl{ padding-bottom: $space-xl; }
      &-l{ padding-bottom: $space-l; }
      &-m{ padding-bottom: $space-m; }
      &-s{ padding-bottom: $space-s; }
      &-xs{ padding-bottom: $space-xs; }
    }
    &-left{
      &-5px{ padding-left: 5px; }
      &-6px{ padding-left: 6px; }
      &-7px{ padding-left: 7px; }
      &-8px{ padding-left: 8px; }
      &-9px{ padding-left: 9px; }
      &-10px{ padding-left: 10px; }
      &-xl{ padding-left: $space-xl; }
      &-l{ padding-left: $space-l; }
      &-m{ padding-left: $space-m; }
      &-s{ padding-left: $space-s; }
      &-xs{ padding-left: $space-xs; }
    }
    &-horizontal{
      &-5px{ padding-right: 5px; padding-left: 5px; }
      &-6px{ padding-right: 6px; padding-left: 6px; }
      &-7px{ padding-right: 7px; padding-left: 7px; }
      &-8px{ padding-right: 8px; padding-left: 8px; }
      &-9px{ padding-right: 9px; padding-left: 9px; }
      &-10px{ padding-right: 10px; padding-left: 10px; }
      &-xl{ padding-right: $space-xl; padding-left: $space-xl; }
      &-l{ padding-right: $space-l; padding-left: $space-l; }
      &-m{ padding-right: $space-m; padding-left: $space-m; }
      &-s{ padding-right: $space-s; padding-left: $space-s; }
      &-xs{ padding-right: $space-xs; padding-left: $space-xs; }
    }
    &-vertical{
      &-5px{ padding-top: 5px; padding-bottom: 5px; }
      &-6px{ padding-top: 6px; padding-bottom: 6px; }
      &-7px{ padding-top: 7px; padding-bottom: 7px; }
      &-8px{ padding-top: 8px; padding-bottom: 8px; }
      &-9px{ padding-top: 9px; padding-bottom: 9px; }
      &-10px{ padding-top: 10px; padding-bottom: 10px; }
      &-xl{ padding-top: $space-xl; padding-bottom: $space-xl; }
      &-l{ padding-top: $space-l; padding-bottom: $space-l; }
      &-m{ padding-top: $space-m; padding-bottom: $space-m; }
      &-s{ padding-top: $space-s; padding-bottom: $space-s; }
      &-xs{ padding-top: $space-xs; padding-bottom: $space-xs; }
    }
  }
  .no-padding {
    padding: 0 !important;
    &-horizontal { padding-left: 0 !important; padding-right: 0 !important; }
    &-vertical { padding-top: 0 !important; padding-bottom: 0 !important; }
    &-top { padding-top: 0 !important; }
    &-right { padding-right: 0 !important; }
    &-bottom { padding-bottom: 0 !important; }
    &-left { padding-left: 0 !important; }
  }

  /* width */
  .w{
    &-1{ width: calc(100%); max-width: calc(100%) !important; }
    &-1\/2{ width: calc(100% / 2); max-width: calc(100% / 2) !important; }
    &-1\/3{ width: calc(100% / 3); max-width: calc(100% / 3) !important; }
    &-1\/4{ width: calc(100% / 4); max-width: calc(100% / 4) !important; }
    &-1\/5{ width: calc(100% / 5); max-width: calc(100% / 5) !important; }
    &-1\/6{ width: calc(100% / 6); max-width: calc(100% / 6) !important; }
  }
  .max-width{
    &-1{ max-width: calc(100%); }
    &-1\/2{ max-width: calc(100% / 2); }
    &-1\/3{ max-width: calc(100% / 3); }
    &-1\/4{ max-width: calc(100% / 4); }
    &-1\/5{ max-width: calc(100% / 5); }
    &-1\/6{ max-width: calc(100% / 6); }
  }

  .font-size{
    &-xl{ font-size:1.25rem; }
    &-l{ font-size:1.125rem; }
    &-m{ font-size:1rem; }
    &-s{ font-size:0.875rem; }
    &-xs{ font-size:0.75rem; }
    @include media(medium) {
      &-xl{ font-size:1.25rem * 1.4; }
      &-l{ font-size:1.125rem * 1.4; }
      &-m{ font-size:1rem * 1.4; }
      &-s{ font-size:0.875rem * 1.4; }
      &-xs{ font-size:0.75rem * 1.4; }
    }
  }
  .line-height{
    &-xl{ line-height:1.75; }
    &-l{ line-height:1.625; }
    &-m{ line-height:1.5; }
    &-s{ line-height:1.375; }
    &-xs{ line-height:1.25; }
  }
  .letter-spacing{
    letter-spacing: 0 !important;
    &-xl{ letter-spacing: 0.15em !important; }
    &-l{ letter-spacing: 0.1em !important; }
    &-m{ letter-spacing: 0.5em !important; }
    &-s{ letter-spacing: 0.25em !important; }
    &-xs{ letter-spacing: 0.01em !important; }
  }

  /* Utility Classes */
  .circle { border-radius: 50%; }
  .full-height { height: 100%; }
  .fixed { position: fixed; }
  .relative { position: relative; }
  .absolute { position: absolute; }
  .pointer { position: pointer; }
  .no-border { border:none; }

  /* Visibility */
  .hide{ display: none; }
  .show{ display: block; }
  .visible{ visibility: visible; }
  .hidden{ visibility: hidden; }
  .pc-show{ display: block; }
  .pc-hide{ display: none; }
  .mobile-show{ display: none; }
  .mobile-hide{ display: block; }
  @include media(medium) {
    .pc-show{ display: none; }
    .pc-hide{ display: block; }
    .mobile-show{ display: block; }
    .mobile-hide{ display: none; }
  }

  /* Display */
  .display-block { display: block; }
  .display-inline { display: inline; }
  .display-inline-block { display: inline-block; }
  .display-table { display: table; }
  .display-table-cell { display: table-cell; }

  /* Overflow */
  .overflow-inherit { overflow: inherit; }
  .overflow-initial { overflow: initial; }
  .overflow-unset { overflow: unset; }
  .overflow-hidden { overflow: hidden; }
  .overflow-visible { overflow: visible; }
  .overflow-scroll { overflow: scroll; }
  .overflow-auto { overflow: auto; }

  /* Position */
  .position-top-left { top:0; left:0; }
  .position-top-right { top:0; right:0; }
  .position-bottom-left { bottom:0; left:0; }
  .position-bottom-right { bottom:0; right:0; }

  /* Transition */
  .transition {
    transition: all .2s;
    &-fast{ transition: all .1s; }
    &-medium{ transition: all .2s; }
    &-slow{ transition: all .4s; }
  }

  /* Flex */
  .flex-justify { display: flex; justify-content: space-between; }
  .flex-justify-center { display: flex; align-items: center; justify-content: space-between; }

  .flex { display: flex; display:-webkit-flex; }
  .inline-flex { display: inline-flex; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-nowrap { flex-wrap: nowrap; }
  .flex-row { flex-direction: row; }
  .flex-column { flex-direction: column; }
  .flex-1 { flex: 1 1 0; }
  .flex-auto { flex: auto; }
  .flex-none { flex: none; }
  .flex-1-1-auto { flex: 1 1 auto; }
  .flex-1-0-auto { flex: 1 0 auto; }
  .flex-0-1-auto { flex: 0 1 auto; }
  .flex-0-0-auto { flex: 0 0 auto; }
  .justify-content-flex-start { justify-content: flex-start; }
  .justify-content-flex-end { justify-content: flex-end; }
  .justify-content-center { justify-content: center; }
  .justify-content-space-between { justify-content: space-between; }
  .justify-content-space-around { justify-content: space-around; }
  .align-content-flex-start { align-content: flex-start; }
  .align-content-flex-end { align-content: flex-end; }
  .align-content-center { align-content: center; }
  .align-content-space-between { align-content: space-between; }
  .align-content-space-around { align-content: space-around; }
  .align-content-stretch { align-content: stretch; }
  .align-items-flex-start { align-items: flex-start; }
  .align-items-flex-end { align-items: flex-end; }
  .align-items-center { align-items: center; }
  .align-items-baseline { align-items: baseline; }
  .align-items-stretch { align-items: stretch; }
  .align-self-flex-start { align-self: flex-start; }
  .align-self-flex-end { align-self: flex-end; }
  .align-self-center { align-self: center; }
  .align-self-baseline { align-self: baseline; }
  .align-self-stretch { align-self: stretch; }
  .flex{
    &-1{
      > li,
      > div{
        width: calc(100%);
        max-width: calc(100%);
        flex: 1 0 calc(100%); //iOS safariバグ用
        margin-bottom: 1rem;
        margin-right: 20px;
      }
    }
    &-1\/2{
      > li,
      > div{
        width: calc(100% / 2 - 10px );
        max-width: calc(100% / 2 - 10px );
        flex: 1 0 calc(100% / 2 - 10px ); //iOS safariバグ用
        -ms-flex: 1;
        margin-bottom: 1rem;
        margin-right: 20px;
        &:nth-child(2n){
          margin-right: 0;
        }
        @include media(medium) {
          width: calc(100%);
          max-width: calc(100%);
          flex: 1 0 calc(100%); //iOS safariバグ用
          margin-right: 0;
          &:nth-child(2n){
            margin-right: 0;
          }
        }
      }
    }
    &-1\/3{
      > li,
      > div{
        width: calc(100% / 3 - 10px );
        max-width: calc(100% / 3 - 10px );
        flex: 1 0 calc(100% / 3 - 10px ); //iOS safariバグ用
        margin-bottom: 1rem;
        margin-right: 15px;
        &:nth-child(3n){
          margin-right: 0;
        }
        @include media(medium) {
          width: calc(100% / 2 - 10px);
          max-width: calc(100% / 2 - 10px);
          flex: 1 0 calc(100% / 2 - 10px); //iOS safariバグ用
          margin-right: 20px;
          &:nth-child(3n){
            margin-right: 20px;
          }
          &:nth-child(2n){
            margin-right: 0;
          }
        }
      }
    }
    &-1\/4{
      > li,
      > div{
        width: calc(100% / 4 - 12px );
        max-width: calc(100% / 4 - 12px );
        flex: 1 0 calc(100% / 4 - 12px ); //iOS safariバグ用
        margin-bottom: 1rem;
        margin-right: 15px;
        &:nth-child(4n){
          margin-right: 0;
        }
        @include media(medium) {
          width: calc(100% / 2 - 10px);
          max-width: calc(100% / 2 - 10px);
          flex: 1 0 calc(100% / 2 - 10px); //iOS safariバグ用
          margin-right: 20px;
          &:nth-child(2n){
            margin-right: 0;
          }
        }
      }
    }
    &-1\/5{
      > li,
      > div{
        width: calc(100% / 5 - 12px );
        max-width: calc(100% / 5 - 12px );
        flex: 1 0 calc(100% / 5 - 12px ); //iOS safariバグ用
        margin-bottom: 1rem;
        margin-right: 15px;
        &:nth-child(5n){
          margin-right: 0;
        }
        @include media(medium) {
          width: calc(100% / 3 - 10px);
          max-width: calc(100% / 3 - 10px);
          flex: 1 0 calc(100% / 3 - 10px); //iOS safariバグ用
          margin-right: 15px;
          &:nth-child(5n){
            margin-right: auto;
          }
          &:nth-child(3n){
            margin-right: 0;

          }
        }
      }
    }
    &-1\/6{
      > li,
      > div{
        width: calc(100% / 6 - 9px );
        max-width: calc(100% / 6 - 9px );
        flex: 1 0 calc(100% / 6 - 9px ); //iOS safariバグ用
        margin-bottom: 1rem;
        margin-right: 10px;
        &:nth-child(6n){
          margin-right: 0;
        }
        @include media(medium) {
          width: calc(100% / 2 - 10px);
          max-width: calc(100% / 2 - 10px);
          flex: 1 0 calc(100% / 2 - 10px); //iOS safariバグ用
          margin-right: 20px;
          &:nth-child(2n){
            margin-right: 0;
          }
          &:nth-child(6n){
            margin-right: 10px;
          }
        }
      }
    }
  }


  /* Float */
  .float-left {float: left;}
  .float-right {float: right;}
  .float-none {float: none;}
  .clear { clear: both; }

  /* Text */
  .text-left{ text-align: left; }
  .text-center{ text-align: center; }
  .text-right{ text-align: right; }
  .text-justify{ text-align: justify; }

  .font-bold{ font-weight: bold; }
  .font-normal{ font-weight: normal; }

  /* Color */
  .color-white { color: white; }
  .color-black { color: black; }
  .color-grey{
    color: #5c6370;
    &-50{ color: #cbcdd1; }
    &-100{ color: #b4b8bd; }
    &-200{ color: #9ba0a7; }
    &-300{ color: #828891; }
    &-400{ color: #6c737e; }
    &-500{ color: #5c6370; }
    &-600{ color: #575e6a; }
    &-700{ color: #4e555f; }
    &-800{ color: #424851; }
    &-900{ color: #353a41; }
  }
  .color-dark{
    &-50{ color: #bcbdbf; }
    &-100{ color: #9fa1a4; }
    &-200{ color: #7f8185; }
    &-300{ color: #5f6267; }
    &-400{ color: #43464c; }
    &-500{ color: #2e3138; }
    &-600{ color: #2c2f35; }
    &-700{ color: #282a30; }
    &-800{ color: #222429; }
    &-900{ color: #1b1d21; }
  }

  /* Background */
  .background-repeat { background-repeat: repeat; }
  .background-no-repeat { background-repeat: no-repeat; }
  .background-fixed { background-attachment: fixed; }
  .background-cover { background-size: cover; }
  .background-center { background-position: center; }
  .background-transparent { background: transparent; }
  .background-current-color { background-color: currentColor; }
  .background-inherit { background-color: inherit; }
  .background{
    &-white{
      background-color: white;
    }
    &-black{
      background-color: black;
    }
    &-transparent{
      background-color: transparent;
    }
    &-grey{
      background-color: #5c6370;
      &-50{ background-color: #cbcdd1; }
      &-100{ background-color: #b4b8bd; }
      &-200{ background-color: #9ba0a7; }
      &-300{ background-color: #828891; }
      &-400{ background-color: #6c737e; }
      &-500{ background-color: #5c6370; }
      &-600{ background-color: #575e6a; }
      &-700{ background-color: #4e555f; }
      &-800{ background-color: #424851; }
      &-900{ background-color: #353a41; }
    }
    &-dark{
      background-color: #2e3138;
      &-50{ background-color: #bcbdbf; }
      &-100{ background-color: #9fa1a4; }
      &-200{ background-color: #7f8185; }
      &-300{ background-color: #5f6267; }
      &-400{ background-color: #43464c; }
      &-500{ background-color: #2e3138; }
      &-600{ background-color: #2c2f35; }
      &-700{ background-color: #282a30; }
      &-800{ background-color: #222429; }
      &-900{ background-color: #1b1d21; }
    }
  }

  /* Border */
  .border{
    border:1px solid #333;
    &-vertical{ border-top:1px solid #333; border-bottom:1px solid #333; }
    &-horizontal{ border-right:1px solid #333; border-left:1px solid #333; }
    &-top{ border-top:1px solid #333; }
    &-right{ border-right:1px solid #333; }
    &-bottom{ border-bottom:1px solid #333; }
    &-left{ border-left:1px solid #333; }
  }
  .border-color{
    &-black{
      border-color: #000;
    }
    &-white{
      border-color: #FFF;
    }
    &-grey{
      border-color: #5c6370;
      &-50{ border-color: #cbcdd1; }
      &-100{ border-color: #b4b8bd; }
      &-200{ border-color: #9ba0a7; }
      &-300{ border-color: #828891; }
      &-400{ border-color: #6c737e; }
      &-500{ border-color: #5c6370; }
      &-600{ border-color: #575e6a; }
      &-700{ border-color: #4e555f; }
      &-800{ border-color: #424851; }
      &-900{ border-color: #353a41; }
    }
    &-dark{
      border-color: #2e3138;
      &-50{ border-color: #bcbdbf; }
      &-100{ border-color: #9fa1a4; }
      &-200{ border-color: #7f8185; }
      &-300{ border-color: #5f6267; }
      &-400{ border-color: #43464c; }
      &-500{ border-color: #2e3138; }
      &-600{ border-color: #2c2f35; }
      &-700{ border-color: #282a30; }
      &-800{ border-color: #222429; }
      &-900{ border-color: #1b1d21; }
    }
  }
  .border-width{
    border-width: 4px;
    &-xl{ border-width: 8px; }
    &-l{ border-width: 6px; }
    &-m{ border-width: 4px; }
    &-s{ border-width: 2px; }
    &-xs{ border-width: 1px; }
    &-10px{ border-width: 10px; }
    &-9px{ border-width: 9px; }
    &-8px{ border-width: 8px; }
    &-7px{ border-width: 7px; }
    &-6px{ border-width: 6px; }
    &-5px{ border-width: 5px; }
    &-4px{ border-width: 4px; }
    &-3px{ border-width: 3px; }
    &-2px{ border-width: 2px; }
    &-1px{ border-width: 1px; }
  }
  .border-radius{
    border-radius: 4px;
    &-xl{ border-radius: 8px; }
    &-l{ border-radius: 6px; }
    &-m{ border-radius: 4px; }
    &-s{ border-radius: 3px; }
    &-xs{ border-radius: 2px; }
    &-10px{ border-radius: 10px; }
    &-15px{ border-radius: 15px; }
    &-20px{ border-radius: 20px; }
    &-30px{ border-radius: 30px; }
  }
  .no-border{
    border:none;
    &-top{border-top:none;}
    &-right{border-right:none;}
    &-bottom{border-bottom:none;}
    &-left{border-left:none;}
  }


}

/* Video */

.video__wrapper {
  position: relative;
  cursor: pointer;
  z-index: 1;
  margin-bottom: 1rem;
  video{
    width: 100%;
    height: auto;
  }
  .playBtn {
    position: absolute;
    z-index: 11;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    line-height: 64px;
    margin-left: -32px;
    margin-top: -32px;
    border: 3px solid #fff;
    border-radius: 50%;
    text-shadow: 1px 0 3px rgba(0,0,0,.3);
    &:before {
      position: absolute;
      top:50%;
      left: 50%;
      transform: translateX(-40%) translateY(-50%);
      display: inline-block;
      content: "\f04b";
      font-family: Font Awesome\ 5 Free;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
      font-size: 24px;
      line-height: 32px;
    }
  }
}