/*
Theme Name: MixJuice Hello Biz Child
Theme URI: https://example.com/
Author: Talon
Author URI: https://example.com/
Description: Elementor Hello Biz の子テーマ。ミックスジュース協会用トップ（news=3件, shop=10件）、モバイルメニュー(X)モーフ。
Version: 1.0.0
Template: hello-biz
Text Domain: mixjuice-hello-biz-child
*/

/* サイト全体に一行でOK（root/viewportのスクロールバーだけ右側に確保） */
:root { scrollbar-gutter: stable; }

/* 未対応ブラウザ向けフォールバック（幅を常に一定に保つ） */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }  /* 常に縦スク表示＝右側だけ幅確保 */
}

:root {
  --juice: #FCE68B;
  --juice-light: #FFF5CC;
  --juice-pale: #FFFCF2;
  --lime: #A2E085;
  --aqua: #D7F7FA;
  --peach: #FFE9D6;
  --ivory: #FFFFFF;
  --red: #CC4444;
  --ink: #333333;
  --brown: #4E342E;
  --orange-dark: #D76217;
  --overlay: rgba(0, 0, 0, .38);
}

html,
body {
  margin: 0;
  padding: 0
}

body {
  background: var(--ivory);
  color: var(--ink);
  letter-spacing: .02em;
  font-family: "Helvetica Neue", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", sans-serif
}

body.menu-open {
  overflow: hidden
}

header.mja {
  background: var(--ivory);
  color: #333;
  padding: .85rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .06)
}

.admin-bar header.mja {
  top: 32px
}

@media (max-width:782px) {
  .admin-bar header.mja {
    top: 46px
  }
}

.mja .bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto
}

.mja .brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: inherit
}

.mja .brand .logo-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
  display: grid;
  place-items: center;
  overflow: hidden
}

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

.mja .brand h1 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800
}

.nav-desktop {
  margin-left: auto;
  display: flex;
  gap: 1.25rem;
  align-items: center
}

.nav-desktop .menu {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0
}

.nav-desktop .menu a {
  color: #333;
  text-decoration: none;
  font-weight: 700;
  opacity: .9;
  padding: .5rem 1rem;
  transition: border-color .3s, color .3s
}

.nav-desktop .menu a:hover {
  opacity: 1;
  border-bottom: 2px solid var(--orange-dark)
}

.nav-desktop .menu .cta-nav>a,
.nav-desktop .menu a.cta-nav {
  background: var(--orange-dark);
  color: #fff;
  border-radius: 28px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
}

.nav-desktop .menu .cta-nav>a:hover,
.nav-desktop .menu a.cta-nav:hover {
  transform: translateY(-1px);
  border-bottom: none
}

.hero-visual {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-height: 790px;
  overflow: hidden
}

.hero-visual img {
  display: block;
  width: 100vw;
  height: min(56vh, 790px);
  max-height: 790px;
  object-fit: cover
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, var(--juice-pale) 0%, var(--juice-light) 20%, var(--juice) 50%, var(--peach) 75%, var(--aqua) 100%);
  min-height: 42vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem 1.5rem 3rem
}

.hero::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  --ripple-x: 50%;
  --ripple-y: 55%;
  background-image: repeating-radial-gradient(circle at var(--ripple-x) var(--ripple-y), rgba(255, 255, 255, .50) 0 2px, rgba(255, 255, 255, 0) 2px 14px);
  background-repeat: no-repeat;
  mix-blend-mode: soft-light;
  opacity: .38;
  animation: ripplePulse 14s linear infinite
}

@keyframes ripplePulse {
  0% {
    background-size: 10% 10%;
    opacity: .38
  }

  60% {
    background-size: 140% 140%;
    opacity: .18
  }

  100% {
    background-size: 200% 200%;
    opacity: .06
  }
}

.hero h2 {
  margin: 0 0 .8rem;
  font-size: clamp(1.8rem, 3.2vw + 1rem, 3rem);
  color: var(--red);
  text-shadow: 0 2px 8px rgba(255, 255, 255, .85)
}

.hero p {
  max-width: 840px;
  margin: .3rem auto 1.3rem;
  font-size: 1.08rem;
  line-height: 1.6;
  color: #333;
  text-shadow: 0 1px 6px rgba(255, 255, 255, .7)
}

.cta {
  display: inline-block;
  background: var(--brown);
  color: #fff;
  border: none;
  padding: .9rem 1.8rem;
  border-radius: 28px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  position: relative;
  z-index: 1
}

.cta:hover {
  transform: translateY(-1px)
}

.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem
}

.section h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--orange-dark);
  font-size: 1.15rem;
  margin: 0 0 1.1rem
}

.chip {
  width: 10px;
  height: 22px;
  border-radius: 6px;
  background: var(--orange-dark)
}

.news {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

@media (max-width:960px) {
  .news {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

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

.news-card {
  background: #fff;
  border: 1px solid var(--juice-light);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.news-thumb {
  aspect-ratio: 16/9;
  width: 100%;
  object-fit: cover;
  background: #f8f8f8;
  display: block
}

.news-body {
  padding: 0.9rem 1rem 1.05rem
}

.news-meta {
  font-size: .84rem;
  opacity: .75;
  margin-bottom: .35rem
}

.news-title {
  font-weight: 800;
  margin: 0 0 .45rem;
  font-size: 1.02rem
}

.news-desc {
  margin: 0 0 .7rem;
  font-size: .95rem;
  line-height: 1.5
}

.news-link {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: 800;
  color: var(--brown);
  text-decoration: none
}

.news-link .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: .4rem;
  border-radius: 50%;
  background: var(--brown);
  color: #fff;
  font-size: .9rem;
  font-weight: 900;
  line-height: 1
}

.about-section {
  background: #D76217;
  color: #fff;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 3rem 1.5rem 2rem;
  text-align: center;
  border-radius: 50px 50px 0 0;
}

.about-flex {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.75rem;
  max-width: 1000px;
  margin: 0 auto
}

.about-tag {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem
}

.about-tag .about-kicker,
.about-tag .about-title {
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  margin: 0;
  padding: 0
}

.about-tag .about-sub {
  font-size: .95rem;
  opacity: .95;
  line-height: 1.3;
  display: block;
  margin-top: 25px
}

.about-text {
  flex: 1;
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.9;
  margin: 0
}

.about-actions {
  margin-top: 1.2rem;
  text-align: center
}

.about-actions .cta {
  display: inline-block;
  background: var(--brown);
  color: #fff;
  border: none;
  padding: .9rem 1.8rem;
  border-radius: 28px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15)
}

.hero-section {
  background: #fff;
  /*color: #fff;*/
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 3rem 1.5rem 2rem;
  text-align: center
}

.fullbleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw
}

.shop-ribbon {
  background: #EDEBDA;
  overflow: hidden;
  padding: 2.2rem 0 1.6rem
}

.shop-title {
  text-align: center;
  font-size: 1.1rem;
  color: #D76217;
  margin: .2rem 0 1.1rem;
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: .2rem
}

.shop-title::after {
  content: "";
  display: block;
  width: 52px;
  height: 5px;
  background: currentColor;
  margin: .8rem auto 0;
  border-radius: 3px
}

.shop-track {
  display: flex;
  gap: 0;
  will-change: transform;
  animation: shopmarquee 48s linear infinite
}

.shop-track:hover {
  animation-play-state: paused
}

.shop-item {
  flex: 0 0 auto;
  width: 400px;
  margin: 0 .25rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.shop-item img {
  width: 400px;
  height: 300px;
  object-fit: cover;
  display: block;
  border-radius: 15px;
}

.shop-cap {
  background: transparent;
  padding: .5rem .6rem;
  font-size: .95rem;
  line-height: 1.35;
  color: #333;
  display: flex;
  justify-content: space-between;
  gap: .75rem
}

.shop-cap time {
  opacity: .7;
  font-variant-numeric: tabular-nums
}

@keyframes shopmarquee {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

footer.site-footer {
  margin-top: 1rem;
  background: #fff;
  color: #333;
  padding: 1.8rem 1.5rem;
  border-top: 1px solid #eee
}

.foot-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between
}

.foot-inner small {
  opacity: .85
}

.hambtn {
  margin-left: auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #e9e9e9;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  cursor: pointer
}

.hambtn:focus {
  outline: 2px solid var(--orange-dark);
  outline-offset: 2px
}

.hambtn .bars {
  position: relative;
  width: 20px;
  height: 14px
}

.hambtn .bars::before,
.hambtn .bars::after,
.hambtn .bar {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #333;
  border-radius: 2px
}

.hambtn .bar {
  top: 6px
}

.hambtn .bars::before {
  top: 0
}

.hambtn .bars::after {
  bottom: 0
}

.hambtn .bars::before,
.hambtn .bars::after,
.hambtn .bar {
  transition: transform .25s ease, opacity .2s ease;
  transform-origin: 50% 50%;
}

.hambtn.is-active .bar {
  opacity: 0;
  transform: scaleX(0.6)
}

.hambtn.is-active .bars::before {
  transform: translateY(6px) rotate(45deg)
}

.hambtn.is-active .bars::after {
  transform: translateY(-6px) rotate(-45deg)
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s, visibility .28s
}

.mobile-menu.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto
}

.mobile-menu .scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: saturate(120%) blur(2px)
}

.mobile-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(86vw, 360px);
  background: #fff;
  box-shadow: -8px 0 24px rgba(0, 0, 0, .16);
  transform: translateX(100%);
  transition: transform .28s;
  display: flex;
  flex-direction: column;
  padding: 16px
}

.mobile-menu.active .mobile-panel {
  transform: translateX(0)
}

.mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px
}

.mobile-title {
  font-weight: 800;
  margin: 0;
  font-size: 1rem
}

.mobile-close {
  border: 1px solid #e9e9e9;
  background: #fff;
  border-radius: 10px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  padding-top: 4px !important;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  margin-top: 6px
}

.mobile-nav .menu {
  list-style: none;
  margin: 0;
  padding: 0
}

.mobile-nav .menu a {
  display: block;
  padding: 14px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #333;
  font-weight: 800
}

.mobile-nav .menu a:hover {
  background: #fafafa
}

.mobile-nav .menu .cta-nav>a {
  display: block;
  background: var(--orange-dark);
  color: #fff;
  text-align: center;
  margin-top: 6px;
  border-radius: 10px;
  padding: 14px 10px
}

.mobile-foot {
  margin-top: auto;
  font-size: .85rem;
  opacity: .8;
  padding: 12px 10px
}

@media (max-width:900px) {
  .about-flex {
    flex-direction: column;
    align-items: center
  }

  .about-tag {
    align-items: center;
    text-align: center
  }

  .about-text {
    text-align: center
  }
}

@media (max-width:720px) {
  header.mja {
    padding: .7rem 1rem
  }

  .mja .bar {
    flex-wrap: nowrap;
    gap: .5rem 1rem
  }

  .nav-desktop {
    display: none
  }

  .hambtn {
    display: inline-flex
  }

  .hero-visual img {
    height: 48vh
  }

  .about-tag .about-kicker,
  .about-tag .about-title {
    font-size: 32px
  }

  .about-actions .cta,
  .cta {
    padding: .85rem 1.4rem;
    border-radius: 26px
  }

  .section {
    padding: 2rem 1rem
  }

  .shop-item {
    width: min(82vw, 360px)
  }

  .shop-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3
  }

  .foot-inner {
    flex-direction: column;
    gap: .4rem;
    text-align: center
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero::after {
    animation: none;
    opacity: .12
  }

  .mobile-menu,
  .mobile-panel,
  .hambtn .bars::before,
  .hambtn .bar,
  .hambtn .bars::after {
    transition: none
  }
}

/* === JS-driven infinite marquee === */
.shop-track {
  animation: none !important;
  transform: translateX(0);
  will-change: transform;
}

.shop-item {
  flex: 0 0 auto;
}

.shop-item.empty .ph {
  width: 400px;
  height: 300px;
  background: transparent;
  display: block;
}

@media (max-width:720px) {
  .shop-item.empty .ph {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Hard-disable any pre-existing CSS marquee on JS-enabled track */
.shop-track.js-marquee {
  animation: none !important;
}


/* === JS-driven infinite marquee === */
.shop-track {
  animation: none !important;
  transform: translateX(0);
  will-change: transform;
}

.shop-item {
  flex: 0 0 auto;
}

.shop-item.empty .ph {
  width: 400px;
  height: 300px;
  background: transparent;
  display: block;
}

@media (max-width:720px) {
  .shop-item.empty .ph {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}


/* Hard-disable any pre-existing CSS marquee on JS-enabled track */
.shop-track.js-marquee {
  animation: none !important;
}

/* ==== Force-hide hamburger on desktop; show only on mobile ==== */
.hambtn{ display:none !important; }
@media (max-width: 720px){
  .hambtn{ display:inline-flex !important; }
}

/* ==== Prevent parent theme focus/active styles turning button red ==== */
.hambtn,
.hambtn:focus,
.hambtn:active,
.hambtn.is-active{
  background:#fff !important;
  color:#333 !important;
  border-color:#e9e9e9 !important;
}
.hambtn .bars::before,
.hambtn .bars::after,
.hambtn .bar{
  background:#333 !important;
}

/* ==== Force-hide hamburger on desktop; show only on mobile ==== */
.hambtn{ display:none !important; }
@media (max-width: 720px){
  .hambtn{ display:inline-flex !important; }
}

/* ==== Prevent parent theme focus/active styles turning button red ==== */
.hambtn,
.hambtn:focus,
.hambtn:active,
.hambtn.is-active{
  background:#fff !important;
  color:#333 !important;
  border-color:#e9e9e9 !important;
}
.hambtn .bars::before,
.hambtn .bars::after,
.hambtn .bar{
  background:#333 !important;
}

/* ===== Category Tabs ===== */
.cat-tabs{ margin: 0 0 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cat-tabs::-webkit-scrollbar{ height: 0; }
.cat-tabs-list{ display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.cat-tab a{
  display: inline-block;
  padding: .55rem 1rem;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  background: #fff;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 800;
}
.cat-tab.is-active a,
.cat-tab a[aria-current="page"]{
  background: var(--orange-dark);
  color: #fff;
  border-color: var(--orange-dark);
}
@media (max-width: 720px){
  .cat-tabs{ margin: 0 -1rem 1rem; padding: 0 1rem; }
}

/* ===== Category Tabs ===== */
.cat-tabs{ margin: 0 0 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cat-tabs::-webkit-scrollbar{ height: 0; }
.cat-tabs-list{ display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.cat-tab a{
  display: inline-block;
  padding: .55rem 1rem;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  background: #fff;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 800;
}
.cat-tab.is-active a,
.cat-tab a[aria-current="page"]{
  background: var(--orange-dark);
  color: #fff;
  border-color: var(--orange-dark);
}
@media (max-width: 720px){
  .cat-tabs{ margin: 0 -1rem 1rem; padding: 0 1rem; }
}


/* ===== Layout overflow fixes (prevent horizontal scrollbar) ===== */
html, body{ max-width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip){
  html, body{ overflow-x: hidden; }
}

/* Keep full-bleed sections within viewport without causing doc overflow */
.hero-visual,
.fullbleed{ max-width: 100vw; box-sizing: border-box; }
.shop-ribbon{ overflow-x: hidden; } /* rAF marquee stays inside */

.hero_title {
  margin: 0 auto;
  width: 80%;
  max-width: 320px;
}

/* ===== MW WP Form | Stylish Form Kit ===== */
.mw_wp_form{
  --mwf-gap: .9rem;
  --mwf-gap-lg: 1.2rem;
  --mwf-border: 1px solid #e6e6e6;
  --mwf-radius: 12px;
  --mwf-focus: 0 0 0 3px rgba(43,177,168,.2); /* var(--primary)に合わせたフォーカス */
}

/* カード風のフォームラッパー（テンプレ側で .info-card を使用していない場合用） */
.mw_wp_form .mwf-card{
  background:#fff; border:1px solid #e5e5e5; border-radius:var(--mwf-radius);
  box-shadow: var(--shadow); padding: clamp(16px, 2.8vw, 24px);
}

/* セクション見出し */
.mw_wp_form h2, .mw_wp_form h3{
  color: var(--primary); margin: .2rem 0 .8rem; font-weight: 800;
}

/* フィールドの並び */
.mw_wp_form .mwf-grid{
  display:grid; gap: var(--mwf-gap-lg);
  grid-template-columns: 1fr 1fr;
}
.mw_wp_form .mwf-row{ display:flex; flex-direction:column; gap:.4rem; margin-bottom: 2rem; }
.mw_wp_form .mwf-row.full{ grid-column:1 / -1 } /* 横幅いっぱい */

/* ラベル */
.mw_wp_form .mwf-label{
  font-weight:700; color:#D76217; display:flex; align-items:center; gap:.4rem;
}
.mw_wp_form .mwf-required{
  display:inline-block; font-size:.78rem; background:var(--accent);
  color:#000; padding:.15rem .5rem; border-radius:999px;
}

/* 入力共通 */
.mw_wp_form input[type="text"],
.mw_wp_form input[type="email"],
.mw_wp_form input[type="url"],
.mw_wp_form input[type="number"],
.mw_wp_form textarea,
.mw_wp_form select{
  width:100%;
  border: var(--mwf-border);
  border-radius:10px;
  padding:.9rem 1rem;
  background:#fff;
  color:var(--text);
  font: inherit;
  transition: box-shadow .15s, border-color .15s, background-color .15s;
}
.your_tel_class{
  width: 28% !important;
}
.mw_wp_form textarea{ min-height: 160px; resize: vertical; }
.mw_wp_form select{ appearance:none; background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px); background-size:6px 6px; background-repeat:no-repeat; }

/* フォーカス */
.mw_wp_form input:focus,
.mw_wp_form textarea:focus,
.mw_wp_form select:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--mwf-focus);
}

/* ラジオ／チェック */
.mw_wp_form .mwform-radio-field,
.mw_wp_form .mwform-checkbox-field{
  display:flex; flex-wrap:wrap; gap:.5rem 1rem;
}
.mw_wp_form .mwform-radio-field label,
.mw_wp_form .mwform-checkbox-field label{
  display:flex; align-items:center; gap:.45rem; cursor:pointer;
}
.mw_wp_form input[type="radio"],
.mw_wp_form input[type="checkbox"]{
  inline-size:1.05rem; block-size:1.05rem; accent-color: var(--primary);
}

/* エラーメッセージ */
.mw_wp_form .error,
.mw_wp_form .mwform-error {
  color:#c0392b; font-weight:700; margin-top:.2rem;
}
.mw_wp_form .has-error input,
.mw_wp_form .has-error textarea,
.mw_wp_form .has-error select{
  border-color:#c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,.15);
}

/* 説明文・注記 */
.mw_wp_form .mwf-note{ color:#666; font-size:.92rem; margin:.2rem 0 0 }

/* ボタン行 */
.mw_wp_form .mwf-actions{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:center;
  margin-top: .8rem;
}
.mw_wp_form .mwf-actions .btn{ min-width: 220px }
.mw_wp_form input[type="submit"],
.mw_wp_form button[type="submit"]{
  /* .btn を使っていない場合でも綺麗に */
  display:inline-block; padding:.9rem 1.2rem; border-radius:999px;
  font-weight:700; background:var(--primary); color:#fff; border:none; cursor:pointer;
  transition: transform .15s, opacity .15s;
}
.mw_wp_form input[type="submit"]:hover,
.mw_wp_form button[type="submit"]:hover{ opacity:.92 }
.mw_wp_form input[type="submit"]:active,
.mw_wp_form button[type="submit"]:active{ transform: translateY(1px) }

/* 送信後メッセージ（完了画面用） */
.mw_wp_form .form-complete{
  background:#fff; border:1px solid #e5e5e5; border-radius:12px;
  box-shadow: var(--shadow); padding: clamp(18px, 3vw, 26px);
  text-align:center;
}
.mw_wp_form .form-complete h2{ color:#D76217; margin:.2rem 0 .6rem }

/* 確認画面の見た目（MW WP Formの確認画面時） */
.mw_wp_form .confirm-table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border:1px solid #eee; border-radius:12px;
}
.mw_wp_form .confirm-table th,
.mw_wp_form .confirm-table td{
  padding:.9rem 1rem; border-bottom:1px solid #f0f0f0; vertical-align:top;
}
.mw_wp_form .confirm-table th{
  width:28%; background:#fafafa; color:#555; font-weight:700;
}
.mw_wp_form .confirm-table tr:last-child th,
.mw_wp_form .confirm-table tr:last-child td{ border-bottom:none }

/* レイアウト（SP） */
@media (max-width:900px){
  .mw_wp_form .mwf-grid{ grid-template-columns:1fr }
  .mw_wp_form .mwf-actions .btn{ width:100% }
}

/* 微アニメーション（任意） */
.mw_wp_form .mwf-appear{
  animation: mwfFade .28s ease both;
}
@keyframes mwfFade{
  from{ opacity:0; transform: translateY(6px) }
  to{ opacity:1; transform: none }
}

/*お問い合わせページ*/
.inq_header {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}
.inq_header_pop {
  font-size: 20px;
  font-weight: 600;
  color: #D76217;
}
.inq_header_dop {
text-decoration: underline;
}
.inq_header_1 {
padding-right: 20px;
border-right: #333 solid 2px;
}
.inq_header_2 {
  padding-left: 20px;
padding-right: 20px;
border-right: #333 solid 2px;
}
.inq_header_3 {
  padding-left: 20px;
}
.inq_nav {
  color: #333;
}
.inq_nav:hover {
  color: #CC4444;
}

@media (max-width:900px){
.inq_header {
  display: flex;
  flex-direction: column;
}
.inq_header_1 {
padding-right: 0px;
border-right: none;
padding-bottom: 10px;
/* border-bottom: #333 solid 2px; */
}
.inq_header_2 {
  padding-left: 0px;
padding-right: 0px;
border-right: none;
padding-top: 10px;
padding-bottom: 10px;
/* border-bottom: #333 solid 2px; */
}
.inq_header_3 {
  padding-left: 0px;
  padding-top: 10px;
}

}