@charset "utf-8";
div,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,input,textarea {
  margin: 0;
  padding: 0;
  border: none;
}
.back-wrapper::before {
  background: url(https://miyajima-noasobi.com/wp-content/uploads/2026/01/treasure-map.webp) no-repeat center;
  background-size: cover;
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100vh;
  opacity: 0.4;
}
/* アニメーション */
.anime {
  opacity: 0;
}
.anime.active {
  animation: fade-in-bottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes fade-in-bottom {
  0% { transform: translateX(30px) translateY(30px); opacity: 0; }
  100% { transform: translateX(0px) translateY(0px); opacity: 1; }
}
/* くるくるバッジ */
.back-body {
  width: 100%;
  background: var(--bodycolor);
  margin: 0;
  padding: 2.5rem 0;
}
.badge-container {
  display: flex;
  gap: clamp(0.313rem, -0.682rem + 4.242vw, 2.5rem);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
}
.badge {
  position: relative;
  width: clamp(6.25rem, 3.977rem + 9.697vw, 11.25rem);
  height: clamp(6.25rem, 3.977rem + 9.697vw, 11.25rem);
  display: flex;
  justify-content: center;
  align-items: center;
}
.badge-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform-origin: center;
  animation: rotate normal infinite 20s linear;
}
@keyframes rotate {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}
@keyframes rotateReverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
.badge-content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.badge-text {
  text-align: center;
  font-size: clamp(0.813rem, 0.614rem + 0.848vw, 1.25rem);
  font-family: var(--kaisei);
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  margin: 0;
}
/* 小見出し */
.text_waku {
  margin: 0;
  text-align: center;
}
.text_anime {
  display: inline-block;
  font-size: clamp(0.938rem, 0.852rem + 0.364vw, 1.125rem);
  font-family: var(--lato);
  font-weight: 700;
}
.text_anime.active {
  animation: spreadIn 0.6s ease forwards;
  animation-delay: 0.3s;
}
@keyframes spreadIn {
  0% { opacity: 0; transform: scale(0.2) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.mark {
  letter-spacing: 0.1em;
  font-size: 0.875rem;
}
.komidasi {
  padding: 0.4375rem 1.25rem;
  color: #28497D;
  text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgb(0 0 0 / .5) 3px 3px 3px;
  border-radius: 20px;
  background-color: rgb(40 73 125 / .4);
  background-image:
    linear-gradient(90deg, rgb(40 73 125 / .3) 50%, transparent 50%),
    linear-gradient(rgb(40 73 125 / .3) 50%, transparent 50%);
  background-size: 10px 10px;
  box-shadow: 0 0 5px rgb(0 0 0 / .6);
}
/* ゲーム内容 */
.content-box {
  margin: 1.25rem auto 0;
  width: 95%;
  max-width: 700px;
  height: auto;
  padding: 0 0.9375rem 1.25rem;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #3c3c3c 0%, #5a5a5a 25%, #7a7a7a 50%, #5a5a5a 75%, #3c3c3c 100%);
  border: 2px solid #d4af37;
  border-radius: 5px;
  box-shadow: inset 0 2px 4px rgb(0 0 0 / .9);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.content-box p {
  font-size: clamp(0.938rem, 0.909rem + 0.121vw, 1rem);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  margin-top: 1rem;
  text-align: justify;
  font-family: var(--mincho);
  font-weight: 400;
  position: relative;
}
.michio-takara {
  width: clamp(80px, 52.727px + 7.273vw, 140px);
  height: auto;
  object-fit: contain;
  animation: kakudai 2s infinite ease-in-out .8s alternate;
  transform-origin: right bottom;
}
@keyframes kakudai {
  0% { transform:scale(0);}
  100% { transform:scale(1); }
}
/* flow遊び方の流れ */
.flow-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 90%;
  max-width: 800px;
  margin: 2.5rem auto 0;
  padding: 0.1875rem;
  box-sizing: border-box;
}
.flow-card {
  position: relative;
  background: #e0e5ec;
  border-radius: 20px;
  padding: 0.9375rem 0.625rem;
  text-align: center;
  box-shadow: 0 0 10px rgba(0 0 0 / .5);
  z-index: 2;
}
.flow-icon {
  width: 100%;
  margin: clamp(0.625rem, 0.341rem + 1.212vw, 1.25rem) auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-icon img {
  width: clamp(70%, 20vw, 100%);
  object-fit: contain;
}
.flow-number {
  margin: -1.875rem auto 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--themecolor);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.25rem, 1.109rem + 0.63vw, 1.5rem);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(0 0 0 / .2);
  animation: pulse 2s ease-in-out infinite;
  font-family: var(--lato);
  font-weight: 700;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
.flow-title {
  width: 100%;
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
  padding: 0;
  line-height: 1.4;
}
.flow-text {
  text-align: left;
  font-size: clamp(0.875rem, 0.847rem + 0.121vw, 0.938rem);
  margin: 0;
  padding: 0;
}
@media screen and (max-width:680px) {
  .flow-container { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; }
}
.michio-fune {
  width: 100%;
  display: flex;
  margin: 2.5rem 0;
  overflow-x: hidden;
}
.michio-fune img {
  width: clamp(80px, 52.727px + 7.273vw, 140px);
  height: auto;
  object-fit: contain;
  margin-left: auto;
  position: relative;
}
/* playstyle */
.card-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0.1875rem;
  box-sizing: border-box;
}
.card {
  background: #e0e5ec;
  border-radius: 12px;
  padding: 0.3125rem 0.3125rem 0.9375rem;
  text-align: center;
  box-shadow: 0 0 10px rgb(0 0 0 / .5);
}
.card-icon {
  width: 100%;
  margin: 0.625rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.card-icon img {
  width: 80%;
  height: auto;
  object-fit: contain;
}
.card-title {
  width: 90%;
  background: var(--themecolor);
  color: white;
  font-weight: 700;
  font-size: clamp(1rem, 0.972rem + 0.121vw, 1.063rem);
  text-shadow: 0 0 2px rgb(0 0 0 / .9);
  margin: 0;
  padding: 0.5rem 0;
  border-radius: 8px;
  display: inline-block;
}
.card-main-text {
  font-size: 1rem;
  font-weight: 700;
  margin: 0.9375rem 0;
  padding: 0;
}
.play-card-list {
  list-style: none;
  padding: 0;
}
.play-card-list li {
  position: relative;
  padding-left: 0.625rem;
  margin-bottom: 0.1875rem;
  line-height: 1.4;
  font-size: 0.8125rem;
  text-align: left;
}
.play-card-list li::before {
  content: "●";
  font-size: 0.4375rem;
  position: absolute;
  left: 0;
  color: #333;
  line-height: 3;
}
@media (max-width: 680px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* enjoy楽しみ方 */
.enjoy-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 5.455px + 1.212vw, 20px);
  width: 95%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0.1875rem;
  box-sizing: border-box;
}
.enjoy-card {
  position: relative;
  background: #e0e5ec;
  border-radius: 20px;
  padding: 0.9375rem;
  text-align: center;
  box-shadow: 0 0 10px rgb(0 0 0 / .5);
  transition: transform 0.3s ease;
  z-index: 2;
}
@media (any-hover: hover) {
  .enjoy-card:hover {
    transform: translateY(-4px);
  }
}
.enjoy-icon {
  width: 100%;
  margin: 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.enjoy-icon img {
  width: 70%;
  height: auto;
  object-fit: contain;
}
.enjoy-title {
  width: 100%;
  font-family: "oshigo", sans-serif;
  font-weight: 400;
  color: var(--themecolor);
  font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
  margin: 0;
  padding: 0;
  display: inline-block;
}
.enjoy-text {
  text-align: left;
  font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
  margin: 0;
  padding: 0;
}
.michio-light {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5rem auto;
  overflow-x: hidden;
}
.michio-light img {
  width: clamp(80px, 52.727px + 7.273vw, 140px);
  height: auto;
  object-fit: contain;
  align-items: center;
  animation: hanten 2s infinite steps(3,end) .8s alternate;
}
@keyframes hanten {
  0% { transform:rotateY(0deg);}
  50% { transform:rotateY(180deg); }
  100% { transform:rotateY(0deg);}
}
/* Sales info */
.info-cards-wrapper {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
}
.info-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 10px rgb(0 0 0 / .5);
  position: relative;
  background: #e0e5ec;
  z-index: 2;
}
.info-card-header {
  background: var(--themecolor);
  color: white;
  font-weight: 700;
  font-size: clamp(1rem, 0.972rem + 0.121vw, 1.063rem);
  text-shadow: 0 0 2px rgb(0 0 0 / .9);
  margin: 0;
  padding: 0.75rem 0;
  text-align: center;
  letter-spacing: 0.1em;
}
.info-card-content {
  padding: 1.25rem 0.3125rem 0.3125rem;
}
.info-card-title {
  font-size: clamp(1.063rem, 1.006rem + 0.242vw, 1.188rem);
  font-weight: 700;
  height: 50px;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.info-card-list {
  list-style: none;
  padding: 0;
}
.info-card-list li {
  position: relative;
  padding-left: 0.625rem;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem
}
.info-card-list li::before {
  content: "●";
  font-size: 0.4375rem;
  position: absolute;
  left: 0;
  color: #333;
  line-height: 3.4;
}
.price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e53e3e;
}
.price-note {
  text-align: center;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
}
@media (max-width: 480px) {
  .info-cards-wrapper { grid-template-columns: 1fr;}
  .info-card { width: 95%; margin: 0 auto; }
}
.sales-card-wrapper {
  box-sizing: border-box;
  width: 90%;
  max-width: 450px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}
.midori-button {
  display: flex;
  width: 220px;
  height: 46px;
  margin: 1.875rem auto;
  padding: 0;
  justify-content: center;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: 500;
  text-shadow: 0px 1px 1px rgb(0 0 0 / .8);
  border-radius: 5px;
  border: 0;
  color: #fff;
  background: #4098ff;
  box-shadow: 0 4px 0 #1557a3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.2s ease;
  z-index: 2;
}
.midori-button:active {
  transform: translate(0, 3px);
  box-shadow: 0 1px 0 #1557a3;
}
.michio-rocket {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5rem auto;
  padding: 1.25rem;
  overflow-x: hidden;
}
.michio-rocket img {
  width: clamp(100px, 72.727px + 7.273vw, 160px);
  height: auto;
  object-fit: contain;
  align-items: center;
  animation: fuwafuwa 1.5s infinite ease-in-out .8s alternate;
}
@keyframes fuwafuwa {
  0% { transform:translate(0, 0) rotate(-5deg); }
  50% { transform:translate(0, -7px) rotate(0deg); }
  100% { transform:translate(0, 0) rotate(-5deg); }
}
.tekuteku-logo {
  width: 50%;
  max-width: 400px;
  height: auto;
  object-fit: contain;
  display: flex;
  margin: 1.25rem auto;
}
/* 注意事項 */
.caution-container {
  box-sizing: border-box;
  width: 95%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 0 10px rgb(0 0 0 / .5);
  padding: 0.625rem 0.3125rem;
  background: #e0e5ec;
  z-index: 2;
  position: relative;
}
.caution-list {
  list-style: none;
  padding: 0;
}
.caution-list li {
  position: relative;
  padding-left: 0.625rem;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}
.caution-list li::before {
  content: "●";
  font-size: 0.4375rem;
  position: absolute;
  left: 0;
  color: #333;
  line-height: 3.4;
}
/* ページトップへ戻るボタン */
.back-to-top {
  height: 46px;
  width: 46px;
  margin: 3.75rem 0.3125rem 1.875rem auto;
  background: #6d8eef;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.back-to-top-arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid white;
  border-right: 3px solid white;
  transform: translateY(20%) rotate(-45deg);
}

/* フッター */
.footer {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 1.25rem 0 0;
  background-color: var(--bodycolor);
  box-sizing: border-box;
}
.noasobi-footer-logo {
  margin: 6.25rem auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.noasobi-footer-logo img {
  width: clamp(7.5rem, 5.227rem + 9.697vw, 12.5rem);
  height: auto;
  object-fit: contain;
  object-position: center center;
}
.link-container {
  margin-top: 1.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--gosik);
  font-size: 0.875rem;
}
.link-list {
  list-style: none;
  padding: 0;
}
.link-list li {
  position: relative;
  padding-left: 0.9375rem;
  margin-bottom: 0.3125rem;
  transition: all 0.3s ease;
}
.link-list li a {
  color: #333;
  text-decoration: none;
}
@media (any-hover: hover) {
  .link-list li:hover {
    transform: translateX(-5px);
  }
}
.link-list li::before {
  content: "→";
  position: absolute;
  left: 0;
}
.footer-copyright {
  margin-top: 1.875rem;
  width: 100%;
  height: 50px;
  background: #333;
  display: flex;
  align-items: center;
}
.footer-copyright p {
  font-family: var(--gosik);
  color: white;
  font-size: 0.8125rem;
  margin-left: auto;
  margin-right: 0.3125rem;
}

/* スペース */
.space-5 { margin-top: -0.3125rem; }
.space-10 { margin-top: -0.625rem; }
.space-15 { margin-top: -0.9375rem; }
.space-20 { margin-top: -1.25rem; }
.space-30 { margin-top: -1.875rem; }
.space-40 { margin-top: -2.5rem; }
.space-50 { margin-top: -3.125rem; }
.space-60 { margin-top: -3.75rem; }
.space10 { margin-top: 0.625rem; }
.space20 { margin-top: 1.25rem; }
.space30 { margin-top: 1.875rem; }
.space40 { margin-top: 2.5rem; }
.space50 { margin-top: 3.125rem; }
.space60 { margin-top: 3.75rem; }
.space80 { margin-top: 5rem; }
.space100 { margin-top: 6.25rem; }
.space200 { margin-top: 12.5rem; }
.space300 { margin-top: 18.75rem; }
.space400 { margin-top: 25rem; }
.botomu10 { margin-bottom: 0.625rem; }
/* フォント */
@font-face {
  src: url("https://miyajima-noasobi.com/fonts/Lato-Regular.woff2") format("woff2");
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  src: url("https://miyajima-noasobi.com/fonts/Lato-Bold.woff2") format("woff2");
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  src: url("https://miyajima-noasobi.com/fonts/GIL_____.woff2") format("woff2");
  font-family: "Gill Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  src: url("https://miyajima-noasobi.com/fonts/GILB____.woff2") format("woff2");
  font-family: "Gill Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  src: url("https://miyajima-noasobi.com/fonts/KaiseiOpti-Bold.woff2") format("woff2");
  font-family: "Kaisei Opti";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}