/*
Theme Name: inherit-garage-guide_theme
Template: vantage
Author: SiteOrigin
Author URI: https://siteorigin.com/
Theme URI: https://siteorigin.com/theme/vantage/
Description: inherit-garage-guide_theme is a flexible multipurpose theme. Its strength lies in its tight integration with some powerful plugins like Page Builder for responsive page layouts, Smart Slider 3 for big beautiful sliders and WooCommerce to help you sell online. inherit-garage-guide_theme is fully responsive and retina ready. Use it to start a business site, portfolio or online store. We offer free support on our <a href="https://siteorigin.com/thread/">forum</a> (https://siteorigin.com/thread/).
Version: 1.20.33
Tested up to: 6.8
Requires at least: 4.7
Requires PHP: 5.6.20
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vantage
Tags: two-columns, left-sidebar, right-sidebar, grid-layout, custom-background, custom-colors, custom-menu, custom-logo, featured-images, footer-widgets, full-width-template, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, blog, e-commerce
*/

@import url("../vantage/style.css");

/* 記事を左右2カラムに */
#content article .entry-main {
  display: grid;
  grid-template-columns: 48% 1fr;
  grid-template-areas:
    "image title"
    "image content";
  column-gap: 48px;
  align-items: center;
}

/* headerの箱だけ消して、中身をgridに参加させる */
#content article .entry-header {
  display: contents;
}

#content article .entry-thumbnail {
  grid-area: image;
}

#content article .entry-title {
  grid-area: title;
  align-self: end;
}

#content article .entry-content {
  grid-area: content;
  align-self: start;
}

/* 偶数の記事は左右反転 */
#content article:nth-of-type(even) .entry-main {
  grid-template-columns: 1fr 48%;
  grid-template-areas:
    "title image"
    "content image";
}

/* 画像 */
#content article .entry-thumbnail img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;

  filter:
    sepia(64%)
    saturate(125%)
    hue-rotate(-10deg)
    brightness(92%)
    contrast(108%);
}

/* 記事ごとの余白 */
#content article {
  margin-bottom: 80px;
}

/* スマホは縦並び */
@media screen and (max-width: 768px) {
  #content article .entry-main,
  #content article:nth-of-type(even) .entry-main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "title"
      "content";
    row-gap: 20px;
  }

  #content article .entry-thumbnail img {
    height: auto;
  }

  #content article {
    margin-bottom: 50px;
  }
}
/* 目次 */ 
.single__index {
    border: 1px solid #d2d2d2;
    padding: 10px;
    border-radius: 10px;
    background-color: #fcfcfc;
    max-width: 60%;
    margin: 2rem auto;
}
.single__index .index__title {
    text-align: center;
    font-size: 15px;
    margin-bottom: 1rem;
}
.single__index ul, .single__index ol {
    border: none !important;
    padding: 0 0 0 0px !important;
    background-color: #fcfcfc !important;
    margin: 0;
}
.entry-content ul li, .entry-content ol li {
    margin-left: 1.5em;
    line-height: 1.4;
    padding-bottom: 0.5rem;
}
.single__index a {
  font-size: 13px;
}
li.index__item li::marker {
    content: "- ";
}
/* チェックボックスを隠す */
.toggle-toc {
  display: none;
}
/* 目次のデフォルト状態を非表示にする */
.index__list {
  display: none;
}
/* チェックボックスがチェックされたときに目次を表示する */
.toggle-toc:checked ~ .index__list {
  display: block;
}
.index__title {
  font-weight: bold;
  cursor: pointer;
  display: block;
}
.single__index .index__title:after {
    content: "";
    display: block;
    content: "〉";
    padding: 0.5rem;
    transform: rotate(90deg);
}
.toggle-toc:checked + .index__title:after {
    transform: rotate(-90deg);
}

.main-navigation {
    background: #fff;
}

.main-navigation ul li:hover > a, .main-navigation ul li.focus > a {
    background: #3d250e82;
    color: #fff;
}
.main-navigation a {
    color: #4a3012;
}
#colophon {
    background: #100802;
}
#content article .entry-title {
    padding-bottom: 1rem;
    letter-spacing: 1px;
    line-height: 1.6;
    margin-bottom: 2rem;
    border-bottom: 1px solid #1e0a0245;
}
.entry-content a.more-link,body.responsive .site-content .nav-previous a, body.responsive .site-content .nav-next a{
  display: inline-flex !important;
  align-items: center;
  gap: 14px;

  margin-top: 28px;
  padding: 0 !important;

  color: #5f4637 !important;
  background: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-decoration: none !important;
  text-shadow: none !important;
}

.entry-content a.more-link .meta-nav {
  display: none;
}

.entry-content a.more-link::after {
  content: "→";
  font-size: 16px;
  transition: transform 0.25s ease;
}

.entry-content a.more-link:hover {
  color: #b06a38 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.entry-content a.more-link:hover::after {
  transform: translateX(6px);
}
article.post .entry-header .entry-thumbnail a:hover {
    opacity: 0.6;
    transition: color 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

a,.cop a {
    color: #b36b16;
}
.cop {
    text-align: center;
    background: #100802;
    color: #fff;
}

/* 下層記事ページのみ */
.single-post .entry-content-wrapper {
  display: grid;
  grid-template-columns: minmax(320px, 46%) 1fr;
  gap: 48px;
  align-items: start;
}

/* 左のアイキャッチを固定 */
.single-post .entry-thumbnail {
  position: sticky;
  top: 32px;
  align-self: start;
}

/* 画像 */
.single-post .entry-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* スマホでは通常表示に戻す */
@media screen and (max-width: 768px) {
  .single-post .entry-content-wrapper {
    display: block;
  }

  .single-post .entry-thumbnail {
    position: static;
    margin-bottom: 24px;
  }
.hgroup.full-container {
    padding-bottom: 0 !important;
}
	body.responsive.layout-full #page-wrapper .full-container,body.responsive.layout-full #page-wrapper .full-container {
    padding-bottom: 0 !important;
}
#main {
    
    padding: 35px 1rem;
}
div#navxt-breadcrumbs {
    display: flex;
    overflow-x: scroll;
    word-break: keep-all;
    white-space: nowrap;
    flex-wrap: nowrap;
}
}
article.post .entry-header h1.entry-title, article.page .entry-header h1.entry-title {
    color: #231304;
}
 .entry-content h2, .entry-content h3, .entry-content h4{
    color: #451202;

}
.entry-content h2 {
    font-size: 1.4em;
}
.entry-content {
    color: #120701bf;
    font-size: 14px !important;
}
.entry-content ul {
    border: 1px solid #3f200142;
    padding: 2rem 2rem 1rem;
}
div#site-info {
    display: none;
}

.page #content article .entry-main ul {
    border: none;
    margin-bottom: 3rem;
}
.page #content article .entry-main {
    display: block;
}
.entry-content a, .entry-content a:visited, article.post .author-box .box-content .author-posts a:hover, #secondary a, #secondary a:visited, #masthead .hgroup a, #masthead .hgroup a:visited, .comment-form .logged-in-as a, .comment-form .logged-in-as a:visited {
    color: #973d10 !important;
}


.entry-thumbnail {
    margin: 0 auto !important;
}
ul#menu-main {
    text-align: center;
}
.entry-content table td {
    border: solid 1px #eee;
    padding: 0.5rem;
    line-height: 1.4;
}
.entry-content table th {
    vertical-align: middle;
    text-align: center;
    background: #eee;
    line-height: 1.4;
    padding: 0.5rem;
}
.entry-content table {
    border-bottom: 1px solid #3b18072e;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    line-height: 2;
    margin: 0 0 20px;
    width: 100%;
}