/* 全体リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", sans-serif;
  line-height: 1.6;
}

/* 追加したクラス */

/*色*/

.dark-blue {
  color:#082375;
}

.green {
  color:#3ac75b;
}

.cat {
  color:#c7773a;
}
 
.purple {
  color:#5f1380;
}

.dark-gray {
  color:#a0a0a0;
}

.blue-w {
  color:#3366cc;
}

.gray {
  color:#f0f0f0;
} 

.black {
  color:#000000;
}

.green {
  color:#008000;
}

.lime {
  color:#00CC00;
}

.blue {
  color:#00BFFF;
}

.r {
  color:#cf0000;
  text-decoration:underline;
}

.y {
  color:#e0e000;
  text-decoration:underline;
}

.white {
  color:#ffffff;
}

/*他-上が新しい*/
 
.kanban {
  border:solid 2px #000000;
  text-align: center;
  background-image: url("image/logo.png");
  color:#ffffff;
  margin-top: 30px;
}

.hero {
  text-decoration:underline;
  text-decoration-color: yellow;
  background-color: rgba(248,255,122,0.5);
}

.narration {
  font-size: 2em;
  text-align: center;
}

.mix .grow {
  animation: grow 1s infinite alternate ease-in-out;
}

@keyframes grow {
  from {
    font-size: 4em;
  }
  to {
    font-size: 5em;
  }
}

.mix {
  width: 100%;
  height: 30em;
  padding: 20px;
  background-color: #dff386;
  width: 100%;
  color:#5f1380;
  font-weight: 900;
  font-style: italic;
  text-align: center;
}

.fw {
  font-weight: 600;
}

.list {
  margin-left: 60px;
  font-size: 20px;
}

.inverted {
  color:#ffffff;
  background-color:#000000;
  text-align: center;
  padding: 1em 0;
}

.portal {
  color:#000000;
  margin-top: 10%;
}

.underline {
  border-bottom: dashed 1px;
}

.italic {
  font-style: italic;
}

.wiki li,
.wiki-2 li {
  margin-bottom: 0.1em;
}

.wiki ol {
  margin: -0.5em 0 0 3.2em;
}

.wiki-2 ol {
  margin: 0.3em 0 0 3.2em;
  font-size: 90%;
}

.wiki ul,
.wiki-2 ul {
  margin: 0.3em 0 0 1.6em;
}

.wiki .edit:first-of-type,
.wiki-2 .edit:first-of-type {
  margin-right: 0.25em;
  margin-inline: 0 0.25em;
  color:#54595d;
}

.wiki .edit:not(:first-of-type),
.wiki-2 .edit:not(:first-of-type) {
  margin-left: 0.25em;
  margin-inline: 0.25em 0;
  color:#54595d;
}

.wiki a[href],
.wiki-2 a[href] {
  text-decoration-line: none;
  color:#3366cc;
}

.wiki h3 a,
.wiki-2 h3 a {
  user-select: none;
  color:#3366cc;
  font-size: small;
  font-weight: normal;
  margin-left: 1em;
  margin-right: 0;
}

.wiki h3,
.wiki-2 h3 {
  color:#101418;
  font-size: 1.5em;
  line-height: 1.375;
  font-weight: normal;
}

.wiki p,
.wiki-2 p {
  margin: 0.5em 0 1em 0;
  font-size: var(--font-size-medium);
}

.wiki {
  color:#202122;
  border:2px #000000;
  border-style: dashed solid;
  margin: auto 10% auto 10%;
  font-family: sans-serif;
}

.wiki-2 {
  color:#202122;
  border:2px #000000;
  border-style: dashed solid solid solid;
  margin: 500px 10% auto 10%;
  font-family: sans-serif;
}

.to_yami a:hover{
  border-radius: 20px;
}

.to_yami h4 {
  color:#ffffff;
}

.to_yami {
  background-color:#1ba5f5;
  border: solid 1px #1ba5f5;
  border-radius: 20px;
  margin: auto 20px 20px 20px;
}

.added {
  margin: 20px auto 20px auto;
  border: solid 2px #999999;
  background-image:url("image/food_yaminabe_mosaic.png");
  background-color:rgba(255,255,255,0.6);
  background-blend-mode:lighten;
}

.blink {
  animation: blinking 1s steps(3,end) infinite alternate;
  color:#ff0000;
}

@keyframes blinking {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.popup {
  font-style: italic;
  color:#0000ff;
  text-decoration:underline;
  text-decoration-style: double;
  border-radius: 50%;
  background: skyblue;
  word-break: keep-all;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}

.modal-content {
  background-image:url("image/spinningfish.gif");
  margin: 1% auto auto auto;
  padding: 20px;
  width: 400px;
  height: 550px;
  border-radius: 10px;
  text-align: center;
}

.fakeclose-r,
.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 30%;
  background-color: rgba(0,0,0,0.2);
}

.fakeclose-l {
  float: left;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 30%;
  background-color: rgba(0,0,0,0.2);
}

.close:hover {
  color: red;
}

.noscrollbar {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none; 
}

.noscrollbar::-webkit-scrollbar {
  display: none;
}

.masa {
  color: #dff386;
}

.memory {
  margin: 100% auto auto auto;
  background-color: #fff;
  border:solid 20px #f0f0f0;
  color: #000;
  text-align: left;
}

.linkbox {
  border:solid 2px #000000;
  position: relative;
  text-align: center;
}

.linkbox a {
  position: absolute;
  top: 0;
  left: 0;
  height:100%;
  width: 100%;
}

.linkbox a:hover{
  opacity: 0.1;
  background-color: #000000;
}

.to_back {
  margin: 30px;
  color: #36e3d2;
}

.content-s {
  flex: 2;
  min-width: 250px;
  padding: 10% 20px;
  background-color: #fff;
  margin-right: 20px;
  background-image:url("image/spinningMaxwell.gif");
  color:#0000ff;
}

.emo {
  width: 1em;
  height: 1em;
  vertical-align: middle; 
}

a.plain-link,
a.plain-link:hover,
a.plain-link:visited,
a.plain-link:active {
  color: inherit;
  text-decoration: none;
}

.manual {
  border:solid 2px #000000;
}

.manual p{
  margin: 10px;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.float-clear {
  clear: both;
}

ruby rt {
  font-size: 1em;
}

p {
  margin: 30px;
  font-size: 20px;
}

h2 {
  font-size: 50px;
}

h3 {
  font-size: 30px;
}

h4 {
  margin: 10px;
  font-size: 20px;
}
  
/* ===== ヘッダー ===== */
.site-header {
  background-color: #333;
  padding: 10px 20px;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  width: 50px;
  height: auto;
}

/* ナビ（PC版） */
.nav ul {
  display: flex;
  list-style: none;
}

.nav ul li {
  margin-left: 20px;
}

.nav ul li a {
  color: #d32b2b;
  text-decoration: none;
  font-weight: bold;
}

/* ===== ハンバーガーボタン ===== */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;

}

.hamburger span {
  display: block;
  height: 3px;
  background: #d32b2b;
  border-radius: 2px;
  width: 100%;
}

/* 開閉時のアニメーション */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}

/* ===== メイン ===== */
.site-main {
  display: flex;
  flex-wrap: wrap;
  background-color: #f0f0f0;
  padding: 20px;
}

.content {
  flex: 2;
  min-width: 250px;
  padding: 20px;
  background-color: #fff;
  margin-right: 20px;
  width: 100%;
}

.sidebar {
  flex: 1;
  min-width: 200px;
  padding: 20px;
  background-color: #dff386;
  width: 100%;
}


/* ===== フッター ===== */
.site-footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
}

.footer-nav ul {
  list-style: none;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-nav ul li {
  margin: 0 10px;
}

.footer-nav ul li a {
  color: #fff;
  text-decoration: none;
}

.copy {
  font-size: 0.9em;
}

/* ===== レスポンシブ対応 ===== */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: row;
    align-items: center;
  }

  /* ハンバーガー表示 */
  .hamburger {
    display: flex;
  }

  /* ナビはデフォルト非表示 */
  .nav {
    display: none;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    margin-top: 10px;
  }

  .nav ul {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
  }

  .nav ul li {
    margin: 10px 0;
  }

  /* ハンバーガーONで表示 */
  .nav.active {
    display: block;
  }

  .site-main {
    flex-direction: column;
  }

  .content {
    margin-right: 0;
    margin-bottom: 20px;
  }
}