@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Meow+Script&display=swap');

@font-face {
font-family: "夜永オールド明朝 Bold";
src: url("https://phobia.mycocoon.xyz/YonagaOldMincho-Bold.woff2")
     format("woff2");
}

@media screen and (min-width: 360px) { body, input[type], input[type=text], input[type=submit], textarea { font-size: 11.55px;}}
@media screen and (min-width: 960px) { body, input[type], input[type=text], input[type=submit], textarea { font-size: 15.25px;}}

html::-webkit-scrollbar { width: 7.5px; position: fixed; z-index: 9990;} /* display: none; */
html::-webkit-scrollbar-track { background: #1c1c1c;}
html::-webkit-scrollbar-thumb { background: #0011D8; border-radius: none;}

* {
cursor: default;
font-family: 'Josefin Slab', '夜永オールド明朝 Bold', serif;
font-weight: normal;
margin: 0;
padding: 0;
border: none;
border-collapse: collapse;
box-sizing: border-box;
}
body {
letter-spacing: 1.15px;
line-height: 1.85;
color: #1c1c1c;
background: #F3F3F3;
text-align: justify;
user-select: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -webkit-text-size-adjust: 100%;
}
/* @media screen and (min-width: 360px) { html:root { border-top: solid 9rem #0011D8;}}
@media screen and (min-width: 960px) { html:root { border-top: solid 11.55rem #0011D8;}} */

/* フェードイン */
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

/* ボトム横枠 */
/* body:before {
content: "";
background: #0011D8;
position: fixed;
display: block;
z-index: 94;
}
body:before { bottom: 0; left: 0;}
@media screen and (min-width: 360px) { body:before { height: 0.25rem; width: 100vw;}}
@media screen and (min-width: 960px) { body:before { height: 0.35rem; width: 100vw;}} */

/* リンク */
a {
color: inherit;
background: transparent;
padding: 0 0 3px 1.25px;
border-bottom: solid thin;
transition: .4s;
text-decoration: none;
}
a:hover {
cursor: help;
color: #505050;
text-decoration: none;
}

/* リターン */
#page_top { position: fixed; z-index: 92:}
#page_top a {
line-height: 1.5;
color: inherit;
background: transparent;
padding: 0.75rem 1px 12.5px;
border: solid thin;
writing-mode: tb-rl;
vertical-align: top;
text-align: left;
}
#page_top a:hover {
color: #F3F3F3;
background: #0011D8;
border: solid thin #0011D8;
text-shadow: none;
}
@media screen and (min-width: 360px) { #page_top { font-size: x-small; left: 1rem; bottom: 1.55rem;}}
@media screen and (min-width: 960px) { #page_top { font-size: small; left: 3rem; bottom: 3.55rem;}}

/* 文字装飾 */
hr {
margin: 1.25rem 0;
padding: 0;
border-top: solid thin;
height: 0;
}
line { border-bottom: double medium;}
mark { font-weight: 600; color: #1c1c1c; background: #F3F3F3;}
@media screen and (min-width: 350px) { mark { padding: 3.55px 0 0 0;}}
@media screen and (min-width: 960px) { mark { padding: 5px 0 0 0;}}
strong { font-weight: 900;}
color { color: #1E888C;}
ruby { ruby-position: under;}

/* メイン */
main {
margin: auto;
width: 77%;
max-width: 1200px;
height: 100%;
min-height: 100vh;
position: relative;
}
@media screen and (min-width: 350px) { main { padding: 4.45rem 0 6.25rem;}}
@media screen and (min-width: 960px) { main { padding: 5.55rem 0 7rem;}}
main ul {
margin: auto;
display: flex;
flex-flow: row wrap;
place-content: space-between center;
list-style-type: none;
gap: 2.25rem;
}
@media screen and (min-width: 360px) { main li { width: 90%;}}
@media screen and (min-width: 960px) { main li { width: 260px;}}
@media screen and (min-width: 360px) { main li:empty { display: none;}}
@media screen and (min-width: 960px) { main li:empty { display: inherit; width: 260px;}}

/* ワード */
main ul.word {
margin: auto;
display: flex;
flex-flow: row wrap;
place-content: space-between center;
list-style-type: none;
gap: 0;
}
main ul.word li { width: 380px;}
@media screen and (min-width: 360px) { main ul.word li { padding: 3rem 0; border-bottom: solid thin #505050;}}
@media screen and (min-width: 960px) { main ul.word li { padding: .55rem 2rem 0; border-right: solid thin #505050; border-bottom: none;}}
@media screen and (min-width: 360px) { main ul.word li:first-child { padding-top: 0; border-bottom: solid thin #505050;}}
@media screen and (min-width: 960px) { main ul.word li:first-child { padding-top: 0.55rem; padding-left: 0; border-right: solid thin #505050; border-bottom: none;}}
@media screen and (min-width: 360px) { main ul.word li:last-child { padding-bottom: 0; border-bottom: none;}}
@media screen and (min-width: 960px) { main ul.word li:last-child { padding-right: 0; border-right: none;}}
@media screen and (min-width: 360px) { main ul.word li:empty { display: none;}}
@media screen and (min-width: 960px) { main ul.word li:empty { display: inherit; width: 380px;}}

/* タブメニュー */
.tab_item { display: none;}
.is-active-item { display: block;}
a.tab_btn { transition: .3s;}
a.tab_btn:hover { transition: .4s;}
/* a.is-active-btn { display: inline-block;} */
.tab_item {
width: 100%;
animation: fadeIn 2s ease 0s 1 normal;
 -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

/* 開閉用ボタン */
.menu-btn {
cursor: help;
color: inherit;
background: transparent;
top: 1.25rem;
right: 1.25rem;
text-align: center;
position: fixed;
z-index: 98;
display: block;
}
@media screen and (min-width: 360px) { .menu-btn { font-size: x-large; width: 25px; height: 30px;}}
@media screen and (min-width: 960px) { .menu-btn { font-size: xx-large; width: 45px; height: 50px;}}
.menu-btn span { cursor: help;}
.menu-btn span:after { content: attr(data-txt-menu);}
.open .menu-btn span:after { content: attr(data-txt-close);}
/* .menu-btn span:before {
font-family: "Font Awesome 6 Free";
content: "\f141";
font-weight: 900;
padding-right: 10px;
} */
.menu-btn, .menu-btn span { font-weight: bold; transition: .4s;}
.menu-btn:hover, .menu-btn span:hover { color: #505050;}

/* モーダルメニュー */
.menu {
cursor: none;
color: inherit;
background: #1c1c1c;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
visibility: hidden;
opacity: 0;
z-index: 95;
transition: .35s ease-in-out, color .35s ease, background .35s ease, opacity .35s ease-in-out;
pointer-events: none;
}
.menu ul {
margin: auto;
display: grid;
flex-flow: row wrap;
place-content: space-between center;
list-style-type: none;
max-width: 1150px;
gap: 0.55rem;
pointer-events: none;
}
@media screen and (min-width: 360px) { .menu li { width: 300px;}}
@media screen and (min-width: 960px) { .menu li { width: 400px;}}
.menu li a {
letter-spacing: 1.55px;
color: inherit;
border: none;
display: block;
pointer-events: auto;
}
@media screen and (min-width: 360px) { .menu li a { font-size: small;}}
@media screen and (min-width: 960px) { .menu li a { font-size: large;}}
.menu li a:hover { color: #505050;}
.open .menu {
visibility: visible;
opacity: 1;
transition: visibility .35s ease, opacity .35s ease-in-out;
pointer-events: none;
}

/* id属性 */
#top {
/* line-height: 2; */
padding: 0;
top: 50%;
left: 50%;
width: 100%;
height: auto;
transform: translate(-50%, -50%);
position: absolute;
}
#box {
margin-bottom: 10px;
padding: 5px 0 0 1.15rem;
border-left: solid thick;
}

/* class属性 */
.container a { padding: 0;}
.container { display: flex; align-items: center; justify-content: center;}
.container__line { margin: 0 15px; border-bottom: solid thin; flex: 1; width: 120%;}

/* イメージ */
img {
backface-visibility: hidden;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
vertical-align: bottom;
}
img.picture { height: auto;}
@media screen and (min-width: 360px) { img.picture { width: 115px;}}
@media screen and (min-width: 960px) { img.picture { width: 150px;}}

/* イメージリスト */
figure, figure img, figure.hovered, figure.hovered img { transition: 1.1s; will-change: filter;}
figure {
background: #0011D8;
margin: 0;
border-bottom: solid 3.5px #0011D8;
border-radius: 7.77%;
overflow: hidden;
box-sizing: border-box;
display: block;
}
figure img {
width: 460px;
object-fit: cover;
filter: grayscale(100%);
}
@media screen and (min-width: 360px) { figure img { height: 122px;}}
@media screen and (min-width: 960px) { figure img { height: 125px;}}
figure.hovered img { filter: none;}
figcaption {
letter-spacing: 2.55px;
line-height: 1.55;
color: #1c1c1c;
background: #F3F3F3;
position: relative;
}
@media screen and (min-width: 360px) { figcaption { padding: 1.55rem; height: 200px;}}
@media screen and (min-width: 960px) { figcaption { padding: 1.65rem 1.55rem; height: 215px;}}
figcaption span {
font-size: x-small;
font-family: 'Abril Fatface', cursive;
text-transform: uppercase;
display: block;
}
figcaption hr {
margin: 1.05rem 0 1.3rem;
padding: 0;
border-top: solid thin;
height: 0;
opacity: 0.45;
}

/* イメージリスト_ボタン */
figcaption button {
cursor: help;
letter-spacing: 1.55px;
color: #F3F3F3;
background: #1c1c1c;
padding: 3px 7px 1px 6px;
border: none;
transition: .65s;
overflow: hidden;
position: absolute;
z-index: 1;
}
@media screen and (min-width: 360px) { figcaption button { font-size: x-small; bottom: 1.55rem;}}
@media screen and (min-width: 960px) { figcaption button { font-size: small; bottom: 1.65rem;}}
figcaption button::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
content: " ";
background: #0011D8;
transform-origin: left top;
transform: skewX(-40deg) scale(0, 1);
transition: transform .65s;
width: 111%;
}
figcaption button:hover { color: #F3F3F3;}
figcaption button:hover::before { transform-origin: right top; transform: skewX(-40deg) scale(1, 1);}
figcaption button i { cursor: help;}

/* 見出し */
h1 { letter-spacing: 1.25px; margin-bottom: 1.25rem;}
h2 { font-family: 'Abril Fatface', cursive; margin-bottom: 1rem;}
h3 { font-weight: 600; font-style: italic;}
@media screen and (min-width: 360px) { h3 { font-size: larger; display: block;}}
@media screen and (min-width: 960px) { h3 { font-size: medium; display: block;}}
h4 { font-style: italic; margin-bottom: 1.75rem; text-align: center;}
@media screen and (min-width: 360px) { h4 { font-size: large;}}
@media screen and (min-width: 960px) { h4 { font-size: x-large;}}
h4 span {
font-family: 'Meow Script', cursive;
text-transform: capitalize;
letter-spacing: 0.35px;
display: block;
}
@media screen and (min-width: 360px) { h4 span { font-size: large;}}
@media screen and (min-width: 960px) { h4 span { font-size: x-large;}}
h4 span line { font-family: 'Meow Script', cursive; border: none; text-decoration: underline;}

/* ― ― */
h5 { text-align: center; overflow: hidden;}
h5 span{
font-size: 1rem;
color: #0011D8;
padding: 0 2rem;
display: inline-block;
text-align: left;
position: relative;
}
h5 span:before, h5 span:after {
position: absolute;
content: "";
background: #0011D8;
top: 35.55%;
width: 640%;
height: 3px;
}
h5 span:before { right: 100%;}
h5 span:after { left: 100%;}

/* loader */
.page-loader {
    display: inline-block;
    position: fixed;
    height: 100vh;
    width: 100%;
    /* color: #FFF; */
    background: #F3F3F3;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    z-index: 9998;
}
.looping-rhombuses-spinner, .looping-rhombuses-spinner * {
      box-sizing: border-box;
    }
    .looping-rhombuses-spinner {
      width: calc(15px * 4);
      height: 15px;
      position: relative;
      top: 50%;
      margin: auto;
    }
    .looping-rhombuses-spinner .rhombus {
      height: 15px;
      width: 15px;
      background-color: #1c1c1c;
      left: calc(15px * 4);
      position: absolute;
      margin: 0 auto;
      border-radius: 2px;
      transform: translateY(0) rotate(45deg) scale(0);
      animation: looping-rhombuses-spinner-animation 2500ms linear infinite;
    }
    .looping-rhombuses-spinner .rhombus:nth-child(1) {
      animation-delay: calc(2500ms * 1 / -1.5);
    }
    .looping-rhombuses-spinner .rhombus:nth-child(2) {
      animation-delay: calc(2500ms * 2 / -1.5);
    }
    .looping-rhombuses-spinner .rhombus:nth-child(3) {
      animation-delay: calc(2500ms * 3 / -1.5);
    }
    @keyframes looping-rhombuses-spinner-animation {
      0% {
        transform: translateX(0) rotate(45deg) scale(0);
      }
      50% {
        transform: translateX(-233%) rotate(45deg) scale(1);
      }
      100% {
        transform: translateX(-466%) rotate(45deg) scale(0);
      }
    }