@charset "UTF-8";
/*!
Author: ma.ringo
Author URI: https://tsumugi-drop.com
Last updated: 2023
*/
/* __.__.__.__.__._+_._+_._+_ Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

source {
  display: none;
}

ol, ul {
  margin-top: 0;
  padding-left: 0;
}

li {
  list-style-type: none;
}

img {
  border-style: none;
}

/* __.__.__.__.__._+_._+_._+_ Fonts */
/* lato-regular - latin */
@font-face {
  font-family: "Lato";
  src: url("fonts/lato-v20-latin-regular.woff") format("woff");
  src: local("Lato"), url("fonts/lato-v20-latin-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* arima-madurai-regular - latin */
@font-face {
  font-family: "Arima Madurai";
  src: url("fonts/arima-madurai-v7-latin-regular.woff") format("woff");
  src: local("Arima Madurai"), url("fonts/arima-madurai-v7-latin-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* special-elite-regular - latin */
@font-face {
  font-family: "Special Elite";
  src: url("fonts/special-elite-v11-latin-regular.woff") format("woff");
  src: local("Special Elite"), url("fonts/special-elite-v11-latin-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.font-lat {
  font-family: "Lato", cursive, sans-serif;
}

.font-ari {
  font-family: "Arima Madurai", cursive, sans-serif;
}

.font-eli {
  font-family: "Special Elite", cursive, sans-serif;
}

/* __.__.__.__.__._+_._+_._+_ Color */
:root {
  --site-bg: rgba(185, 162, 152, 0.8);
  --font-color: rgba(55, 50, 47, 0.95);
  --header-bg: rgba(175, 161, 142, 0.95);
  --aside-footer-bg: rgba(140, 124, 108, 0.95);
  --nav-bg: rgba(129, 123, 121, 0.9);
  --nav-bg-hover: rgba(82, 137, 132, 0.95);
  --nav-link-a: rgba(255, 255, 255, 0.95);
  --link-a: rgba(38, 115, 115, 0.95);
  --link-a-hover: rgba(191, 118, 24, 0.95);
  --link-a-active: rgba(173, 131, 25, 0.95);
  --card-bg: rgba(255, 255, 255, 0.9);
  --pager-bg: rgba(126, 111, 97, 0.95);
  --pre-code-bg: #30413d;
  --pre-code-color: #d1cdc2;
  --transparent-05: rgba(102, 102, 102, 0.5);
  --drop-shadow-w: drop-shadow(8px 4px 6px rgba(255, 255, 255, 0.6));
  --drop-shadow-bk: drop-shadow(8px 4px 6px rgba(0, 0, 0, 0.6));
  --gradient: linear-gradient(to top, #61564b, #556b2f);
}

/* ..... Dark mode) ..... */
@media (prefers-color-scheme: dark) {
  :root {
    --site-bg: rgba(33, 26, 23, 0.8);
    --font-color: rgba(255, 255, 255, 0.8);
    --header-bg: rgba(51, 45, 36, 0.95);
    --aside-footer-bg: rgba(54, 48, 42, 0.95);
    --nav-bg: rgba(63, 60, 59, 0.9);
    --nav-bg-hover: rgba(63, 105, 102, 0.95);
    --nav-link-a: rgba(234, 234, 180, 0.95);
    --link-a: rgba(64, 191, 191, 0.95);
    --link-a-hover: rgba(234, 168, 83, 0.95);
    --link-a-active: rgba(228, 184, 73, 0.95);
    --card-bg: rgba(65, 59, 52, 0.9);
    --pager-bg: rgba(68, 60, 53, 0.95);
    --pre-code-bg: #30413d;
    --pre-code-color: #d1cdc2;
    --transparent-05: rgba(153, 153, 153, 0.5);
  }

  img {
    -webkit-filter: grayscale(30%);
    filter: grayscale(30%);
  }
}
/* ..... Light mode (Base) ..... */
body {
  background: var(--site-bg);
  color: var(--font-color);
}

header {
  background: var(--header-bg);
}

aside, footer {
  background: var(--aside-footer-bg);
}

a, li a {
  color: var(--link-a);
  text-decoration: none;
}

a:hover {
  color: var(--link-a-hover);
}

a:active {
  color: var(--link-a-active);
}

.light-mode {
  --site-bg: rgba(185, 162, 152, 0.8);
  --font-color: rgba(55, 50, 47, 0.95);
  --header-bg: rgba(175, 161, 142, 0.95);
  --aside-footer-bg: rgba(140, 124, 108, 0.95);
  --nav-bg: rgba(129, 123, 121, 0.9);
  --nav-bg-hover: rgba(82, 137, 132, 0.95);
  --nav-link-a: rgba(255, 255, 255, 0.95);
  --link-a: rgba(38, 115, 115, 0.95);
  --link-a-hover: rgba(191, 118, 24, 0.95);
  --link-a-active: rgba(173, 131, 25, 0.95);
  --card-bg: rgba(255, 255, 255, 0.9);
  --pager-bg: rgba(126, 111, 97, 0.95);
  --pre-code-bg: #30413d;
  --pre-code-color: #d1cdc2;
  --transparent-05: rgba(102, 102, 102, 0.5);
}

.dark-mode {
  --site-bg: rgba(33, 26, 23, 0.8);
  --font-color: rgba(255, 255, 255, 0.8);
  --header-bg: rgba(51, 45, 36, 0.95);
  --aside-footer-bg: rgba(54, 48, 42, 0.95);
  --nav-bg: rgba(63, 60, 59, 0.9);
  --nav-bg-hover: rgba(63, 105, 102, 0.95);
  --nav-link-a: rgba(234, 234, 180, 0.95);
  --link-a: rgba(64, 191, 191, 0.95);
  --link-a-hover: rgba(234, 168, 83, 0.95);
  --link-a-active: rgba(228, 184, 73, 0.95);
  --card-bg: rgba(65, 59, 52, 0.9);
  --pager-bg: rgba(68, 60, 53, 0.95);
  --pre-code-bg: #30413d;
  --pre-code-color: #d1cdc2;
  --transparent-05: rgba(153, 153, 153, 0.5);
}

/* __.__.__.__.__._+_._+_._+_ Typography */
h1, h2, h3, h4 {
  font-weight: 400;
}

h1 {
  font-size: calc(1.4rem + 1.5vw);
  text-align: center;
}
@media (min-width: 1200px) {
  h1 {
    font-size: 2.5rem;
  }
}

h2 {
  letter-spacing: 3px;
  margin-bottom: 0;
  -webkit-filter: var(--drop-shadow-bk);
  filter: var(--drop-shadow-bk);
}

/* ..-...-..-...-..-...-..-...-..-...-..-...-..-...-..-...-.:: Foundation */
/* __.__.__.__.__._+_._+_._+_ Global(Base) */
body {
  font-family: "Lato", "Meiryo", "メイリオ", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
  font-size: clamp(16px, 0.5rem + 3vw, 18px);
  display: grid;
  grid-template: "header" 180px "main" 1fr "aside" "footer";
  justify-items: center;
  min-height: 100vh;
}
@media (min-width: 768px) {
  body {
    grid-template: "header ..." 200px "main ..." 1fr "aside ..." "footer ..."/1fr 100px;
  }
}

header {
  grid-area: header;
}

main {
  grid-area: main;
  padding: 1rem 1rem 8rem 1rem;
  width: 100%;
}

aside {
  grid-area: aside;
}

footer {
  grid-area: footer;
}

header, section, aside, footer {
  width: 100%;
  padding: 1rem;
}

/* __.__.__.__.__._+_._+_._+_ Header */
header .page-title {
  text-align: center;
}
header .page-title h2 {
  font-family: "Arima Madurai", cursive, sans-serif;
  font-size: clamp(25px, 1rem + 3vw, 35px);
  line-height: 2.8rem;
}
header .page-title h2 small {
  font-size: 70%;
}

/* __.__.__.__.__._+_._+_._+_ Aside */
aside {
  border-top: 1px solid var(--transparent-05);
  padding: clamp(1rem, 3vh, 3rem);
}

/* __.__.__.__.__._+_._+_._+_ Footer */
footer {
  padding: clamp(0.5rem, 3vh, 2rem);
  margin-bottom: 50px;
}
@media (min-width: 768px) {
  footer {
    margin-bottom: 0;
  }
}
footer .copyright {
  font-size: clamp(10px, 0.4rem + 3vw, 15px);
  text-align: center;
  border: 0;
}

/* ..-...-..-...-..-...-..-...-..-...-..-...-..-...-..-...-.:: Layout */
/* __.__.__.__.__._+_._+_._+_ Nav Menu */
nav {
  background: var(--nav-bg);
  position: fixed;
  bottom: 0;
  height: 55px;
  width: 100%;
  text-align: center;
  line-height: 0.9rem;
}
nav ul {
  display: flex;
}
nav ul li {
  flex: 1;
  font-size: 0.9rem;
}
nav ul li a {
  color: var(--nav-link-a);
  display: block;
  height: 100%;
  width: 100%;
  padding-top: 3px;
  padding-bottom: 3px;
}
nav ul li a:hover {
  background: var(--nav-bg-hover);
}
nav ul li a:hover img, nav ul li a:hover span {
  -webkit-filter: var(--drop-shadow-bk);
  filter: var(--drop-shadow-bk);
}
nav ul li img {
  width: auto;
  height: 35px;
}
@media (min-width: 768px) {
  nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100px;
    line-height: 1rem;
  }
  nav ul {
    display: block;
  }
  nav ul li {
    height: 80px;
  }
  nav ul li a {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  nav ul li a span {
    font-size: 100%;
  }
}

.toggle-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.toggle-label {
  width: 70px;
  height: 35px;
  /*width: 75px;
  height: 35px;*/
  background: #d8a4a4;
  position: relative;
  display: inline-block;
  border-radius: 40px;
  transition: 0.2s;
  box-sizing: border-box;
}

.toggle-label:after {
  content: "";
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  background: #d1d1d1;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
}

.toggle-input:checked + .toggle-label {
  background-color: #142330;
}

.toggle-input:checked + .toggle-label:after {
  left: 40px;
}

.toggle-button {
  position: relative;
  width: 70px;
  height: 35px;
  margin: 4px auto auto auto;
}

/* __.__.__.__.__._+_._+_._+_ Breadcrumb */
ol.breadcrumb {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
ol.breadcrumb li {
  display: inline-block;
  margin-left: 0.5rem;
}
ol.breadcrumb > li + li:before {
  content: "> ";
}

/* __.__.__.__.__._+_._+_._+_ Card */
.card {
  background: var(--card-bg);
  border-radius: 10px;
}

#blog .card, #news .card {
  width: min(100%, 650px);
  margin: 0 auto;
  padding: 1.4rem;
}

/* __.__.__.__.__._+_._+_._+_ Pager */
p.pager {
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 1rem;
}
p.pager a {
  background: var(--pager-bg);
  margin-right: 2px;
  padding: 0.7rem 1.1rem;
  border: 1px solid #c69986;
  border-radius: 50px;
}
p.pager a.current {
  background: goldenrod;
  color: var(--pager-bg);
  border: 1px solid goldenrod;
}

/* __.__.__.__.__._+_._+_._+_ Button */
.btn {
  font-family: "Arima Madurai", cursive, sans-serif;
  -webkit-filter: var(--drop-shadow-bk);
  filter: var(--drop-shadow-bk);
  padding: 1.7rem;
  border-radius: 5px;
  transition: 0.2s;
}

.btn:hover {
  background: #5ea198;
  color: var(--ivory);
}

.dp-shadow {
  -webkit-filter: var(--drop-shadow-bk);
  filter: var(--drop-shadow-bk);
}

/* __.__.__.__.__._+_._+_._+_ Pre Code */
pre, code {
  font-family: "Lato", "Noto sans", "Meiryo", "メイリオ", sans-serif;
  background: var(--pre-code-bg);
  color: var(--pre-code-color);
  font-size: 15px;
  max-width: 100%;
  border-radius: 5px;
}

pre {
  line-height: 1rem;
  margin-top: 0.95rem;
  padding: 1.5rem 1.5rem 1.3rem;
  border: 1px solid var(--transparent-05-w);
}

code {
  line-height: 1.4rem;
  padding: 0.1rem 0.3rem 0.3rem;
}

/* ..-...-..-...-..-...-..-...-..-...-..-...-..-...-..-...-.:: Component */
/* __.__.__.__.__._+_._+_._+_ Block */
.inline-block {
  display: inline-block;
  margin: 0 auto;
}

.center-block {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* __.__.__.__.__._+_._+_._+_ Text */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-bottom {
  vertical-align: bottom;
}

/* ..-...-..-...-..-...-..-...-..-...-..-...-..-...-..-...-.:: Utility */
/* __.__.__.__.__._+_._+_._+_ to Top */
#to-top {
  position: fixed;
  bottom: 55px;
  right: 15px;
}
@media (min-width: 768px) {
  #to-top {
    bottom: 40px;
    right: 24px;
  }
}
#to-top a {
  background-color: rgba(74, 74, 74, 0.8);
  color: #fff;
  font-size: 0.8rem;
  text-decoration: none;
  text-align: center;
  display: block;
  z-index: 10;
  padding-top: 8px;
  border: 1px solid rgba(204, 204, 204, 0.6);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 50px;
  height: 30px;
}
#to-top a :hover {
  text-decoration: none;
  opacity: 0.7;
}
@media (min-width: 768px) {
  #to-top a {
    font-size: 1.1rem;
    padding-top: 15px;
    border-radius: 50px;
    height: 50px;
  }
}