@charset "UTF-8";

/* Template & Designed by Towako. */
/* https://ninawas.me */

/* ウェブフォントの読み込み */
@import url('https://fonts.googleapis.com/css?family=La+Belle+Aurore|Noto+Sans+JP&display=swap');

@font-face{
    font-family: 'kkr';
   src: url('https://dl.dropboxusercontent.com/scl/fi/4bheuayj66pbuynwy1a4y/kkr.otf?rlkey=h2qfe2rz3bs71a9fpvb3murqr&st=e3l3ano7')
format("opentype");
}

@font-face{
    font-family: 'wig';
   src: url('https://dl.dropboxusercontent.com/scl/fi/kx6c3psxu3j7m11mdljok/wig.otf?rlkey=qvrq0gofde8sd6vm185gjz3h1&st=fjum841v&dl')
format("opentype");
}

@font-face{
    font-family: 'swt';
   src: url('https://dl.dropboxusercontent.com/scl/fi/59utbgksck5fcu55d9vtn/swt.otf?rlkey=suzssuuzge8imdtk00ejmmmmk&st=2o0bl0kj')
format("opentype");
}

@font-face{
    font-family: 'awr';
   src: url('https://dl.dropboxusercontent.com/scl/fi/fjluy6i453wfif8g3gdo7/awr.otf?rlkey=toqtd9k51b1ck8uvcu6n9oiif&st=9a0r576e')
format("opentype");
}

/* 全体に適用する */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: normal;
    font-family: 'kkr';
    color: #192332;
}

/* 基本設定 */
body {
    background-color: #FFFBFC;
    line-height: 1.4;
    letter-spacing: 0.1em;
    font-size: 10px;
    font-family: 'kkr';
}

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

a.br {
  color: #192332; 
}

s {
  text-decoration: line-through;
  text-decoration-thickness: 0.5px;
  color: #000;
}

center {
    font-family: 'kkr';
    font-size: 10px;
    font-weight: normal;
    line-height: 1.4em;
    text-align: center;
    color: #192332;
}

hr {
    border: none;
    margin: 0.5em 0;
}

/* コンテナ */
.wrap {
    text-align: center;
    margin: 5em auto 3em;
    color: #000;
}

/* ヘッダー */
header {
    text-align: center;
    position: relative;
    display: inline-block;
    margin: 0 auto 2em;
    padding: 3em;
    width: 250px;
    height: 300px;
    border: 1px solid #000;
    color: #000;
}

/* 枠 */
header::before,
header::after {
    text-align: center;
    position: absolute;
    content: '';
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
}

header::before {
    transform: rotate(8deg);
}

header::after {
    transform: rotate(-5deg);
}

/* ヘッダーの中身 */
header .head {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    font-family: 'wig';
    color: #000;
}

/* ナビゲーション */
nav ul {
    list-style-type: none;
    color: #000;
}

nav ul li {
    margin: 0.5em auto 1em;
    border-bottom: 1px dotted #000;
    color: #000;
}

nav ul li a {
    border-bottom: none;
    font-family: 'La Belle Aurore', cursive;
    font-size: 12px;
    color: #000;
}

nav li a:hover{
background-color: transparent;
color: 000;
}

/* 記事本文 */
.wtr {
    margin: 1em auto 0;
    padding: 0 1.5em 3em;
    width: 88%;
    text-align: justify;
    word-break: break-all;
    font-size: 10px;
    color: #192332;
}
/* 見出し */
h1 {
    margin: 0.5em auto 2em;
    font-size: 16px;
    font-family: 'awr';
    font-weight: bold;
    letter-spacing: -0.2em;
    color: #000;
}

h2 {
  font-family: 'La Belle Aurore', cursive;
  font-size: 16px;
  position: relative;
  margin: 0 0 0.2em;
  margin-top: -0.3em;
  font-weight: normal;
  line-height: 1;
  color: #000;
}

h3 {
  font-family: 'kkr';
  font-size: 14.5px;
  text-align: center;
  margin: 0 0 0.2em;
  margin-top: -0.3em;
  font-weight: normal;
  line-height: 1;
  color: #000;
}

fre {
  display: block;
  text-align: center;
  margin: 0.4em 0 0.8em;
  font-family: 'swt';
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #8a8a8a;
  position: relative;
}

fre::before,
fre::after {
  content: "";
  display: inline-block;
  width: 24%;
  height: 1px;
  background: #bbb; /* 線の色 */
  vertical-align: middle;
  margin: 0 4px;
}

hbr {
  display: block;
  text-align: center;
  margin: 0.2em 0 0.8em;
  font-family: 'swt';
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #cd3764;
  position: relative;
}

hbr::before,
hbr::after {
  content: "";
  display: inline-block;
  width: 24%;
  height: 1px;
  background: #bbb; /* 線の色 */
  vertical-align: middle;
  margin: 0 4px;
}

knt {
  display: block;
  text-align: center;
  margin: 0.2em 0 0.6em;
  font-family: 'swt';
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #fad246;
  position: relative;
}

knt::before,
knt::after {
  content: "";
  display: inline-block;
  width: 24%;
  height: 1px;
  background: #bbb; /* 線の色 */
  vertical-align: middle;
  margin: 0 4px;
}

akr {
  display: block;
  text-align: center;
  margin: 0.2em 0 0.6em;
  font-family: 'swt';
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #235aaa;
  position: relative;
}

akr::before,
akr::after {
  content: "";
  display: inline-block;
  width: 24%;
  height: 1px;
  background: #bbb; /* 線の色 */
  vertical-align: middle;
  margin: 0 2px;
}

srp {
  display: block;
  text-align: center;
  margin: 0.2em 0 0.8em;
  font-family: 'swt';
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #dc3c41;
  position: relative;
}

srp::before,
srp::after {
  content: "";
  display: inline-block;
  width: 24%;
  height: 1px;
  background: #bbb; /* 線の色 */
  vertical-align: middle;
  margin: 0 4px;
}

hbs {
    padding: 0.1em 0.4em;
    background-color: rgba(205,55,100,0.7);
    color: #000;
}

frs {
    padding: 0.1em 0.4em;
    background-color: rgba(250,210,70,0.7);
    color: #000;
}

zfs {
    padding: 0.1em 0.4em;
    background: linear-gradient(
        to bottom right,
        rgba(205,55,100,0.7) 50%,
        rgba(250,210,70,0.7) 50%
    );
    color: #000;
}

sks {
    padding: 0.1em 0.4em;
    background-color: rgba(35,90,170,0.7);
    color: #000;
}

srs {
    padding: 0.1em 0.4em;
    background-color: rgba(220,60,65,0.7);
    color: #000;
}

kgs {
    padding: 0.1em 0.4em;
    background-color: rgba(110,180,135,0.7);
    color: #000;
}

hbc {
    font-weight: normal;
    color: #cd3764;
}

frc {
   font-weight: normal;
   color: #fad246;
}

skc {
   font-weight: normal;
   color: #235aaa;
}

src {
   font-weight: normal;
   color: #dc3c41;
}

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

b {
    font-weight: bold;
    font-size: 11px;
    color: black;
}

/**
 * 折りたたみ
 */

details {
  font-family: 'kkr';
  font-weight: 500;
  font-size: 10px;
}

details summary {
  list-style: none;
  cursor: pointer;

  font-family: 'kkr';
  font-weight: 500;
  font-size: 10px;
}

details summary::-webkit-details-marker {
  display: none;
}


/* 羽 */
details summary::before {
  font-family: 'wig';
  font-weight: normal;
  content: 'Z';

  font-size: 12px;
  color: #192332;

  margin-right: .5em;
  display: inline-block;
}

/* 開いた時 */
details[open] {
background: rgba(205, 55, 100, 0.2);
border-radius: 10px;
padding: 8px 12px;
}

/* 開いた時 */
details[open] summary::before {
  content: 'M';
  animation: featherSoft 0.8s ease-out;
}


/* すぅ…ふわぁ… */
@keyframes featherSoft {
  0% {
    opacity: 0.4;
    transform: scale(.88);
  }

  60% {
    opacity: 1;
    transform: scale(1.02);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* 横幅1024px以上で読み込む */
@media screen and (min-width:1024px) {
    .wrap {
        max-width: 1000px;
    }
}

/* 横幅768px以上で読み込む */
@media screen and (min-width:768px) {
    .wrap {
        margin: 5em auto;
        max-width: 700px;
    }

    .wrap::after {
        display: block;
        content: '';
        clear: both;
    }

    header {
        margin-left: 1em;
        float: left;
    }

    wtr {
        overflow: hidden;
        width: calc(85% - 250px);
    }
}

a,
a:visited{
  color: #192332;
}

span.name{
  color: #cd3764;
}

font[size="-1"] {
    font-size: 10px !important;
}