@charset "UTF-8";
/* 
Theme Name: Repereci
Description: レシピサイト用のテーマ
Version: 1.4
Author: Asa
*/
/* ------------
   テンプレート
---------------*/
html, body {
  height: 100%; /* フッターが浮くのを防ぐ1/3 */
}

html {
  scroll-behavior: smooth; /* ページ内を滑らかに移動 */
}

body {
  background-image: url(./img/onigiri78.png);
  background-size: 500px;
  background-repeat: repeat;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #333;
  /* フッターが浮くのを防ぐ2/3 */
  display: flex;
  flex-direction: column;
}
body.home li {
  list-style: none;
}
body.single, body.page {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9rem;
}
body.single img, body.page img {
  display: block;
  margin: auto;
  margin-bottom: 1rem;
}
body.single title, body.single p, body.single img, body.single figure, body.single ul, body.single ol, body.page title, body.page p, body.page img, body.page figure, body.page ul, body.page ol {
  margin-bottom: 1rem;
}
body.single img {
  border-radius: 50%;
  width: 150px;
}

img {
  max-width: 100%;
  height: 100%;
  vertical-align: top; /* デフォルトの下部の余白(vertical-align: baseline;)をリセット */
}

a {
  color: rgb(231, 156, 17);
}

.title {
  margin: 2rem 0 1rem;
  font-size: 1.5rem;
}

/* ------------
   WordPress
---------------*/
h2.wp-block-heading {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

/* ------------
   コンテナー
---------------*/
.container {
  max-width: 800px;
  margin: auto;
  padding: 0 3vw;
  flex: 1; /* フッターが浮くのを防ぐ3/3 */
  width: 80%;
}

body.single > .container, body.page > .container {
  background-color: rgb(255, 255, 255);
  padding: 0 5vw 3vw;
}
body.single > .container ol, body.single > .container ul, body.single > .container li, body.page > .container ol, body.page > .container ul, body.page > .container li {
  margin-left: 0.6rem;
}
body.single > .container ol > li, body.page > .container ol > li {
  margin-bottom: 0.6rem;
}

/* ------------
   　　ロゴ
---------------*/
.logo-wrapper, .custom-logo-link {
  text-align: center;
}

/* ------------
   タグクラウド
---------------*/
a.tag-cloud-link {
  border: 1px solid #333;
  padding: 5px;
  border-radius: 30px;
}

ul.wp-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 1ch;
}

/* ------------
  カテゴリー一覧
---------------*/
ul.categories-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1ch;
  margin: 3rem 0;
}

a.category-link {
  border: 1px solid #333;
  border-radius: 30px;
  background-color: #fff;
  color: #333;
  text-decoration: none;
  padding: 0.5rem;
  display: block;
}

/* ------------------
  レシピ一覧
  modal-recipe.css参照
---------------------*/
li.items-wrapper {
  background-color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
  padding: 10px;
}

h2.category-name {
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

/* ------------
 　メニュー共通
---------------*/
.footer-menu-wrapper, .main-menu-wrapper {
  display: flex;
  list-style: none;
  justify-content: center;
}

/* ------------
　フッターメニュー
---------------*/
div.footer-menu-container {
  margin-top: 5rem;
}
div.footer-menu-container li.menu-item {
  margin-left: 1rem;
}
div.footer-menu-container li.menu-item:first-child {
  margin-left: 0;
}

/* ------------
 　メインメニュー
---------------*/
div.main-menu-container {
  background-color: #fff;
  /* 固定表示 */
  position: fixed;
  z-index: 1;
  width: 100%;
  bottom: 0px;
}
div.main-menu-container a {
  color: #333;
  text-decoration: none;
}

ul.main-menu-wrapper {
  flex-wrap: wrap;
}
ul.main-menu-wrapper li.menu-item {
  flex: 1 1 100px;
  text-align: center;
}
ul.main-menu-wrapper a {
  display: block;
  padding: 1rem;
  border: 5px double rgb(231, 156, 17);
  background-color: #fff;
}

/* ------------
  　サイト情報
---------------*/
div.site-name {
  text-align: center;
  margin-bottom: 8rem;
}