/*!
Theme Name: workcationable
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: workcationable
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

workcationable is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* breadcrumb */
.breadcrumb {
  font-size: 0.9rem;
  margin: 1em auto;
  padding: 0 1rem;
  max-width: 108rem;
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.breadcrumb li + li:before {
  content: ">";
  padding: 0 0.5em;
  color: #999;
}

.breadcrumb li a{
  text-decoration: underline;
}


/* single-post */

/* 基本レイアウト */
article.experience-article {
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1a1a1a;
  line-height: 1.9;
  font-size: 17px;
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 1rem;
  background: #fff;
}

/* h1は通常タイトルとして使われるので本文では非表示に近い扱いに */
.experience-article h1 {
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 5rem 0 3rem;
  border: none;
  padding: 0;
}

/* h2（note風の大見出し） */
.experience-article h2 {
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.35;
  margin: 5rem 0 3rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #eee;
}

/* h3（中見出し。装飾控えめ） */
.experience-article h3 {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 4rem 0 3rem;
  color: #333;
}

/* 段落 */
.experience-article p {
  margin: 3rem 0;
  line-height: 1.9;
  word-break: break-word;
}

/* リスト */
.experience-article ul,
.experience-article ol {
  padding-left: 3rem;
  margin: 3rem 0;
}

.experience-article ul li,
.experience-article ol li {
  margin-bottom: 1.5rem;
}

/* 画像 */
.experience-article img {
  display: block;
  max-height: 64rem;
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  width: auto;
}

.experience-article .wp-block-gallery img{
  margin: 0 auto;
}

.experience-article img.experience-article__thumbnail{
  margin: 0 auto 2rem;
  max-height: none;
}

.experience-article figcaption.wp-element-caption{
  font-size: 1.4rem;
  margin-bottom: 2rem;
  margin-top: -1.5em;
  text-align: center;
}

/* 投稿ナビゲーション全体 */
.navigation.post-navigation {
  display: flex;
  justify-content: center;
  margin: 3rem 0 5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
}

/* archive-experience pagenation */
.pagination{
  display: flex;
  font-size:1.6rem;
  gap: 1em;
  justify-content: center;
}

/* single-experience リンクエリア */
.navigation.post-navigation .nav-links {
  display: flex;
  gap: 1em 4em;
  justify-content: center;
}

/* 個々のリンク */
.navigation.post-navigation .nav-previous a,
.navigation.post-navigation .nav-next a {
  display: inline-block;
  padding: 0;
  color: #333;
  text-decoration: none;
  font-size: 1.4rem;
  transition: all 0.2s ease;
}

.navigation.post-navigation .nav-previous a:hover,
.navigation.post-navigation .nav-next a:hover {
  color: #000;
}

/* アクセシビリティ用見出しは非表示に */
.navigation.post-navigation .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.experience-article__meta{
  font-size:1.2rem;
  margin: 3rem 0;
}
.experience-article__author{

}
.experience-article__author__icon{
  align-items: center;
  border:1px solid #ccc;
  border-radius: 0.4rem;
  color:#ccc;
  font-size:1.2rem;
  justify-content: center;
  line-height: 1;
  margin-right: 0.5em;
  padding: 0.2em 1em;
}



/* モバイル対応 */
@media (max-width: 767px) {
  .experience-article article {
    padding: 4rem 2rem;
  }

  .experience-article h1 {
    font-size: 3.2rem;
  }

  .experience-article h2 {
    font-size: 2.6rem;
  }

  .experience-article h3 {
    font-size: 2.2rem;
  }

  .experience-article p {
    font-size: 16px;
  }

  .navigation.post-navigation .nav-links {
    flex-wrap: wrap;
    padding: 0 1rem;
    text-align: center;
  }
  
}