@charset "UTF-8";
/*
  comet 作り変え（2026-10-01〜）で足した上書きスタイル。
  base(.min).css / lang_xx(.min).css の後に読み込む（各言語の file/meta*.html 末尾）。
  Sass ビルド環境が無いので素の CSS。既存の min.css は触らずここで上書きする。
*/
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&display=swap");

/* ==========================================================================
  gnav（グローバルナビ）の吹き出し
  旧版は吹き出しごとに文字入り画像（/img/{jp,en,tw,kr}/menu_*.png）だったのを、
  吹き出しは CSS・文字は HTML にして言語別画像を不要にした。
========================================================================== */

/* ---------- 吹き出し本体（PC/SP 共通） ---------- */
.nav__items .nav-items__item,
header.gnav_sp nav ul li {
  background: none !important;
  padding-bottom: 0 !important;
  /* base.css の overflow:hidden だと外側の白い縁取り（box-shadow）が上下左右で切れる */
  overflow: visible !important;
  container-type: inline-size;
  opacity: 0;
  animation: menu01 5s linear forwards;
}

.nav__items .nav-items__item a,
header.gnav_sp nav ul li a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  margin: 0;
  padding: 0 8%;
  border: 0;
  border-radius: 50%;
  /* 外側から 白い縁取り（box-shadow）→ 水色の点線（::before）→ 半透明の白 */
  background: rgba(255, 255, 255, .74);
  outline: none;
  box-shadow: 0 0 0 1.4cqi #fff;
  position: relative;
  font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", sans-serif;
  font-weight: 800;
  /* 文字数（--len、全角=1）に合わせて吹き出しの約72%幅に収める。短いラベルは22cqiで頭打ち */
  font-size: min(22cqi, calc(72cqi / var(--len, 4)));
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  color: #ffb81f;
  -webkit-text-stroke: 1.8cqi #fff;
  paint-order: stroke fill;
  text-decoration: none;
}

/* 点線は border-style:dashed だと間隔が詰まりすぎるので、楕円に沿った SVG で描く */
.nav__items .nav-items__item a::before,
header.gnav_sp nav ul li a::before {
  content: "";
  position: absolute;
  inset: 1.2cqi;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' preserveAspectRatio='none'%3E%3Cellipse cx='80' cy='50' rx='78.2' ry='48.2' fill='none' stroke='%234dc3dc' stroke-width='2.4' stroke-dasharray='7 5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}

/* 2語のラベル（Camp cooking など）は改行して少し小さく */
.nav__items .nav-items__item a.two_lines,
header.gnav_sp nav ul li a.two_lines {
  white-space: normal;
  font-size: min(18cqi, calc(72cqi / var(--len, 4)));
}

/* ---------- PC の配置（.header__nav の中で絶対配置。2-3-3 の3段） ---------- */
.nav__items .nav-items__item { position: absolute; }
.nav__items .menu_top    { left: 36%;   top: 8%;  width: 12%; animation-delay: .1s; }
.nav__items .menu_story  { left: 52%;   top: 8%;  width: 13%; animation-delay: .2s; }
.nav__items .menu_timer  { left: 27%;   top: 31%; width: 12%; animation-delay: .3s; }
.nav__items .menu_chara  { left: 42%;   top: 29%; width: 14%; animation-delay: .4s; }
.nav__items .menu_movie  { left: 59%;   top: 31%; width: 12%; animation-delay: .5s; }
.nav__items .menu_gear   { left: 29%;   top: 55%; width: 11%; animation-delay: .6s; }
.nav__items .menu_view   { left: 43%;   top: 57%; width: 13%; animation-delay: .7s; }
.nav__items .menu_cook   { left: 58%;   top: 54%; width: 13%; animation-delay: .8s; }

/* ---------- SP の配置（1-2-1-2-2） ---------- */
header.gnav_sp nav ul li { position: absolute; }
header.gnav_sp nav ul .menu_top   { right: auto; left: 30%; top: 8%;  width: 38%; animation-delay: .1s; }
header.gnav_sp nav ul .menu_story { right: auto; left: 3%;  top: 20%; width: 36%; animation-delay: .2s; }
header.gnav_sp nav ul .menu_chara { left: auto; right: 3%; top: 19%; width: 40%; animation-delay: .3s; }
header.gnav_sp nav ul .menu_timer { right: auto; left: 31%; top: 32%; width: 36%; animation-delay: .4s; }
header.gnav_sp nav ul .menu_movie { right: auto; left: 3%;  top: 44%; width: 34%; animation-delay: .5s; }
header.gnav_sp nav ul .menu_gear  { left: auto; right: 4%; top: 43%; width: 32%; animation-delay: .6s; }
header.gnav_sp nav ul .menu_view  { right: auto; left: 4%;  top: 57%; width: 40%; animation-delay: .7s; }
header.gnav_sp nav ul .menu_cook  { left: auto; right: 3%; top: 56%; width: 40%; animation-delay: .8s; }

/* ==========================================================================
  PC トップ：オレンジ帯（.form_area）の中身を帯の幅に比例させる
  帯は幅 50vw（最大800px）・縦横比 913:275 で伸縮するのに、中身の一部だけが固定値だった：
    「好評配信中」(.title) 高さ 55px／ストアボタン高さ 70px・間隔 6px／「推奨動作環境について」bottom:65px・right:100px
  そのため 1920px 前後でしか揃わず、狭い画面ほどボタン同士やリンクが重なっていた。
  帯をコンテナにして cqw（帯の幅に対する%）で指定し直す。値は帯幅 800px のときに元の px と一致するように換算。
  #visual_overlay は PC 版にしか無いので、スマホ版には効かない。
========================================================================== */
#visual_overlay .form_area {
  container-type: inline-size;
}

/* 好評配信中：55px ÷ 800 */
#visual_overlay .form_area #form_inner .title {
  height: 6.875cqw;
}

/* ストアボタン：高さ 70px・左右余白 6px ÷ 800 */
#visual_overlay .form_area #form_inner .btns_store a {
  height: 8.75cqw;
  margin: 0 0.75cqw;
}

/* 推奨動作環境について：X・TikTok アイコン行（.btns_sns_s、元から帯に比例）の右隣に並べる */
#visual_overlay .form_area .txtlink {
  top: 69%;
  bottom: auto;
  left: 54%;
  right: auto;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: max(9px, 1.625cqw);  /* 13px ÷ 800 */
}
/* アイコン行は帯の 46% を中心に1個あたり約7.4%間隔で並ぶので、個数に応じて右端の位置をずらす（実測：日本語2個・英韓3個・繁4個） */
#visual_overlay .form_area:has(.btns_sns_s a:nth-of-type(3)) .txtlink { left: 58%; }
#visual_overlay .form_area:has(.btns_sns_s a:nth-of-type(4)) .txtlink { left: 61.6%; }

/* ==========================================================================
  ロゴ（2026-10-01 ちるタイム版に差し替え）
  新ロゴはリボン「ちるタイム」の分だけ縦長（旧 640×260 → 新 約 1200×660）。
  各ページの CSS は横幅だけを指定しているので、そのままだと縦に伸びて見出しなどに重なる（特にスマホ）。
  旧ロゴと同じ枠（640:260）に収めて縮小表示し、レイアウトを動かさない。
  ヘッダー左上のロゴは左寄せ、それ以外は枠の中央。
========================================================================== */
img[src^="/img/jp/logo"], img[src^="/img/en/logo"], img[src^="/img/tw/logo"], img[src^="/img/kr/logo"] {
  aspect-ratio: 640 / 260;
  height: auto;
  object-fit: contain;
}
.logo_top img, .logo_top01 img {
  object-position: left center;
}

/* ==========================================================================
  スマホ：画面下の追従バー（.bnr_bottom_fix）に Steam ボタンを足した分の並び
  元は「好評配信中」＋端末に合わせたストアボタン1つ（幅45%）。
  Steam を足して3つ並べるため、ボタンは高さで揃え（幅は画像の縦横比なり）、見出しは小さくして2行まで折り返す
  （英語 "Available Now" などが長いため）。
  トップでは base_sp.css（#top+#footer）と gas.min.css が非表示にしていたが、トップのストア欄 .form_area も
  長期メンテ以降ずっと非表示のままで、ストアへの導線が無かったので表示に戻す。
  旧・事前登録バー .pre_bnr も .bnr_bottom_fix クラスを持つので、#footer 内に限定して巻き込まない。
========================================================================== */
#footer .bnr_bottom_fix {
  display: flex;
}
#footer .bnr_bottom_fix {
  gap: 2.4vw;
  padding-left: 2.5vw;
  padding-right: 2.5vw;
}
#footer .bnr_bottom_fix .title_btm {
  flex: 0 1 auto;
  max-width: 24vw;
  font-size: min(3.8vw, 1.3rem);
  line-height: 1.15;
  text-align: center;
}
#footer .bnr_bottom_fix a.btn_tw,
#footer .bnr_bottom_fix .btn_tc,
#footer .bnr_bottom_fix a.btn_steam {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}
#footer .bnr_bottom_fix a.btn_tw img,
#footer .bnr_bottom_fix .btn_tc img,
#footer .bnr_bottom_fix a.btn_steam img {
  width: auto;
  height: min(10vw, 48px);
}

/* ==========================================================================
  Steam 権利表記（フッターのコピーライト直下。HTML 側は 2026-10-01 時点でコメントアウト＝掲載保留）
========================================================================== */
.steam_attribution {
  display: inline-block;
  margin-top: 0.4em;
  font-size: 0.75em;
  line-height: 1.4;
  opacity: 0.85;
}

/* ==========================================================================
  トップ右上のキャッチ（旧画像 txt01_1_pc_w_2.png / sp/txt01_sp04.jpg を文字に置き換え、シート #7）
========================================================================== */
.header_top .header_right .txt01_copy {
  margin: 0;
  color: #fff;
  text-align: center;
  font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", sans-serif;
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.txt01_copy .s,
.txt01_copy_sp .s {
  display: block;
  font-size: clamp(10px, 0.9vw, 17px);
}
.txt01_copy .l,
.txt01_copy_sp .l {
  display: block;
  font-size: clamp(13px, 1.35vw, 26px);
}
.header_top .header_right .txt01_copy span {
  white-space: nowrap;
}
.txt01_copy_sp {
  margin: -1% 0 0;
  padding: 3.6vw 4vw;
  background: #7ad1d8;
  color: #fff;
  text-align: center;
  font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", sans-serif;
  font-weight: 800;
  line-height: 1.4;
}
.txt01_copy_sp .s {
  font-size: 4vw;
}
.txt01_copy_sp .l {
  font-size: 5.6vw;
}

/* ==========================================================================
  トップの「払い戻しについて」バナー（旧リニューアル告知バナー bnr_announce.png を置き換え。見た目は bnr_device.png に合わせた文字バナー）
========================================================================== */
.bnr_refund {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  aspect-ratio: 1185 / 221;
  container-type: inline-size;
  border: 3px solid #fbb21f;
  border-radius: 14px;
  background: linear-gradient(#f39256, #ec6b2c);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", sans-serif;
  font-weight: 800;
  text-decoration: none;
  line-height: 1;
}
.bnr_refund span {
  font-size: 6.6cqw;
  text-shadow: 0 0 2px #7a3410, 0 0 2px #7a3410, 0 0 3px #7a3410;
  white-space: nowrap;
}
#footer .btns_footer .bnr_head.bnr_refund {
  width: 97%;
  margin: 0 auto;
}

/* ==========================================================================
  ムービーページ：自サーバー動画の題名とポップアップ（2026-10-19）
  題名は旧画像（txt_movieNN.png：紺の文字＋黄色の帯）に見た目を合わせた文字
========================================================================== */
#movie .box_movie ul li .movie_ttl {
  container-type: inline-size;
  margin: 0;
  text-align: center;
  font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", sans-serif;
  font-weight: 800;
  color: #062138;
  line-height: 1.5;
}
#movie .box_movie ul li .movie_ttl span {
  padding: 0 .6em;
  background: linear-gradient(transparent 48%, #ffe484 48%);
  border-radius: .7em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
#movie .box_movie ul li .movie_ttl .t1 { font-size: 7.4cqi; }
#movie .box_movie ul li .movie_ttl .t2 { font-size: 5.6cqi; }
.movie_pop {
  position: relative;
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  line-height: 0;
}
.movie_pop video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}