/*
Theme Name: BlankSlate
Theme URI: https://opencollective.com/blankslate
Author: Bryan Hadaway
Author URI: https://opencollective.com/blankslate#section-contributors
Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/bhadaway/blankslate/issues. Thank you.
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2024.2
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

BlankSlate WordPress Theme 2011-2024
BlankSlate is distributed under the terms of the GNU GPL
*/

@import "destyle.min.css";

html {
  overflow-y: scroll;
  scroll-behavior: smooth;
  --text-color: hsl(25, 100%, 5%);
  --bg-color: hsl(45, 100%, 95%);
  --border-color: hsl(25, 100%, 25%);
}

/*---------- フォント ----------*/

body {
  font-family: "Klee One", cursive;
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  color: var(--text-color);
  background-color: var(--bg-color);
}

h1,
h2 {
  font-family: "Zen Antique", serif;
  font-weight: 400;
  font-style: normal;
}

/* フォントサイズは各項目で */

nav a {
  font-family: "Bitter", serif;
}

img {
  border-radius: 15px;
}

p {
  text-align: center;
  line-height: 1.5;
}

th {
  font-weight: normal;
}

/*---------- ハンバーガーメニュー ----------*/

#drawer {
  display: none;
  width: 50px;
  height: 50px;
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 5;
}

#drawer::before,
#drawer::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  left: 10px;
  margin-top: -1px;
  border-top: 2px solid var(--text-color);
  color: var(--text-color);
  transition: box-shadow 0.1s ease-out, transform 0.1s ease-out 0.15s;
}

#drawer::before {
  box-shadow: 0 -10px, 0 10px;
}

#drawer.open::before {
  box-shadow: 0 0, 0 0;
  transform: rotate(45deg);
}

#drawer.open::after {
  transform: rotate(-45deg);
}

/*---------- ヘッダ ----------*/

header {
  width: 100%;
}

.index-header {
  width: 100%;
  height: 100vh;
  background: url("images/i-header.png") center/cover fixed no-repeat;
}

/* index.htmlのh1とそのボックス*/
.index-h1 {
  width: 15rem;
  height: 25rem;
  margin: auto;
  padding: 1rem;
  position: fixed;
  inset: 0;
  background-color: hsla(45, 100%, 95%, 0.625);
}

.index-h1 h1 {
  width: fit-content;
  height: fit-content;
  margin: auto;
  position: absolute;
  inset: 0;
  font-size: 3rem;
  writing-mode: vertical-rl;
  color: #000;
}

.index-h1 h1 span {
  display: inline-block;
  margin-right: 1.5rem;
  margin-top: 3rem;
  font-size: 6rem;
}

@media (hover: none) and (pointer: coarse) {
  .index-header {
    background-attachment: scroll;
  }

  .index-h1 {
    position: absolute;
  }
}

@media (max-width: 767px) {
  .index-h1 {
    width: 10rem;
    height: 16.7rem;
  }

  .index-h1 h1 {
    font-size: 2rem;
  }

  .index-h1 h1 span {
    margin-right: 1rem;
    margin-top: 2rem;
    font-size: 4rem;
  }
}

/*---------- ヘッダーのnav ----------*/

nav.h-nav {
  width: fit-content;
  height: 3rem;
  position: fixed;
  top: 16px;
  right: 16px;
  background-color: hsla(45, 100%, 95%, 0.5);
  z-index: 5;
}

nav.h-nav ul {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

nav.h-nav a {
  display: inline-block;
  width: fit-content;
  height: 3rem;
  padding: 0 1.5rem;
  line-height: 3rem;
  transition: 0.2s;
}

@media (any-hover: hover) {
  nav.h-nav a:hover {
    background-color: hsla(45, 100%, 95%, 0.625);
    opacity: 0.5;
  }
}

@media (max-width: 949px) {
  #drawer {
    display: block;
    z-index: 6;
  }

  nav.h-nav {
    display: none;
  }

  nav.h-nav {
    width: 100%;
    height: 100vh;
    position: fixed;
    inset: 0;
    background-color: hsla(45, 100%, 95%, 0.8);
    z-index: 5;
  }

  nav.h-nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
  }

  nav.h-nav a {
    display: block;
    height: fit-content;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
    transition: none;
  }
}

/*---------- セクション共通 ----------*/

main {
  position: relative;
  background-color: var(--bg-color);
  padding-bottom: 30px;
}

section {
  padding-block: 6rem;
  margin: auto;
}

.container {
  width: clamp(800px, 80vw, 1200px);
  margin: 4rem auto 2rem;
}

hgroup h2 {
  width: fit-content;
  margin: auto;
  padding: 0 1.5rem 0.2rem;
  border-bottom: 2px solid var(--border-color);
  font-size: 3rem;
  text-align: center;
}

hgroup p {
  width: fit-content;
  margin: auto;
  font-size: 1.5rem;
  line-height: unset;
}

@media (max-width: 949px) {
  .container {
    width: 95%;
  }
}

/*---------- インター各種 ----------*/

section[class^=inter] {
  height: clamp(300px, 50vh, 500px);
  padding: 0;
  position: relative;
}

.inter1 {
  background: url(images/inter1.webp) center/cover fixed no-repeat;
}

.inter2 {
  background: url(images/inter2.webp) center/cover fixed no-repeat;
}

.inter3 {
  background: url(images/inter3.webp) center/cover fixed no-repeat;
}

.inter4 {
  background: url(images/inter4.webp) center/cover fixed no-repeat;
}

@media (max-width: 949px) {
  section[class^=inter] {
    height: clamp(200px, 50vh, 300px);
  }
}

@media (hover: none) and (pointer: coarse) {
  section[class^=inter] {
    background-attachment: scroll;
  }
}

/*---------- About ----------*/

.about p {
  margin-bottom: 1.25rem;
  text-align: unset;
}

.about-flex {
  display: flex;
  gap: 64px;
  align-items: center;
  height: fit-content;
}

.about-image {
  flex: 0 0 350px;
  position: relative;
}

.about-image img {
  width: 350px;
  filter: sepia(30%) saturate(90%);
}

.about-text {
  height: fit-content;
}

@media (max-width: 949px) {
  .about-flex {
    display: block;
  }

  .about-image {
    display: none;
  }

  .about-text {
    width: 100%;
    padding: 5rem 2rem;
    border-radius: 15px;
    position: relative;
    background: url(images/shop_out.webp) center/cover no-repeat;
    z-index: 0;
  }

  .about-text::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: hsla(45, 100%, 95%, 0.75);
    z-index: -1;
  }

  #about hgroup,
  .about p {
    position: relative;
    z-index: 0;
  }
}

/*---------- Menu ----------*/

.menu p {
  padding: 1rem 0 3rem;
  text-align: center;
}

.menu-image {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(200px, 300px) minmax(200px, 300px);
  gap: 32px;
  justify-content: center;
  margin: auto;
}

.menu-image img {
  width: 100%;
}

a.button {
  display: block;
  width: fit-content;
  height: 2.5rem;
  padding: 1rem 1.5rem;
  margin: 64px auto 0;
  background-color: hsl(25, 100%, 20%);
  color: #fff;
  text-align: center;
  line-height: 0.5rem;
}

@media (any-hover: hover) {
  a.button:hover {
    background-color: hsl(25, 100%, 30%);
    transition: background-color 0.2s;
  }
}

@media (max-width: 949px) {
  .menu-image {
    grid-template-columns: minmax(100px, 300px) minmax(100px, 300px);
    gap: 16px;
  }
}


/*---------- Blog ----------*/
.blog p {
  text-align: center;
  margin-bottom: 1.5rem;
}

.blog h3 {
  padding-bottom: 5px;
  border-bottom: 5px double var(--border-color);
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.blog .post-list {
  padding-inline: 1.25rem;
}

.blog .post-list .post {
  padding-block: 10px;
  border-bottom: 1px solid hsl(25, 100%, 80%);
}

.blog .post-list .post-title {
  display: block;
  text-align: left;
}

.blog .post-list .post-info {
  display: block;
  text-align: right;
  font-size: 1rem;
}

.blog .post-list .post-info :any-link {
  color: hsl(25, 100%, 40%);
  transition: 0.1s;
}

@media (any-hover: hover) {
  .blog .post-list .post-info :any-link:hover {
    color: hsl(25, 100%, 70%);
  }
}


/*---------- Access ----------*/

.access dl {
  margin-top: 1.5rem;
}

.access dt {
  width: fit-content;
  margin: 1.5rem auto 0;
  padding: 0 0.5rem 3px;
  border-bottom: double 3px var(--border-color);
  font-size: 1.35rem;
}

.access :is(dt, dd) {
  text-align: center;
}

.access dd{
  line-height: 1.5;
}

/*---------- Contact ----------*/


form dl {
  width: fit-content;
  margin: 3rem auto;
  display: grid;
  grid-template-columns: auto auto;
}

form dt {
  padding: 1.5rem 1rem;
  font-weight: normal;
  text-align: right;
}

form dd {
  width: 30rem;
  text-align: left;
  padding: 1.5rem 1rem;
}

input {
  width: 100%;
  border: 1px solid var(--border-color);
  text-align: left;
}

textarea {
  width: 100%;
  height: 10rem;
  border: 1px solid var(--border-color);
  resize: none;
}

input:focus,
textarea:focus {
  outline: none;
}

form button {
  display: block;
  margin: auto;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  background-color: hsl(25, 100%, 40%);
  color: #fff;
  transition: 0.2s;
}

@media (any-hover: hover) {
  form button {
    background-color: transparent;
    color: inherit;
  }

  form button:hover {
    background-color: hsl(25, 100%, 40%);
    color: #fff;
  }
}

@media (max-width: 949px) {
  form dl {
    display: block;
    text-align: left;
    width: 95%;
  }

  form dt {
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: 1.25rem;
    font-weight: normal;
    text-align: unset;
  }

  form dd {
    width: 100%;
    padding: 0;
    margin-bottom: 3rem;
  }

  input {
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
  }

  textarea {
    width: 100%;
    height: 160px;
    border: 1px solid var(--border-color);
    resize: none;
    text-align: left;
  }

}

/*---------- トップへ戻るボタン ----------*/

#to-top {
  position: sticky;
  width: 60px;
  height: 60px;
  margin-left: calc(100vw - 84px);
  bottom: 24px;
  text-align: right;
}

#to-top img {
  width: 60px;
  height: 60px;
}

@media (max-width: 767px) {
  #to-top {
    width: 50px;
    height: 50px;
    margin-left: calc(100vw - 66px);
    bottom: 16px;
  }

  #to-top img {
    width: 50px;
    height: 50px;
  }
}

@media (any-hover: hover) {
  #to-top img {
    opacity: 0.2;
    transition: 0.2s;
  }

  #to-top img:hover {
    opacity: 1;
  }
}

/*---------- フッター ----------*/

footer {
  height: 10rem;
  position: relative;
  background-color: hsl(25, 100%, 20%);
  color: #fff;
  padding-top: 32px;
}

.f-nav {
  width: fit-content;
  height: 3rem;
  margin: auto;
}

.f-nav ul {
  width: fit-content;
  height: 3rem;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.small {
  font-size: 0.75rem;
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
}

@media (max-width: 949px) {
  .f-nav ul {
    gap: 24px;
  }
}

@media (max-width: 499px) {
  footer {
    height: 18.75rem;
  }

  .f-nav {
    margin-left: 32px;
  }

  .f-nav ul {
    flex-direction: column;
    justify-content: left;
    gap: 8px;
  }
}

/*---------- index.php, single.php 以外のページのヘッダ ----------*/

.etc-header {
  width: 100%;
  height: 7.25rem;
  position: fixed;
  top: 0;
  border-bottom: 1px solid #ddd;
  background-color: var(--bg-color);
  z-index: 1;
}

@media (any-hover: hover) {
  .etc-header {
    border-bottom: 1px solid transparent;
    background-color: transparent;
    opacity: 0.25;
    transition: 0.2s;
  }

  .etc-header:hover,
  .etc-header.opaque {
    opacity: 1;
    border-bottom: 1px solid #ddd;
    background-color: var(--bg-color);
  }
}

.etc-h1 h1 {
  width: fit-content;
  height: fit-content;
  margin: 1rem;
  font-size: 1.5rem;
  transition: 0.2s;
}

.etc-h1 h1 span {
  font-size: 3rem;
}

@media (any-hover: hover) {
  .etc-h1 h1:hover {
    opacity: 0.5;
  }
}

.etc-header .h-nav {
  top: 2rem;
  background-color: transparent;
}

.etc-header #drawer {
  top: 2rem;
}

.etc-main {
  padding-top: 1.25rem;
  min-height: calc(100vh - 34.75rem);
}
@media (max-width: 499px) {
  .etc-main {
    min-height: calc(100vh - 43.5rem);
  }
}

.heading {
  margin-top: 7.25rem;
  width: 100%;
  height: 17.5rem;
  position: relative;
  background: url(images/header.webp) center/cover no-repeat fixed;
  z-index: -2;
}

.heading::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: hsla(45, 100%, 95%, 0.25);
  z-index: -1;
}

.heading hgroup {
  width: fit-content;
  height: fit-content;
  position: fixed;
  inset: 0;
  top: calc(7.25rem + (17.5rem / 2));
  transform: translateY(-50%);
  margin: 0 auto;
  z-index: 0;
}

.heading :is(h2, p) {
  text-shadow: 0 0 3px #C7E2E4;
}


@media (hover: none) and (pointer: coarse) {
  .heading {
    background-attachment: scroll;
  }

  .heading hgroup {
    position: absolute;
    top: 50%;
  }
}

section.no-padding {
  padding-top: 0;
}

/*---------- menu.html ----------*/

.menu-grid {
  display: grid;
  grid-template-columns: minmax(100px, 400px) minmax(200px, 800px);
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin: 3rem auto 6rem;
}

.menu-grid .image img {
  width: 100%;
}

.menu-grid .text {
  height: fit-content;
}

.menu-grid .text h3 {
  width: fit-content;
  margin-bottom: 5rem;
  padding: 0 10rem 2px 2rem;
  position: relative;
  border-bottom: 2px solid var(--border-color);
  font-size: 2rem;
}

.menu-grid .text h3::after {
  content: "";
  height: calc(100% + 21px);
  position: absolute;
  top: 0;
  left: 1rem;
  border-left: 2px solid var(--border-color);
}

.menu-grid .text table {
  width: max(200px, 90%);
  margin: auto;
}

.menu-grid .text table caption {
  margin-bottom: 1rem;
  font-size: smaller;
  color: #555;
}

.menu-grid .text table :is(th, td) {
  padding-top: 1rem;
}

.menu-grid .text table tr:first-of-type :is(th, td) {
  padding-top: 0;
}

.menu-grid .text table td[colspan] {
  padding-top: 0;
  font-size: smaller;
  color: #555;
}

@media (max-width: 949px) {
  .etc-header {
    opacity: 1;
    border-bottom: 1px solid #ddd;
    background-color: var(--bg-color);
  }

  .etc-header .h-nav {
    top: 0;
    background-color: hsla(45, 100%, 95%, 0.75);
  }

  section.no-padding {
    padding-bottom: 0;
  }

  .menu-grid .text h3 {
    padding-right: 2rem;
  }

  .menu-grid {
    gap: 16px;
  }
}

@media (max-width: 499px) {
  .menu-grid {
    display: flex;
    flex-direction: column-reverse;
    gap: 2rem;
  }

  .menu-grid .text h3 {
    margin: 0 auto 3rem;

  }

  .menu-grid .text table th {
    display: block;
    width: fit-content;
    margin: auto;
    padding-inline: 1rem;
    border-bottom: 3px double var(--border-color);
  }

  .menu-grid .text table td {
    display: block;
    width: fit-content;
    margin: 0 auto 1rem;
    padding: 0;
  }
}

/*---------- single.php(記事ページ) ----------*/

.single-main {
  min-height: calc(100vh - 160px - 32px);
}

[class$=columns] {
  /* single-columnsとarchive-columnsに適用 */
  display: grid;
  grid-template-columns: minmax(calc(600px - 2rem), calc(80% - 1rem)) max(200px, calc(20% - 1rem));
  gap: 2rem;
  position: relative;
}

h2.entry-title {
  width: fit-content;
  margin: 1rem auto 4rem;
  padding: 0 1rem 2px;
  text-align: center;
  font-size: 2rem;
}

.entry-info {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 3rem;
  padding-block: 5px;
  border-block: 3px double hsl(25, 100%, 20%);
}

.entry-info p {
  padding-inline: 1rem;
  font-size: 0.875rem;
  font-family: sans-serif;
  line-height: unset;
}

.entry-info a{
  color: hsl(25, 100%, 30%);
  transition: 0.1s;
}
@media (any-hover: hover) {
  .entry-info a:hover{
    color:hsl(25, 100%, 70%);
  }
}
article.single-content {
  padding-bottom: 5rem;
  border-bottom: 1px solid hsl(25, 100%, 80%);
}

article.single-content p {
  line-height: 1.5;
  margin-block: 2rem;
  text-align: unset;
}
article.single-content .thumbnail img {
  display: block;
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  max-height: 300px;
  margin-inline: auto;
}



.prev-next {
  width: 100%;
  height: fit-content;
  margin-top: 5rem;
}

.prev-next div {
  font-size: 1.1rem;
}

.prev-next .prev {
  float: left;
  text-align: left;
}

.prev-next .next {
  float: right;
  text-align: right;
}

.prev-next::after {
  content: "";
  display: block;
  clear: both;
}

.prev-next a{
  color: hsl(25, 100%, 40%);
  transition: 0.1s;
}

@media (any-hover: hover) {
  .prev-next a:hover{
    color: hsl(25, 100%, 70%);
  }
}
@media (max-width: 949px) {
  .single-padding {
    padding-bottom: 0;
  }

  [class$=columns] {
    /* single-columnsとarchive-columnsに適用 */
    display: block;
    position: static;
  }
}

/*---------- aside.php ----------*/

[class$=columns] .aside-column {
  position: sticky;
  top: 3rem;
  height: fit-content;
}

.single-columns .aside-column {
  margin-top: 10rem;
}

.aside-column {
  font-size: 1.125rem;
}

.aside-column h2 {
  width: fit-content;
  margin: 0 auto 1rem;
  padding: 0 5px 3px;
  border-bottom: 2px solid hsl(25, 100%, 20%);
  font-size: 1.25rem;
}

.aside-column [class$=list] {
  margin-bottom: 2rem;
}

.aside-column [class$=list] li {
  padding: 0 0.25rem 0.25rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid hsl(25, 100%, 80%);
}

.aside-column .tag-list a {
  padding: 0 5px 5px;
  border: solid 1px hsl(25, 100%, 80%);
  border-radius: 10px;
}

/*文字サイズはCSSで指定できない。テンプレートタグ内で指定している。*/

@media (max-width: 949px) {
  [class$=columns] .aside-column {
    position: static;
  }

  [class$=columns] .aside-column {
    margin-top: 3rem;
  }
}

/*---------- archive.php, home.php ----------*/

.archive-columns .article-column .entry-list li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 32px;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid hsl(25, 100%, 80%);
}

.archive-columns .article-column .archive-image {
  width: 150px;
}

.archive-columns .article-column .archive-info {
  position: relative;
  height: 100%;
  width: 100%;
}

.archive-columns .article-column .archive-info p.ttl {
  position: absolute;
  top: 1rem;
  left: 0;
  text-align: left
}

.archive-columns .article-column .archive-info p.info {
  position: absolute;
  bottom: 1rem;
  right: 0;
  font-size: 1rem;
  text-align: right;
}

.archive-columns .article-column .archive-info p.info a,
.all_post-pagenate a,
.archive-columns .nav-links a {
  color: hsl(25, 100%, 40%);
}

@media (any-hover: hover) {

  .archive-columns .article-column .archive-info p.info :any-link:hover,
  .all_post-pagenate a:hover,
  .archive-columns .nav-links a:hover {
    color: hsl(25, 100%, 70%);
  }
}

.archive-columns .nav-links {
  margin-top: 1rem;
  text-align: center;
}

.archive-columns .nav-links li {
  display: inline;
}

.archive-columns .nav-links a {
  font-family: "Klee One", cursive;
  font-weight: 600;
}

.all_post-pagenate {
  margin-top: 1rem;
  text-align: center;
}