@charset "utf-8";
body {
    position: relative;
    padding: 0 4%;
    background-color: #1f1f1f;
    color: #fcf8ef;
}

h1 {
    font-size: clamp(1.8rem, 5vw, 3rem);
    line-height: 3rem;
}

h3 {
    font-size: clamp(1.2em, 5vw, 3.5rem);
    line-height: 3.5rem;
}

p, li, input, label, select, .katex-eq, table {
    font-size: 1.5rem;
    line-height: 2rem;
}

#arcane .katex-display>.katex {
    white-space: wrap;
}

label {
    margin-bottom: 10px;
}

#arcane {
    display: none;
    height: auto;
    width: 100%;
}

#arcane.active {
    display: block;
}

#arcane h1, #arcane h3, #arcane h4, #arcane h5, #arcane h6, #arcane p, #arcane a, .post-tags, #arcane li, #arcane label, #arcane summary, table {
    color: #fcf8ef;
    font-family: 'New Tegomin', 'togalite';
    font-weight: 400;
    margin-bottom: 20px;
}

#arcane .section1 {
    padding: 0;
    margin: 0 auto;
}

#arcane .arcane-section-label, #arcane .arcane-section-label1 {
    padding: 20px 0;
}

.astro-toggle {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    cursor: pointer;
}

.astro-toggle::-webkit-details-marker {
    display: none;
}

.astro-toggle::before {
    content: "📘";
    margin-right: .5em;
    flex-shrink: 0;
    font-size: 2rem;
}

details[open] >.astro-toggle::before {
    content: "📖";
    font-size: 2rem;
}

.astro-toggle h2, .astro-toggle p {
    margin: 0;
}

th, td {
    padding: 5px 10px;
}

#arcane summary {
    padding:5px;
}

#arcane header {
    position: sticky;
    top:0;
    left:0;
    right:0;
    background-color: transparent;
    padding: 0;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#arcane footer {
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    opacity: 0;
    transition: opacity 0.4s ease;
}

body.pace-done #arcane header,
body.pace-done #arcane footer {
    opacity: 1;
}

#arcane main {
    width: 100%;
    padding:0 0 100px;
}

#arcane .dot, #arcane .bagua {
    text-align: center;
}

.contents {
    max-width: 1000px;
    width: 100%;
    text-align: center;
    margin: 40px auto;
}

.contents a {
    color: #fcf8ef;
    font-size: 1rem;
}

.contents h3 {
    margin-bottom: 50px;
}

.contents1 h4 {
    text-align: center;
}

.contents1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.cat-list {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 80px;
    text-align: center;
    width: 100%;
}

#arcane .cat-item {
    background-color: #555555;
    padding: 20px 20px 0;
    border-radius: 10px;
    margin-bottom: 20px;
    width: 100%;
}

.cat-item h2 {
    margin-bottom: 10px;
}

.post-categories {
    margin-right: 10px;
    font-size: 1rem;
}

.article {
    text-align: initial;
    padding:20px 0 100px;
}

.wp-block-cover {
    background-color: #cccccc;
    min-height: 100%;
    font-family: 'New Tegomin', 'togalite';
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.8rem;
}

.wp-block-cover ul li {
    margin-bottom: 1rem;
}

a {
    text-decoration: underline;
    text-decoration-color: #cccccc;
    text-decoration-thickness: 1px;
}

button {
    position: fixed;
    right: 4%;
    z-index: 20;
    font-size: 1rem;
    padding: 5px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    background-color: #ffffff;
    color: #000000;
}

button:hover {
    opacity: 0.8;
}

#arcane .header-inner {
    max-width:1600px;
    width: 100%;
    margin:auto;
    padding:10px 4%;
}

#backToHomeButton {
    bottom: 10px;
}

#backToTopButton {
    display: none;
    bottom: 80px;
}

.chat-group {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #cccccc;
}

#chat-wrapper {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    font-family: 'New Tegomin';
}

#chat-history {
    max-width: 200px;
    width: 100%;
    padding: 10px;
    padding-bottom: 20%;
    height: auto;
    text-align: left;
}

#chat-history h4 {
    margin-top: 0;
    font-size: 1.5rem;
}

#chat-history-list {
    padding-left: 0;
}

#arcane #chat-history-list li {
    margin-bottom: 10px;
}

#chat-history-list li a {
    text-decoration: none;
    color: #cccccc;
}

#chat-history-list li a:hover {
    text-decoration: underline;
}

#chat-container {
    padding-bottom: 20%;
    max-width: 800px;
    width: 75%;
}

.chat-flex {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
    align-items: end;
}

#chat-question {
    height: 120px;
    width: 100%;
    max-width: 1200px;
    font-size: 1.2rem;
    padding: 15px;
    box-sizing: border-box;
    resize: none;
}

#chat-submit {
    position: relative;
    right: auto;
    font-size: 1.5rem;
    padding: 5px 10px;
}

.ai-file-detail {
    padding-top: 220px;
    font-size: 1.5rem;
}

#scrollToBottom {
    display: none;
    bottom: 150px;
}

#arcane .chat-row p {
    font-size: 1rem;
    margin-bottom: 10px;
}

#arcane .chat-row li {
    margin-bottom: 0;
}

#arcane .chat-row .file-content p {
    font-size: 1.5rem;
    line-height: 1.8rem;
}

#arcane .user{
    margin-bottom: 10px;
}

#chat-messages {
    text-align: left;
}

#arcane .chat-row .ai_contents {
    margin-bottom: 30px;
}

#arcane .chat-row .full_content p {
    padding-bottom: 1rem;
}

.ai_contents .full_content img {
    max-width: 200px;   /* 横幅の最大 */
    max-height: 200px;  /* 縦幅の最大 */
    width: auto;        /* アスペクト比維持 */
    height: auto;       /* アスペクト比維持 */
    display: block;
    margin-bottom: 0.5em;
}

.section {
    text-align: center;
    padding-bottom: 40px;
    border-bottom: 1px solid #fcf8ef;
    max-width: 800px;
    width: 100%;
    margin: 0 auto 40px;
}

.natal-overall-desc {
    padding-bottom: 10px;
}

.koyomi-list {
    display: flex;
    justify-content: center;
    gap:20px;
    align-items: center;
}

.candidate {
    text-decoration: underline;
    cursor: pointer;
}

.search-term {
    text-decoration: underline;
    cursor: pointer;
}

.search-term:hover {
    opacity: 0.7;
}

.chart-container svg {
    max-width: 100%; 
    height: auto;
}

.koyomi-time {
    display: inline;
}

.horoscope, #field-state, #koyomi-details,.natal-summary .astro-text p {
    text-align: center;
}

.input {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.input-group, .vector-chart-wrap, #arcane .card, .unified-box {
    margin-bottom: 20px;
}

select#pref-input, select#country-input, select#pref-map-input, select#country-map-input {
    padding: 5px;
}

#arcane #calc-btn, #arcane #draw-btn {
    cursor: pointer;
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    color: #fcf8ef;
    border: double 4px #fcf8ef;
    border-radius: 3px;
    transition: .4s;
    margin-bottom: 20px;
    background-color: #1f1f1f;
}

#calc-btn:hover, #arcane #draw-btn:hover {
    background: #cccccc;
}

.result-star {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto;
}

.result-star li {
    width: 40%;
}

.arcane-coment, .natal-today-wrap {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

#result-area .arcane-coment li {
    margin: 0 auto;
    text-align: left;
    width: 100%;
    padding-bottom: 40px;
}

.state-axis {
    text-align: center;
}

#arcane .reading-item p {
    margin-bottom: 0;
}

#natal-form, .chart-container, .result-list, .reading-item, .natal-summary, .astro-accordion {
    margin-bottom: 40px;
}

#arcane .natal-inner-item {
    margin-bottom: 40px;
    background-color: #000000;
    border-radius: 20px;
    padding: 10px;
}

#result-area .state-list {
    flex-direction: column;
}

#result-area .state-list li {
    width: 100%;
    line-height: 2;
}

#calc-btn p,#draw-btn p {
    margin-bottom: 0;
}

/* ベースカード */
.arcane-top-card, .four-pillars-table {
    background: #000000;
    border-radius: 12px;
    margin: 10px 0;
}

/* ヘッダー */
.arcane-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* グリッドレイアウト */
.arcane-tactical-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* gapの代わりにborderで区切りを作る */
    gap: 0; 
    border-bottom: 1px solid #555555;
    align-items: stretch; /* これで子要素の高さが揃う */
    padding: 20px 0;
}

.arcane-recommendation-box {
    border-right: 1px solid #555555;
}

#arcane .arcane-grid-item {
    padding: 10px 12px;
    /* 高さ一杯に広がる設定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
}

/* 左側のアイテムだけに右線を引く */
.arcane-border-right {
    border-right: 1px solid #555555;
}

.arcane-value-recommend {
    color: var(--use-color);
    text-shadow: 1px 1px #fcf8ef;
}

.arcane-label-span2 {
    color: #ff4444;
}

/* タイムライン */
.arcane-timeline {
    display: grid;
    grid-template-columns: repeat(13, 200px);
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding: 20px 0; /* 上下の余白 */
    
    /* スナップ設定 */
    scroll-snap-type: x mandatory;
    scroll-padding: 0 50%; /* 中央にスナップさせるための遊び */
}

.arcane-timeline::-webkit-scrollbar { 
    display: none; 
}

.arcane-time-step {
    text-align: center;
    width: 200px;
    scroll-snap-align: center; /* 常に中央で止まるようにする */
    transition: transform 0.3s ease
}

.arcane-time-step.is-current {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    outline: 1px solid #555;
    transform: scale(1.05);
    z-index: 10;
}

.arcane-action-text {
    color: var(--step-color);
}

:root {
    --color-mu:  #0055ff; /* 木：本来の「青」。若さ、東、春の象徴 */
    --color-ka:  #ff0000; /* 火：赤。情熱、南、夏の象徴 */
    --color-do:  #ffd700; /* 土：黄。中央、季節の変わり目（土用）の象徴 */
    --color-gon: #ffffff; /* 金：白。清潔、西、秋の象徴 */
    --color-sui: #111111; /* 水：黒。深淵、北、冬の象徴（背景と分けるため微調整） */
}

/* 五行ごとの配色クラス */
.el-mu  { --el-color: var(--color-mu); }
.el-ka  { --el-color: var(--color-ka); }
.el-do  { --el-color: var(--color-do); }
.el-gon { --el-color: var(--color-gon); }
.el-sui { --el-color: var(--color-sui); }

/* 推奨・警戒エリアのアイコン（img）共通設定 */
.arcane-value-recommend img,
.arcane-value-avoid img {
    width: 1.2em;      /* フォントサイズに合わせる */
    height: 1.2em;
    vertical-align: middle;
    margin-right: 4px;
    /* 黒い画像を白く反転させる魔法のフィルタ */
    filter: brightness(0) invert(1); 
}

/* 推奨（用神）のアイコンをもっと強調（少し発光させる） */
.arcane-value-recommend img {
    filter: brightness(0) invert(1) drop-shadow(0 0 2px var(--use-color));
}

/* 警戒（忌神）のアイコンを赤っぽく光らせる */
.arcane-value-avoid img {
    filter: brightness(0) invert(1) drop-shadow(0 0 2px #ff4444);
}

.arcane-icon-avoid {
    color: #fcf8ef;
}

.natal-today-overall, .natal-today-groups li, .vector-field, .state-content, .natal-neutral-item {
    padding-bottom: 40px;
}

.natal-sign-row {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.arcane-flex {
    display: flex;
    justify-content: start;
}

.arcane-flex span {
    white-space: nowrap;
}

.arcane-toki-range {
    display: flex;
    justify-content: end;
    flex-direction: column;
}

.vector-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px;
}

.vector-item {
    width: 20%;
    white-space: wrap;
}

.astro-content {
    display: none;
}

.astro-toggle {
    width: 100%;
    padding: 10px;
    cursor: pointer;
    border: none;
    margin-top: 5px;
    font-size: 1rem;
}

details:open .astro-content {
    display: block;
}

#arcane .vector-item p {
    font-size: 1rem;
    line-height: 1;
    margin-bottom: 5px;
}

svg, .semantic-desc-label {
    font-family: 'New Tegomin', 'togalite';
}

#arcane-stage.collapse {
  animation: collapseAnim 0.8s forwards;
}

.pillar-label {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

@keyframes collapseAnim {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(80px);
    opacity: 0;
    filter: blur(6px);
  }
}

#arcane-stage * {
  transition: ease, opacity 0.6s;
  position: relative;
  z-index: 10;
}

#arcane-stage.collapse * {
    opacity: 0;
}

#arcane-core {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  opacity: 0;
  font-size: 24px;
  letter-spacing: 0.1em;
  transition: 0.8s;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

#arcane-core.visible {
  opacity: 1;
  z-index: 30;
}

body.no-scroll {
  overflow: hidden;
}

body.collapse-bg {
  background: #000;
}

.arcane-confirm {
    text-decoration: underline;
}

#arcane header.is-visible {
    opacity: 1;
}

#chat-sidebar {
    max-width: 100%;
}

.gojutsu-category {
    display: flex;
    gap: 20px;
    justify-content: start;
}

.gojutsu-category ul {
    text-align: left;
}

#arcane .search-term {
    font-size: 1rem;
}

#arcane #chat-sidebar .search-term {
    font-size: 1.5rem;
}

.chat-theme {
    padding-bottom: 20px;
}

.four-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    padding-top: 20px;
}

.pillar-kan,
.pillar-shi {
    font-size: 2rem;
    color: #fcf8ef;
    line-height: 1.4;
}

.pillar-shi {
    padding-top: 8px;
    border-top: 1px solid #555555;
}

.pillar-zokan {
    border-top: 1px solid #555555;
    margin-top: 8px;
    padding-top: 6px;
}

.four-pillars-detail {
    margin-top: 16px;
    text-align: center;
}

.pillar-row {
    border-top: 1px solid #555555;
    padding: 8px 0;
    text-align: center;
}

.pillar-row-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}

.four-pillars-accordion {
    margin-top: 16px;
}

.fp-detail-block, .fp-detail-item {
    margin: 16px 0;
    padding-top: 16px;
}

.fp-detail-block, .arcane-section-label {
    border-top: 1px solid #cccccc;
}

.fp-detail-item {
    border-top: 1px dotted #888888;
}

.fp-detail-value1 {
    text-align: left
}

#agree-once {
    width: 20px;
    height: 20px;
}

.semantic-item {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #cccccc;
}

.featured-image{
    margin: 30px 0;
    text-align: center;
}

.featured-image img{
    max-width: 100%;
    width: auto;
    height: auto;
    display: inline-block;
}

#arcane .location-toggle {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 10px auto;
}

#arcane .toggle-btn, #arcane #time-btn, #arcane #field-btn, #arcane #draw-btn {
    position: relative;
    right: 0;
}

#arcane .toggle-btn.active {
    color: #2a77fc;
    background-color: #f2d21b;
}

#skyCanvas {
  width: 100%;
  max-width: 800px;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  margin: 0 auto;
}

canvas {
  touch-action: none;
}

.sky-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

canvas#sky {
    width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
}

#skyCanvas, #sky {
    max-width: 100%;
    height: auto;
    touch-action: pan-y;
    display: block;
    margin-bottom: 20px;
}

#arcane h2 {
    font-family: 'New Tegomin', 'togalite';
    font-weight: 400;
    font-size: 2rem;
    margin-bottom: 20px;
}

.imi-speak, .koto-speak {
    color: #fcf8ef;
    font-family: 'New Tegomin', 'togalite';
    font-weight: 400;
    margin-bottom: 20px;
    padding: 10px;
    display: inline-block;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    position: relative;
    font-size: 2rem;
}

.imi-speak {
    transform: rotate(-1deg);
}

.koto-speak {
    transform: rotate(1deg);
}

.imi-speak::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -12px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 12px solid rgba(255,255,255,0.2);
}

.koto-speak::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -12px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid rgba(255,255,255,0.2);
}

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

.imi-speak li {
    list-style: circle;
    margin-left: 15px;
}

.imikoto-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.koto-gap {
    gap: 20px;
}

.imi {
    height: 200px;
    width: auto;
}

.koto {
    height: 180px;
    width: auto;
}

.natal-group-caution, .natal-group-neutral {
    border-top: 1px dotted #888888;
    padding-top: 20px;
    margin-top: 20px;
}

.earth-wheel-wrap{
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1 / 1;
    margin: auto;
}

.direction-layer{
    position:absolute;
    inset:0;
    pointer-events:none;
}

#arcane .earth p {
    margin-bottom: 0;
}

.direction-layer span{
    position:absolute;
    color:#d8b85c;
    font-size:20px;
}

.north{top:0;left:50%;transform:translateX(-50%);}
.ne{top:15%;right:10%;}
.east{top:50%;right:0;transform:translateY(-50%);}
.se{bottom:15%;right:10%;}
.south{bottom:0;left:50%;transform:translateX(-50%);}
.sw{bottom:15%;left:10%;}
.west{top:50%;left:0;transform:translateY(-50%);}
.nw{top:15%;left:10%;}

.wheel{
    position:absolute;
    inset:50px;
    transition:transform 4s cubic-bezier(.15,.85,.2,1);
}

.wheel img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.spin-core{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:20%;
    height:20%;
    border-radius:50%;
    background:#111;
    color:#d8b85c;
    border:2px solid #d8b85c;
    cursor:pointer;
    z-index:10;
}

#dotCanvas {
    width: 300px;
    height: 300px;
    background: #000;
    margin: 0 auto 20px;
}

#ui button {
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
}

.phase {
    opacity: 0.7;
    margin-bottom: 10px;
}

.done {
    font-size: 20px;
    letter-spacing: 2px;
}

#arcane .bagua .label {
    margin-bottom: 10px;
    line-height: 1;
}

#arcane .koyomi-note {
    font-size: 0.8rem;
    color: #a09080;
    padding-left: 1rem;
    line-height: 1;
}

button.earth-today-button, .transit-domain-tab, .domain-btn, .fp-domain-tab, .fp-domain-relationship-btn, button.obs-period, button.semantic-domain-btn,button.personal-obs-period {
    position: relative;
    right: auto;
    margin: 10px;
}

#arcane button.earth-today-button p {
    color:#111111;
    margin-bottom: 0;
    text-decoration: underline;
}

.today-earth-link::before {
    content: '👉';
    margin-right: .5em;
    flex-shrink: 0;
    font-size: 2rem;
}

.dot {
    display: flex;
    flex-direction: column;
}

#stopButton {
    position: relative;
    margin: 0 auto;
    display: block;
    right: auto;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);;
}

#stopButton p {
    margin-bottom: 0;
    padding: 10px 20px;
}

.fp-domain-relationship-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* =============================================================
   SEMANTIC-OS CONFLICT & SHAPE BALANCE STYLES
   以下のCSSをテーマのスタイルシートに追加してください
   ============================================================= */

/* 矛盾注釈 */
.semantic-conflict-note {
    margin: 0.6em 0;
    padding: 0.5em 0.8em;
    background: rgba(255, 193, 7, 0.08);
    border-left: 3px solid #ffc107;
    border-radius: 0 4px 4px 0;
    color: #e0c060;
    font-size: 0.9em;
    line-height: 1.5;
}

/* 形状バランス注釈 */
.semantic-shape-note {
    margin: 0.4em 0;
    color: #ff8a65;
    font-size: 0.85em;
}

/* distinctive サブタイトル */
.distinctive-sub {
    font-size: 0.75em;
    font-weight: normal;
    margin-left: 0.5em;
}

/* レーダーチャート下のバランスインジケーター */
.shape-balance-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 16px 0;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    font-size: 0.8em;
}

.shape-balance-label {
    color: #888;
    white-space: nowrap;
}

.shape-balance-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.shape-balance-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6b6b, #ffc107, #69f0ae);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.shape-balance-value {
    color: #ccc;
    font-variant-numeric: tabular-nums;
    min-width: 3em;
    text-align: right;
}

/* 状態名の偏在タグ */
.state-imbalance-tag {
    font-size: 0.6em;
    font-weight: normal;
    color: #ff8a65;
    vertical-align: super;
    margin-left: 0.3em;
}

.semantic-observation, .semantic-observation-range, #personal-observation-result {
    background-color: #000000;
    border-radius: 12px;
    padding: 24px;
}

.observation-detail {
    background:rgb(255, 255, 255, 0.3);
    border-radius:8px;
    border-left:3px solid #4a90d9;
    padding: 5px;
}

.obs-timeline-strip {
    display:flex;
    gap:8px;
    overflow-x:auto;
    justify-content: center;
}

.obs-period-tabs {
    display:flex;
    gap:8px;
    margin-top:12px;
    justify-content: center;
}

.fortune{
    display:none;
}

.fortune.active{
    display:block;
}

#personal-key-form {
    text-align: center;
}

#arcane .layer-meaning, #arcane .arcane-text-sub {
    margin-bottom: 40px;
}

.day {
    margin-bottom: 0;
}

.obs-timeline-date {
    display: flex;
}

@media screen and (width < 850px){
    #arcane h2, .imi-speak, .koto-speak {
        font-size: 1.5rem;
    }

    .imi {
        height: 150px;
    }

    .koto {
        height: 120px;
    }
    .single2 {
        padding-top: 60px;
    }

    .cat-list {
        flex-direction: column;
        gap: 0;
    }

    #arcane p, #arcane li, #arcane input, #arcane select, #arcane .wp-block-cover, .katex-eq, table {
        font-size: 1rem;
        line-height: 1;
        margin-bottom: 10px;
    }
    
    #arcane .arcane-section-label {
        padding: 10px 0;
    }

    .four-pillars-grid {
        padding-top: 10px;
    }

    label {
        font-size:1rem;
    }
    
    #backToHomeButton {
        bottom: 40px;
    }

    #scrollToBottom {
        bottom: 120px;
    }

    #chat-container {
        padding: 10px 0 150px;
        border-top: 1px solid #ffffff;
    }

    #arcane .chat-row .file-content p {
        font-size: 1rem;
        line-height: 1;
    }

    .ai-file-detail {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    #chat-wrapper {
        flex-direction: column;
        align-items: center;
    }

    #chat-history {
        padding-bottom: 0;
    }

    #chat-submit {
        font-size: 0.8rem;
        padding: 3px 8px;
    }
    
    .koyomi-list {
        flex-direction: column;
        gap: 0;
    }

    #arcane #koyomi li {
        margin-bottom: 10px;
    }

    .input {
        flex-direction: column;
    }

    select#pref-input, select#country-input {
        margin-bottom: 10px;
        padding: 3px;
    }

    .result-star {
        flex-direction: column;
        gap:0;
    }

    .result-star li {
        width: 100%;
    }

    .chart-container p, .chart-container li {
        margin-bottom: 10px;
    }

    .koyomi-time {
        display: block;
        margin-top: 4px; /* 少し余白つけると見やすい */
    }

    .arcane-timeline {
        grid-template-columns: repeat(13, 150px);
    }

    .arcane-time-step {
        width: 150px;
    }

    .arcane-tactical-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .arcane-recommendation-box {
        border-right: none;
        border-bottom: 1px solid #555555;
    }

    .arcane-flex {
        flex-direction: column;
    }

    .vector-grid {
        gap: 20px;
    }

    .vector-item {
        width: 40%;
    }

    .gojutsu-category {
        text-align: center;
    }

    #arcane .astro-text p {
        margin-bottom: 20px;
    }

    #arcane .pillar-row-value {
        font-size: 0.8rem;
    }

    #arcane #chat-sidebar .search-term {
        font-size: 1rem;
    }

    .pillar-label {
        flex-direction: column;
    }

  .map-input-wrap{
        display:flex;
        flex-direction:column;
        gap:12px;
  }

  .days, .obs-timeline-date {
        flex-direction: column;
  }
}