/*
 * theme.css — モカ＆フレーバー デザイントークンと追加コンポーネント
 * style.css（テンプレート由来）の後に読み込む。
 * 新規スタイルは必ずここのトークン（--mm-*）を参照して書くこと。
 */

:root {
  /* コーヒーグラデーション（共通軸） */
  --mm-milk: #FAF7F2;
  --mm-espresso: #33241C;
  --mm-mocha: #6F4C37;
  --mm-mocha-deep: #5A3C2B;
  --mm-dark-roast: #3E2C20;
  --mm-gold: #C2A268;
  --mm-cream: #F4EDE4;

  /* ニュートラル（暖色バイアス） */
  --mm-ink-soft: #6E5D51;
  --mm-line: #E6DCD1;

  /* フレーバー: study（アプリ実測値） */
  --mm-study-key: #FF5099;
  --mm-study-pale: #FFEDED;
  --mm-study-aqua: #D7FAFA;
  --mm-study-text: #785044;

  /* フレーバー: MOON（LP実測値） */
  --mm-moon-key: #EE67D7;
  --mm-moon-pale: #FFEBFC;
  --mm-moon-blue: #E2F0FC;
  --mm-moon-text: #272E92;

  /* 状態色 */
  --mm-danger: #C25E51;
}

/* ===== タイポグラフィ ===== */

body {
  color: var(--mm-espresso);
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  letter-spacing: 0.04em;
}

h1 small, h2 small, h3 small,
.h1 small, .h2 small, .h3 small {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  letter-spacing: 0.12em;
}

/* アプリ紹介など、カジュアルに切り替えたい見出し用 */
.heading-maru {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ===== 余白・罫線・影の軽量化（高級感の土台） ===== */

.well,
.well-sm {
  padding-top: 70px;
  padding-bottom: 70px;
}

.section-border {
  border-color: var(--mm-line);
}

.breadcrumb {
  background: transparent;
  border-bottom: 1px solid var(--mm-line);
}

.btn {
  letter-spacing: 0.06em;
}

/* ===== ナビゲーション ===== */

.rd-navbar .rd-navbar-nav > li.nav-cta > a,
.rd-navbar-static .rd-navbar-nav > li.nav-cta > a,
.rd-navbar-fullwidth .rd-navbar-nav > li.nav-cta > a,
.rd-navbar-fixed .rd-navbar-nav > li.nav-cta > a {
  background: var(--mm-mocha);
  color: #fff;
  border-radius: 999px;
  padding: 8px 22px;
}

.rd-navbar .rd-navbar-nav > li.nav-cta > a:hover,
.rd-navbar .rd-navbar-nav > li.nav-cta.active > a,
.rd-navbar-static .rd-navbar-nav > li.nav-cta > a:hover,
.rd-navbar-static .rd-navbar-nav > li.nav-cta.active > a,
.rd-navbar-fullwidth .rd-navbar-nav > li.nav-cta > a:hover,
.rd-navbar-fullwidth .rd-navbar-nav > li.nav-cta.active > a,
.rd-navbar-fixed .rd-navbar-nav > li.nav-cta > a:hover,
.rd-navbar-fixed .rd-navbar-nav > li.nav-cta.active > a {
  background: var(--mm-mocha-deep);
  color: #fff;
}

/* contact の地図（iframe 埋め込み） */
.map-embed {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* X（旧Twitter）ロゴ — テンプレ同梱FontAwesomeに存在しないためSVGで描画 */
a.icon-x svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.12em;
}

/* SP サイドバーメニュー（旧テンプレのグレー地を新パレットに） */
.rd-navbar-fixed .rd-navbar-nav {
  background: var(--mm-milk);
  color: var(--mm-espresso);
}

.rd-navbar-fixed .rd-navbar-nav li > a {
  color: var(--mm-espresso);
}

.rd-navbar-fixed .rd-navbar-nav .rd-navbar-dropdown li > a {
  color: var(--mm-ink-soft);
}

.rd-navbar-fixed .rd-navbar-nav li > a:hover,
.rd-navbar-fixed .rd-navbar-nav li.active > a,
.rd-navbar-fixed .rd-navbar-nav .rd-navbar-dropdown li > a:hover {
  color: var(--mm-mocha);
}

/* SP サイドバーでは NEW/hot バッジをテキストに追従させる（float だと折返し時に下へ落ちる） */
.rd-navbar-fixed .rd-navbar-nav .rd-navbar-dropdown .marked {
  float: none;
  display: inline-block;
  margin: 0 0 0 8px;
  vertical-align: 2px;
}

.rd-navbar-fixed .rd-navbar-nav .rd-navbar-dropdown .marked:before {
  display: none;
}

/* JA/EN スイッチャー（ヘッダー上段バー内） */
.rd-navbar-top-panel li.lang-switch {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  width: auto;
  line-height: 1;
  border: 1px solid var(--mm-line);
  border-radius: 999px;
  padding: 2px;
  margin-right: 10px;
}

.rd-navbar-top-panel li.lang-switch > a {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--mm-ink-soft);
}

.rd-navbar-top-panel li.lang-switch > a.is-current {
  background: var(--mm-mocha);
  color: #fff;
}

/* ===== フッター（ダークロースト） ===== */

.page-footer.dark {
  background: var(--mm-dark-roast);
  color: var(--mm-cream);
}

.page-footer.dark .footer-content {
  background: var(--mm-dark-roast);
  color: var(--mm-cream);
}

.page-footer.dark address,
.page-footer.dark .footer-content p,
.page-footer.footer-widget.dark .footer-content p {
  color: var(--mm-cream);
}

.page-footer.dark dl dt,
.page-footer.footer-widget.dark .footer-content .contact-info dl dt {
  color: var(--mm-cream);
  font-weight: 700;
}

.page-footer.dark dl dd,
.page-footer.dark dl dd a {
  color: var(--mm-cream);
}

.page-footer.dark a {
  color: var(--mm-cream);
}

.page-footer.dark a:hover {
  color: var(--mm-gold);
}

.page-footer.dark .list-inline > li a {
  color: var(--mm-cream);
}

.page-footer h6 {
  color: var(--mm-gold);
  letter-spacing: 0.14em;
}

.page-footer .copyright {
  border-top: 1px solid rgba(244, 237, 228, 0.15);
  color: var(--mm-cream);
}

/* ===== フレーバーユーティリティ（Step 3 以降で使用） ===== */

.flavor-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(51, 36, 28, 0.08);
  overflow: hidden;
}

.flavor-card--study .flavor-card__band { background: var(--mm-study-aqua); }
.flavor-card--study .flavor-card__label { color: var(--mm-study-key); }
.flavor-card--study .flavor-card__title { color: var(--mm-study-text); }

.flavor-card--moon .flavor-card__band { background: var(--mm-moon-pale); }
.flavor-card--moon .flavor-card__label { color: var(--mm-moon-key); }
.flavor-card--moon .flavor-card__title { color: var(--mm-moon-text); }

.flavor-card--biz {
  background: var(--mm-dark-roast);
  color: var(--mm-cream);
}
.flavor-card--biz .flavor-card__band { background: var(--mm-gold); }
.flavor-card--biz .flavor-card__label { color: var(--mm-gold); }
.flavor-card--biz .flavor-card__title { color: var(--mm-cream); }

.flavor-card__band {
  height: 8px;
}

.flavor-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.flavor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  text-align: left;
}

@media (max-width: 991px) {
  .flavor-grid {
    grid-template-columns: 1fr;
  }
}

.flavor-card__body {
  padding: 26px 26px 30px;
}

.flavor-card__title {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  margin: 10px 0 12px;
}

.flavor-card--biz .flavor-card__title {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", serif;
}

.flavor-card__title a {
  color: inherit;
}

.flavor-card__desc {
  font-size: 14px;
  color: var(--mm-ink-soft);
}

.flavor-card--biz .flavor-card__desc {
  color: var(--mm-cream);
  opacity: 0.85;
}

.flavor-card__links {
  font-size: 13px;
  margin-top: 14px;
}

.flavor-card--biz .flavor-card__links a {
  color: var(--mm-gold);
}

/* ===== アプリページ（パステル地ヒーロー＋フレーバースコープ） ===== */

.app-hero {
  padding: 170px 20px 90px;
  text-align: center;
}

.app-hero h1 {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 34px;
  margin: 0;
}

.app-hero h1 small {
  display: block;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-top: 14px;
}

.app-hero--moon {
  background: linear-gradient(135deg, var(--mm-moon-pale) 0%, var(--mm-moon-blue) 100%);
}

.app-hero--moon h1 {
  color: var(--mm-moon-text);
}

.app-hero--moon h1 small {
  color: var(--mm-moon-key);
}

.app-hero--study {
  background: linear-gradient(135deg, var(--mm-study-pale) 0%, var(--mm-study-aqua) 100%);
}

.app-hero--study h1 {
  color: var(--mm-study-text);
}

.app-hero--study h1 small {
  color: var(--mm-study-key);
}

/* 受託開発ページのヒーロー（法人トーン） */
.biz-hero {
  background: linear-gradient(150deg, var(--mm-dark-roast) 0%, var(--mm-espresso) 100%);
  padding: 170px 20px 90px;
  text-align: center;
}

.biz-hero h1 {
  color: var(--mm-cream);
  font-size: 30px;
  margin: 0;
}

.biz-hero h1 small {
  display: block;
  color: var(--mm-gold);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  margin-top: 14px;
}

.app-flavor h2,
.app-flavor h3 {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
}

.app-flavor--moon .btn-primary {
  background-color: var(--mm-moon-key);
  border-color: var(--mm-moon-key);
}

.app-flavor--moon .btn-primary:hover,
.app-flavor--moon .btn-primary:focus,
.app-flavor--moon .btn-primary:active {
  background-color: #DB51C4;
  border-color: #DB51C4;
  color: #fff;
}

.app-flavor--study .btn-primary {
  background-color: var(--mm-study-key);
  border-color: var(--mm-study-key);
}

.app-flavor--study .btn-primary:hover,
.app-flavor--study .btn-primary:focus,
.app-flavor--study .btn-primary:active {
  background-color: #FF4392;
  border-color: #FF4392;
  color: #fff;
}

/* ===== トップページ（プロダクト型再構成） ===== */

.home-hero {
  background: var(--mm-milk);
  padding: 150px 0 70px;
  overflow: hidden;
}

.home-hero__inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  text-align: left;
}

.home-hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--mm-mocha);
  margin-bottom: 18px;
}

.home-hero h1 {
  font-size: 44px;
  line-height: 1.5;
  margin: 0 0 20px;
  color: var(--mm-espresso);
}

.home-hero__lead {
  color: var(--mm-ink-soft);
  max-width: 34em;
  margin-bottom: 30px;
}

.home-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-mocha,
.btn-outline-mocha,
.btn-outline-gold {
  display: inline-block;
  border-radius: 999px;
  padding: 12px 30px;
  font-size: 14px;
  letter-spacing: 0.06em;
  transition: background 0.2s, color 0.2s;
}

.btn-mocha {
  background: var(--mm-mocha);
  color: #fff;
  border: 1px solid var(--mm-mocha);
}

.btn-mocha:hover,
.btn-mocha:focus {
  background: var(--mm-mocha-deep);
  border-color: var(--mm-mocha-deep);
  color: #fff;
}

.btn-outline-mocha {
  background: transparent;
  color: var(--mm-mocha);
  border: 1px solid var(--mm-mocha);
}

.btn-outline-mocha:hover,
.btn-outline-mocha:focus {
  background: var(--mm-mocha);
  color: #fff;
}

.btn-outline-gold {
  background: transparent;
  color: var(--mm-gold);
  border: 1px solid var(--mm-gold);
}

.btn-outline-gold:hover,
.btn-outline-gold:focus {
  background: var(--mm-gold);
  color: var(--mm-dark-roast);
}

.home-hero__visual {
  position: relative;
  min-height: 440px;
}

.home-hero__blob {
  position: absolute;
  border-radius: 50%;
}

.home-hero__blob--pink {
  width: 300px;
  height: 300px;
  background: var(--mm-moon-pale);
  top: 10px;
  left: 30px;
}

.home-hero__blob--blue {
  width: 190px;
  height: 190px;
  background: var(--mm-moon-blue);
  bottom: 20px;
  right: 40px;
}

.home-phone {
  position: relative;
  z-index: 1;
  width: 215px;
  margin: 0 auto;
  background: #fff;
  border: 8px solid var(--mm-espresso);
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(51, 36, 28, 0.18);
}

.home-phone img {
  display: block;
  width: 100%;
  height: auto;
}

.home-hero__mascot {
  position: absolute;
  z-index: 2;
  width: 110px;
  height: auto;
  right: 8%;
  bottom: -6px;
}

/* --- 2カラムのアプリセクション --- */

.home-split {
  padding: 85px 0;
}

.home-split + .home-split {
  padding-top: 0;
}

.home-split__inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: center;
  text-align: left;
}

.home-split__panel {
  border-radius: 24px;
  padding: 44px 30px;
  text-align: center;
}

.home-split--moon .home-split__panel {
  background: linear-gradient(135deg, var(--mm-moon-pale) 0%, var(--mm-moon-blue) 100%);
}

.home-split--study .home-split__panel {
  background: linear-gradient(135deg, var(--mm-study-pale) 0%, var(--mm-study-aqua) 100%);
}

.home-split--reverse .home-split__panel {
  order: 2;
}

.home-split__panel img {
  max-width: 100%;
  height: auto;
}

.home-split__panel .home-phone {
  width: 190px;
}

.home-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.home-label--moon { color: var(--mm-moon-key); }
.home-label--study { color: var(--mm-study-key); }
.home-label--biz { color: var(--mm-gold); }

.home-split h2 {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.home-split--moon h2 { color: var(--mm-moon-text); }
.home-split--study h2 { color: var(--mm-study-text); }

.home-split__desc {
  color: var(--mm-ink-soft);
}

.home-feat {
  list-style: none;
  padding: 0;
  margin: 24px 0 28px;
  display: grid;
  gap: 14px;
}

.home-feat li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--mm-ink-soft);
}

.home-feat img {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}

.home-store {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.home-store img {
  height: 44px;
  width: auto;
}

.home-more-link {
  font-size: 13.5px;
}

/* --- 受託開発バンド --- */

.home-biz-band {
  background: linear-gradient(150deg, var(--mm-dark-roast) 0%, var(--mm-espresso) 100%);
  color: var(--mm-cream);
  padding: 85px 20px;
  text-align: center;
}

.home-biz-band h2 {
  color: var(--mm-cream);
  font-size: 30px;
  margin: 0 0 14px;
}

.home-biz-band__lead {
  color: rgba(244, 237, 228, 0.8);
  max-width: 40em;
  margin: 0 auto;
}

.home-biz-strengths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 940px;
  margin: 45px auto;
}

.home-biz-strengths dt {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  font-size: 19px;
  color: var(--mm-gold);
  margin-bottom: 8px;
}

.home-biz-strengths dd {
  margin: 0;
  font-size: 13.5px;
  color: rgba(244, 237, 228, 0.8);
}

.home-biz-band__links {
  font-size: 13.5px;
  margin: 28px 0 34px;
}

.home-biz-band__links a {
  color: var(--mm-gold);
}

/* --- ニュース・最終CTA --- */

.home-news {
  padding: 85px 0 40px;
}

.home-cta-strip {
  padding: 75px 20px 85px;
  text-align: center;
}

.home-cta-strip h2 {
  font-size: 26px;
  margin: 0 0 12px;
}

.home-cta-strip p {
  color: var(--mm-ink-soft);
  margin-bottom: 26px;
}

/* --- レスポンシブ --- */

@media (max-width: 991px) {
  .home-hero {
    padding: 130px 0 50px;
  }

  .home-hero__inner,
  .home-split__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .home-hero h1 {
    font-size: 31px;
  }

  .home-hero__visual {
    min-height: 380px;
  }

  .home-split--reverse .home-split__panel {
    order: 0;
  }

  .home-biz-strengths {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* ===== 汎用ページヒーロー・ハブカード ===== */

.page-hero {
  background: var(--mm-milk);
  padding: 170px 20px 90px;
  text-align: center;
}

.page-hero h1 {
  font-size: 32px;
  color: var(--mm-espresso);
  margin: 0;
}

.page-hero h1 small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mm-mocha);
  margin-top: 14px;
}

.page-hero--slim {
  padding: 130px 20px 40px;
}

.page-hero__kicker {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mm-mocha);
  margin: 0;
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 45px auto;
  text-align: left;
}

.hub-card {
  display: block;
  background: #fff;
  border: 1px solid var(--mm-line);
  border-radius: 14px;
  padding: 30px 30px 26px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.hub-card:hover {
  box-shadow: 0 10px 24px rgba(51, 36, 28, 0.1);
  transform: translateY(-2px);
}

.hub-card__title {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--mm-espresso);
  margin: 0 0 10px;
}

.hub-card__desc {
  font-size: 14px;
  color: var(--mm-ink-soft);
  margin-bottom: 14px;
}

.hub-card__more {
  font-size: 13.5px;
  color: var(--mm-mocha);
}

.svc-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 45px auto;
  text-align: center;
}

.svc-menu a {
  display: block;
  background: #fff;
  border: 1px solid var(--mm-line);
  border-radius: 14px;
  padding: 28px 20px 24px;
  color: var(--mm-espresso);
  transition: box-shadow 0.2s, transform 0.2s;
}

.svc-menu a:hover {
  box-shadow: 0 10px 24px rgba(51, 36, 28, 0.1);
  transform: translateY(-2px);
  color: var(--mm-mocha);
}

.svc-menu .icon {
  color: var(--mm-mocha);
  font-size: 30px;
  margin-bottom: 12px;
}

.svc-menu__name {
  font-weight: 700;
  font-size: 15px;
  display: block;
  margin-bottom: 6px;
}

.svc-menu__desc {
  font-size: 12.5px;
  color: var(--mm-ink-soft);
}

@media (max-width: 991px) {
  .hub-grid {
    grid-template-columns: 1fr;
  }

  .svc-menu {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .svc-menu {
    grid-template-columns: 1fr;
  }
}