@charset "UTF-8";
/*
Theme Name: kanagata
Theme URI: http://www.findxfine.com/kanagata-2/995560376.html
Description: The theme has flexible customization.
Author: Hiroshi Sawai
Author URI: https://hiroshi-sawai.com
Version: 3.1.9
Tested up to: 5.7
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, e-commerce, one-column, two-columns, left-sidebar, right-sidebar, block-styles, custom-colors, custom-logo, custom-background, custom-header, custom-menu, featured-images, translation-ready, wide-blocks
Text Domain: kanagata
*/
/* -------------------------------------------------------------------
# breadcrumb
------------------------------------------------------------------- */
.breadcrumbs {
  font-size: 13px;
  margin-bottom: 14px !important;
  margin-top: 0 !important;
}

/* -------------------------------------------------------------------
# WordPress comment
------------------------------------------------------------------- */
.comments .comment-list {
  list-style-type: none;
  margin-bottom: 2.5rem;
}

.comments .comment-list .comment-body {
  border-top: 1px dotted #e1e1e1;
  padding: 1.625rem 0;
}

.comments .comment-list .comment-body p {
  margin-bottom: 1rem;
}

.comments .comment-list .comment-body .comment-author {
  font-weight: bold;
  margin-bottom: 1rem;
}

.comments .comment-list .comment-body .comment-meta {
  margin: 0.5rem 0 1rem;
}

.comments .comment-list .comment-body .comment-meta a {
  color: gray;
}

.comments .comment-list .comment-body .reply {
  margin-top: 2rem;
}

.comments .comment-list .comment-body .reply a {
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  padding: 0.5rem;
}

.comments .comment-list .comment-body .comment-reply-link:before {
  content: "\f064";
  font-family: FontAwesome;
}

.comments .comment-respond input[type="text"] {
  width: 100%;
}

.comments .comment-respond textarea {
  background: #f5f5f5;
  width: 100%;
}

.children {
  list-style-type: none;
}

/*
 * Form style
 */
select,
textarea,
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"] {
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  display: inline-block;
  line-height: 1.375rem;
  padding: 0.375rem;
}

/* 
 * sarch form in widget
 */
.search-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* search submit button in widget */
}

.search-form label {
  -webkit-box-flex: 2;
      -ms-flex: 2 1 auto;
          flex: 2 1 auto;
  margin-right: 6px;
}

.search-form label .search-field {
  width: 100%;
}

.search-form .search-submit {
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  padding: 6px 8px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

/* comments submit button */
.submit {
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  padding: 5px 12px;
}

/* submit button */
button {
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  display: inline-block;
  line-height: 1.375rem;
  padding: 0.375rem;
}

/* -------------------------------------------------------------------
# heading
------------------------------------------------------------------- */
.single-title, .page-title, .category-title, .post-title {
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 32px;
}

.post-title, .post__content .post__body h2 {
  font-size: 26px;
  margin: 0 0 32px;
}

.post__content .post__body h3 {
  font-weight: bold;
  margin: 0 0 20px;
}

/* -------------------------------------------------------------------
# post tile
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
# single title
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
# page title
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
# category title
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
# style set in the customizer
------------------------------------------------------------------- */
.heading-style-primary {
  border-bottom: 1px dotted #ddd;
  border-left: 5px solid #337ab7;
  padding: 10px 10px 8px 16px;
}

.heading-style-secondary {
  background: #eee;
  border-left: 5px solid #337ab7;
  padding: 10px 10px 8px 16px;
}

/* -------------------------------------------------------------------
# WordPress required image style
------------------------------------------------------------------- */
/*
## image align
*/
.aligncenter {
  display: block;
  margin: 8px auto 32px;
}

.alignright {
  display: block;
  float: right;
  margin: 8px 0 32px 32px;
}

.alignleft {
  display: block;
  float: left;
  margin: 8px 32px 32px 0;
}

.wp-caption {
  margin-bottom: 32px;
  max-width: 100%;
}

.wp-caption-text {
  font-size: 14px;
  line-height: 1.375;
  margin: 8px 0 !important;
  padding: 4px !important;
}

/*
## eye cahtch (thumbnail)

attachment-post-thumbnai is required by WordPress.

```
<div>
   <?php if ( has_post_thumbnail() ) : ?>
      <div class="post__thumbnail"><?php the_post_thumbnail(); ?></div>
   <?php endif; ?>
   <div><?php the_content( 'readmore &raquo;' ); ?></div>
</div>
```
*/
.post__thumbnail,
.attachment-post-thumbnai {
  float: left;
  margin: 0 1.25rem 0.625rem 0;
}

/*
 * Jumbotron.
 * 
 * Bootstrap3 has .jumbotron.
 * Override bootstra csss.
 */
.jumbotron {
  background: #fff;
  margin-bottom: 48px;
}

.jumbotron-inner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 64px 0;
}

.jumbotron-inner p {
  font-size: 48px;
  font-weight: bold;
  line-height: 1.35;
  padding: 0;
  text-align: center;
}

/*
* menu style
* 1. global menu  register_nav_menu( 'global', __( 'Global Menu', 'kanagata' ) )  
* 2. extra menu   register_nav_menu( 'extra', __( 'Extra Menu', 'kanagata' ) )
* 3. side menu    register_nav_menu( 'side', __( 'Side Menu', 'kanagata' ) )
* 4. footer menu  register_nav_menu( 'footer', __( 'Footer Menu', 'kanagata' ) )
*/
/*
# global menu style

Specify the class name in the argument of wp_nav_menu
```
wp_nav_menu( array(
    'theme_location'  => 'global',
    'container_class' => 'menu-global-container',
    'menu_class'      => 'menu-global'
)); ?>
```

```
<div class="menu-global-container">
  <ul class="menu-global">
      <li class="menu-item menu-item-has-childre">
        <a href="#">text</a>
        <ul class="sub-menu">
```
*/
@media (min-width: 768px) {
  .menu-global-container {
    background: #fff;
    font-size: 14px;
    margin: 0 0 24px;
    padding: 0 12px;
  }
  .menu-global-container ul {
    margin: 0;
    /* Override bootstrap */
    padding: 0;
    /* Override bootstrap */
  }
  .menu-global {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .menu-global > li {
    border: none;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    padding: 0;
    text-align: center;
  }
  .menu-global > li:first-child {
    padding-left: 0;
  }
  .menu-global > li:last-child {
    padding-right: 0;
  }
  .menu-global li {
    display: block;
    height: auto;
    padding: 0 14px;
    position: relative;
  }
  .menu-global li:hover > ul {
    left: auto;
  }
  .menu-global a {
    line-height: 42px;
    text-decoration: none;
    white-space: nowrap;
  }
  .menu-global .menu-item-has-children > a:after,
  .menu-global .page_item_has_childre > a:after {
    content: "\f105";
    display: inline-block;
    font-family: FontAwesome;
    padding-left: 8px;
  }
  .menu-global .sub-menu {
    float: left;
    left: -999em;
    margin: 0;
    position: absolute;
    top: 42px;
    z-index: 999;
  }
  .menu-global .sub-menu ul {
    top: 0;
  }
  .menu-global .sub-menu li {
    border-bottom: 1px dotted #666;
    min-width: 100%;
  }
  .menu-global .sub-menu li:hover > ul {
    left: 100%;
  }
}

/*
# extra menu style

extra menu show 3rd list at right  
Specify the class name in the argument of wp_nav_menu
```
wp_nav_menu( array(
    'theme_location'  => 'extra',
    'container_class' => 'menu-extra-container',
    'menu_class'      => 'menu-extra'
)); ?>
```
*/
@media (min-width: 768px) {
  .menu-extra-container {
    margin: 0;
    padding: 0;
  }
  .menu-extra {
    background: #fff;
    border-bottom: 0;
    display: block;
  }
  .menu-extra-container a {
    display: inline-block;
    font-size: 12px;
    line-height: 1.125rem;
    padding: 0 12px;
    text-decoration: none;
    white-space: nowrap;
  }
  .menu-extra-container ul {
    float: right;
    margin: 0;
    /* override bootstrap */
    padding: 0;
    /* override bootstrap */
  }
  .menu-extra-container ul ul {
    float: left;
    position: absolute;
    right: 999em;
    top: 26px;
    z-index: 10;
    z-index: 99999;
  }
  .menu-extra-container ul ul ul {
    top: 0;
  }
  .menu-extra-container li {
    border: 0;
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .menu-extra-container li li {
    display: block;
    height: auto;
  }
  .menu-extra-container ul ul li:hover > ul {
    right: 100%;
  }
  .menu-extra-container ul li:hover > ul {
    right: auto;
  }
  .menu-extra-container .menu-item-has-children > a {
    padding-left: 1.5rem;
  }
  .menu-extra-container .menu-item-has-children > a:after {
    content: "\f105";
    display: inline-block;
    font-family: FontAwesome;
    padding-left: 8px;
  }
  .menu-extra-container .page_item_has_children > a {
    padding-left: 1.5rem;
  }
  .menu-extra-container .page_item_has_children > a:after {
    content: "\f105";
    display: inline-block;
    font-family: FontAwesome;
    padding-left: 8px;
  }
}

/*
# side menu style

Specify the class name in the argument of wp_nav_menu
```
wp_nav_menu( array(
    'theme_location'  => 'side',
    'container_class' => 'menu-side-container',
    'menu_class'      => 'menu-side'
)); ?>
```
*/
@media (min-width: 768px) {
  .menu-side-container {
    margin: 0 0 48px;
    padding: 0;
  }
  .menu-side-container ul,
  .widget_nav_menu ul {
    margin: 0;
    /* override bootstrap */
    padding: 0;
    /* override bootstrap */
  }
  .menu-side-container li,
  .widget_nav_menu li {
    border-bottom: 1px dotted #e1e1e1;
    font-size: 0.875rem;
    line-height: 1.625rem;
    padding: 0.5rem 0;
  }
  .menu-side-container li:before,
  .widget_nav_menu li:before {
    content: "\f105";
    font-family: FontAwesome;
    padding-right: 0.5rem;
  }
  .menu-side-container a,
  .widget_nav_menu a {
    display: inline-block;
    padding: 0 0.75rem 0 0;
  }
  /* 768px and up */
  .menu-side-container .sub-menu {
    margin-left: 1rem !important;
  }
  .widget_nav_menu .sub-menu {
    margin-left: 1rem !important;
  }
  .menu-side-container .sub-menu li,
  .widget_nav_menu .sub-menu li {
    border: none;
    display: block;
    height: auto;
    line-height: 1.625rem;
    padding: 0.5rem 0 0;
  }
  /*
  # footer menu style
  
  Specify the class name in the argument of wp_nav_menu
  ```
  wp_nav_menu( array(
      'theme_location'  => 'footer',
      'container_class' => 'menu-footer-container',
      'menu_class'      => 'menu-footer'
  )); ?>
  ```
  */
  .menu-footer-container {
    height: auto;
    margin: 0;
    padding: 0;
    width: auto;
  }
  .menu-footer-container a {
    display: inline-block;
    padding: 0 0.75rem;
    white-space: nowrap;
  }
  .menu-footer-container ul {
    list-style-type: none;
    margin: 0;
    /* override bootstrap */
    padding: 0;
    /* override bootstrap */
  }
  /* 768px and up */
  .menu-footer-container li {
    float: left;
  }
  .menu-footer-container li {
    border: none;
    line-height: 1.625rem;
    padding: 0.5rem 0;
  }
  /* 768px and up */
  .menu-footer-container .sub-menu {
    margin-left: 1rem !important;
  }
  .menu-footer-container .sub-menu {
    clear: both;
  }
  .menu-footer-container .sub-menu li {
    border: none;
    display: block;
    float: none;
    height: auto;
    line-height: 1.625rem;
    padding: 0.5rem 0 0;
  }
}

/*
# Smart Phone menu for responsive 
*/
/*
 * mobile device global menu (< 768)
 */
#sp_toggle_menu {
  display: none;
}

@media only screen and (max-width: 767px) {
  /*
    * toggle bar style
    */
  #sp_toggle_menu {
    background: #e1e1e1;
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    width: 50px;
  }
  #sp_toggle_menu a {
    color: #fff;
    display: block;
    padding: 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
  }
  #menu-global-wrapper {
    left: 0;
    position: absolute;
    top: 0;
    width: 90%;
    z-index: 999;
  }
  /*
   * smartphone global menu
   */
  .menu-global-container {
    background: #fff;
    display: none;
    margin: 0 0 0 -15px;
    padding: 28px 14px;
  }
  .menu-global {
    display: block;
    list-style-type: none;
    margin: 50px 0 0;
    padding: 0;
  }
  .menu-global li::before {
    content: "\f105";
    display: inline-block;
    font-family: FontAwesome;
  }
  .menu-global a {
    display: inline-block;
    font-size: 14px;
    line-height: 1.5;
    padding: 6px;
    white-space: nowrap;
  }
  .menu-global .sub-menu {
    list-style-type: none;
    margin: 0 0 0 14px;
    padding: 0;
  }
}

/*
 * mobile device extra menu (< 768)
 */
#sp_menu_extra {
  display: none;
}

@media only screen and (max-width: 767px) {
  /*
    * toggle bar style
    */
  #sp_menu_extra {
    display: block;
    float: right;
  }
  .header__right {
    clear: both;
    width: 100%;
  }
  .header__menu-extra {
    clear: both;
    display: none;
    float: none;
    margin-top: 65px;
    width: 100%;
  }
  .menu-extra-container .menu-extra {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .menu-extra-container .menu-extra > li {
    padding: 0.5rem 0 0.5rem 0.5rem !important;
  }
  .menu-extra-container .menu-extra li {
    padding: 0.25rem 0 0 0.5rem;
  }
  .menu-extra-container .menu-extra li::before {
    content: "\f105";
    display: inline-block;
    font-family: FontAwesome;
  }
  .menu-extra-container .menu-extra a {
    display: inline-block;
    font-size: 14px;
    line-height: 1.5;
    padding: 6px;
    white-space: nowrap;
  }
  .menu-extra-container .menu-extra .sub-menu {
    list-style-type: none;
    padding: 0.25rem 0 0 0.25rem;
  }
  .menu-extra-container .menu-extra > .sub-menu {
    padding: 0.375rem 0 0 0.5rem !important;
  }
  .header__about__item {
    clear: both;
    margin: 0 0 1rem !important;
  }
}

/*
 * mobile device sidebar menu (< 768)
 */
@media only screen and (max-width: 767px) {
  .menu-side-container {
    margin: 0 0 24px;
  }
  .menu-side-container .menu-side {
    list-style-type: none;
    margin: 0;
  }
  .menu-side-container .menu-side li {
    margin: 0.25rem 0 0 0.25rem;
  }
  .menu-side-container .menu-side li:before {
    content: "  \f105";
    font-family: FontAwesome;
    padding-right: 0.5rem;
  }
}

/*
 * mobile device footer menu (=< 767)
 */
@media only screen and (max-width: 767px) {
  /*
    * toggle bar style
    */
  .menu-footer-container .menu-footer {
    list-style-type: none;
    margin: 0;
    padding: 8px;
  }
  .menu-footer-container .menu-footer a {
    font-size: 14px;
  }
  .menu-footer-container .menu-footer li:before {
    content: "  \f105";
    font-family: FontAwesome;
    padding-right: 0.5rem;
  }
  .menu-footer-container .menu-footer .sub-menu {
    list-style-type: none;
    margin-left: 14px;
    padding: 0;
  }
}

/* -------------------------------------------------------------------
# Jetpack form
------------------------------------------------------------------- */
.wp-block-jetpack-contact-form label span {
  color: #a94442;
}

.wp-block-button {
  text-align: center;
}

.wp-block-button__link {
  background: #337ab7;
}

/* -------------------------------------------------------------------
# WooCommerce
# Override WooCommerce original style.
------------------------------------------------------------------- */
/*
 * Button
 */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: #337ab7;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: #2d6da3;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-size: 15px;
}

.woocommerce table.shop_table {
  border-collapse: collapse;
}

/*
 * Table
 */
#add_payment_method .cart-collaterals .cart_totals table,
.woocommerce-cart .cart-collaterals .cart_totals table,
.woocommerce-checkout .cart-collaterals .cart_totals table {
  border-collapse: collapse;
}

/*
 * Message
 */
.woocommerce-info {
  border: 1px dotted #ddd;
  border-radius: 10px;
}

.woocommerce-message {
  border: 1px dotted #8fae1b;
  border-radius: 10px;
}

.woocommerce-error {
  border: 1px solid #a46497;
  border-radius: 10px;
}

/*
 * Layout
 */
.woocommerce-shop-loop-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 24px;
}

@media screen and (min-width: 768px) {
  .woocommerce-shop-loop-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.woocommerce-shop-loop-container .woocommerce-breadcrumb {
  width: 100%;
}

.woocommerce-shop-loop-container .woocommerce-result-count {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}

.woocommerce-shop-loop-container .woocommerce-ordering {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}

.woocommerce-shop-loop-container .woocommerce-ordering select {
  float: right;
  margin: 0 24px;
}

@media screen and (min-width: 768px) {
  .woocommerce-shop-loop-container .products {
    -ms-flex-preferred-size: 70%;
        flex-basis: 70%;
  }
}

@media screen and (min-width: 768px) {
  .woocommerce-shop-loop-container .product {
    -ms-flex-preferred-size: 70%;
        flex-basis: 70%;
  }
}

@media screen and (min-width: 768px) {
  .woocommerce-shop-loop-container .side {
    -ms-flex-preferred-size: 20%;
        flex-basis: 20%;
  }
}

.content-area {
  margin: 0 auto;
  max-width: 1320px;
  padding: 0 12px;
  width: 100%;
}

.woocommerce-notices-wrapper {
  margin-top: 16px;
}

/* -------------------------------------------------------------------
# WordPress post style

post style. post base style is bootstrap style.
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
#  post title
------------------------------------------------------------------- */
.single-title, .page-title, .category-title, .post-title {
  font-size: 30px !important;
  line-height: 1.25;
  margin: 0 0 32px !important;
}

.post-title, .post__content .post__body h2 {
  font-size: 26px;
  margin: 0 0 32px !important;
}

.post__content .post__body h3 {
  font-weight: bold;
  margin: 0 0 20px;
}

/* -------------------------------------------------------------------
#  post title
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
# page title
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
# category
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
# post__thumbnail
------------------------------------------------------------------- */
.post__thumbnail {
  margin: 0 auto 48px;
}

/* -------------------------------------------------------------------
# post__content
------------------------------------------------------------------- */
.post__content {
  /*
  thead, tfoot, caption, col, colgroup, tbody, tr is bootstrap style
  */
  /*
  abbr, cite, ins, del, code, sub, sup is bootstrap style
  */
  /*
   * post content
   */
}

.post__content h1 {
  margin: 50px 0 32px;
}

.post__content h2 {
  margin: 40px 0 26px;
}

.post__content h3 {
  margin: 30px 0 20px;
}

.post__content h4 {
  font-size: 20px;
  margin: 20px 0;
}

.post__content h5 {
  font-size: 20px;
  margin: 20px 0;
}

.post__content h6 {
  font-size: 20px;
  margin: 20px 0;
}

.post__content p {
  margin-bottom: 32px;
}

.post__content blockquote {
  margin-bottom: 32px;
}

.post__content table {
  border: 1px solid #ddd;
  margin-bottom: 32px;
}

.post__content th {
  border: 1px solid #ddd;
  padding: 8px 14px;
}

.post__content td {
  border: 1px solid #ddd;
  padding: 8px 14px;
}

.post__content dl {
  margin-bottom: 32px;
}

.post__content dt {
  margin-bottom: 8px;
}

.post__content dd {
  margin-bottom: 16px;
}

.post__content ul {
  margin-bottom: 32px;
  padding-left: 32px;
}

@media screen and (max-width: 767px) {
  .post__content ul {
    padding-left: 20px;
  }
}

.post__content ul ul,
.post__content ul ol {
  margin-bottom: 0;
}

.post__content ol {
  margin-bottom: 32px;
  padding-left: 32px;
}

.post__content ol ol,
.post__content ol ul {
  margin-bottom: 0;
}

.post__content li {
  /* bootstrap */
  line-height: 2;
}

.post__content address {
  margin-bottom: 32px;
}

.post__content pre {
  margin-bottom: 32px;
}

.post__content q {
  font-style: italic;
}

.post--list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 64px;
}

@media screen and (min-width: 768px) {
  .post--list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.post--list__thumbnail {
  margin: 0 auto 24px;
}

@media screen and (min-width: 768px) {
  .post--list__thumbnail {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 180px;
            flex: 0 0 180px;
    margin: 0 32px 0 0;
  }
}

.post--list__body {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin-left: 16px;
}

.post--list__title {
  line-height: 32px;
  margin: 0 0 24px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .post--list__title {
    text-align: left;
  }
}

@media screen and (min-width: 768px) {
  .post--list__text {
    margin-bottom: 32px;
  }
}

.post--cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (min-width: 769px) {
  .post--cards {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.post--card {
  margin-bottom: 64px;
  width: 100%;
}

@media screen and (min-width: 769px) {
  .post--card {
    margin-right: 5%;
    width: 30%;
  }
  .post--card:nth-child(3n) {
    margin-right: 0;
  }
}

.post--card__thumbnail img {
  margin: 0 auto;
}

.post--card__title {
  line-height: 32px;
  margin: 24px 0;
  text-align: center;
}

.post--card__text {
  margin-bottom: 32px;
}

/*
## more link paginage

@name more link  

```
<div><a class="more-link" href="#">read more</a></div>
```
*/
.more-link {
  clear: both;
  display: inline-block;
  margin-right: 1rem;
  text-align: right;
}

/*
## single paginate

* <- previous
* -> next

@name nav single

```
<div class="nav_single">
    <span class="nav-previous"><span class="meta-nav">&larr;</span> Previous Post</span>
    <span class="nav-next">Next Post <span class="meta-nav">&rarr;</span></span>
</div><!-- nav_single -->
```
*/
.pager-single {
  margin: 1rem 0.5rem;
  overflow: hidden;
  padding: 0.5rem 0.5rem;
}

.pager-single .nav-previous {
  display: block;
  float: left;
}

.pager-single .nav-next {
  display: block;
  float: right;
}

/*
## multi page paginate
*/
.wp-link-pages {
  margin: 1.5em 0;
}

.wp-link-pages p {
  text-align: center;
}

/*
## category paginate

```
<div class="pager">
	<nav class="navigation pagination" role="navigation" aria-label="投稿">
		<h2 class="screen-reader-text">投稿ナビゲーション</h2>
        <div class="nav-links">
            <a class="prev page-numbers" href="">前のページへ</a>
            <a class="page-numbers" href=""><span class="meta-nav screen-reader-text">ページ </span>1</a>
            <span aria-current="page" class="page-numbers current"><span class="meta-nav screen-reader-text">ページ </span>2</span>
            <a class="page-numbers" href=""><span class="meta-nav screen-reader-text">ページ </span>3</a>
            <span class="page-numbers dots">…</span>
            <a class="page-numbers" href=""><span class="meta-nav screen-reader-text">ページ </span>5</a>
            <a class="next page-numbers" href="">次のページへ</a></div>
    </nav>
</div>
```
*/
.pager {
  line-height: 32px;
  margin: 16px auto 0;
  padding: ipx 0;
  text-align: center;
}

.pager .pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.pager a {
  color: #333;
  text-decoration: none;
}

.pager .page-numbers {
  padding: 3px 4px;
}

@media screen and (min-width: 768px) {
  .pager .page-numbers {
    padding: 6px 8px;
  }
}

.pager .page-numbers:hover {
  background: #eee;
  color: #333;
}

.pager .current {
  background: #eee;
  color: #333;
  padding: 3px 4px;
}

@media screen and (min-width: 768px) {
  .pager .current {
    padding: 6px 8px;
  }
}

.pager .next {
  border: 0 none;
}

.pager .prev {
  border: 0 none;
}

.screen-reader-text {
  display: none;
}

/*
## post meta information

@name list meta
@requires _list.scss
@variable $font-size  
@variable $color-light

```
<ul class="list-meta">
  <li class="list-meta__item--date">posted time</li>
  <li class="list-meta__item--category">category</li>
  <li class="list-meta__item--author">author</li>
</ul>
```
*/
.list-meta {
  margin: 48px 0 32px;
  padding: 0 !important;
}

.list-meta .list-meta__item, .list-meta .list-meta__item--category, .list-meta .list-meta__item--tag, .list-meta .list-meta__item--date, .list-meta .list-meta__item--link, .list-meta .list-meta__item--comments {
  list-style-type: none;
  padding: 0;
}

.list-meta .list-meta__item--category:before {
  content: "\f07b";
  font-family: FontAwesome;
}

.list-meta .list-meta__item--tag:before {
  content: "\f02b";
  font-family: FontAwesome;
}

.list-meta .list-meta__item--date:before {
  content: "\f073";
  font-family: FontAwesome;
}

.list-meta .list-meta__item--link:before {
  content: "\f0c1";
  font-family: FontAwesome;
}

.list-meta .list-meta__item--comments:before {
  content: "\f075";
  font-family: FontAwesome;
}

/* -------------------------------------------------------------------
# WordPress required class style
------------------------------------------------------------------- */
.sticky {
  font-size: 1rem;
}

.gallery-caption {
  background-color: rgba(0, 0, 0, 0.7);
  bottom: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  font-size: 12px;
  left: 0;
  line-height: 1.5;
  margin: 0;
  max-height: 50%;
  opacity: 0;
  padding: 6px 8px;
  position: absolute;
  text-align: left;
  width: 100%;
}

.gallery-caption:before {
  content: "";
  height: 100%;
  left: 0;
  min-height: 49px;
  position: absolute;
  top: 0;
  width: 100%;
}

.bypostauthor > article .fn:before {
  content: "\f408";
  margin: 0 2px 0 -2px;
  position: relative;
  top: -1px;
}

/*
# WordPress widget

@name widget  

```
<div id="side">
  <ul id="sidebar">
    <li class="widget widget_recent_entries" id="recent-posts-2">
      <h2 class="widgettitle">Recent Posts</h2>
      <ul>
        <li><a href="#">title1</a></li>
        <li><a href="#">title2</a></li>
      </ul>
    </li>
  </ul>
</div>
```
*/
.widget {
  clear: both;
  font-size: 14px;
  margin-bottom: 3rem;
}

.widget h2 {
  background: transparent;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 1rem;
}

.widget h4 {
  line-height: 1.5;
  margin-top: 0;
}

.widget ul {
  margin: 0;
}

.widget li {
  border-bottom: 1px dotted #e1e1e1;
  clear: both;
  line-height: 1.625;
  list-style-type: none !important;
  /* not remove. if it remove, list type is circle. */
  padding: 0.5rem 0;
}

.widget li:last-child {
  border-bottom: none;
}

.widget li:before {
  content: "\f105";
  font-family: FontAwesome;
  padding-right: 0.5rem;
}

/*
## widget_calender

```
<ul id="sidebar">
<li class="widget widget_calendar" id="calendar-2">
    <div id="calendar_wrap">
        <table id="wp-calendar">
        <caption>2013/7/</caption>
        <thead>
        <tr>
            <th title="mon" scope="col">mon</th>
            <th title="tue" scope="col">tue</th>
            <th title="wed" scope="col">wed</th>
            <th title="thu" scope="col">thu</th>
            <th title="fri" scope="col">fri</th>
            <th title="sat" scope="col">sat</th>
            <th title="sun" scope="col">sun</th>
        </tr>
        </thead>
        <tfoot>
        <tr>
            <td class="pad" id="prev" colspan="3">&nbsp;</td>
            <td class="pad">&nbsp;</td>
            <td class="pad" id="next" colspan="3">&nbsp;</td>
        </tr>
        </tfoot>
        <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
        </tr>
        <tr>
            <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
        </tr>
        <tr>
            <td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>
        </tr>
        <tr>
            <td><a title="Hello world!" href="http://shikinohana.localhost/date/2013/07/22">22</a></td><td>23</td><td>24</td><td id="today">25</td><td>26</td><td>27</td><td>28</td>
        </tr>
        <tr>
            <td>29</td><td>30</td><td>31</td>
            <td colspan="4" class="pad">&nbsp;</td>
        </tr>
        </tbody>
        </table>
    </div>
</li>
</ul>
```
*/
#wp-calendar {
  border-collapse: collapse;
  width: 100%;
}

#wp-calendar th {
  background: #e1e1e1;
  border: 1px solid #e1e1e1;
  text-align: center;
}

#wp-calendar td {
  border: 1px solid #e1e1e1;
  text-align: center;
}

#wp-calendar tfoot {
  margin-top: 0.5rem;
}

#wp-calendar tfoot td {
  border: none;
}

#wp-calendar a {
  text-decoration: underline;
}

/*
## widget_categories, widget_pages
*/
.widget_categories ul,
.widget_pages ul {
  margin: 0;
  /* override bootstrap */
  padding: 0;
  /* override bootstrap */
}

.widget_categories li,
.widget_pages li {
  border-bottom: 1px dotted #e1e1e1;
  line-height: 1.625rem;
  padding: 0.5rem 0;
}

.widget_categories li:before,
.widget_pages li:before {
  content: "  \f105";
  font-family: FontAwesome;
  padding-right: 0.5rem;
}

.widget_categories a,
.widget_pages a {
  display: inline-block;
  padding: 0;
  white-space: nowrap;
}

/* 768px and up */
@media (min-width: 768px) {
  .widget_categories ul.children,
  .widget_pages ul.children {
    margin-left: 1rem !important;
  }
}

.widget_categories .children li,
.widget_pages .children li {
  border: none;
  display: block;
  height: auto;
  line-height: 1.625rem;
  padding: 0.5rem 0 0;
}

/*
# widget_nav_menu style defines at _wp-menu.scss
*/
/* ---------------------------------------------------------
# site base style
---------------------------------------------------------- */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: #fff;
  color: #333;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 16px;
  line-height: 1.6875;
  overflow-wrap: break-word;
}

/*
 * base link style uses bootstrap default.
 * normal, hover, active, visited, focus
 */
img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

embed {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

table {
  max-width: 100%;
}

/*
 * strong, em
 */
strong,
em {
  border: none;
  font-style: normal;
  font-weight: bold;
  vertical-align: bottom;
}

/* -------------------------------------------------------------------
# page link
------------------------------------------------------------------- */
.pagetop {
  clear: both;
  margin: 1rem 1rem 2rem 0;
  text-align: right;
}

.pageback {
  clear: both;
  margin: 0.5rem 0;
}

/* -------------------------------------------------------------------
# custom-header
------------------------------------------------------------------- */
.custom-header {
  padding: 0 0 3rem;
}

/* -------------------------------------------------------------------
# header
------------------------------------------------------------------- */
.header {
  overflow: visible;
  padding: 10px 0 8px;
  z-index: 1;
}

.header__main {
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 32px 0 0;
}

.header__main .header__logo {
  margin: 0 auto;
  padding: 8px auto;
}

.header__main .header__logo h1 {
  font-size: 2.25em;
  line-height: 1.625em;
  margin: 0;
  padding: 0;
}

.header__lead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin-bottom: 42px;
  /*
   * description
   */
  /*
   * about
   */
}

.header__lead .header__description .site-description {
  color: #999999;
  font-size: 14px;
  margin: 0;
  padding: 8px 0;
}

.header__lead .header__about {
  clear: both;
}

.header__lead .header__about .header__about__item {
  margin: 0.125rem 0.8125rem 0.125rem 0;
  padding: 0;
  text-align: right;
}

/* -------------------------------------------------------------------
# main
------------------------------------------------------------------- */
.main {
  margin-top: 32px;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .main {
    margin-top: 0;
  }
}

/* -------------------------------------------------------------------
# side
------------------------------------------------------------------- */
.side {
  margin-bottom: 48px;
  margin-top: 32px;
}

.side ul {
  list-style-type: none;
  margin: 0 !important;
  padding: 0 !important;
}

@media screen and (max-width: 767px) {
  .side {
    margin-bottom: 16px;
  }
}

.left-side {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}

#sidebar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 24px 24px 32px;
}

@media screen and (max-width: 767px) {
  #sidebar {
    margin-left: -15px;
    margin-right: -15px;
    padding: 24px 10px;
  }
}

#sidebar > div {
  min-width: 300px;
  padding: 0 10px;
}

.col-md-4 #sidebar > div {
  min-width: 100%;
}

/* -------------------------------------------------------------------
# footer
------------------------------------------------------------------- */
.footer {
  padding: 1.5rem 2rem;
}

@media screen and (max-width: 767px) {
  .footer {
    padding: 0;
  }
}

.footer__copy {
  clear: both;
  padding: 1.25rem 1.25rem 0.25rem;
  text-align: center;
}

/* -------------------------------------------------------------------
jquery.bxslider 
------------------------------------------------------------------- */
/* override */
.bx-wrapper .bx-viewport {
  left: 0 !important;
}

/* override */
ul.bxslider {
  padding-left: 0 !important;
}

/* -------------------------------------------------------------------
# print style override bootstrap
------------------------------------------------------------------- */
@media print {
  a[href]:after {
    content: "" !important;
  }
  abbr[title]:after {
    content: "" !important;
  }
}

/* -------------------------------------------------------------------
# clearfix

```
<div class="clearfix" style="background: #ccc">
<p style="float: left;">statement.</p>
<p style="float: left;">statement.</p>
</div>
<div style="margin-top: 45px; background: #eee">statement.</div>
```
------------------------------------------------------------------- */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
  *zoom: 1;
}