@charset "UTF-8";
html {
  font-size: 16px;
  position: relative;
  color: #333333;
  scrollbar-gutter: stable;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1.8;
  overflow: hidden;
}

/*縦方向の揃え位置を中央揃えに指定*/
input,
select {
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: center;
  font-size: 0;
  line-height: 0;
  image-rendering: -webkit-optimize-contrast;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/*禁則処理*/
p,
li,
dt,
dd,
th,
td,
pre {
  text-align: left;
  word-break: normal;
  word-wrap: break-word;
}

/*box-sizingを全ブラウザに対応*/
*,
*:before,
*:after {
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

a {
  transition: 0.3s;
  text-decoration: none;
  color: black;
  cursor: pointer;
}

input {
  height: 30px;
  margin: 0;
  box-sizing: border-box;
}

input[type=textbox]::before {
  content: attr(placeholder);
  color: #808080;
}

a:focus,
*:focus,
input[type=text]:focus {
  outline: none;
}

section {
  position: relative;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

i {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

thead th {
  font-weight: 400;
}

main ul, main ol {
  list-style-type: none;
}
main ul li, main ol li {
  list-style-position: inside;
}

/*================================================
 *  電話番号をスマホのみ有効に
 ================================================*/
a[href*="tel:"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

html {
  font-family: "Noto Sans JP", sans-serif;
  scrollbar-gutter: stable;
}

.is-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

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

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

.float_l {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .float_l {
    float: left;
  }
}

.float_r {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .float_r {
    float: right;
  }
}

.cf {
  display: block;
}
.cf::after {
  content: "";
  display: block;
  clear: both;
}
.cf::before {
  content: "";
  display: block;
  clear: both;
}

.l0 {
  line-height: 0;
}

.sp-only {
  display: initial;
}
@media screen and (min-width: 980px) {
  .sp-only {
    display: none;
  }
}

.pc-only {
  display: none;
}
@media screen and (min-width: 980px) {
  .pc-only {
    display: initial;
  }
}

.spacer {
  margin-top: 2em;
}
@media screen and (min-width: 768px) {
  .spacer {
    margin-top: 100px;
  }
}

.spacer_c {
  margin-top: 1em;
}
@media screen and (min-width: 768px) {
  .spacer_c {
    margin-top: 40px;
  }
}

.spacer_cc {
  margin-top: 1em;
}
@media screen and (min-width: 768px) {
  .spacer_cc {
    margin-top: 20px;
  }
}

.spacer_ccc {
  margin-top: 0.5em;
}
@media screen and (min-width: 768px) {
  .spacer_ccc {
    margin-top: 10px;
  }
}

.p_s0 {
  padding: 0.5em;
}

.p_st0 {
  padding-top: 0.5em;
}

.p_sb0 {
  padding-bottom: 0.5em;
}

.p_stb0 {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.p_slr0 {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.p_sl0 {
  padding-left: 0.5em;
}

.p_sr0 {
  padding-right: 0.5em;
}

.p_s {
  padding: 1em;
}

.p_st {
  padding-top: 1em;
}

.p_sb {
  padding-bottom: 1em;
}

.p_stb {
  padding-top: 1em;
  padding-bottom: 1em;
}

.p_slr {
  padding-left: 1em;
  padding-right: 1em;
}

.p_sl {
  padding-left: 1em;
}

.p_sr {
  padding-right: 1em;
}

.p_s2 {
  padding: 2em;
}

.p_st2 {
  padding-top: 2em;
}

.p_sb2 {
  padding-bottom: 2em;
}

.p_stb {
  padding-top: 2em;
  padding-bottom: 2em;
}

.p_slr2 {
  padding-left: 2em;
  padding-right: 2em;
}

.p_sl2 {
  padding-left: 2em;
}

.p_sr2 {
  padding-right: 2em;
}

.p_s3 {
  padding: 3em;
}

.p_st3 {
  padding-top: 3em;
}

.p_sb3 {
  padding-bottom: 3em;
}

.p_stb3 {
  padding-top: 3em;
  padding-bottom: 3em;
}

.pm_st {
  padding-top: -1em;
}

.pm_st2 {
  padding-top: -2em;
}

.pm_sb {
  padding-bottom: -1em;
}

.pm_sl {
  padding-left: -1em;
}

.pm_st {
  padding-right: -1em;
}

.flexbox {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .flexbox {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: normal;
  }
}

.fb100 {
  flex-basis: 100%;
}

.fb90 {
  flex-basis: 90%;
}

.fb80 {
  flex-basis: 80%;
}

.fb79 {
  flex-basis: 79%;
}

.fb70 {
  flex-basis: 70%;
}

.fb69 {
  flex-basis: 69%;
}

.fb60 {
  flex-basis: 60%;
}

.fb59 {
  flex-basis: 59%;
}

.fb50 {
  flex-basis: 50%;
}

.fb49 {
  flex-basis: 49%;
}

.fb40 {
  flex-basis: 40%;
}

.fb39 {
  flex-basis: 39%;
}

.fb32 {
  flex-basis: 32%;
}

.fb30 {
  flex-basis: 30%;
}

.fb29 {
  flex-basis: 29%;
}

.fb25 {
  flex-basis: 25%;
}

.fb20 {
  flex-basis: 20%;
}

.fb19 {
  flex-basis: 19%;
}

.fb10 {
  flex-basis: 10%;
}

.memo {
  font-size: 14px;
}

p.mi {
  color: rgb(233, 0, 0);
  font-weight: 600;
}

.miu {
  font-weight: 600;
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  text-decoration: underline;
}

div.mi {
  border-width: 1px;
  border-style: solid;
  border-color: rgb(233, 0, 0);
  border-radius: 0;
  background-color: white;
  overflow: hidden;
  padding: 0.5em;
}

div.mmi {
  border-width: 2px;
  border-style: solid;
  border-color: rgb(233, 0, 0);
  border-radius: 0;
  background-color: white;
  overflow: hidden;
  padding: 0.5em;
}

.marker {
  background-color: #ff9;
}

del {
  text-decoration: line-through;
}

.im18 {
  font-size: 18px;
}

.im20 {
  font-size: 20px;
  font-weight: 600;
}

.im22 {
  font-size: 22px;
  font-weight: 600;
}

.area_full {
  margin: 0 calc(50% - 50vw);
}

.area_100 {
  max-width: 100px;
}

.area_200 {
  max-width: 200px;
}

.area_300 {
  max-width: 300px;
}

.area_400 {
  max-width: 400px;
}

.area_500 {
  max-width: 500px;
}

.area_600 {
  max-width: 600px;
}

.area_700 {
  max-width: 700px;
}

.area_800 {
  max-width: 800px;
}

.area_900 {
  max-width: 900px;
}

.area_1000 {
  max-width: 1000px;
}

.area_1200 {
  max-width: 1200px;
}

.font14 {
  font-size: clamp(13px, 3vw, 14px);
}

.font15 {
  font-size: 15px;
}

.font16 {
  font-size: 16px;
}

.font18 {
  font-size: clamp(16px, 3vw, 18px);
}

/*-- globalフォルダの中の_index.scss --*/
.header {
  position: fixed;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 50px;
  background: none;
}
@media screen and (min-width: 768px) {
  .header {
    border: none;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 8vw;
    height: 100vh;
    background: none;
    align-content: center;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  .header {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: normal;
  }
}
@media screen and (min-width: 1024px) {
  .header {
    left: 15vw;
  }
}

/* 右からメニュー */
.menu-btn {
  display: none;
}
@media screen and (max-width: 767px) {
  .menu-btn {
    position: absolute;
    top: 0;
    right: 10px;
    display: flex;
    height: 48px;
    width: 48px;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-color: none;
    z-index: 3;
  }
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: "";
  display: block;
  height: 2px;
  width: 25px;
  border-radius: 3px;
  background-color: #FF0000;
  position: absolute;
  z-index: 4;
}

.menu-btn span:before {
  bottom: 8px;
}

.menu-btn span:after {
  top: 8px;
}

#menu-btn-check:checked ~ .menu-content {
  left: 35%; /*メニューを画面内へ*/
}

#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0); /*メニューオープン時は真ん中の線を透明にする*/
}

#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
  background-color: white;
}

#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
  background-color: white;
}

#menu-btn-check {
  display: none;
}

@media screen and (max-width: 767px) {
  .menu-content {
    width: 65vw;
    height: 100svh;
    position: fixed;
    top: 0;
    left: 100%; /*leftの値を変更してメニューを画面外へ*/
    z-index: 2;
    background-color: #FF0000;
    transition: all 0.5s; /*アニメーション設定*/
    display: flex;
    align-items: center;
  }
}
.menu-content ul {
  list-style: none;
  align-self: center;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .menu-content ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: normal;
  }
}
@media screen and (min-width: 768px) {
  .menu-content ul {
    width: 320px;
    margin-top: 4vh;
  }
}
.menu-content ul li {
  text-align: center;
}
.menu-content ul li a {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
  color: white;
  display: block;
  width: 100%;
  font-size: 36px;
  position: relative;
  margin: 0;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .menu-content ul li a {
    font-size: 32px;
    width: 140px;
    border-style: solid;
    border-color: #FF0000;
    border-width: 4px;
    border-radius: 10px;
    color: #ffffff;
    margin: 10px;
    text-align: center;
    line-height: 1.1;
    background-color: rgba(255, 0, 0, 0.25);
    background-image: linear-gradient(0deg, transparent 50%, rgba(255, 0, 0, 0.25) 50%);
    background-size: 4px 4px;
    padding: 0;
  }
}
@media screen and (min-width: 768px) {
  .menu-content ul li a:hover {
    border-width: 4px;
    border-style: solid;
    border-color: #FF0000;
    border-radius: 10px;
    background-color: #FF0000;
    overflow: hidden;
  }
}
.menu-content ul li:nth-of-type(7) {
  width: 168px;
  margin-top: 50px;
}
.menu-content ul li:nth-of-type(7) a {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  font-size: 14px;
  width: 100%;
  position: relative;
  display: block;
  text-align: left;
  padding: 0.5em 3em 0.5em 1em;
}
.menu-content ul li:nth-of-type(7) a::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  top: 0;
  bottom: 0;
  right: 16px;
  left: auto;
  margin: auto;
  width: 40px;
  height: 40px;
}
.menu-content ul li:nth-of-type(7) a::after {
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23ffffff"><path d="M11.999 7.377a4.623 4.623 0 1 0 0 9.248 4.623 4.623 0 0 0 0-9.248zm0 7.627a3.004 3.004 0 1 1 0-6.008 3.004 3.004 0 0 1 0 6.008z"></path><circle cx="16.806" cy="7.207" r="1.078"></circle><path d="M20.533 6.111A4.605 4.605 0 0 0 17.9 3.479a6.606 6.606 0 0 0-2.186-.42c-.963-.042-1.268-.054-3.71-.054s-2.755 0-3.71.054a6.554 6.554 0 0 0-2.184.42 4.6 4.6 0 0 0-2.633 2.632 6.585 6.585 0 0 0-.419 2.186c-.043.962-.056 1.267-.056 3.71 0 2.442 0 2.753.056 3.71.015.748.156 1.486.419 2.187a4.61 4.61 0 0 0 2.634 2.632 6.584 6.584 0 0 0 2.185.45c.963.042 1.268.055 3.71.055s2.755 0 3.71-.055a6.615 6.615 0 0 0 2.186-.419 4.613 4.613 0 0 0 2.633-2.633c.263-.7.404-1.438.419-2.186.043-.962.056-1.267.056-3.71s0-2.753-.056-3.71a6.581 6.581 0 0 0-.421-2.217zm-1.218 9.532a5.043 5.043 0 0 1-.311 1.688 2.987 2.987 0 0 1-1.712 1.711 4.985 4.985 0 0 1-1.67.311c-.95.044-1.218.055-3.654.055-2.438 0-2.687 0-3.655-.055a4.96 4.96 0 0 1-1.669-.311 2.985 2.985 0 0 1-1.719-1.711 5.08 5.08 0 0 1-.311-1.669c-.043-.95-.053-1.218-.053-3.654 0-2.437 0-2.686.053-3.655a5.038 5.038 0 0 1 .311-1.687c.305-.789.93-1.41 1.719-1.712a5.01 5.01 0 0 1 1.669-.311c.951-.043 1.218-.055 3.655-.055s2.687 0 3.654.055a4.96 4.96 0 0 1 1.67.311 2.991 2.991 0 0 1 1.712 1.712 5.08 5.08 0 0 1 .311 1.669c.043.951.054 1.218.054 3.655 0 2.436 0 2.698-.043 3.654h-.011z"></path></svg>');
}
@media screen and (min-width: 768px) {
  .menu-content ul li:nth-of-type(7) {
    display: none;
  }
}

.footer__copyright {
  color: white;
  width: 100%;
  font-size: clamp(0.875rem, 2vw, 1rem);
  padding: 20px 0;
  text-align: center;
}

/*-- pageフォルダの中の_index.scss --*/
@font-face {
  font-family: "digitalfont-l";
  src: url("/font/DSEG14Modern-Light.woff") format("woff"), url("/font/DSEG14Modern-Light.ttf") format("truetype");
}
@font-face {
  font-family: "digitalfont";
  src: url("/font/DSEG14Modern-Regular.woff") format("woff"), url("/font/DSEG14Modern-Regular.ttf") format("truetype");
}
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #FF0000;
  z-index: 1000;
  height: 100vh;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
#loading-screen img {
  max-width: 200px;
}
@media screen and (min-width: 768px) {
  #loading-screen img {
    max-width: 400px;
  }
}

div.outerspace {
  width: 100%;
  background-image: url(../img/night/un.jpg);
  background-position: center center;
  background-size: auto;
  background-attachment: fixed;
  z-index: 0;
}

div#opening-animation {
  display: block;
  opacity: 1; /* 初期状態は不透明 */
  transition: opacity 0.5s ease-out;
}

div.award_content_pc p,
div.award_content_sp p {
  font-size: 14px;
  line-height: 1.7;
  font-weight: 600;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: black;
  text-align: center;
}
div.award_content_pc ul,
div.award_content_sp ul {
  font-size: 13px;
}
div.award_content_pc ul li,
div.award_content_sp ul li {
  text-align: left;
  list-style: none;
}

div.award_content_pc {
  display: none;
}
@media screen and (min-width: 768px) {
  div.award_content_pc {
    position: relative;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.7607843137);
    padding: 0 1rem 0.2rem 1rem;
    text-align: center;
    margin: 0.5rem auto;
    display: block;
  }
}
div.award_content_sp {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 90%;
  top: 65vh;
  background: rgba(255, 255, 255, 0.7960784314);
  padding: 0.5rem 1rem;
  text-align: center;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  div.award_content_sp {
    display: none;
  }
}

div.wrap {
  display: none;
}

#opening__logo {
  position: relative;
  width: 100%;
  height: 100svh;
  display: none; /* 最初は非表示にしておく */
  z-index: 10;
}
#opening__logo div {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  margin: auto;
  max-width: 400px;
  text-align: center;
  -webkit-animation: zoomIn 1s ease forwards;
          animation: zoomIn 1s ease forwards;
}

@-webkit-keyframes zoomIn {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
#opening__clock {
  display: none; /* 最初は非表示にしておく */
}
#opening__clock p#clock__text1 {
  font-family: "digitalfont-l", sans-serif;
  color: #FF0000;
  font-size: clamp(40px, 3vw, 60px);
  text-align: center;
  position: absolute;
  top: 68vh;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  #opening__clock p#clock__text1 {
    display: none;
  }
}

#opening__logo.animated + #opening__clock {
  display: block; /* アニメーションが終了したら時計を表示する */
}

#opening__fish {
  position: absolute;
  top: 0;
  display: none;
  width: 100%;
  height: 100vh;
  background-image: url("../img/night/fish.png");
  background-size: 900px 540px;
  -webkit-animation: bgsp 10s infinite linear;
          animation: bgsp 10s infinite linear;
}
@media screen and (min-width: 768px) {
  #opening__fish {
    background-size: 1500px 900px;
    -webkit-animation: bg 8.5s infinite linear;
            animation: bg 8.5s infinite linear;
  }
}

@-webkit-keyframes bgsp {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -900px 540px;
  }
}

@keyframes bgsp {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -900px 540px;
  }
}
@-webkit-keyframes bg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1500px 900px;
  }
}
@keyframes bg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1500px 900px;
  }
}
div.main__contents {
  width: 100%;
  position: relative;
  text-align: center;
  width: 100%;
  height: auto;
}

.opening__wrap {
  position: fixed;
  width: 100%;
  height: 100svh;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#opening__logo img {
  max-width: 200px;
}
@media screen and (min-width: 768px) {
  #opening__logo img {
    max-width: 300px;
  }
}

#opening__copy img {
  max-width: 300px;
}
@media screen and (min-width: 768px) {
  #opening__copy img {
    max-width: 400px;
  }
}

.sidebg__r,
.sidebg__l {
  position: absolute;
  width: 48px;
  height: 100vh;
  background: url(../img/night/obi_pc.png);
  background-repeat: repeat-y;
  background-position: 0 0;
  background-size: 48px auto;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .sidebg__r,
.sidebg__l {
    display: none;
  }
}

.sidebg__r {
  right: 0;
  -webkit-animation: bgroop-right 8s linear infinite;
          animation: bgroop-right 8s linear infinite;
}
.sidebg__l {
  left: 0;
  -webkit-animation: bgroop-left 8s linear infinite;
          animation: bgroop-left 8s linear infinite;
}

@-webkit-keyframes bgroop-right {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 263px;
  }
}

@keyframes bgroop-right {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 263px;
  }
}
@-webkit-keyframes bgroop-left {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -263px;
  }
}
@keyframes bgroop-left {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -263px;
  }
}
.sidebg__sp {
  position: fixed;
  width: 100%;
  height: 23px;
  background: url(../img/night/obi_sp.png);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: auto 23px;
  bottom: 0;
  -webkit-animation: bgroop-bottom 8s linear infinite;
          animation: bgroop-bottom 8s linear infinite;
  z-index: 2;
}

.sidebg__sp.spwhite {
  position: fixed;
  width: 100%;
  height: 23px;
  background: url(../img/night/obi_sp2.png);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: auto 23px;
  bottom: 0;
  -webkit-animation: bgroop-bottom 8s linear infinite;
          animation: bgroop-bottom 8s linear infinite;
  z-index: 2;
}

@media screen and (min-width: 768px) {
  .sidebg__sp {
    display: none;
  }
}
@-webkit-keyframes bgroop-bottom {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -126px 0;
  }
}
@keyframes bgroop-bottom {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -126px 0;
  }
}
.side__container {
  display: block;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
}
@media screen and (min-width: 768px) {
  .side__container {
    flex-grow: 1;
    min-height: 100vh;
    z-index: 0;
  }
}

.toplogo__container h1 {
  line-height: 0;
}
.toplogo__container h1 img {
  display: block;
  width: 50px;
  position: absolute;
  top: 1px;
  left: 3px;
  z-index: 10;
}
@media screen and (max-width: 767px) {
  .toplogo__container h1 img {
    top: -10px;
    left: 15px;
    z-index: 10;
    -o-object-fit: cover;
       object-fit: cover;
    width: auto;
    height: 50px;
    -o-object-position: top 50px;
       object-position: top 50px;
    -o-object-position: top 18px left 0px;
       object-position: top 18px left 0px;
  }
}
@media screen and (min-width: 768px) {
  .toplogo__container h1 img {
    position: relative;
    width: 28vh;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
  }
}
@media screen and (min-width: 1480px) {
  .toplogo__container h1 img {
    width: 240px;
  }
}

div.menu__clock {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 768px) {
  div.menu__clock {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: normal;
  }
}
@media screen and (min-width: 768px) {
  div.menu__clock {
    margin-top: 2vh;
  }
}
div.menu__clock p#clock__text2 {
  font-family: "digitalfont", sans-serif;
  color: #FF0000;
  font-size: 24px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  div.menu__clock p#clock__text2 {
    font-size: 34px;
    display: block;
    margin-right: 20px;
  }
}
div.menu__clock #instabutton {
  position: absolute;
  display: block;
  top: 90vh;
  right: 45px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='レイヤー_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='28.374px' height='28.374px' viewBox='0 0 28.374 28.374' enable-background='new 0 0 28.374 28.374' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23FF0000' d='M14.18,11.16c-0.001,0-0.001,0-0.002,0c-1.659,0.001-3.004,1.346-3.003,3.005s1.346,3.003,3.005,3.003 c1.658-0.001,3.002-1.345,3.003-3.003C17.184,12.506,15.839,11.161,14.18,11.16z'/%3E%3Cpath fill='%23FF0000' d='M21.185,8.83c-0.304-0.786-0.926-1.408-1.712-1.712c-0.535-0.199-1.1-0.304-1.67-0.311 c-0.967-0.055-1.217-0.055-3.654-0.055c-2.437,0-2.704,0.012-3.655,0.055C9.924,6.815,9.36,6.92,8.825,7.118 C8.036,7.42,7.411,8.041,7.106,8.83c-0.199,0.54-0.305,1.111-0.311,1.687c-0.053,0.969-0.053,1.218-0.053,3.655 c0,2.436,0.01,2.704,0.053,3.654c0.009,0.57,0.115,1.134,0.311,1.669c0.305,0.788,0.93,1.41,1.719,1.711 c0.534,0.199,1.099,0.304,1.669,0.311c0.968,0.055,1.217,0.055,3.655,0.055c2.436,0,2.704-0.011,3.654-0.055 c0.57-0.007,1.135-0.113,1.67-0.311c0.786-0.303,1.408-0.925,1.712-1.711c0.199-0.541,0.305-1.112,0.311-1.688v0.001h0.011 c0.043-0.956,0.043-1.218,0.043-3.654c0-2.437-0.011-2.704-0.054-3.655C21.487,9.929,21.382,9.365,21.185,8.83z M14.18,18.789 c-2.554,0-4.624-2.07-4.624-4.624c0-2.554,2.07-4.624,4.624-4.624s4.624,2.07,4.624,4.624 C18.804,16.719,16.734,18.789,14.18,18.789z M18.987,10.449c-0.595,0-1.078-0.483-1.078-1.078c0-0.595,0.483-1.078,1.078-1.078 c0.595,0,1.078,0.483,1.078,1.078C20.065,9.966,19.582,10.449,18.987,10.449z'/%3E%3Cpath fill='%23FF0000' d='M14.187,0C6.352,0,0,6.352,0,14.187s6.352,14.187,14.187,14.187s14.187-6.352,14.187-14.187 S22.022,0,14.187,0z M23.135,17.912c-0.015,0.748-0.156,1.486-0.419,2.186c-0.469,1.209-1.424,2.164-2.633,2.633 c-0.7,0.262-1.439,0.404-2.186,0.419c-0.955,0.055-1.268,0.055-3.71,0.055s-2.747-0.013-3.71-0.055 c-0.749-0.025-1.488-0.177-2.185-0.45c-1.209-0.468-2.165-1.423-2.634-2.632c-0.263-0.701-0.404-1.439-0.419-2.187 c-0.056-0.957-0.056-1.268-0.056-3.71c0-2.443,0.013-2.748,0.056-3.71c0.015-0.747,0.156-1.486,0.419-2.186 C6.126,7.066,7.082,6.11,8.291,5.643c0.699-0.263,1.437-0.405,2.184-0.42c0.955-0.054,1.268-0.054,3.71-0.054 s2.747,0.012,3.71,0.054c0.747,0.015,1.486,0.157,2.186,0.42c1.209,0.468,2.165,1.423,2.633,2.632 c0.267,0.709,0.409,1.459,0.421,2.217c0.056,0.957,0.056,1.267,0.056,3.71S23.178,16.95,23.135,17.912z'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  cursor: pointer;
  z-index: 1;
  background-size: 42px;
  width: 48px;
  height: 48px;
}
@media screen and (min-width: 768px) {
  div.menu__clock #instabutton {
    position: static;
  }
}

div.splogp__area {
  position: absolute;
  width: 100%;
  height: 100svh;
  text-align: center;
}

div.sp_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 200px;
  text-align: center;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  div.sp_logo {
    display: none;
  }
}

div.news__wrap {
  position: relative;
  background-color: white;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  padding: 4rem 2rem;
}
div.news__wrap h2 {
  width: 140px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
div.news__wrap h3 {
  font-weight: 600;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  margin: 1rem;
  border-width: 2px;
  border-style: solid;
  border-color: black;
  border-radius: 3px;
  background-color: transparent;
  overflow: hidden;
  padding: 0.5rem 1rem;
}
div.news__wrap > div {
  max-width: 360px;
  text-align: center;
  margin: auto;
  font-size: 14px;
  text-align: left;
}
div.news__wrap > div a {
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
  border-radius: 30px;
  background-color: rgb(0, 0, 0);
  overflow: hidden;
  position: relative;
  display: block;
  text-align: center;
  padding: 0.5em 3em 0.5em 1em;
  width: 200px;
  margin: 20px auto;
  white-space: nowrap;
}
div.news__wrap > div a::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  top: 0;
  bottom: 0;
  right: 16px;
  left: auto;
  margin: 9px auto;
  width: 20px;
  height: 20px;
}
div.news__wrap > div a:hover {
  color: rgb(0, 0, 0);
  background-color: #ffffff;
}
div.news__wrap > div a a:hover:after {
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%230"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg>');
}
div.news__wrap > div a::after {
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23ffffff"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg>');
}

#contents {
  position: relative;
  max-width: 400px;
  min-height: 100vh;
  z-index: 1;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  scrollbar-width: 0;
}
@media screen and (min-width: 768px) {
  #contents {
    margin-left: 50vw;
  }
}
#contents ::-webkit-scrollbar {
  width: 0;
}

.slideswitch_n {
  display: block;
  position: absolute;
  top: auto;
  bottom: 6svh;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .slideswitch_n {
    position: absolute;
    cursor: pointer;
    z-index: 1;
    bottom: 40px;
  }
}
@media screen and (min-width: 1024px) {
  .slideswitch_n {
    position: absolute;
    z-index: 1;
    bottom: 40px;
    right: -120vw;
  }
}

div.top__wrap {
  position: relative;
  width: auto;
  height: 100svh;
  line-height: 0;
}
div.top__wrap img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100svh;
  width: 400px;
}

div.story__wrap {
  position: relative;
  padding-top: 50px;
  background-color: #e0e0e0;
  background-image: url("../img/night/story_back.png"), url("../img/night/story_liver.png");
  background-repeat: no-repeat, no-repeat;
  background-size: 330px, 400px;
  background-position: top 120px center, bottom 100px center;
  height: 1220px;
  overflow: hidden;
}
div.story__wrap h2 {
  position: absolute;
  top: 65px;
  left: 22px;
  width: 245px;
}
div.story__tako {
  position: absolute;
  bottom: 70px;
}
div.story__tako img {
  mix-blend-mode: multiply;
  opacity: 0.3;
}
div.story__scroll {
  width: 260px;
  height: 270px;
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translateX(-50%);
  overflow: auto;
}

/* スクロールダウンの位置 */
.scrolldown {
  position: absolute;
  top: 650px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.scrolldown span {
  color: white;
  font-size: 13px;
}

/* 線のアニメーション部分 */
.scrolldown::before {
  -webkit-animation: scroll 2s infinite;
          animation: scroll 2s infinite;
  background-color: white;
  bottom: 40px;
  content: "";
  height: 50px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}

/* 線のアニメーション */
@-webkit-keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
div.about__wrap {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  background-color: #FF0000;
  -webkit-clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0 100%);
          clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0 100%);
  margin-top: -130px;
}
div.about__wrap h2 {
  padding-top: 60px;
  width: 320px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
div.about__wrap h3 {
  width: 260px;
  padding-top: 30px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
div.about__wrap p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #ffffff;
  line-height: 2.4em;
  width: 260px;
  margin: 20px auto;
  letter-spacing: 0.4px;
}
div.about__kusemonoz {
  position: absolute;
  left: 15px;
  width: 160px;
  z-index: 1;
}
div.about__photo {
  -webkit-clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0 100%);
          clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0 100%);
  cursor: pointer;
  height: 645px;
  margin-inline: auto;
  margin-top: 20px;
  position: relative;
  width: 400px;
}
div.about__photo img {
  height: auto;
  left: 0;
  position: absolute;
  width: 100%;
}
div.about__photo img:last-of-type {
  opacity: 0;
  transition: opacity 0s;
}
div.about__photo:hover img {
  opacity: 1;
}

div.menu__wrap {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  background: #ffffff;
  position: relative;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  background-image: url("../img/night/menu_star.png"), url("../img/night/menu_ufo2.png"), url("../img/night/menu_astronaut.png"), url("../img/night/menu_gstar.png"), url("../img/night/menu_ufo.png"), url("../img/night/menu_back.jpg");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: 120px, 130px, 100px, 120px, 189px, 250px;
  background-position: top 400px right 50px, top 1470px left 50px, top 1910px right 50px, top 2370px left 50px, top 2860px right 50px, center top;
  -webkit-clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0 100%);
          clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0 100%);
  margin-top: -120px;
}
div.menu__wrap h2 {
  width: 340px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  padding-top: 60px;
}
div.menu__wrap ul {
  position: absolute;
  top: 160px;
  right: 40px;
  list-style: none;
}
div.menu__wrap ul li {
  width: 130px;
}
div.menu__wrap ul li a {
  display: inline-block;
  position: relative;
}
div.menu__wrap ul li a::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: 5px;
  width: 95%;
  height: 75%;
  background-color: #49ff00;
  border-radius: 50%;
  z-index: -1;
}
div.menu__wrap ul li a img {
  transition: transform 0.3s ease;
}
div.menu__wrap ul li a:hover img {
  transform: translate(5px, 5px); /* 画像を右下に2ピクセル移動 */
}
div.menu__wrap h3 {
  width: 140px;
  position: relative;
  margin-left: 30px;
}
div.menu__wrap h3 img {
  -webkit-animation: rotate-anime 30s linear infinite;
          animation: rotate-anime 30s linear infinite;
}
@-webkit-keyframes rotate-anime {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-anime {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
div.menu__wrap h3 figure {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  margin: auto;
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
  color: #FF0000;
  white-space: nowrap;
  display: block;
  font-size: 36px;
  text-align: center;
  line-height: 0.8;
}

div.takoball__area {
  height: 3150px;
}
div.takoball__area h3 {
  margin-top: 100px;
}
div.takoball__area dl {
  position: relative;
}
div.takoball__area dl dt.tako_title {
  position: absolute;
  width: 120px;
  z-index: 1;
}
div.takoball__area dl dt.tako_title img {
  -webkit-animation: rotate-anime 30s linear infinite;
          animation: rotate-anime 30s linear infinite;
}
@keyframes rotate-anime {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
div.takoball__area dl dt.tako_title figure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  margin: auto;
  color: black;
  white-space: nowrap;
  display: block;
  font-size: 18px;
  text-align: center;
  font-weight: 600;
  line-height: 1.2;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-style: normal;
}
div.takoball__area dl dt.tako_photo {
  position: absolute;
}
div.takoball__area dl dd {
  position: absolute;
  color: white;
  display: block;
  font-size: 14px;
  letter-spacing: 0.2px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  width: 240px;
  border-style: solid;
  border-color: #FF0000;
  border-width: 3px;
  border-radius: 10px;
  text-align: left;
  line-height: 1.5;
  background-color: rgba(255, 0, 0, 0.25);
  background-image: linear-gradient(0deg, transparent 50%, rgba(255, 0, 0, 0.25) 50%);
  background-size: 4px 4px;
  padding: 25px 24px;
}
div.takoball__area #eihamo dt.tako_photo {
  width: 361px;
  top: 10px;
  right: 0;
  z-index: 2;
}
div.takoball__area #eihamo dt.tako_title {
  top: 230px;
  left: 25px;
}
div.takoball__area #eihamo dd {
  top: 270px;
  right: 40px;
}
div.takoball__area #kusetai dt.tako_photo {
  width: 166px;
  top: 695px;
  left: 50px;
  z-index: 1;
}
div.takoball__area #kusetai dt.tako_title {
  top: 770px;
  left: 230px;
}
div.takoball__area #kusetai dd {
  top: 840px;
  left: 50px;
}
div.takoball__area #ebiru dt.tako_photo {
  width: 178px;
  top: 1120px;
  right: 20px;
  z-index: 2;
}
div.takoball__area #ebiru dt.tako_title {
  top: 1100px;
  right: 160px;
}
div.takoball__area #ebiru dd {
  top: 1230px;
  right: 80px;
}
div.takoball__area #irigon dt.tako_photo {
  width: 197px;
  top: 1600px;
  left: 40px;
  z-index: 2;
}
div.takoball__area #irigon dt.tako_title {
  top: 1730px;
  left: 35px;
}
div.takoball__area #irigon dd {
  top: 1730px;
  right: 30px;
}
div.takoball__area #norinori dt.tako_photo {
  width: 197px;
  top: 2000px;
  right: 70px;
  z-index: 2;
}
div.takoball__area #norinori dt.tako_title {
  top: 2140px;
  right: 30px;
}
div.takoball__area #norinori dd {
  top: 2160px;
  left: 30px;
}
div.takoball__area #tyo dt.tako_photo {
  width: 164px;
  top: 2640px;
  left: 20px;
  z-index: 2;
}
div.takoball__area #tyo dt.tako_title {
  top: 2590px;
  left: 140px;
}
div.takoball__area #tyo dd {
  top: 2750px;
  left: 130px;
}

div.okazu__area {
  position: relative;
  height: 600px;
}
div.okazu__area h3 {
  position: absolute;
  top: 0;
}
div.okazu__area .look {
  width: 200px;
  position: absolute;
  top: 240px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
div.okazu__area .look a {
  display: inline-block;
  position: relative;
}
div.okazu__area .look a::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: 4px;
  width: 99%;
  height: 85%;
  background-color: #fee401;
  border-radius: 50px;
  z-index: -1;
}
div.okazu__area .look a img {
  transition: transform 0.3s ease;
}
div.okazu__area .look a:hover img {
  transform: translate(4px, 4px);
}
div.okazu__area .looks {
  width: 160px;
  position: absolute;
  top: 240px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
div.okazu__area ul {
  position: relative;
  top: 220px;
  right: 0;
  display: inline-block;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
div.okazu__area ul li {
  color: white;
  width: 100%;
  font-weight: 600;
}

/* hoverアニメーション*/
.man {
  width: 180px;
  position: absolute;
  top: 900px;
  left: 160px;
  /* hoverアニメーション*/
}
.man:hover img {
  cursor: pointer;
  transform: rotate(180deg);
}
.man img {
  transition: transform 0.5s;
}

/* hoverアニメーション*/
.women {
  width: 331px;
  position: absolute;
  top: 100px;
  right: 30px;
  z-index: 1;
}

div.access__wrap {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 50px;
  margin-top: -80px;
  background: #ffffff;
}
div.access__wrap h2 {
  padding-top: 130px;
  width: 340px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
div.access__wrap h3 {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  font-size: 22px;
  letter-spacing: 1px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 600;
  text-align: left;
  color: #FF0000;
}

.access__map {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  width: 300px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  font-size: 14px;
}
.access__map a#googlemap {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  text-decoration: none;
  color: #A8A8A8;
  position: relative;
  display: block;
  text-align: center;
  padding: 0.5em 0 0.5em 1.6em;
  width: 100%;
  text-align: left;
}
.access__map a#googlemap::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  top: 0;
  bottom: 0;
  right: auto;
  left: 0;
  margin: auto;
  width: 21px;
  height: 21px;
}
.access__map a::after {
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23A8A8A8"><path d="M12 14c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2z"></path><path d="M11.42 21.814a.998.998 0 0 0 1.16 0C12.884 21.599 20.029 16.44 20 10c0-4.411-3.589-8-8-8S4 5.589 4 9.995c-.029 6.445 7.116 11.604 7.42 11.819zM12 4c3.309 0 6 2.691 6 6.005.021 4.438-4.388 8.423-6 9.73-1.611-1.308-6.021-5.294-6-9.735 0-3.309 2.691-6 6-6z"></path></svg>');
}
.access__map a:hover:after {
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23A8A8A8"><path d="M12 14c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2z"></path><path d="M11.42 21.814a.998.998 0 0 0 1.16 0C12.884 21.599 20.029 16.44 20 10c0-4.411-3.589-8-8-8S4 5.589 4 9.995c-.029 6.445 7.116 11.604 7.42 11.819zM12 4c3.309 0 6 2.691 6 6.005.021 4.438-4.388 8.423-6 9.73-1.611-1.308-6.021-5.294-6-9.735 0-3.309 2.691-6 6-6z"></path></svg>');
}
.access__map p {
  margin-top: 10px;
  letter-spacing: 0.2px;
}
.access__kagawa {
  display: block;
  width: 270px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  padding: 20px 0 20px 0;
}
.access__way {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  position: relative;
  margin-top: 15px auto;
  color: #FF0000;
  text-align: center;
  padding: 1em 0.5em 0.7em 1em;
  width: 330px;
  border: 1px solid #FF0000;
  border-radius: 10px;
  margin: 2em auto;
}
.access__way dt {
  position: absolute;
  left: 20px;
  top: -11px;
  padding: 0 0.5em;
  font-size: 14px;
  background: #ffffff;
}
.access__way dd {
  font-size: 13px;
  letter-spacing: 0.2px;
}
.access__tel {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1%;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  margin: 0 auto;
}
.access__tel dt {
  flex-basis: 11%;
  align-self: stretch;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  font-weight: 600;
}
.access__tel dd {
  flex-basis: 85%;
  align-self: stretch;
}
.access__tel dd span {
  font-weight: 400;
  font-size: 13px;
}
.access__menu, .access__holiday {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1%;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  margin: 30px auto;
}
.access__menu dt, .access__holiday dt {
  flex-basis: 35%;
  align-self: stretch;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  font-weight: 600;
  color: #FF0000;
}
.access__menu dd, .access__holiday dd {
  color: #FF0000;
  flex-basis: 64%;
  align-self: stretch;
}
.access__menu dd span, .access__holiday dd span {
  font-weight: 400;
  font-size: 13px;
}
.access__menu dd a, .access__holiday dd a {
  color: #FF0000;
}
.access__tel {
  width: 300px;
  text-align: center;
}
.access__menu {
  width: 300px;
  text-align: center;
}
.access__holiday {
  width: 200px;
  text-align: center;
}

.access__times {
  width: 304px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  padding-top: 30px;
}

div.sics_area {
  background-image: url("../img/day/2f_back.jpg");
  background-repeat: repeat;
  border-radius: 10px;
  width: 335px;
  padding: 15px 20px;
  margin-top: 50px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
div.sics_area h3 {
  color: black;
  font-size: 24px;
  text-align: left;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  margin: 0;
}
div.sics_area dl {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2%;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
div.sics_area dl dt {
  width: 90px;
}
div.sics_area dl dd {
  font-size: 13px;
}
div.sics_area > img {
  padding-top: 34px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
div.sics_area > div {
  text-align: center;
  margin: auto;
}
div.sics_area > div a {
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
  border-radius: 30px;
  background-color: rgb(0, 0, 0);
  overflow: hidden;
  position: relative;
  display: block;
  text-align: center;
  padding: 0.5em 3em 0.5em 1em;
  width: 200px;
  margin: 20px auto;
}
div.sics_area > div a::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  top: 0;
  bottom: 0;
  right: 16px;
  left: auto;
  margin: 9px auto;
  width: 20px;
  height: 20px;
}
div.sics_area > div a::after {
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23ffffff"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg>');
}
div.sics_area > div :hover {
  color: rgb(0, 0, 0);
  background-color: #ffffff;
}
div.sics_area > div a:hover:after {
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%230"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg>');
}

div.contact__wrap {
  background-color: #FF0000;
  padding: 60px 50px 25px 50px;
  color: white;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
div.contact__wrap h2 {
  width: 220px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
div.contact__wrap p {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  font-size: 14px;
  margin-top: 50px;
  letter-spacing: 0.2px;
}
div.contact__wrap p.copyright {
  color: white;
  margin-top: 50px;
  font-size: 10px;
}
div.contact__wrap ul li {
  list-style: none;
  font-size: 14px;
  margin-top: 30px;
  width: 220px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
div.contact__wrap ul li:last-child {
  width: 160px;
  margin-top: 50px;
}
div.contact__wrap ul li:last-child a {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  font-size: 14px;
  width: 100%;
  position: relative;
  display: block;
  text-align: left;
  padding: 0.5em 3em 0.5em 1em;
}
div.contact__wrap ul li:last-child a::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  top: 0;
  bottom: 0;
  right: 16px;
  left: auto;
  margin: auto;
  width: 40px;
  height: 40px;
}
div.contact__wrap ul li:last-child a::after {
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23ffffff"><path d="M11.999 7.377a4.623 4.623 0 1 0 0 9.248 4.623 4.623 0 0 0 0-9.248zm0 7.627a3.004 3.004 0 1 1 0-6.008 3.004 3.004 0 0 1 0 6.008z"></path><circle cx="16.806" cy="7.207" r="1.078"></circle><path d="M20.533 6.111A4.605 4.605 0 0 0 17.9 3.479a6.606 6.606 0 0 0-2.186-.42c-.963-.042-1.268-.054-3.71-.054s-2.755 0-3.71.054a6.554 6.554 0 0 0-2.184.42 4.6 4.6 0 0 0-2.633 2.632 6.585 6.585 0 0 0-.419 2.186c-.043.962-.056 1.267-.056 3.71 0 2.442 0 2.753.056 3.71.015.748.156 1.486.419 2.187a4.61 4.61 0 0 0 2.634 2.632 6.584 6.584 0 0 0 2.185.45c.963.042 1.268.055 3.71.055s2.755 0 3.71-.055a6.615 6.615 0 0 0 2.186-.419 4.613 4.613 0 0 0 2.633-2.633c.263-.7.404-1.438.419-2.186.043-.962.056-1.267.056-3.71s0-2.753-.056-3.71a6.581 6.581 0 0 0-.421-2.217zm-1.218 9.532a5.043 5.043 0 0 1-.311 1.688 2.987 2.987 0 0 1-1.712 1.711 4.985 4.985 0 0 1-1.67.311c-.95.044-1.218.055-3.654.055-2.438 0-2.687 0-3.655-.055a4.96 4.96 0 0 1-1.669-.311 2.985 2.985 0 0 1-1.719-1.711 5.08 5.08 0 0 1-.311-1.669c-.043-.95-.053-1.218-.053-3.654 0-2.437 0-2.686.053-3.655a5.038 5.038 0 0 1 .311-1.687c.305-.789.93-1.41 1.719-1.712a5.01 5.01 0 0 1 1.669-.311c.951-.043 1.218-.055 3.655-.055s2.687 0 3.654.055a4.96 4.96 0 0 1 1.67.311 2.991 2.991 0 0 1 1.712 1.712 5.08 5.08 0 0 1 .311 1.669c.043.951.054 1.218.054 3.655 0 2.436 0 2.698-.043 3.654h-.011z"></path></svg>');
}
div.contact__wrap ul li a {
  color: white;
}
div.contact__wrap ul li a:hover, div.contact__wrap ul li a:active, div.contact__wrap ul li a:focus {
  color: white;
}

@-webkit-keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}

@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.splide--rtl {
  direction: rtl;
}

.splide__track--ttb > .splide__list {
  display: block;
}

.splide__container {
  box-sizing: border-box;
  position: relative;
}

.splide__list {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}

.splide__pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}

.splide:not(.is-overflow) .splide__pagination {
  display: none;
}

.splide__progress__bar {
  width: 0;
}

.splide {
  position: relative;
  visibility: hidden;
}

.splide.is-initialized, .splide.is-rendered {
  visibility: visible;
}

.splide__slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}

.splide__slide img {
  vertical-align: bottom;
}

.splide__spinner {
  -webkit-animation: splide-loading 1s linear infinite;
          animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
  display: none;
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

/* スライダーのサイズ調整 */
/* スライダーを上下中央 */
.splide__slide {
  display: flex;
  justify-content: center; /* 左右の中央揃え */
}

/* スライドのサイズ調整 */
.splide__slide img {
  align-self: center; /* 上下の中央揃え */
  max-height: 100%;
  max-width: 100%;
  width: auto;
}

.splide__arrow--next {
  right: -30px;
}

.splide__arrow--prev {
  left: -30px;
  transform: scale(-1, 1);
}

.splide__arrow {
  align-items: center;
  background: #ffffff;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 40%;
  width: 30px;
  height: 40px;
  z-index: 1;
}

.splide__arrow--prev {
  background: url(../img/common/yaji.png) no-repeat;
  background-size: cover;
}

.splide__arrow--next {
  background: url(../img/common/yaji.png) no-repeat;
  background-size: cover;
}

/*-- slideフォルダの中の_index.scss --*/
/*!
utility > changeimg
------------------------------
*/
.sp-only {
  display: initial;
}
@media screen and (min-width: 568px) {
  .sp-only {
    display: none;
  }
}

.pc-only {
  display: none;
}
@media screen and (min-width: 568px) {
  .pc-only {
    display: initial;
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

.fuwa {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.5s, transform 2s;
}

.fuwa.active {
  opacity: 1;
  transform: translateY(0px);
}

/*----------------------------
fuwa_l ｜左から出現
----------------------------*/
.fuwa_l {
  transition: 0.8s ease-in-out;
  transform: translateX(-50px);
  opacity: 0;
  filter: alpha(opacity=0);
}

.fuwa_l.active {
  opacity: 1;
  filter: alpha(opacity=100);
  transform: translateX(0);
}

/*----------------------------
fuwa_r ｜右から出現
----------------------------*/
.fuwa_r {
  transition: 0.8s ease-in-out;
  transform: translateX(50px);
  opacity: 0;
  filter: alpha(opacity=0);
}

.fuwa_r.active {
  opacity: 1;
  filter: alpha(opacity=100);
  transform: translateX(0);
}

.fuwan {
  opacity: 0;
  transform: scale(0.5); /* 初期縮小状態 */
  transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s; /* アニメーション時間と遅延時間を変更 */
}

.fuwan.active {
  opacity: 1;
  transform: scale(1.55); /* 拡大状態 */
}

.doron {
  opacity: 1;
  transform: translateY(0px);
}

.doron.active {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.5s, transform 2s;
}

/* === ボタンを表示するエリア ============================== */
.slideswitch,
.slideswitch_n {
  line-height: 36px;
  letter-spacing: 0;
  text-align: center;
  font-size: 14px;
  margin: auto;
  width: 110px;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "slnt" 0;
}

/* === チェックボックス ==================================== */
.slideswitch input[type=checkbox],
.slideswitch_n input[type=checkbox] {
  display: none; /* チェックボックス非表示 */
}

/* === チェックボックスのラベル（標準） ==================== */
.slideswitch label,
.slideswitch_n label {
  display: block;
  box-sizing: border-box;
  height: 40px;
  border: 2px solid white;
  border-radius: 20px;
}

.slideswitch label {
  background: #FF0000;
}

.slideswitch_n label {
  background: black;
}

/* === チェックボックスのラベル（ONのとき） ================ */
.slideswitch input[type=checkbox]:checked + label {
  border-color: white; /* 選択タブの枠線     */
  background: black;
}

.slideswitch_n input[type=checkbox]:checked + label {
  border-color: white; /* 選択タブの枠線     */
  background: #FF0000;
}

/* === 表示する文字（標準） ================================ */
.slideswitch label span:after {
  content: "DINNER"; /* 表示する文字       */
  padding: 0 0 0 30px; /* 表示する位置       */
  color: white; /* 文字色             */
}

.slideswitch_n label span:after {
  content: "LUNCH"; /* 表示する文字       */
  padding: 0 30px 0 0; /* 表示する位置       */
  color: white; /* 文字色             */
}

/* === 表示する文字（ONのとき） ============================ */
.slideswitch input[type=checkbox]:checked + label span:after {
  content: "LUNCH"; /* 表示する文字       */
  padding: 0 30px 0 0; /* 表示する位置       */
  color: white; /* 文字色             */
}

.slideswitch_n input[type=checkbox]:checked + label span:after {
  content: "DINNER"; /* 表示する文字       */
  padding: 0 0 0 30px; /* 表示する位置       */
  color: white; /* 文字色             */
}

/* === 丸部分のSTYLE（標準） =============================== */
.slideswitch #swImg {
  position: absolute;
  width: 30px;
  height: 30px;
  background: white;
  top: 5px;
  left: 5px;
  border-radius: 20px;
  transition: 0.2s;
}

.slideswitch_n #swImg {
  position: absolute;
  width: 30px;
  height: 30px;
  background: white;
  top: 5px;
  right: 5px;
  border-radius: 20px;
  transition: 0.2s;
}

/* === 丸部分のSTYLE（ONのとき） =========================== */
.slideswitch input[type=checkbox]:checked ~ #swImg {
  transform: translateX(69px); /* 丸も右へ移動       */
}

.slideswitch_n input[type=checkbox]:checked ~ #swImg {
  transform: translateX(-69px); /* 丸も左へ移動       */
}
/*# sourceMappingURL=nightstyle2025.css.map */