@charset "UTF-8";
/*
Theme Name: SPD
Author: K.Kagawa
Description: オリジナルテーマ
Version: 1.0
*/

img {
    max-width: 100%;
    height: auto;
}

.alignleft {
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.alignright {
  float: right;
  margin-left: 1em;
  margin-right: 0;
}

.aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.wp-block-categories.aligncenter,
.wp-block-latest-posts.aligncenter,
.wp-block-archives.aligncenter,
.wp-block-tag-cloud.aligncenter,
.wp-block-latest-comments.aligncenter,
.wp-block-rss.aligncenter {
  text-align: center;
}

figure {
  margin-left: 0;
  margin-right: 0;
}

body {
  box-sizing: border-box;
}

body *,
body *::before,
body *::after {
  box-sizing: inherit;
}

/* 変数 */
:root {
  --f1: 2.44em;
  --f2: 1.95em;
  --f3: 1.56em;
  --f4: 1.25em;
  --f5: 1em;
  --f6: 0.8em;

  --basecolor: #63a211;
  --gradient: linear-gradient(79.7deg, rgba(34,126,34,1) 8.2%, rgba(99, 162, 17, 1) 84.9%);
  --myfont: 'Josefin Sans', sans-serif;
}


/* フォント */
body {
  font-family: sans-serif;
}

p {
  line-height: 1.8;
  font-size: var(--f5);
}

h1 {
  font-size: var(--f1)
}

h2 {
  font-size: var(--f2);
}

h3 {
  font-size: var(--f3);
}

h4 {
  font-size: var(--f4);
}

h5 {
  font-size: var(--f5);
}

h6 {
  font-size: var(--f6);
}

h2 {
  border-left: solid 14px var(--basecolor);
  padding-left: 14px;
}

/* 横幅 */
body {
  margin: 0;
}

.mycontainer {
  margin-left: 10px;
  margin-right: 10px;
}

@media (min-width: 740px) {
  .mycontainer {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 投稿記事に関する情報 */
.myposthead {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.myposthead p {
  color: var(--basecolor);
  font-family: var(--myfont);
  font-weight: bold;
}

/* リンク */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
opacity: 0.7;
}

/* 投稿記事が属するカテゴリー */
.post-categories {
  display: flex;
  justify-content: center;
  padding: 0;
  list-style-type: none;
}

.post-categories li:not(last-child) {
  margin-left: 10px;
}

.post-categories a {
  padding: 3px 10px;
  border: solid 1px currentColor;
  border-radius: 10px;
  color: var(--basecolor);
  font-size: var(--f6);
}

.post-categories::before {
  content: "\f318";
  font-family: "dashicons";
  color: var(--basecolor);
  font-size: var(--f2);
  line-height: 1;
  margin-right: 5px;
}

/* スクリーンリーダー用のテキスト */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  word-wrap: normal !important;
}

/* 前後の投稿記事へのリンク */
.nav-links {
  display: flex;
  margin: 30px 0;
  font-size: var(--f6);
}

.nav-previous {
  flex: 1;
  display: flex;
  align-items: center;
}

.nav-next {
  flex: 1;
  margin-left: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-previous::before {
  content: "\f141";
}

.nav-next::after {
  content: "\f139";
}

.nav-previous::before, .nav-next::after {
  font-family: "dashicons";
  color: var(--basecolor);
  font-size: var(--f2);
  line-height: 1;
}

/* ヘッダー */
.myhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  color: #444;
}

.myhead a {
  font-size: var(--f3);
  font-family: var(--myfont);
}

.myhead p {
  font-size: var(--f6);
}

/* フッター */
.myfoot {
  padding: 16px;
  background-color: var(--basecolor);
  background-image: var(--gradient);
  color: #fff;
  text-align: center;
  font-family: var(--myfont);
}