@charset "UTF-8";
.list_box {
  text-align: center;
  margin: auto;
  padding: min(15vw, 50px) 0 max(1vw, 40px) 0;
  width: 95%;
  color: #ffffff;
  font-size: clamp(1.1rem, 1rem + 0.625vw, 5rem);
}
.list_box ul li {
  margin-bottom: 1rem;
}
.list_box a {
  transition: color 0.5s;
}
.list_box a:hover {
  color: #ffee00;
}

.youtube {
  content-visibility: auto;
  contain-intrinsic-size: 1000 px;
  margin: 2vh 0;
  width: 100%;
  aspect-ratio: 16/9;
}

.youtube iframe {
  content-visibility: auto;
  contain-intrinsic-size: 1000 px;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

.tiktok_adjust {
  content-visibility: auto;
  contain-intrinsic-size: 1000 px;
  background-color: rgb(255, 255, 255);
  padding: 10px 0 10px;
}

.hidaka_line {
  max-width: 380px;
}
@media screen and (max-width: 1024px) {
  .hidaka_line {
    width: 48%;
  }
}

iframe {
  align-items: end;
  height: 170px;
}
@media screen and (min-width: 500px) {
  iframe {
    height: 200px;
  }
}

#weather-wrap {
  color: #ffffff;
  background-color: #000;
  width: 100% !important;
  height: 200px;
  overflow: hidden;
}
@media screen and (max-width: 500px) {
  #weather-wrap {
    height: 170px;
  }
}
#weather-wrap .d_img {
  width: 70px;
  height: 70px;
  margin: auto;
}
@media screen and (max-width: 500px) {
  #weather-wrap .d_img {
    margin-top: -10px;
  }
}
#weather-wrap .sep {
  justify-content: space-between;
  align-items: center;
  width: min(70%, 350px);
  position: relative;
  height: 50px;
}
@media screen and (max-width: 500px) {
  #weather-wrap .sep {
    text-align: center;
  }
}

#weather1 {
  overflow: hidden;
  font-size: 12px;
  border: none !important;
  box-sizing: unset !important;
  line-height: 1.5 !important;
  justify-content: center;
  align-items: center;
  max-width: 1224px !important;
  height: 85px;
}
@media screen and (max-width: 500px) {
  #weather1 {
    height: 70px;
    display: flex;
    margin-bottom: 5px;
  }
}
#weather1 .day {
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #weather1 .day {
    display: block;
  }
}
#weather1 .w_bg {
  width: auto;
  background: none;
  font-weight: bold;
  text-align: left;
  margin-left: 10px;
}
@media screen and (min-width: 500px) {
  #weather1 .w_bg {
    margin-left: -20px !important;
    padding-right: 10px !important;
  }
}
#weather1 .w_title {
  font-size: clamp(1rem, 0.6rem + 0.625vw, 4rem) !important;
  margin: 0% auto 0px;
  color: #ffffff;
}
#weather1 .d_rain {
  font-size: 16px;
}

#weather1 ul li {
  display: block !important;
}

.w_city {
  font-size: clamp(0.5rem, 0.6rem + 0.625vw, 4rem) !important;
}

#weather2 {
  box-sizing: unset !important;
  line-height: 1.5 !important;
  max-width: 1024px !important;
  margin-top: 0px;
  border: none !important;
  height: 85px;
}
#weather2 .date {
  padding-bottom: 0px;
  font-size: 12px;
}
#weather2 ul {
  justify-content: center;
}
#weather2 li {
  margin-top: 20px !important;
  font-size: 12px !important;
  border-bottom: none !important;
  border-top: 1px solid #cfcfcf !important;
  border-right: none !important;
  border-left: none !important;
}
#weather2 li .date {
  margin-top: 5px !important;
}
#weather2 img {
  max-width: 100px !important;
}
#weather2 .icon, #weather2 .w_temp {
  margin: -10px auto 0 !important;
}

.weather-c-name {
  padding-right: 10px;
  text-decoration: none !important;
  margin-top: -5px !important;
}
.weather-c-name a {
  color: #727272;
  text-decoration: none !important;
  font-size: 9px;
}

.max_temp {
  display: inline-block !important;
}

.min_temp {
  display: inline-block !important;
}

.temp {
  display: block !important;
  font-weight: bold;
  padding-top: 0px !important;
}

.rain_s {
  display: block !important;
}

.w_bg {
  background: linear-gradient(to right, #e3f2fd, #fff);
}
@media screen and (max-width: 500px) {
  .w_bg {
    width: 100px !important;
  }
}

/* OpenWeatherMapアイコンを全体的に明るく */
img[src*="openweathermap.org/img/wn/"] {
  filter: brightness(1.7) saturate(1.7) contrast(1.2);
}

img[src*="13d.png"] {
  filter: brightness(2.2) saturate(1.8) contrast(1.2);
}

img[src*="04d.png"] {
  filter: brightness(2.8) saturate(1.5) contrast(1.1);
}

/* 温度計アイコン（明るい赤） */
.fa-thermometer-half,
.fa-thermometer-full {
  color: #ffaaaa !important;
}

/* 上昇・下降温度矢印 */
.fa-caret-up:before {
  color: #ff6666 !important;
}

.fa-caret-down:before {
  color: #66bfff !important;
}

.carousel {
  background-image: url(../img/bg_rainbow.webp);
  background-size: cover;
  background-position: center bottom;
}

.carousel_2 {
  max-width: 640px;
  margin: auto;
}

/*スライダー001*/
.slider-001 {
  width: 100%;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.slide-001 {
  width: 100%;
  flex-shrink: 0;
  position: relative;
  top: 0;
  left: 0;
  transition: all 0.6s ease-in-out;
}

.slide-content-001 {
  width: 100%;
  height: auto;
}

.slide-content-001 img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.prev-001, .next-001 {
  position: absolute;
  top: 50%;
  height: auto;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  padding: min(2vw, 16px);
  box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.5);
}

.prev-001 {
  left: min(1vw, 10px);
}

.next-001 {
  right: min(1vw, 10px);
}

.prev-001 img, .next-001 img {
  width: min(5vw, 30px); /* 矢印画像の幅 */
  height: auto; /* 矢印画像の高さを自動 */
  opacity: 0.9;
}

.numbertext {
  color: white;
  font-size: min(5vw, 30px);
  font-weight: bold;
  padding: 8px 16px;
  position: absolute;
  top: 0;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.8);
}

.dots {
  height: 15px;
  padding: 0;
  position: absolute;
  bottom: min(10vw, 90px);
  width: 100%;
  text-align: center;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 10px 4px;
  background-color: rgba(154, 204, 255, 0.5);
  border-radius: 50%;
  display: inline-block;
  transition: all 0.2s ease;
  box-shadow: 4px 8px 8px -6px rgb(0, 0, 0);
  border: solid 1px rgb(255, 255, 255);
}

.dot:hover {
  background-color: rgba(107, 182, 255, 0.8);
}

body {
  margin: 0;
  background: url(../img/bg_black.webp) repeat;
  background-size: auto;
}

.container {
  max-width: 1024px;
  margin: auto;
}

section {
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.bnr_large {
  margin: auto;
}
.bnr_large img {
  width: 100%;
  margin: max(30px, 5vw) 0 max(30px, 5vw) 0;
}

.bnr_large_2 img {
  width: 100%;
  margin: max(30px, 5vw) 0 0 0;
}

.full_width {
  width: 100%;
  margin: 0;
  padding: 0;
}
.full_width img {
  width: 100%;
}

.title_1 {
  padding: 1rem 0;
  display: block;
}

.title_2 {
  padding: 0 0 0 30%;
  display: block;
}

.space_1 {
  height: 2vh;
}

.space_2 {
  height: 4vh;
}

.space_3 {
  height: 5vh;
}

.bg_color_1 {
  background-color: #e9e9e9;
}

/* キャラクターアニメーション */
/* カスタムでアニメーションの間隔を設定 */
.custom-bounce {
  animation-duration: 5s; /* 2秒で1回のアニメーション */
  animation-iteration-count: infinite; /* 無限ループ */
}

/* 初期状態で非表示にする */
#animatedDiv {
  opacity: 0; /* 最初は非表示 */
}

/* フェードインした後にバウンドしつづけるアニメーション */
.animated-element {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animated-element.visible {
  opacity: 1;
  transform: translateY(0);
  animation: bounce 2s infinite 2s; /* フェードイン後にバウンス */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

body {
  margin: 0;
}

a {
  color: inherit;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

.map_illust {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .map_illust {
    width: 30%;
  }
}
.map_illust img {
  width: 100%;
}

.tenpo {
  color: #ffffff;
  font-size: 1.5vw;
  text-align: center;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .tenpo {
    font-weight: 500;
  }
}
.tenpo img {
  margin: auto;
}

.mymap_morioka,
.mymap_engan,
.mymap_kennan {
  color: #ffffff;
  text-align: center;
  margin-top: min(20vw, 100px);
  font-size: min(6vw, 30px);
  font-weight: 900;
  padding: min(1vw, 30px) 0 min(15vw, 50px) 0;
  height: 450px;
}
.mymap_morioka img,
.mymap_engan img,
.mymap_kennan img {
  margin: auto;
  width: 80%;
  border-radius: min(2vw, 30px);
}
.mymap_morioka iframe,
.mymap_engan iframe,
.mymap_kennan iframe {
  margin: auto;
  width: 80%;
  border-radius: min(3vw, 30px);
  border: none;
  height: 400px;
}

.mymap_morioka {
  background-color: #D80A0A;
}

.mymap_engan {
  background-color: #E28A05;
}

.mymap_kennan {
  background-color: #4C77D6;
}

.gold_line {
  height: 1vh;
  width: 100%;
  background-image: radial-gradient(circle, rgb(255, 242, 58), rgb(224, 162, 8) 80%);
}

.shop_detail {
  background-color: #ffffff;
  position: relative;
}

.shop_chara_1 {
  position: absolute;
  margin-bottom: 2vh;
  z-index: 2;
  top: min(2.5vh, 100px);
  width: 25%;
}
.shop_chara_1 img {
  max-width: 240px;
}
@media screen and (max-width: 768px) {
  .shop_chara_1 img {
    width: 90%;
    padding-left: 2vw;
  }
}

.shopname_bg_a,
.shopname_bg_b,
.shopname_bg_c {
  font-size: clamp(18px, 3.2vw, 34px);
  font-weight: 900;
  text-align: left;
  position: relative;
  width: 75%;
  padding: 1rem;
}

.shopname_bg_a {
  background-image: url(../img/shopname_bg_a.webp);
}

.shopname_bg_b {
  background-image: url(../img/shopname_bg_b.webp);
}

.shopname_bg_c {
  background-image: url(../img/shopname_bg_c.webp);
}

.shop_3d {
  z-index: 3;
  text-align: right;
}
.shop_3d img {
  width: 80%;
}

.sns_map_box {
  display: flex;
  width: 80%;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .sns_map_box {
    width: 96%;
  }
}

.rink {
  padding: 0;
  margin: min(1vw, 10px);
  box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.2);
}
.rink img {
  width: 100%;
}

.shop_list, .line_list {
  width: 80%;
  margin: auto;
  font-weight: bold;
  background-size: cover;
  background-position: center bottom;
  aspect-ratio: 102/11;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop_list {
  background-image: url(../img/btn_bg_shop_list.webp);
}

.line_list {
  background-image: url(../img/btn_bg_line_list.webp);
}

.map_info {
  text-align: left;
  width: 100%;
}
.map_info a {
  color: #3970d6;
  text-decoration: underline;
}
@media screen and (min-width: 768px) {
  .map_info {
    width: 70%;
  }
}
.map_info table {
  width: 100%;
}
.map_info table td {
  border-color: black;
  border-bottom: solid 1px;
  padding: 10px 0px 10px 1vw;
  line-height: 3vh;
}
.map_info table .space_right_1 {
  padding-right: 3vw;
}

.floormap {
  width: 97.5%;
  margin: 0 auto min(1.8vw, 10px) auto;
  color: #fff;
  font-size: min(4vw, 30px);
  font-weight: bold;
  padding: min(2vw, 22px) 0;
  background-image: linear-gradient(0deg, rgb(255, 0, 0), rgb(255, 146, 4));
  border-radius: min(3vw, 24px);
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .floormap {
    width: 98%;
  }
}
.floormap img {
  aspect-ratio: 1/0.5;
  width: 10vw;
  height: auto;
  max-width: 62px;
  padding-left: min(5vw, 30px);
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}
.modal .modal-content {
  border-radius: 8px;
  position: relative;
  max-width: 90%;
  text-align: center;
  border: 3px solid #fff;
  border-radius: 5px;
  max-width: 900px;
}
.modal .modal-content img {
  max-width: 100%;
  height: auto;
}
.modal .close {
  position: absolute;
  top: -20px;
  right: 15px;
  font-size: min(5vw, 24px);
  cursor: pointer;
  color: #fff;
  background-color: #000;
  border: 2px solid #fff;
  border-radius: 20px;
  padding: 0 3px 2px;
  box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 768px) {
  .modal .close {
    top: -20px;
  }
}

.header {
  width: 100%;
  height: auto;
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 98;
  max-width: 1024px;
  margin: auto;
  border-bottom: 2px solid #000;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}
.header img {
  width: min(100%, 900px);
  padding-left: 3%;
}

body {
  overflow-x: hidden;
}

.h_menu_box {
  margin-right: 1vh;
}
@media screen and (max-width: 768px) {
  .h_menu_box {
    margin-right: 0vh;
  }
}

.menu {
  position: fixed;
  top: 0;
  right: -300px;
  height: 100%;
  background-color: #f8f8f8;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease;
  padding: 20px;
}

.menu.active {
  right: 0;
}

.menu ul {
  list-style: none;
  padding: 0;
}

.menu li {
  margin: 15px 0;
}

.menu a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
}

.menu a:hover {
  color: #007bff;
}

.menu .close-btn {
  display: block;
  text-align: left;
  margin-bottom: 20px;
  font-size: 16px;
  cursor: pointer;
  color: #333;
}

.menu .close-btn:hover {
  color: #797979;
}

.hamburger {
  position: sticky;
  top: 20px;
  background-color: #ffffff;
  color: rgb(0, 0, 0);
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 24px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .hamburger {
    padding: 10px 5px;
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: none;
}

.overlay.active {
  display: block;
}

#line,
#pworld,
#machine,
#event,
#youtube,
#tiktok,
#morioka,
#tsushida,
#mplus,
#oohunato,
#rikuzen,
#root45,
#kanegasaki,
#oushu,
#hidaka {
  display: block;
  height: 4rem;
  margin-top: -4rem;
  content: "";
}

.footer {
  max-width: 1024px;
  height: auto;
  background-color: rgb(0, 0, 0);
  position: sticky;
  max-width: 1024px;
  margin: auto;
  padding: min(3vw, 30px);
  border-bottom: 2px solid #000;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: min(3vw, 14px);
}
@media screen and (min-width: 768px) {
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.footer a {
  line-height: 2.4vh;
}

#ww_19149a28655d9 .ww-box[max-width~="1279px"] .day-forecast .data {
  flex-direction: row !important;
}

#ww_19149a28655d9 .ww-box[max-width~="768px"] .ww_col1 {
  padding: 0px !important;
}

#ww_19149a28655d9 .ww-box[max-width~="329px"] .current-name {
  margin-bottom: 0px !important;
  margin-top: 10px !important;
}

#ww_19149a28655d9 .current-temp {
  font-size: min(7vw, 35px) !important;
}

#ww_19149a28655d9 .current-conditions svg {
  height: min(15vw, 50px) !important;
}

#ww_19149a28655d9 .ww-box svg {
  padding-right: 10px;
}

#page-top {
  position: fixed;
  bottom: 2%;
  right: 1%;
  z-index: 99;
}
#page-top img {
  width: 3vh;
  margin: auto;
}

#page-top a {
  background: #000000;
  padding: 1.5vh;
  display: block;
  border-radius: 90px;
  border: 2px solid #575757;
  opacity: 0.8;
  transition: all 0.3s ease;
}

#page-top a:hover {
  opacity: 0.8;
  background: #646464;
}

.accordion {
  width: 97.5%;
  margin: 0 auto;
  color: black;
  font-size: min(4.5vw, 20px);
  padding-bottom: min(5vw, 34px);
}
@media screen and (max-width: 768px) {
  .accordion {
    width: 98%;
  }
}

.accordion-button {
  cursor: pointer;
  color: #000000;
  font-size: min(5vw, 24px);
  font-weight: bold;
  border: solid 2px black;
  width: 100%;
  margin: min(1vw, 10px) auto 0;
  padding: min(1vw, 10px) 0;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border: 2px solid #000;
  border-top: none;
  display: block;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .accordion-content {
    display: flex;
  }
}

.accordion-content p {
  margin: 10px 0 0;
  padding: 0;
}

.active + .accordion-content {
  max-height: 200px; /* コンテンツに応じて調整 */
  padding: 15px;
}

.container_text {
  background-image: url(../img/text_bg.webp);
  border: 5px solid;
  border-image: linear-gradient(150deg, #D19900, #EAD33E 24%, #D19900 52%, #EAD33E 79%, #D19900) 1;
  text-align: center;
  line-height: 1.5rem;
  overflow-y: auto;
  padding-bottom: 20px;
  font-family: "Noto Serif JP";
  font-weight: 700;
  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.7);
}
.container_text h2 {
  margin-top: min(5vw, 20px);
  margin-bottom: min(10vw, 30px);
  font-size: min(12vw, 60px);
  font-style: normal;
  font-weight: 900;
  line-height: 80%; /* 54.545% */
  color: #F9D981;
  letter-spacing: 1vw;
}
.container_text hr {
  border: none;
  height: 0.2rem;
  background: linear-gradient(90deg, #D4A300 0%, #E4C70A 49.5%, #D4A300 100%);
  width: 80%;
  margin: 10px auto;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.iframe-container {
  width: 100%;
  max-width: 750px;
  height: auto;
  overflow: hidden;
  position: relative;
}

.responsive-iframe {
  width: 130%;
  height: 100%;
  border: none;
  position: relative;
}

.info-block {
  margin: auto;
  width: 80%;
}
@media screen and (max-width: 568px) {
  .info-block {
    width: 90%;
  }
}

.date {
  font-size: 1.2rem;
  padding-bottom: min(2vw, 10px);
}

/* 公式LINEバナーの基本スタイル */
.btn_line {
  position: fixed;
  bottom: -10px; /* 初期位置: 下部から20px */
  left: 80px; /* 左端から20px */
  z-index: 9999;
  transition: bottom 0.5s ease; /* 0.5秒かけてスムーズにbottomが変化 */
  border-radius: 12px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}

/* 7秒後に付与するクラス：10px上に移動 */
.btn_line.move-up,
.btn_stamp.move-up {
  bottom: 0px; /* 10px上昇 */
}

/* バナー画像のスタイル（必要に応じて調整） */
.btn_line img,
.btn_stamp img {
  width: 64px; /* 例として80pxに設定。サイズはお好みで変更可 */
  height: auto;
  border: none;
}

/* スタンプバナーの基本スタイル */
.btn_stamp {
  position: fixed;
  bottom: -10px; /* 初期位置: 下部から20px */
  left: 10px; /* 左端から20px */
  z-index: 9999;
  transition: bottom 0.5s ease; /* 0.5秒かけてスムーズにbottomが変化 */
  border-radius: 12px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}