@charset "UTF-8";

/**
 * フロート解除
 */

.author-box::before, .clearfix::before, .entry::before, .entry-content::before, .footer-widgets::before, .nav-primary::before, .nav-secondary::before, .nav-tertiary::before,
.pagination::before, .site-container::before, .site-footer::before, .site-header::before, .site-inner::before, .widget::before, .wrap::before {
  content: " ";
  display: table;
}
.author-box::after, .clearfix::after, .entry::after, .entry-content::after, .footer-widgets::after, .nav-primary::after, .nav-secondary::after, .nav-tertiary::after,
.pagination::after, .site-container::after, .site-footer::after, .site-header::after, .site-inner::after, .widget::after, .wrap::after {
  clear: both;
  content: " ";
  display: table;
}

/**
 * サイトレイアウト
 */

.site-container {
  position: relative;
  overflow: hidden;
}
.site-header {
  border-bottom: 1px solid var(--my-color-main);
}
.site-header > .wrap {
  max-width: var(--my-site-width);
  width: 100%;
  min-height: 8rem;
  padding: 0;
  margin: 0 auto;
}
body.header-full-width .site-header > .wrap {
  max-width: none;
}
.site-inner > .wrap {
  max-width: var(--my-site-width);
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
.site-footer > .wrap {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
.content-sidebar-wrap {
  width: 100%;
}
.content {
  max-width: 86rem;
  width: 100%;
  padding: 2.5rem 3.7vw;
  margin: 0 auto;
}
.sidebar {
  width: 100%;
  padding: 2.5rem 3.7vw;
  margin: 0 auto;
}
 
@media only screen and (min-width: 540px) { /* sm(small) */
  .content, .sidebar {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media only screen and (min-width: 720px) { /* md(medium) */
  /* */
}

@media only screen and (min-width: 960px) { /* lg(large) */

  .content-sidebar-wrap {
    display: flex;
  }
  
  /* コンテンツ - のサイドバー1 */
  body.content-sidebar .content-sidebar-wrap {
    flex-direction: row;
  }
  body.content-sidebar .content {
    flex: auto;
    width: calc(100% - var(--my-lg-sidebar1-width) - var(--my-lg-layout-margin-x));
    margin-right: var(--my-lg-layout-margin-x);
    padding-left: var(--my-lg-layout-padding-x);
    padding-right: var(--my-lg-layout-padding-x);
  }
  body.content-sidebar .sidebar-primary {
    flex: none;
    width: var(--my-lg-sidebar1-width);
    padding-left: var(--my-lg-layout-padding-x);
    padding-right: var(--my-lg-layout-padding-x);
  }
  
  /* サイドバー1 - コンテンツ */
  body.sidebar-content .content-sidebar-wrap {
    flex-direction: row-reverse;
  }
  body.sidebar-content .content {
    flex: auto;
    width: calc(100% - var(--my-lg-sidebar1-width) - var(--my-lg-layout-margin-x));
    margin-left: var(--my-lg-layout-margin-x);
    padding-left: var(--my-lg-layout-padding-x);
    padding-right: var(--my-lg-layout-padding-x);
  }
  body.sidebar-content .sidebar-primary {
    flex: none;
    width: var(--my-lg-sidebar1-width);
    padding-left: var(--my-lg-layout-padding-x);
    padding-right: var(--my-lg-layout-padding-x);
  }
  
  /* コンテンツ - サイドバー1 - サイドバー2 */
  body.content-sidebar-sidebar .site-inner > .wrap {
    display: flex;
    flex-direction: row;
  }
  body.content-sidebar-sidebar .content-sidebar-wrap {
    flex: auto;
    flex-direction: row;
    width: calc(100% - var(--my-lg-sidebar2-width) - var(--my-lg-layout-margin-x));
    margin-right: var(--my-lg-layout-margin-x);
  }
  body.content-sidebar-sidebar .content {
    flex: auto;
    width: calc(100% - var(--my-lg-sidebar1-width) - var(--my-lg-layout-margin-x));
    margin-right: var(--my-lg-layout-margin-x);
    padding-left: var(--my-lg-layout-padding-x);
    padding-right: var(--my-lg-layout-padding-x);
  }
  body.content-sidebar-sidebar .sidebar-primary {
    flex: none;
    width: var(--my-lg-sidebar1-width);
    padding-left: var(--my-lg-layout-padding-x);
    padding-right: var(--my-lg-layout-padding-x);
  }
  body.content-sidebar-sidebar .sidebar-secondary {
    flex: none;
    width: var(--my-lg-sidebar2-width);
    padding-left: var(--my-lg-layout-padding-x);
    padding-right: var(--my-lg-layout-padding-x);
  }
  
  /* サイドバー2 - サイドバー1 - コンテンツ */
  body.sidebar-sidebar-content .site-inner > .wrap {
    display: flex;
    flex-direction: row-reverse;
  }
  body.sidebar-sidebar-content .content-sidebar-wrap {
    flex: auto;
    flex-direction: row-reverse;
    width: calc(100% - var(--my-lg-sidebar2-width) - var(--my-lg-layout-margin-x));
    margin-left: var(--my-lg-layout-margin-x);
  }
  body.sidebar-sidebar-content .content {
    flex: auto;
    width: calc(100% - var(--my-lg-sidebar1-width) - var(--my-lg-layout-margin-x));
    margin-left: var(--my-lg-layout-margin-x);
    padding-left: var(--my-lg-layout-padding-x);
    padding-right: var(--my-lg-layout-padding-x);
  }
  body.sidebar-sidebar-content .sidebar-primary {
    flex: none;
    width: var(--my-lg-sidebar1-width);
    padding-left: var(--my-lg-layout-padding-x);
    padding-right: var(--my-lg-layout-padding-x);
  }
  body.sidebar-sidebar-content .sidebar-secondary {
    flex: none;
    width: var(--my-lg-sidebar2-width);
    padding-left: var(--my-lg-layout-padding-x);
    padding-right: var(--my-lg-layout-padding-x);
  }
  
  /* サイドバー2 - コンテンツ - サイドバー1 */
  body.sidebar-content-sidebar .site-inner > .wrap {
    display: flex;
    flex-direction: row-reverse;
  }
  body.sidebar-content-sidebar .content-sidebar-wrap {
    flex: auto;
    flex-direction: row;
    width: calc(100% - var(--my-lg-sidebar2-width) - var(--my-lg-layout-margin-x));
    margin-left: var(--my-lg-layout-margin-x);
  }
  body.sidebar-content-sidebar .content {
    flex: auto;
    width: calc(100% - var(--my-lg-sidebar1-width) - var(--my-lg-layout-margin-x));
    margin-right: var(--my-lg-layout-margin-x);
    padding-left: var(--my-lg-layout-padding-x);
    padding-right: var(--my-lg-layout-padding-x);
  }
  body.sidebar-content-sidebar .sidebar-primary {
    flex: none;
    width: var(--my-lg-sidebar1-width);
    padding-left: var(--my-lg-layout-padding-x);
    padding-right: var(--my-lg-layout-padding-x);
  }
  body.sidebar-content-sidebar .sidebar-secondary {
    flex: none;
    width: var(--my-lg-sidebar2-width);
    padding-left: var(--my-lg-layout-padding-x);
    padding-right: var(--my-lg-layout-padding-x);
  }
  
}

@media only screen and (min-width: 1200px) { /* xl(extra large) */

  /* コンテンツ - のサイドバー1 */
  body.content-sidebar .content {
    width: calc(100% - var(--my-xl-sidebar1-width) - var(--my-xl-layout-margin-x));
    margin-right: var(--my-xl-layout-margin-x);
    padding-left: var(--my-xl-layout-padding-x);
    padding-right: var(--my-xl-layout-padding-x);
    box-shadow: inset 1px 0 0 0 var(--my-color-main);
  }
  body.content-sidebar .sidebar-primary {
    width: var(--my-xl-sidebar1-width);
    padding-left: var(--my-xl-layout-padding-x);
    padding-right: var(--my-xl-layout-padding-x);
  }
  
  /* サイドバー1 - コンテンツ */
  body.sidebar-content .content {
    width: calc(100% - var(--my-xl-sidebar1-width) - var(--my-xl-layout-margin-x));
    margin-left: var(--my-xl-layout-margin-x);
    padding-left: var(--my-xl-layout-padding-x);
    padding-right: var(--my-xl-layout-padding-x);
  }
  body.sidebar-content .sidebar-primary {
    width: var(--my-xl-sidebar1-width);
    padding-left: var(--my-xl-layout-padding-x);
    padding-right: var(--my-xl-layout-padding-x);
  }
  
  /* コンテンツ - サイドバー1 - サイドバー2 */
  body.content-sidebar-sidebar .content-sidebar-wrap {
    width: calc(100% - var(--my-xl-sidebar2-width) - var(--my-xl-layout-margin-x));
    margin-right: var(--my-xl-layout-margin-x);
  }
  body.content-sidebar-sidebar .content {
    width: calc(100% - var(--my-xl-sidebar1-width) - var(--my-xl-layout-margin-x));
    margin-right: var(--my-xl-layout-margin-x);
    padding-left: var(--my-xl-layout-padding-x);
    padding-right: var(--my-xl-layout-padding-x);
  }
  body.content-sidebar-sidebar .sidebar-primary {
    width: var(--my-xl-sidebar1-width);
    padding-left: var(--my-xl-layout-padding-x);
    padding-right: var(--my-xl-layout-padding-x);
  }
  body.content-sidebar-sidebar .sidebar-secondary {
    width: var(--my-xl-sidebar2-width);
    padding-left: var(--my-xl-layout-padding-x);
    padding-right: var(--my-xl-layout-padding-x);
  }
  
  /* サイドバー2 - サイドバー1 - コンテンツ */
  body.sidebar-sidebar-content .content-sidebar-wrap {
    width: calc(100% - var(--my-xl-sidebar2-width) - var(--my-xl-layout-margin-x));
    margin-left: var(--my-xl-layout-margin-x);
  }
  body.sidebar-sidebar-content .content {
    width: calc(100% - var(--my-xl-sidebar1-width) - var(--my-xl-layout-margin-x));
    margin-left: var(--my-xl-layout-margin-x);
    padding-left: var(--my-xl-layout-padding-x);
    padding-right: var(--my-xl-layout-padding-x);
  }
  body.sidebar-sidebar-content .sidebar-primary {
    width: var(--my-xl-sidebar1-width);
    padding-left: var(--my-xl-layout-padding-x);
    padding-right: var(--my-xl-layout-padding-x);
  }
  body.sidebar-sidebar-content .sidebar-secondary {
    width: var(--my-xl-sidebar2-width);
    padding-left: var(--my-xl-layout-padding-x);
    padding-right: var(--my-xl-layout-padding-x);
  }
  
  /* サイドバー2 - コンテンツ - サイドバー1 */
  body.sidebar-content-sidebar .content-sidebar-wrap {
    width: calc(100% - var(--my-xl-sidebar2-width) - var(--my-xl-layout-margin-x));
    margin-left: var(--my-xl-layout-margin-x);
  }
  body.sidebar-content-sidebar .content {
    width: calc(100% - var(--my-xl-sidebar1-width) - var(--my-xl-layout-margin-x));
    margin-right: var(--my-xl-layout-margin-x);
    padding-left: var(--my-xl-layout-padding-x);
    padding-right: var(--my-xl-layout-padding-x);
  }
  body.sidebar-content-sidebar .sidebar-primary {
    width: var(--my-xl-sidebar1-width);
    padding-left: var(--my-xl-layout-padding-x);
    padding-right: var(--my-xl-layout-padding-x);
  }
  body.sidebar-content-sidebar .sidebar-secondary {
    width: var(--my-xl-sidebar2-width);
    padding-left: var(--my-xl-layout-padding-x);
    padding-right: var(--my-xl-layout-padding-x);
  }
  
}