@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique&display=swap');
@import url('https://fonts.googleapis.com/css2?family=GFS+Neohellenic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap');

@media screen and (min-width: 360px) { body, input[type], input[type=text], input[type=submit], textarea, h3 { font-size: 11px;}}
@media screen and (min-width: 960px) { body, input[type], input[type=text], input[type=submit], textarea, h3 { font-size: 15px;}}
body::-webkit-scrollbar { display: none;}

* {
cursor: default;
font-family: 'GFS Neohellenic', 'Zen Kaku Gothic Antique', sans-serif;
font-weight: normal;
margin: 0;
padding: 0;
border: none;
border-collapse: collapse;
box-sizing: border-box;
word-break: break-all;
}
body {
letter-spacing: 1.1px;
line-height: 1.85;
color: #02282C;
background: url("images/k53.png") fixed;
/* background: linear-gradient(180deg, rgba( 255, 255, 255, .35) 30%, rgba( 255, 255, 255, .35)), url("images/flowerrr.png") fixed;
background-position: center;
background-size: cover; */
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) { body { background-size: 350px auto;}}
@media screen and (min-width: 960px) { body { background-size: 550px auto;}}

/* フェードイン */
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
nav, main {
animation: fadeIn 2.25s ease 0s 1 normal;
 -webkit-animation: fadeIn 2.25s ease 0s 1 normal;
}

/* リンク */
a {
color: inherit;
background: transparent;
padding: 0 0 2px 1px;
border-bottom: solid thin;
transition: .5s;
text-decoration: none;
}
a:hover {
cursor: help;
color: transparent;
text-shadow: 0 0 2px #02282C;
border-bottom: none;
text-decoration: none;
}
#list h3 a { border-bottom: none;}

/* ナビゲーション */
nav {
width: 100%;
height: auto;
top: 0;
left: 0;
position: fixed;
z-index: 10;
}
@media screen and (min-width: 360px) { nav { background: linear-gradient( 180deg, rgba( 255, 255, 255, 1) 50%, rgba( 255, 255, 255, 0)); padding: 1.55rem 2.25rem;}}
@media screen and (min-width: 960px) { nav { background: transparent; padding: 2.25rem 4.55rem;}}
nav ul {
display: flex;
flex-flow: row wrap;
place-content: flex-start space-between;
list-style-type: none;
}
nav li { background: transparent; display: inline-block;}

/* リターン */
#page_top { position: fixed; z-index: 92:}
#page_top a {
color: #C0C2C8;
background: #02282C;
padding: 0 0.7rem 2.5px 0.75rem;
border: none;
}
#page_top a:hover {
color: #02282C;
background: #C0C2C8;
text-shadow: none;
}
@media screen and (min-width: 360px) { #page_top { right: 37.5%; bottom: 3.55rem;}}
@media screen and (min-width: 960px) { #page_top { right: 46.75%; bottom: 4.55rem;}}

/* 文字装飾 */
hr {
margin-top: 2.55rem;
margin-bottom: 1rem;
padding: 0;
border-top: solid thin;
height: 0;
}
line { text-decoration: underline;}
mark {
color: #C0C2C8;
background: #02282C;
padding: 2.25px 1px 0 2.5px;
}
strong { font-weight: bold;}
color { color: #986DB2;}

/* ヘッダー */
header {
margin: auto;
width: 75%;
max-width: 1000px;
height: 100%;
min-height: 100vh;
}

/* メイン */
main {
/* background: #FEFEFE; */
margin: auto;
width: 75%;
max-width: 800px;
height: 100%;
min-height: 100vh;
}
@media screen and (min-width: 360px) { main { padding: 6.75rem 0 7rem;}}
@media screen and (min-width: 960px) { main { padding: 9.75rem 0;}}
main ul {
margin: auto;
display: flex;
flex-flow: row wrap;
place-content: space-between;
list-style-type: none;
gap: 0;
}
@media screen and (min-width: 360px) { main li { width: 100%;}}
@media screen and (min-width: 960px) { main li { width: 380px;}}
@media screen and (min-width: 360px) { main li:empty { display: none;}}
@media screen and (min-width: 960px) { main li:empty { display: inherit; width: 380px;}}

/* id属性 */
#top {
line-height: 2;
padding: 0;
top: 50%;
left: 50%;
width: 100%;
height: auto;
transform: translate(-50%,-50%);
position: absolute;
z-index: 5;
}
#list { line-height: 2.15;}
#list:last-child, #box:last-child { margin-bottom: 0;}
@media screen and (min-width: 360px) { #box, #list { margin-bottom: 4rem;}}
@media screen and (min-width: 960px) { #box, #list { margin-bottom: 4.75rem;}}
#info {
margin-top: 1rem;
border-left: solid medium;
border-right: solid medium;
border-radius: 5px;
}
@media screen and (min-width: 360px) { #info { padding-left: 1rem;}}
@media screen and (min-width: 960px) { #info { padding-left: 1.55rem;}}

/* class属性 */
div.straight {
color: inherit;
margin: 2rem auto;
border-left: solid thin;
width: auto;
height: 150px;
display: inline-block;
/* transform: rotate(15deg);
 -webkit-transform: rotate(15deg); */
}

/* タブメニュー */
.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 1.5s ease 0s 1 normal;
 -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
}

/* モーダル */
.content {
margin: auto;
padding: 0;
display: inline-block;
}
.modal {
display: none;
height: 100vh;
position: fixed;
top: 0;
width: 100%;
z-index: 95;
}
.modal__bg {
background: #FEFEFE;
height: 100vh;
position: absolute;
width: 100%;
}
.modal__content {
color: inherit;
left: 50%;
padding: 0;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
@media screen and (min-width: 360px) { .modal__content { width: 355px;}}
@media screen and (min-width: 960px) { .modal__content { width: 550px;;}}
.modal a:hover {
color: transparent;
text-shadow: 0 0 2px #02282C;
border-bottom: none;
text-decoration: none;
}

/* スクロールボックス */
div.scroll { padding: 2px 1rem 0 0; overflow: auto;}
@media screen and (min-width: 360px) { div.scroll { height: 130px;}}
@media screen and (min-width: 960px) { div.scroll { height: 175px;}}
div.scroll dl { line-height: 0.25;}
div.scroll dl dt, div.scroll dl dd { line-height: 1.7;}
div.scroll dl dt { float: left; float: left; display: inline-block;}
@media screen and (min-width: 360px) { div.scroll dl dt { font-size: x-small; width: 65px;}}
@media screen and (min-width: 960px) { div.scroll dl dt { font-size: small; width: 90px;}}
@media screen and (min-width: 360px) { div.scroll dl dd { margin-left: 4.75rem;}}
@media screen and (min-width: 960px) { div.scroll dl dd { margin-left: 5.75rem;}}
div.scroll::-webkit-scrollbar { width: 1.55px;}
div.scroll::-webkit-scrollbar-track { background: transparent;}
div.scroll::-webkit-scrollbar-thumb { background: #02282C; border-radius: 0;}

/* イメージ */
img {
backface-visibility: hidden;
image-rendering: -webkit-optimize-contrast;
vertical-align: bottom;
}
img.picture {
height: auto;
display: block;
}
@media screen and (min-width: 360px) { img.picture { margin: 3.35rem 0 -1rem; width: 110px;}}
@media screen and (min-width: 960px) { img.picture { margin-bottom: -1.15rem; width: 170px;}}

/* 見出し */
h1, h2 { font-family: 'Cinzel Decorative', cursive;} /* text-transform: capitalize; */
h1 {
letter-spacing: 0;
line-height: 1.25;
/* margin-bottom: 1.55rem; */
}
@media screen and (min-width: 360px) { h1 { font-size: 1.75rem;}}
@media screen and (min-width: 960px) { h1 { font-size: 2.55rem;}}
h1 span {
/* font-style: italic; */
text-transform: none;
letter-spacing: 2.25px;
display: block;
}
@media screen and (min-width: 360px) { h1 span { font-size: x-small;}}
@media screen and (min-width: 960px) { h1 span { font-size: small;}}
h2 {
letter-spacing: -1px;
margin-bottom: 1.75rem;
text-align: center;
display: block;
}
@media screen and (min-width: 360px) { h2 { font-size: x-large;}}
@media screen and (min-width: 960px) { h2 { font-size: xx-large;}}

/* ―　― */
h3 { text-align: left; overflow: hidden;}
@media screen and (min-width: 360px) { h3 { margin-bottom: -6px;}}
@media screen and (min-width: 960px) { h3 { margin-bottom: -10px;}}
h3 span {
padding-right: 0.75rem;
display: inline-block;
text-align: left;
position: relative;
z-index: 6;
}
h3 span:before, h3 span:after {
position: absolute;
content: "";
top: 45%;
width: 1000px;
border-top: solid thin;
height: auto;
}
h3 span:before { right: 100%;}
h3 span:after { left: 100%;}

/* loader */
.page-loader {
  display: inline-block;
  position: fixed;
  height: 100vh;
  width: 100%;
  color: inherit;
  background: #FEFEFE;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  z-index: 9998;
}
.sk-folding-cube, .sk-folding-cube * { box-sizing: border-box;}
.sk-folding-cube {
  top: 50%;
  margin: auto;
  width: 50px;
  height: 50px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}
.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #02282C;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}
@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}