/* v2.3.67 | app.css | 統合CSS（basic + style + app） | 2026-03-31 */
/* 適用順: basic → style → app（後優先） */
@charset "UTF-8";

/* ============================================================
   § 1  basic.css ― リセット・基本スタイル
   ============================================================ */

*,*::before,*::after{
margin:0;
padding:0;
box-sizing:border-box}:where([hidden]:not([hidden='until-found'])) {
display:none!important}:where(html) {
-webkit-text-size-adjust:none;
color-scheme:dark light;
tab-size:2;
scrollbar-gutter:stable}:where(html:has(dialog:modal[open])) {
overflow:clip}:where(body) {
line-height:1.5;
font-family:system-ui,sans-serif;
-webkit-font-smoothing:antialiased}:where(button) {
all:unset}:where(input,
button,
textarea,
select) {
font:inherit;
color:inherit}:where(textarea) {
resize:vertical;
resize:block}:where(button,
label,
select,
summary,
[role='button'],
[role='option']) {
cursor:pointer}:where(:disabled) {
cursor:not-allowed}:where(label:has(>input:disabled),
label:has(+input:disabled)) {
cursor:not-allowed}:where(a) {
color:inherit;
text-underline-offset:.2ex}:where(ul,
ol) {
list-style:none}:where(img,
svg,
video,
canvas,
audio,
iframe,
embed,
object) {
display:block}:where(img,
picture,
svg,
video) {
max-inline-size:100%;
block-size:auto}:where(p,
h1,
h2,
h3,
h4,
h5,
h6) {
overflow-wrap:break-word}:where(h1,
h2,
h3) {
line-height:calc(1em + 0.5rem);
text-wrap:balance}:where(hr) {
border:none;
border-block-start:1px solid;
color:inherit;
block-size:0;
overflow:visible}:where(dialog) {
border:none;
background:none;
inset:unset;
max-width:unset;
max-height:unset}:where(dialog:not([open])) {
display:none!important}:where(:focus-visible) {
outline:none;
outline-offset:1px}:where(:focus-visible,
:target) {
scroll-margin-block:8vh}:active)) {
clip-path:inset(50%)!important;
height:1px!important;
width:1px!important;
overflow:hidden!important;
position:absolute!important;
white-space:nowrap!important;
border:0!important
}

/*-----------------------------------------------------------------------------*/

  a:active {color: rgba(55, 55, 55, 1);}

  a:focus {outline: none;}

  a {
  outline: none;
  text-decoration: none;
}

  ul {padding-left: 0;}

  li {list-style: none;}

  img,
svg {
  width: 100%;
  height: auto;
}

.font_little_larger {
  font-size: 125%;
}

/*Form Design*/
/*-----------------------------------------------------------------------------*/

.biginput {
  width: 10.4em;
  height: 2.4em;
  margin: 0.125rem auto;
  padding: 0.2em;
  color: rgba(244,244,244,1);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 1.31rem;
  background-color: rgba(10,70,10,1);
  border: none;
  border-radius: 0.4rem;
}

  input:focus,
select:focus,
textarea:focus {
  background-color: rgba(10,70,10,1);
}

  input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgba(244,244,244,1);
  -webkit-box-shadow: 0 0 0 40rem rgba(10,70,10,1) inset;
          box-shadow: 0 0 0 40rem rgba(10,70,10,1) inset;
}

/*Effect*/
/*-----------------------------------------------------------------------------*/

.element-under {/*下線*/
  text-decoration: underline;
}

/*animation*/
/*-----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------*/

  

@keyframes half_swing {
  20% {
  -webkit-transform: rotate(7.5deg);
          transform: rotate(7.5deg);
}
  40% {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
  60% {
  -webkit-transform: rotate(2.5deg);
          transform: rotate(2.5deg);
}
  80% {
  -webkit-transform: rotate(-2.5deg);
          transform: rotate(-2.5deg);
}
  100% {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
}

/*-----------------------------------------------------------------------------*/

  

@keyframes bounce {
  0% {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}
  50% {
  -webkit-transform: translateY(0.38rem);
          transform: translateY(0.38rem);
}
}

/*-----------------------------------------------------------------------------*/

  

@keyframes spinZ {
  0% {
  -webkit-transform: rotateZ(360deg);
          transform: rotateZ(360deg);
}
  100% {
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
}
}

/*-----------------------------------------------------------------------------*/
/* ""Section"" appearing animation */
/*animate--fadeSlideInUp*/
/*animate--fadeSlideInRight*/
/*animate--fadeSlideInDown*/
/*animate--fadeSlideInLeft*/
/*-----------------------------------------------------------------------------*/

  

@keyframes animate--fadeIn {
  0% {
  opacity: 0;
}
  50% {
  opacity: 1;
}
}

  

@keyframes animate--slideInUp {
  0% {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
}

  

@keyframes animate--slideInRight {
  0% {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
}

  

@keyframes animate--slideInDown {
  0% {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
}

  

@keyframes animate--slideInLeft {
  0% {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
}

.section.active:not(.section-has-slide) .animate--fadeSlideInUp,
.section.active:not(.section-has-slide) .animate--fadeSlideInRight,
.section.active:not(.section-has-slide) .animate--fadeSlideInDown,
.section.active:not(.section-has-slide) .animate--fadeSlideInLeft,
.section.active.section-has-slide .slide.active .animate--fadeSlideInUp,
.section.active.section-has-slide .slide.active .animate--fadeSlideInRight,
.section.active.section-has-slide .slide.active .animate--fadeSlideInDown,
.section.active.section-has-slide .slide.active .animate--fadeSlideInLeft {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.section.active:not(.section-has-slide) .animate--fadeSlideInUp,
.section.active.section-has-slide .slide.active .animate--fadeSlideInUp {
  -webkit-animation-name: animate--fadeIn, animate--slideInUp;
          animation-name: animate--fadeIn, animate--slideInUp;
}

.section.active:not(.section-has-slide) .animate--fadeSlideInRight,
.section.active.section-has-slide .slide.active .animate--fadeSlideInRight {
  -webkit-animation-name: animate--fadeIn, animate--slideInRight;
          animation-name: animate--fadeIn, animate--slideInRight;
}

.section.active:not(.section-has-slide) .animate--fadeSlideInDown,
.section.active.section-has-slide .slide.active .animate--fadeSlideInDown {
  -webkit-animation-name: animate--fadeIn, animate--slideInDown;
          animation-name: animate--fadeIn, animate--slideInDown;
}

.section.active:not(.section-has-slide) .animate--fadeSlideInLeft,
.section.active.section-has-slide .slide.active .animate--fadeSlideInLeft {
  -webkit-animation-name: animate--fadeIn, animate--slideInLeft;
          animation-name: animate--fadeIn, animate--slideInLeft;
}

/*-----------------------------------------------------------------------------*/

/* ============================================================
   § 2  style.css ― CSS変数・サイト共通コンポーネント
   ============================================================ */

:root {
  --Responsive_V: 6.75rem;
  --Responsive_H: 5.25rem;

  --light-blue: rgba(101,216,255,1);
  --primary-light: rgba(138,189,255,1);
  --primary: rgba(116,164,231,1);
  --primary-dark: rgba(116,118,231,1);

  --white: rgba(244,244,244,1);
  --greyLight-1: #e4ebF5;
  --greyLight-2: #c8d0e7;
  --greyLight-3: #bec8e4;
  --greyDark: #9baacf;
  --black: rgba(55,55,55,1);

  --red: rgba(230,0,18,1);
  --pink: rgba(238,130,238,1);
  --green: rgba(0,185,1,1);
  --orange: rgba(255,216,18,1);
  --orange2: rgba(255,164,28,1);
  --yellow: rgba(244,244,0,1);
}

/*-----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------*/

.footer {
  position: absolute;
  width: calc(95lvw - 4rem);
  height: max(1.25rem, 30px);
  margin-top: calc(100lvh - 2.25rem);
  margin-left: 2.5lvw;
  padding: 0;
  font-size: max(0.5rem, 13px);
  line-height: 1;
  text-align: center;
  font-weight: 900;
  z-index: 2;
}

/*横長の場合*/

/*-----------------------------------------------------------------------------*/

/*横長の場合*/

  /*横長の場合*/

/*NEWS Swiper*/
/*-----------------------------------------------------------------------------*/

/*横長の場合*/

/*Hamburger*/
/*-----------------------------------------------------------------------------*/

  /* マウスホバー時の背景画像 */

/*横長の場合*/

/*NAV*/
/*-----------------------------------------------------------------------------*/

.ham-menu.on ul {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

  /*横長の場合*/

  /*横長の場合*/

@keyframes gradationAnim {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

/*Orders and Cart*/
/*-----------------------------------------------------------------------------*/

.cart__button.is-active {
  background-color: var(--green);
  background-image: url(../img/maid_images/maid_0001_1.jpg);
  -webkit-transform: scale(1.5);
      -ms-transform: scale(1.5);
          transform: scale(1.5);
}

.Flying_buttons.is-active {
  background-color: var(--green);
  -webkit-filter: drop-shadow(0.25rem 0.25rem 0.25rem rgba(0,0,0,0.75));
          filter: drop-shadow(0.25rem 0.25rem 0.25rem rgba(0,0,0,0.75));
}

/*Address card*/
/*-----------------------------------------------------------------------------*/

/* */
/*-----------------------------------------------------------------------------*/

  /*横長の場合*/

/*fullpage.js*/
/*-----------------------------------------------------------------------------*/

#fullpage {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-size: 1em;
  color: var(--black);
  z-index: 0;
}

/*Section*/
/*-----------------------------------------------------------------------------*/

.section {
  min-height: 68.5vh;
  margin-top: 4rem;
  text-align: center;
  font-size: 1em;
  -webkit-filter: drop-shadow(0.125em 0.125em 0.5em var(--greyLight-2));
          filter: drop-shadow(0.125em 0.125em 0.5em var(--greyLight-2));
}

/*横長の場合*/

.section-background {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  height: 68.5vh;
  max-height: 68.5vh;
  min-height: 68.5vh;
  padding: 1vmin;
  border-radius: 0.5rem;
  outline: 0.25rem solid var(--primary-dark);
  outline-offset: -0.25rem;
  border: none;
  overflow: hidden;
}

  /*横長の場合*/

/*-----------------------------------------------------------------------------*/

.section .panel {
  flex: 1 1;
  display: inline-block;
  position: relative;
  height: var(--Responsive_V);
  margin: 0;
  color: var(--white);
  background-color: transparent;
  -webkit-filter: drop-shadow(0.125em 0.125em 0.5em var(--greyLight-2));
          filter: drop-shadow(0.125em 0.125em 0.5em var(--greyLight-2));
  overflow: hidden;
}

.section .panel:nth-child(1) {
  flex-basis: 100%;
  width: calc(95lvw - 1rem);
  height: 6rem;
}

.section .panel:nth-child(2) {
  flex-basis: calc(var(--Responsive_V) *2);
  height: 5.25rem;
}

.section .panel:nth-child(3) {
  flex-basis: calc(var(--Responsive_V) *2);
  height: 5.25rem;
}

.section .panel:nth-child(4) {
  flex-basis: calc(var(--Responsive_V) *2);
  height: 5.25rem;
}

.section .panel:nth-child(5) {
  flex-basis: 100%;
  width: calc(95lvw - 1rem);
  height: 5rem;
}

/*横長の場合*/

/*-----------------------------------------------------------------------------*/

.section .search_result .panel:nth-child(1) {
  flex-basis: 100%;
  width: calc(95lvw - 1rem);
  height: 6rem;
  background-color: var(--primary-dark);
}

.section .search_result .panel:nth-child(2) {
  flex-basis: calc(var(--Responsive_V) *2);
  height: 4rem;
  background-color: var(--greyLight-1);
}

.section .search_result .panel:nth-child(3) {
  flex-basis: calc(var(--Responsive_V) *2);
  height: 4rem;
  background-color: var(--greyLight-1);
}

.section .search_result .panel:nth-child(4) {
  flex-basis: calc(var(--Responsive_V) *2);
  height: 4rem;
  /*background-image: url(../img/projectschedulemanagement.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;*/
}

.section .search_result .panel:nth-child(5) {
  flex-basis: 100%;
  width: calc(95lvw - 1rem);
  height: 6.5rem;
  overflow: visible;
}

/*-----------------------------------------------------------------------------*/

  /*横長の場合*/

/*-----------------------------------------------------------------------------*/

/*Text Scroll & Text Box*/
/*-----------------------------------------------------------------------------*/

/*Primary-buttons*/
/*-----------------------------------------------------------------------------*/

  /*横長の場合*/

.section .Primary-buttons {
  display: flex;
  justify-self: center;
  align-items: center;
  justify-content: center;
  width: 62%;
  height: 3em;
  border-radius: 0.5rem;
  transition: 0.3s ease;
  cursor: pointer;
}

.section .branch-buttons {
  display: flex;
  justify-self: center;
  align-items: center;
  justify-content: center;
  width: calc(100% - 1rem);
  height: 3em;
  margin-left: 0.5rem;
  background-color: var(--primary-light);
  border-radius: 0.5rem;
  transition: 0.3s ease;
  cursor: pointer;
}

/*-----------------------------------------------------------------------------*/

.keep-all-break-word {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.keep-all-break-word img {
  width: 0.9em;
  height: 0.9em;
  margin-top: 0.3em;
  margin-right: 0.3em;
}

/*-----------------------------------------------------------------------------*/

/*Form Design*/
/*-----------------------------------------------------------------------------*/

  /*  SEARCH  */
.panel .search {
  width: 100%;
  margin: 0 auto;/*Centering*/
  font-size: 1rem;
}

  /*横長の場合*/

/*Progress bar*/
/*-----------------------------------------------------------------------------*/

/*Img scroll*/
/*-----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------*/

/* トグルボタンのスタイル */

        /* マウスホバー時の背景画像 */
      

/* VIDEO */
/*-----------------------------------------------------------------------------*/

/*Calendar*/
/*-----------------------------------------------------------------------------*/

.day .date {
  color: var(--black);
  font-size: min(1em, 14px);
  font-weight: bold;
}

  /*横長の場合*/

  /* 小さい画面でも7列表示を維持 */

  /*横長の場合*/

.day .date {
  font-size: 1.2em; /* サイズ調整 */
  font-weight: bold;
}

  /* 小さい画面でも7列表示を維持 */

/*Profile*/
/*-----------------------------------------------------------------------------*/

  /* 高さを縦画面で明示的に 1/2 に制限 */

  /* 横画面では高さ制限解除し、均等幅で横並び */

  h2 {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  font-weight: bold;
}

  input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.3rem;
}

.social-button {
  display: flex;
  align-items: center;
  margin-bottom: 0.4rem;
  padding: 0.62rem;
  font-size: 1rem;
  font-weight: bold;
  background: rgba(255,255,255,1);
  border: 1px solid #ccc;
  border-radius: 0.3rem;
  cursor: pointer;
}

.social-button img {
  width: 1.62rem;
  height: 1.62rem;
  margin-right: 0.5rem;
}

.social-line { border-color: rgba(6,199,85,1); }

/*-----------------------------------------------------------------------------*/

  form {
  width: 90%;
  max-width: 500px;
}

  

  form #debt-amount-slider {
  display: flex;
  flex-direction: row;
  align-content: stretch;
  position: relative;
  width: 100%;
  height: 50px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

  form #debt-amount-slider::before {
  content: " ";
  position: absolute;
  height: 2px;
  width: 100%;
  width: calc(100% * (4 / 5));
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
}

  form #debt-amount-slider input,
form #debt-amount-slider label {
  box-sizing: border-box;
  flex: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}

  form #debt-amount-slider label {
  display: inline-block;
  position: relative;
  width: 20%;
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

  form #debt-amount-slider label::before {
  content: attr(data-debt-amount);
  position: absolute;
  left: 50%;
  padding-top: 10px;
  transform: translate(-50%, 45px);
  font-size: 14px;
  letter-spacing: 0.4px;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0.85;
  transition: all 0.15s ease-in-out;
}

  form #debt-amount-slider label::after {
  content: " ";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.5em;
  height: 1.5em;
  border: 2px solid #000;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 1;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

  form #debt-amount-slider label:hover::after {
  transform: translate(-50%, -50%) scale(1.25);
}

  form #debt-amount-slider input {
  display: none;
}

  form #debt-amount-slider input:checked + label::before {
  font-weight: 800;
  opacity: 1;
}

  form #debt-amount-slider input:checked + label::after {
  border-width: 4px;
  transform: translate(-50%, -50%) scale(1.62);
}

  form #debt-amount-slider input:checked ~ #debt-amount-pos {
  opacity: 1;
}

  form #debt-amount-slider input:checked:nth-child(1) ~ #debt-amount-pos {
  left: 12.5%;
}

  form #debt-amount-slider input:checked:nth-child(3) ~ #debt-amount-pos {
  left: 37.5%;
}

  form #debt-amount-slider input:checked:nth-child(5) ~ #debt-amount-pos {
  left: 62.5%;
}

  form #debt-amount-slider input:checked:nth-child(7) ~ #debt-amount-pos {
  left: 87.5%;
}

  form #debt-amount-slider #debt-amount-pos {
  display: block;
  position: absolute;
  top: 50%;
  width: 1.25em;
  height: 1.25em;
  background: #000;
  border-radius: 50%;
  transition: all 0.15s ease-in-out;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  opacity: 0;
  z-index: 2;
}

/*-----------------------------------------------------------------------------*/

/* ============================================================
   § 3  app.css ― platform固有スタイル（最優先）
   ============================================================ */

/* =========================================
   Base / Root
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');

:where(html:has(dialog:modal[open])){
  overflow:clip
}

:where(body) {
  line-height:1.5;
  font-family:system-ui,sans-serif;
  -webkit-font-smoothing:antialiased
}
:where(button) {
  all:unset
}
:where(input,
button,
textarea,
select) {
  font:inherit;
  color:inherit
}
:where(textarea) {
  resize:vertical;
  resize:block
}
:where(button,
label,
select,
summary,
[role='button'],
[role='option']) {
  cursor:pointer
}
:where(:disabled) {
  cursor:not-allowed
}
:where(label:has(>input:disabled),
label:has(+input:disabled)) {
  cursor:not-allowed
}
:where(a) {
  color:inherit;
  text-underline-offset:.2ex
}
:where(ul,
ol) {
  list-style:none
}
:where(img,
svg,
video,
canvas,
audio,
iframe,
embed,
object) {
  display:block
}
:where(img,
picture,
svg,
video) {
  max-inline-size:100%;
  block-size:auto
}
:where(p,
h1,
h2,
h3,
h4,
h5,
h6) {
  overflow-wrap:break-word
}
:where(h1,
h2,
h3) {
  line-height:calc(1em + 0.5rem);
  text-wrap:balance
}
:where(hr) {
  border:none;
  border-block-start:1px solid;
  color:inherit;
  block-size:0;
  overflow:visible
}
:where(dialog) {
  border:none;
  background:none;
  inset:unset;
  max-width:unset;
  max-height:unset
}
:where(dialog:not([open])) {
  display:none!important
}
:where(:focus-visible) {
  outline:none;
  outline-offset:1px
}
:where(:focus-visible,
:target) {
  scroll-margin-block:8vh
}
:active)) {
  clip-path:inset(50%)!important;
  height:1px!important;
  width:1px!important;
  overflow:hidden!important;
  position:absolute!important;
  white-space:nowrap!important;
  border:0!important
}

:root {
  --control-min-height: 2rem;

  --light-blue: rgba(101,216,255,1);
  --primary-light: rgba(138,189,255,1);
  --primary: rgba(116,164,231,1);
  --primary-dark: rgba(116,118,231,1);

  --white: rgba(244,244,244,1);
  --greyLight-1: #e4ebF5;
  --greyLight-2: #c8d0e7;
  --greyLight-3: #bec8e4;
  --greyDark: #9baacf;
  --black: rgba(55,55,55,1);

  --red: rgba(230,0,18,1);
  --pink: rgba(238,130,238,1);
  --green: rgba(0,185,1,1);
  --orange: rgba(255,216,18,1);
  --orange2: rgba(255,164,28,1);
  --yellow: rgba(244,244,0,1);
}

/* =========================================
   HTML / BODY
   ========================================= */

html {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-size: clamp(16px, 2.5lvh, 32px);
  scroll-behavior: smooth;
  cursor: url(../img/cursor.svg), auto;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-size: 0.62rem;
  font-family:
    "Zen Maru Gothic",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    "Helvetica Neue",
    Arial,
    sans-serif;
  line-height: 1.38;
  font-weight: 400;
  color: rgba(55,55,55,1);
  background-color: rgba(244,244,244,1);
  background-image: url(../img/ohana.jpg);
  background-size: 250px;
  background-repeat: repeat;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Debug */
/*body * {
  outline: 1px solid rgba(255,0,0,0.15);
}*/

/* =========================================
   メインコンテナ
   ========================================= */

/* header 全体：ロゴ行とメニュー行を縦に並べる */
header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 62.5rem;
  margin: 0 auto;
  padding: 0;
  color: rgba(55,55,55,1);
  background-color: transparent;
  overflow-x: clip;
  overflow-y: visible;
}

.main-container {
  width: 100%;
  flex: 1 0 auto;
  height: calc(100lvh - 8.5rem);
  max-width: 62.5rem;
  min-width: 0;
  margin:0 auto;
  padding: 0;
  padding-top: 0;
}

.step {
  height: calc(100lvh - 9.5rem);
  padding: 0.5rem;
}

/* 共通 A/B 枠レイアウト */
.step-layout-01 .step-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  height: calc(100lvh - 10rem);
  min-height: 14rem;
  margin-top: 0;
}

.caption_area {
  position: relative;
  width: 100%;

  margin: 0 auto;
  text-align: center;
}

/* =========================================
   Header top (logo + bulletin) overflow fix
   - Keep: PC horizontal
   - Keep: Mobile stacks naturally if narrow
   ========================================= */
.site-header-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  height: 7vh;
  min-height: 7vh;
  max-height: 7vh;
  margin: 0;
  padding: 0 0.5rem;
  box-sizing: border-box;
}

/* =========================================
   Footer
   ========================================= */

.footer {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 62.5rem;
  height: 0.5rem;
  margin: 0 auto;
  margin-top: 0;
  text-align: center;
  font-size: 0.4rem;
  background-color: rgba(244,244,244,1);
  z-index: 2;

}

/* ===============================
   Header ＋ ナビ（2段構成）
   =============================== */

/* 上下共通 nav 行 */
.nav {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0.55rem;
  background: transparent;
}

/* 2行目：メニューバー全体 */
.header-menu-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 7vh;
  min-height: 7vh;
  max-height: 7vh;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
}

/* ◀▶スワイプ示唆マーク */
.swipe-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;  /* 親の高さ7vhに合わせる */
  width: 1.2rem;
  pointer-events: none;
  z-index: 200002;
  animation: swipe-hint 2.4s ease-in-out infinite;
  animation-delay: 0s;
}
.swipe-hint::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
}
.swipe-hint--left::after {
  border-top: 0.7rem solid transparent;
  border-bottom: 0.7rem solid transparent;
  border-right: 0.9rem solid rgba(255,255,255,1);
}
.swipe-hint--right::after {
  border-top: 0.7rem solid transparent;
  border-bottom: 0.7rem solid transparent;
  border-left: 0.9rem solid rgba(255,255,255,1);
}
@keyframes swipe-hint {
  0%,100% { opacity: 0.6; }
  50%      { opacity: 1.0; }
}

/* アバター */
.header-menu-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-menu-avatar img.avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}

/* 左右矢印 */
.header-menu-arrow {
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1;
  background-color: rgba(255,216,18,1);
  border: none;
  cursor: pointer;
}

/* 真ん中：Splide ビューポート */
.header-menu-carousel {
  flex: 1 1 auto;
  padding: 6px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

/* Splide リストを横並び */
.header-menu-carousel .splide__track {
  overflow: hidden;
}
.header-menu-carousel .splide__list {
  display: flex;
  flex-wrap: nowrap;
}
.header-menu-carousel .splide__slide {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  height: 7vh !important;
}

/* 各メニューのボタン */
.header-menu-item-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  width: 100%;
  background-color: rgba(244,244,244,1);
  cursor: pointer;
  font: inherit;
  font-size: 0;
  white-space: nowrap;
  user-select: none;
  transition: background 0.15s, color 0.15s;
  position: relative;
  z-index: 200001;
  pointer-events: auto;
  border-radius: 0.3rem;
}

.header-menu-item-btn.is-active {
  background-color: rgba(40,100,180,1);
  color: rgba(255,255,255,1);
  font-weight: bold;
}

/* =========================================
   Header / Avatar（ロゴ側）
   ========================================= */

#logo_img {
  height: 7vh;
  width: auto;
  max-height: 7vh;
  max-width: 12rem;
  margin: 0;
  float: none;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

/* Avatar editor */

.sum-avatar-img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(244,244,244,1);
}

/* =========================================
   Form 基本（入力欄）
   ========================================= */

.readonly-input,
input.readonly-input {
  display: flex;
  align-items: center;
  min-height: var(--control-min-height);
  padding: 0 0.6em;
  color: rgba(55,55,55,1);
  background-color: rgba(244,244,244,1);
  border-radius: 0.3rem;
  border: 1px solid rgba(55,55,55,1);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
  width: 100%;
  max-width: 100%;
  min-height: var(--control-min-height);
  margin: 0.125rem 0;
  padding: 0.2em 0.5em;
  box-sizing: border-box;
  font-size: 0.81rem;
  color: rgba(244,244,244,1);
  background-color: rgba(10,70,10,1); /* 黒板グリーン */
  border: none;
  border-radius: 0.3rem;
  border: 6px solid rgba(55,55,55,1);
  box-shadow: inset 0.2rem 0.2rem 0.81rem rgba(0,0,0,1);
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
.readonly-input,
.mp-address-line,
.mp-address-prefcity,
.mp-search-input {
  background-image: url('../img/pencil_2.svg');
  background-repeat: no-repeat;
  background-position: 0.3em center;
  background-size: 1em;
  padding-left: 1.5em;
}

/* STEP7 map_picker ラベル文字色（マクラ上） */
.mp-wrap label,
.mp-fields label {
  color: rgba(16,16,16,1);
}

.no-shadow input[type="text"] {
  box-shadow: inset 0 0 0 rgba(0,0,0,0);
}

input[name="password"] {
  width: 50%;
}

input[name="phone"],
input[name="tel"],
input[name*="phone"] {
  width: 14ch;
}

input[name="email"],
input[type="email"] {
  max-width: 32ch;
}

input[name*="address"],
input[name="address"] {
  max-width: 48rem;
  width: 100%;
  font-size: 0.62rem;
}

input:focus,
select:focus,
textarea:focus {
  background-color: rgba(10,70,10,1);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgba(244,244,244,1);
  -webkit-box-shadow: 0 0 0 40rem rgba(10,70,10,1) inset;
          box-shadow: 0 0 0 40rem rgba(10,70,10,1) inset;
}

/* =========================================
   ボタン 基本構造＆高さ統一
   ========================================= */

button[type="button"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: var(--control-min-height);
  padding: 0;
  font-weight: 600;
  border-radius: 0.3rem;
  border: 1px solid rgba(55,55,55,1);
  cursor: pointer;
}

.primary-btn button[type="button"],
.primary-btn button[type="submit"] {
  border: 6px solid rgba(255,255,255,1);
}

.btn-back img,
.btn-next img,
.btn-junction img,
.mp-mic img {
  width: 1em;
  height: 1em;
}

.btn-back {
  color: rgba(55,55,55,1);
  background-color: rgba(238,130,238,1);
}

.btn-next {
  color: rgba(55,55,55,1);
  background-image: linear-gradient(90deg, rgba(101,216,255,1) 0%, rgba(116,164,231,1) 50%, rgba(101,216,255,1) 100%);
  background-position: 0% 0%;
  background-size: 3000px 100%;
  animation: Grad 2.5s linear infinite;
  animation-delay:0.5s;
}

@keyframes Grad {
  0% { background-position: 0 0%; }
  100% { background-position: 3000px 0%; }
}

.btn-junction {
  color: rgba(55,55,55,1);
  background-color: rgba(255,216,18,1);
}

/* =========================================
   PW / MAP / Mic 行
   ========================================= */

.pw-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem;
  align-items: center;
}

.mp-map {
  width: 100%;
  height: 14rem;   /* 入力欄1つ分拡張（+3rem） */
  margin-bottom: 0.5rem;
  background-color: rgba(244,244,244,1);
  border-radius: 0.3rem;
  border: 1px solid rgba(55,55,55,1);
  overflow: hidden;
}

/* pw-wrap内inputは独立したスタイルを持つ（mic系と混在させない） */
.pw-wrap .pw-toggle-btn {
  color: rgba(244,244,244,1);
  background-color: rgba(55,55,55,1);
  border: 6px solid rgba(55,55,55,1);
  box-shadow: inset 0.2rem 0.2rem 0.81rem rgba(0,0,0,1);
}

.dob-voice-btn,
.mp-mic {
  color: rgba(244,244,244,1);
  background: transparent;
  border: none;
  box-shadow: none;
}

.dob-voice-btn,
.mp-mic {
  background-image: none;
  background-size: auto;
  background-repeat: no-repeat;
}

.dob-voice-btn img,
.mp-mic img {
  width: 2.4rem;
  height: 2.4rem;
  display: block;
}

/* mic-wrap: ボタン+バーSVGの縦並びラッパー */

.mic-bar-svg {
  display: block;
  width: 64px;
  height: 8px;
  overflow: visible;
}

/* 外国人モードトグル */
.foreigner-toggle-wrap {
  margin-bottom: 0.75rem;
}

.foreigner-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(16,16,16,1);
  cursor: pointer;
  user-select: none;
}

.foreigner-toggle-label input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  accent-color: rgba(255,216,18,1);
  cursor: pointer;
}

#summaryMap {
  height: 6rem;
  margin-top: -2rem;
}

.mp-coord-label {
  display: none;
}

/* =========================================
   Stepper / Card
   ========================================= */

.step-layout-01 .step-colA,
.step-layout-01 .step-colB {
  display: flex;
}

.step-layout-01 .step-col-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.5rem;
}

.step-layout-01 .step-col-inner-right {
  align-items: stretch;
}

ol.stepper {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  min-width: 306px;
  max-width: 1632px;
  gap: 0;
}

ol.stepper li {
  /* 横10%（100/10）の均等ボックス */
  flex: 0 0 10%;
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 「あだな」「誕生日」3文字が収まる最大padding確保 */
  padding: 2px 1px;
  /* clampで小画面でも3文字が収まるフォントサイズ */
  font-size: clamp(0.42rem, 2vw, 0.68rem);
  font-weight: 600;
  color: #334155;
  background-color: #e5e7eb;
  cursor: pointer;
  user-select: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  border-right: 1px solid rgba(200,200,200,0.5);
  line-height: 1.2;
}

ol.stepper li:last-child {
  border-right: none;
}

.stepper li.on,
ol.stepper li.on {
  color: rgba(244,244,244,1) !important;
  background-color: rgba(101,216,255,1) !important;
}

.stepper li.on > a,
.stepper a.on {
  color: rgba(244,244,244,1) !important;
}

/* section.step[hidden] 削除済み */

/* =========================================
   DOB（生年月日）ダイヤル
   ========================================= */

.text-error { color: #b91c1c; }

.is-hidden { display: none; }

.note-box {
  margin-top: -0.5rem;
  padding: 0.75rem;
  line-height: 1.6;
  background-color: rgba(244,244,244,1);
  border-radius: 0.3rem;
}

.note-muted {
  padding: 1rem;
  font-size: 0.9rem;
  color: #64748b;
}

.note-danger {
  padding: 1rem;
  font-size: 0.9rem;
  color: #dc2626;
}

/* モーダル */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(244,244,244,0.81);
}

.modal-panel-sm,
.modal-panel-md {
  position: fixed !important;
  width: calc(100% - 1rem);
  max-width: 62.5rem;
  margin: 0 !important;
  padding: 1.125rem;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: rgba(55,55,55,1);
  background-color: rgba(244,244,244,1);
  background-image: url(../img/caution_back.jpg);
  background-size: 500px;
  background-repeat: repeat;
  border-radius: 0.3rem;
  z-index: 999 !important;
}

/* =========================================
   高さ79px × 正方形シリーズ + 比率ボタン
   ========================================= */

.btn-next,
.btn-back,
.btn-junction,
.mp-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-min-height);
  min-height: var(--control-min-height);
  padding: 0;
}

.btn-ratio-1-1,
.btn-ratio-1-2,
.btn-ratio-1-3,
.btn-ratio-1-4,
.btn-ratio-1-5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-min-height);
  padding-inline: 0.8em;
}

.btn-ratio-1-1 { width: calc(var(--control-min-height) * 1.5); }
.btn-ratio-1-2 { width: calc(var(--control-min-height) * 2); }
.btn-ratio-1-3 { width: calc(var(--control-min-height) * 3); }
.btn-ratio-1-4 { width: calc(var(--control-min-height) * 4); }
.btn-ratio-1-5 { width: calc(var(--control-min-height) * 5); }

.readonly-locked {
  display: flex;
  align-items: center;
  min-height: var(--control-min-height);
  padding: 0 0.8rem;
  color: rgba(55,55,55,1) !important;
  background-color: rgba(228, 235, 245,1) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0.3rem;
  cursor: default;
}

input.readonly-locked {
  -webkit-appearance: none;
  appearance: none;
}

#pwModalInput {
  flex: 1;
  min-width: 0;
}

/* STEP3 アバター */

.fp-step[data-step="3"] .avatar-preset-block,
.step[data-step="3"] .avatar-preset-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.fp-step[data-step="3"] .preset-carousel-row,
.step[data-step="3"] .preset-carousel-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.3rem;
}

.fp-step[data-step="3"] .preset-carousel-row .arrow-btn,
.step[data-step="3"] .preset-carousel-row .arrow-btn {
  flex: 0 0 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 100%;
  font-size: 1.2rem;
  line-height: 1;
  background-color: rgba(244,244,244,1);
  border: 1px solid rgba(55,55,55,1);
  border-radius: 50%x;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.fp-step[data-step="3"] .preset-carousel-row .arrow-btn:active,
.step[data-step="3"] .preset-carousel-row .arrow-btn:active {
  background-color: rgba(244,244,244,1);
}

.fp-step[data-step="3"] .preset-carousel-row .multi-carousel-viewport,
.step[data-step="3"] .preset-carousel-row .multi-carousel-viewport {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: rgba(255,164,28,1);
  cursor: grab;
}

.fp-step[data-step="3"] .preset-carousel-row .multi-carousel-viewport.is-dragging,
.step[data-step="3"] .preset-carousel-row .multi-carousel-viewport.is-dragging {
  cursor: grabbing;
}

.fp-step[data-step="3"] .preset-carousel-row .multi-carousel-viewport .splide__track,
.step[data-step="3"] .preset-carousel-row .multi-carousel-viewport .splide__track {
  display: flex;
  align-items: center;
  height: 100%;
}

.fp-step[data-step="3"] .preset-carousel-row .multi-carousel-viewport .splide__list,
.step[data-step="3"] .preset-carousel-row .multi-carousel-viewport .splide__list {
  display: flex;
  height: 100%;
}

.fp-step[data-step="3"] .preset-carousel-row .multi-carousel-item.splide__slide,
.step[data-step="3"] .preset-carousel-row .multi-carousel-item.splide__slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.fp-step[data-step="3"] .preset-carousel-row .multi-carousel-item.splide__slide.is-active,
.step[data-step="3"] .preset-carousel-row .multi-carousel-item.splide__slide.is-active {
  transform: scale(1.03);
}
.fp-step[data-step="3"] .preset-carousel-row .multi-carousel-item.splide__slide.is-active .img-container,
.step[data-step="3"] .preset-carousel-row .multi-carousel-item.splide__slide.is-active .img-container {
  box-shadow: 0 0 16px rgba(15,23,42,0.25);
}
.fp-step[data-step="3"] .preset-carousel-row .multi-carousel-item.splide__slide.is-active .avatar-preset-img,
.step[data-step="3"] .preset-carousel-row .multi-carousel-item.splide__slide.is-active .avatar-preset-img {
  transform: scale(1.02);
}

.fp-step[data-step="3"] .img-container,
.step[data-step="3"] .img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  position: relative;
  width: 100%;
  max-width: 260px;
  background-color: rgba(55,55,55,1);
  border-radius: 0.3rem;
  overflow: hidden;
}

.fp-step[data-step="3"] .avatar-preset-img,
.step[data-step="3"] .avatar-preset-img {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease;
  pointer-events: auto;
  object-fit: contain;
  object-position: center center;
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}

.fp-step[data-step="3"] .avatar-index-badge,
.step[data-step="3"] .avatar-index-badge {
  position: absolute;
  padding: 2px 8px;
  right: 8px;
  bottom: 8px;
  font-size: 0.8rem;
  color: rgba(244,244,244,1);
  background-color: rgba(15,23,42,0.9);
  border-radius: 50%;
}

.fp-step[data-step="3"] .multi-carousel-viewport .splide__arrow,
.step[data-step="3"] .multi-carousel-viewport .splide__arrow,
.fp-step[data-step="3"] .multi-carousel-viewport .splide__pagination,
.step[data-step="3"] .multi-carousel-viewport .splide__pagination {
  display: none !important;
}

.fp-step[data-step="3"] .preset-note,
.step[data-step="3"] .preset-note {
  display: none !important;
}

.fp-step[data-step="3"] .preset-apply-row,
.step[data-step="3"] .preset-apply-row {
  display: flex;
  justify-content: center;
  margin-top: 0.25rem;
}

.fp-step[data-step="3"] .preset-apply-btn,
.step[data-step="3"] .preset-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 1.5rem;
  min-height: 1.5rem;
  padding: 0 1rem;
  font-size: 0.85rem;
  border-radius: 50%;
  border-width: 1px;
}

.fp-step[data-step="3"] .avatar-input-block,
.step[data-step="3"] .avatar-input-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* =========================================
   STEPナビ行（戻る / 次へ）
   ========================================= */

.step-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 1em;
  padding: 0;
  border-radius: 0.3rem;
}

.modal-panel-sm .row-gap6-mt4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* =========================================
   STEP6 役割選択モーダル
   ========================================= */

.role-actions-vertical .btn-junction,
.role-actions-vertical .btn-next,
.role-actions-vertical .btn-back {
  justify-content: center;
  width: 100%;
}

/* =========================================
   グローバルローディングオーバーレイ
   ========================================= */

.global-loading-overlay {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background-color: rgba(15,23,42,.55);
  z-index: 9999;
}

.global-loading-overlay.is-active {
  display: flex;
}

.global-loading-panel {
  background-color: rgba(244,244,244,1);
  border-radius: 0.3rem;
  padding: 1rem 1.25rem;
  min-width: 15rem;
  max-width: 20rem;
  text-align: center;
  box-shadow: 0 0.625rem 1.5625rem rgba(15,23,42,.35);
}

.global-loading-percent {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.global-loading-text {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.global-loading-sub {
  font-size: 0.9rem;
  color: #4b5563;
}

/* =========================================
   パスワード行（entrance + profile 共通）
   ========================================= */

.entrance {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-height: 25lvh;
  padding: 0.62rem;
  background-color: rgba(255,255,255,0.38);
  border: 1px solid rgba(55,55,55,1);
  border-radius: 0.3rem;
}

.social-button {
  display: flex;
  align-items: center;
  width: 51%;
  margin-bottom: 1rem;
  padding: 0.62rem;
  font-size: 0.62rem;
  font-weight: 900;
  background-color: rgba(255,255,255,1);
  border: 1px solid rgba(55,55,55,1);
  border-radius: 0.3rem;
  cursor: pointer;
}

.entrance .social-button {
  width: 52%;
  margin-left: 0;
}

.social-button img {
  width: 1.62rem;
  height: 1.62rem;
  margin-right: 0.5rem;
}

.social-line { border-color: rgba(6,199,85,1); }

.step_img_0 {
  background-image: url(../img/step_img_0.png), url(../img/);
  background-size: contain;
  background-position: right, center;
  background-repeat: no-repeat, repeat;
}

.sum-table {
  width: 100%;
  font-size: 0.5rem;
  border-collapse: collapse;
}

tr {
  border-bottom: solid rgba(244,244,244,1);
}

th,
td {
  height: 1rem;
  padding: 0.125rem;
}

th {
  display: table-cell;     /* flexを上書き・テーブルセルとして機能 */
  justify-content: center;
  align-items: center; /* 縦方向の中央揃え */
  min-width: 1rem;
  text-align: center; /* 横方向の中央揃え */
  vertical-align: middle; /* 縦方向の中央揃え */
  color: rgba(244,244,244,1);
  background-color: #2196F3;
  z-index: 2;
}

.thx2 {
  height: 2rem;
}

td {
  min-width: 1rem;
  padding-left: 0.5rem;
  background-color: #c0c9ff;
}

/* =========================================================
   header.php 用 test.php 方式ヘッダーメニュー
   ========================================================= */

/* 左右の < > ボタン：幅 1rem に縮小 */
.arrow-btn {
  flex: 0 0 auto;
  width: 1rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}
.arrow-btn:active {
  transform: scale(0.9);
}

/* アバター */

/* =========================================================
   ① 姓/名（漢字・カナ）: 2カラムグリッドのはみ出し防止
   ========================================================= */

/* 2列グリッド全体が親幅を超えないようにする */
.grid-2col-gap12 {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* ★ これ重要 */
}

/* ラベル内のコンテンツが原因で列が広がらないようにする */
.grid-2col-gap12 label {
  min-width: 0; /* ★ グリッド子要素のはみ出し防止 */
}

/* =========================================================
   ② クリックされた場所の住所（前半/後半）: mp-fields 系
   ========================================================= */

/* フィールドコンテナ自体が親からはみ出さないように */
.mp-fields {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);  /* 1列でも念のため minmax */
}

/* ラベル側も同様に縮められるように */
.mp-fields label {
  min-width: 0;
}

/* 「クリックされた場所の住所（前半）」 */
.mp-address-prefcity.readonly-input.readonly-locked {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 「クリックされた場所の住所（後半）」 */
.mp-address-line {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* =========================================
   Media elements should never overflow horizontally
   ========================================= */
img,
svg,
video,
canvas,
iframe {
  max-width:100%;
  height:auto;
}

/* =========================================================
   v1.06 Hotfix: profile STEP1 / STEP6 right-cut (horizontal overflow)
   - Keep original responsive design (landscape: 2-col, portrait: stacked)
   - Fix only overflow causes (min-width defaults, flex rows, long text)
   ========================================================= */

.step-layout-01 .step-grid,
.step-layout-01 .step-colA,
.step-layout-01 .step-colB,
.step-layout-01 .step-col-inner {
  min-width: 0;
  max-width: 100%;
}

/* Input rows: gridレイアウトで安定化（iOSのflex計算崩れを防ぐ） */
.pw-wrap,
.pw-wrap input[type="text"],
.pw-wrap input[type="email"],
.pw-wrap input[type="tel"],
.pw-wrap input[type="password"],
.pw-wrap input[type="search"],
.pw-wrap textarea {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Summary table / note box: allow breaking long strings (addresses, URLs, etc.) */
.note-box,

/* Safety: ratio buttons may exceed narrow columns; clamp to container */
.btn-ratio-1-1,
.btn-ratio-1-2,
.btn-ratio-1-3,
.btn-ratio-1-4,
.btn-ratio-1-5,
.btn-ratio-1-6 {
  max-width: 100%;
}

/* mic-wrap内のボタンはpx固定（btn-ratioのcalc幅を上書き） */
.mic-wrap .dob-voice-btn,
.mic-wrap .mp-mic {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
}

/* ===============================
   v1.07: profile.php STEP1/4/5/6 layout fixes (no wrap on action rows)
   =============================== */

.sum-table th {
  white-space: nowrap;
}

.sum-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =====================================================
   header.php ONLY: 横並び固定（縦積み禁止）
   - header に header-horizontal-only が付いた時だけ適用
   - 既存のレスポンシブ（STEP画面など）には影響させない
   ===================================================== */

.header-horizontal-only .site-header-top {
  flex-wrap: nowrap;
}

.header-horizontal-only .logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  max-height: 7vh;
}

.header-horizontal-only #logo_img {
  max-width: 12rem;
  width: auto;
}

/* 既存の「狭幅でbulletin_boardを100%にする」指定を上書き */

/* ============================================================
   STEP12: PR(プロンプト) + マイク + AIボタン
   - 入力欄が横幅を吸収し、マイクボタンは崩れない
============================================================ */
.pr-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.pr-row textarea {
  flex: 1 1 auto;
  min-width: 0; /* flex で右欠け/はみ出し防止 */
}

.pr-mic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3.0rem;
  min-width: 3.0rem;
  height: 3.0rem;
  padding: 0;
}

.pr-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pr-mic-btn.is-listening {
  outline: 2px solid rgba(46, 204, 113, 0.6);
}

#prPreview {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.is-hidden-constitution { display:none !important; }

/* ==========================================================
   fullPage.js 共通：headerを最前面に保つ
   ========================================================== */

/* fullPage.jsが生成するラッパーはheaderより下のz-index */
#fullpage,
#fullpage {
  z-index: 1 !important;
}

/* fullPage.jsが生成するセクション要素はpointer-eventsを
   コンテンツ部分のみ有効にする（header領域を透過） */
.fp-overflow,

/* セクション内の実際のコンテンツはpointer-eventsを有効に */
.section-background,
.fp-step-inner,
.article {
  pointer-events: auto;
}

/* site-headerを常に最前面に */

/* site-headerを常に最前面に */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  width: 100% !important;
  max-width: 1632px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

/* 内枠: max-width制限・中央寄せ */
.site-header-inner {
  width: 100%;
  max-width: 1632px;
  min-width: 306px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ============================================================
   大マイク画像 - STEP1・2・3・9 下部に配置
   ============================================================ */
.big-mic-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  padding: 0.5rem 0;
  gap: 0.4rem;
  cursor: pointer;
  position: relative;
}

/* 波紋アニメーション */
.big-mic-ripple {
  position: absolute;
  width: 12vh;
  height: 12vh;
  border-radius: 50%;
  background: rgba(100,210,210,0);
  border: 2px solid rgba(100,210,210,0);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  pointer-events: none;
}

/* 初期状態：波紋は静止・薄く */
.big-mic-wrap.mic-idle .big-mic-ripple {
  animation: ripple-idle 3s ease-out infinite;
}

/* 許可待ち：波紋が早く点滅 */
.big-mic-wrap.mic-waiting .big-mic-ripple {
  animation: ripple-waiting 1s ease-out infinite;
}

/* 録音中：波紋が大きく広がる */
.big-mic-wrap.mic-recording .big-mic-ripple {
  animation: ripple-recording 0.8s ease-out infinite;
}

/* 無音検知：波紋が止まりフェード */
.big-mic-wrap.mic-silent .big-mic-ripple {
  animation: ripple-silent 1.5s ease-out infinite;
}

@keyframes ripple-idle {
  0% { width:10vh; height:10vh; border-color:rgba(100,210,210,0.15); transform:translate(-50%,-60%) scale(1); }
  70% { width:14vh; height:14vh; border-color:rgba(100,210,210,0.05); transform:translate(-50%,-60%) scale(1.2); }
  100% { width:10vh; height:10vh; border-color:rgba(100,210,210,0);    transform:translate(-50%,-60%) scale(1); }
}

@keyframes ripple-waiting {
  0% { width:10vh; height:10vh; border-color:rgba(255,220,50,0.5);  transform:translate(-50%,-60%) scale(1); }
  50% { width:15vh; height:15vh; border-color:rgba(255,220,50,0.15); transform:translate(-50%,-60%) scale(1.3); }
  100% { width:10vh; height:10vh; border-color:rgba(255,220,50,0);    transform:translate(-50%,-60%) scale(1); }
}

@keyframes ripple-recording {
  0% { width:10vh; height:10vh; border-color:rgba(255,60,60,0.8);  transform:translate(-50%,-60%) scale(1); }
  60% { width:18vh; height:18vh; border-color:rgba(255,60,60,0.2);  transform:translate(-50%,-60%) scale(1.5); }
  100% { width:10vh; height:10vh; border-color:rgba(255,60,60,0);    transform:translate(-50%,-60%) scale(1); }
}

@keyframes ripple-silent {
  0% { width:10vh; height:10vh; border-color:rgba(150,200,255,0.3); transform:translate(-50%,-60%) scale(1); }
  100% { width:16vh; height:16vh; border-color:rgba(150,200,255,0);   transform:translate(-50%,-60%) scale(1.4); }
}

.big-mic-img {
  width: auto;
  max-height: 28vh;   /* 201x400px 縦長画像 */
  max-width: 14vh;    /* アスペクト比1:2を維持 */
  min-height: 10vh;
  object-fit: contain;
  display: block;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.big-mic-caption {
  font-size: 0.85rem;
  font-weight: bold;
  text-align: center;
  color: rgba(16,16,16,1);
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

/* 初期状態 */
.big-mic-wrap.mic-idle .big-mic-img {
  filter: none;
  animation: none;
}
.big-mic-wrap.mic-idle .big-mic-caption {
  color: rgba(16,16,16,1);
}

/* 許可待ち状態 */
.big-mic-wrap.mic-waiting .big-mic-img {
  filter: brightness(1.2) sepia(0.3);
  animation: mic-pulse 1.2s ease-in-out infinite;
}
.big-mic-wrap.mic-waiting .big-mic-caption {
  color: rgba(16,16,16,1);
  animation: mic-pulse 1.2s ease-in-out infinite;
}

/* 録音中状態 */
.big-mic-wrap.mic-recording .big-mic-img {
  filter: drop-shadow(0 0 12px rgba(255,60,60,0.9)) brightness(1.1);
  animation: mic-recording 0.8s ease-in-out infinite alternate;
}
.big-mic-wrap.mic-recording .big-mic-caption {
  color: rgba(255,80,80,1);
  animation: mic-recording-text 0.8s ease-in-out infinite alternate;
}

/* 無音検知状態 */
.big-mic-wrap.mic-silent .big-mic-img {
  filter: grayscale(0.6) brightness(0.8);
  animation: mic-silent 0.5s ease-in-out infinite alternate;
}
.big-mic-wrap.mic-silent .big-mic-caption {
  color: rgba(16,16,16,1);
}

/* アニメーション定義 */
@keyframes mic-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.97); }
}

@keyframes mic-recording {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 8px rgba(255,60,60,0.7)) brightness(1.1); }
  100% { transform: scale(1.04); filter: drop-shadow(0 0 18px rgba(255,60,60,1)) brightness(1.2); }
}

@keyframes mic-recording-text {
  0%   { opacity: 0.8; }
  100% { opacity: 1; }
}

@keyframes mic-silent {
  0%   { opacity: 0.7; transform: scale(0.98); }
  100% { opacity: 0.9; transform: scale(1); }
}

/* ============================================================
   ミニマイク（STEP5・7）MIC_1.png縮小版
   ============================================================ */
/* ============================================================
   ミニマイク（STEP1・2・3・5・7・9）大マイクと同仕様・サイズのみ小
   ============================================================ */

/* 入力欄右のミニマイクコンテナ（縦並び：画像＋キャプション） */
.mini-mic-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

/* STEP5・7用：横並びレイアウト */

/* ミニマイクボタン本体 */

/* 画像 */
.mini-mic-img {
  width: auto;
  height: 7vh;
  max-height: 56px;
  min-height: 32px;
  object-fit: contain;
  display: block;
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* キャプション（大マイクと同一仕様） */
.mini-mic-caption {
  font-size: 0.65rem;
  font-weight: bold;
  color: rgba(16,16,16,1);
  text-align: center;
  white-space: nowrap;
  transition: color 0.3s ease;
  line-height: 1.2;
}

/* 波紋（大マイクと同仕様・サイズのみ小） */
.mini-mic-ripple {
  position: absolute;
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  border: 2px solid rgba(100,210,210,0);
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 4状態 --- 初期 */
.mini-mic-wrap.mic-idle .mini-mic-ripple,
.mini-mic-btn.mic-idle .mini-mic-ripple {
  animation: mini-ripple-idle 3s ease-out infinite;
}
.mini-mic-wrap.mic-idle .mini-mic-img,
.mini-mic-btn.mic-idle .mini-mic-img { filter: none; }
.mini-mic-wrap.mic-idle .mini-mic-caption,
.mini-mic-btn.mic-idle .mini-mic-caption { color: rgba(16,16,16,1); }

/* 4状態 --- 許可待ち */
.mini-mic-wrap.mic-waiting .mini-mic-ripple,
.mini-mic-btn.mic-waiting .mini-mic-ripple {
  animation: mini-ripple-waiting 1s ease-out infinite;
}
.mini-mic-wrap.mic-waiting .mini-mic-img,
.mini-mic-btn.mic-waiting .mini-mic-img {
  filter: brightness(1.2) sepia(0.3);
  animation: mic-pulse 1.2s ease-in-out infinite;
}
.mini-mic-wrap.mic-waiting .mini-mic-caption,
.mini-mic-btn.mic-waiting .mini-mic-caption { color: rgba(16,16,16,1); }

/* 4状態 --- 録音中 */
.mini-mic-wrap.mic-recording .mini-mic-ripple,
.mini-mic-btn.mic-recording .mini-mic-ripple {
  animation: mini-ripple-recording 0.8s ease-out infinite;
}
.mini-mic-wrap.mic-recording .mini-mic-img,
.mini-mic-btn.mic-recording .mini-mic-img {
  filter: drop-shadow(0 0 8px rgba(255,60,60,0.9)) brightness(1.1);
  animation: mic-recording 0.8s ease-in-out infinite alternate;
}
.mini-mic-wrap.mic-recording .mini-mic-caption,
.mini-mic-btn.mic-recording .mini-mic-caption { color: rgba(255,80,80,1); }

/* 4状態 --- 無音検知 */
.mini-mic-wrap.mic-silent .mini-mic-ripple,
.mini-mic-btn.mic-silent .mini-mic-ripple {
  animation: mini-ripple-silent 1.5s ease-out infinite;
}
.mini-mic-wrap.mic-silent .mini-mic-img,
.mini-mic-btn.mic-silent .mini-mic-img {
  filter: grayscale(0.6) brightness(0.8);
  animation: mic-silent 0.5s ease-in-out infinite alternate;
}
.mini-mic-wrap.mic-silent .mini-mic-caption,
.mini-mic-btn.mic-silent .mini-mic-caption { color: rgba(16,16,16,1); }

/* 波紋アニメーション定義 */
@keyframes mini-ripple-idle {
  0%   { width:4vh; height:4vh; border-color:rgba(100,210,210,0.2); transform:translate(-50%,-50%) scale(1); }
  70%  { width:6vh; height:6vh; border-color:rgba(100,210,210,0.05); transform:translate(-50%,-50%) scale(1.2); }
  100% { width:4vh; height:4vh; border-color:rgba(100,210,210,0); transform:translate(-50%,-50%) scale(1); }
}
@keyframes mini-ripple-waiting {
  0%   { width:4vh; height:4vh; border-color:rgba(255,220,50,0.5); transform:translate(-50%,-50%) scale(1); }
  50%  { width:7vh; height:7vh; border-color:rgba(255,220,50,0.15); transform:translate(-50%,-50%) scale(1.3); }
  100% { width:4vh; height:4vh; border-color:rgba(255,220,50,0); transform:translate(-50%,-50%) scale(1); }
}
@keyframes mini-ripple-recording {
  0%   { width:4vh; height:4vh; border-color:rgba(255,60,60,0.8); transform:translate(-50%,-50%) scale(1); }
  60%  { width:8vh; height:8vh; border-color:rgba(255,60,60,0.2); transform:translate(-50%,-50%) scale(1.5); }
  100% { width:4vh; height:4vh; border-color:rgba(255,60,60,0); transform:translate(-50%,-50%) scale(1); }
}
@keyframes mini-ripple-silent {
  0%   { width:4vh; height:4vh; border-color:rgba(150,200,255,0.3); transform:translate(-50%,-50%) scale(1); }
  100% { width:6vh; height:6vh; border-color:rgba(150,200,255,0); transform:translate(-50%,-50%) scale(1.4); }
}

/* STEP5 音声入力ヒント */

/* STEP7のmp-micラッパー調整 */
.mp-mic.mini-mic-btn {
  height: auto;
  width: auto;
}

/* ============================================================
   Blue Ribbon 区切り
   ============================================================ */
.blue-ribbon {
  position: sticky;
  top: 12vh;
  z-index: 100000;
  width: 100%;
  height: 4vh;
  min-height: 4vh;
  max-height: 4vh;
  margin-top: -2vh;
  margin-bottom: 0;
  background-image: url(../img/blue_ribbon.svg);
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: left center;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
  pointer-events: none;
}
/* fullPage.jsのオーバーレイよりheaderを前面に */
#fullpage,
.fp-section,
.fp-scrollable,
.fp-tableCell {
  z-index: auto !important;
  background-image: url(../img/ohana.jpg) !important;
  background-size: 250px !important;
  background-repeat: repeat !important;
  background-color: rgba(244,244,244,1) !important;
}

/* fp-tableCell: display:table-cellをflexに上書きして高さチェーン確立 */
.fp-tableCell {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* fp-section: 高さをfullPage.jsのインラインに任せつつflexで子に伝える */
.fp-section {
  display: flex !important;
  flex-direction: column !important;
}

/* ==========================================================
   profile.php fullPage.js レイアウト
   ========================================================== */

/* fullPage profile メインコンテナ（main要素） */
main.fp-profile-main {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  height: calc(100vh - var(--header-height, 90px) - 2rem);
}

/* fp-step section-background: フレームに高さを合わせる */
#fullpage .section-background {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100% !important;
  min-width: 306px !important;
  max-width: 1632px !important;
  height: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background-color: var(--white);
}

/* fp-step内コンテンツ: 最大幅を制限して中央寄せ */
#fullpage .fp-step-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100% !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0.5rem 0.8rem !important;
  background: rgba(244,244,244,0.62) !important;
  border-radius: 0.4rem !important;
  color: rgba(16,16,16,1) !important;
}

/* ============================================================
   stepper-wrap: ステッパーバー（fullPage外・通常フロー）
   ============================================================ */
.stepper-wrap {
  position: relative;
  z-index: 200;
  background: rgba(20,20,20,0.97);
  padding: 0;
  width: 100%;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  min-width: 306px !important;
  max-width: 1632px !important;
  height: 3vh !important;
  min-height: 3vh !important;
  max-height: 3vh !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* stepper削除ページ用スペーサー（同じ高さを維持） */
.stepper-wrap-spacer {
  width: 100%;
  height: 3vh;
  min-height: 3vh;
  max-height: 3vh;
  flex-shrink: 0;
}

/* エラーバナー：stepperと同サイズで差し替え */
.stepper-error-banner {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(192,57,43,1);
  color: #fff;
  font-size: 0.72rem;
  font-weight: bold;
  text-align: center;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.stepper-error-banner.is-visible {
  display: flex;
}
/* エラー表示中はstepperを非表示 */
.stepper-wrap.has-error ol.stepper {
  display: none !important;
}
.stepper-wrap.has-error .stepper-error-banner {
  display: flex !important;
}
/* index.php用：通常時は予白（高さだけ確保） */
.stepper-wrap.index-error-wrap {
  background: transparent;
}
.stepper-wrap.index-error-wrap:not(.has-error) {
  pointer-events: none;
}

/* STEP10のみ: フル幅・高さフル活用 */

/* STEP10: section-background */
#fp-step-10 .section-background {
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

/* STEP10: fp-step-inner */
#fp-step-10 .fp-step-inner {
  max-width: 100% !important;
  padding: 0.2rem 0.3rem !important;
  overflow: hidden !important;
  align-items: stretch !important;
  flex: 1 1 0 !important;
  height: 0 !important;           /* flex子要素の高さ計算を強制 */
  min-height: 0 !important;
}

/* STEP10: summary-layoutを親高さいっぱいに */
#fp-step-10 .summary-layout {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
}

/* STEP10: fp-caption */
#fp-step-10 .fp-caption {
  flex-shrink: 0 !important;
  margin: 0.1rem 0 !important;
  padding: 0.15rem 0 !important;
  font-size: 0.95rem !important;
  display: block !important;
  width: calc(100% + 1.6rem) !important;
  box-sizing: border-box !important;
  margin: 0 -0.8rem 0.1rem -0.8rem !important;
  border-radius: 0 !important;
  color: rgba(0,0,0,1) !important;
  background: rgba(255,255,255,1) !important;
  border-radius: 0.3rem !important;
  display: inline-block !important;
}

/* fp-nav-wrap: 二階建て（上=戻る、下=次へ） */
.fp-nav-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.75rem;
}

.fp-nav-wrap .btn-back {
  width: 100%;
  max-width: 100%;
}

.fp-nav-wrap .primary-btn {
  width: 100%;
}

.fp-nav-wrap .primary-btn .btn-next {
  width: 100%;
  max-width: 100%;
}

/* セクションキャプション */
.fp-caption {
  font-size: 0.95rem;
  margin: 0 -0.8rem 0.5rem -0.8rem;
  text-align: center;
  color: rgba(0,0,0,1);
  background: rgba(255,255,255,1);
  padding: 0.15rem 0;
  display: block;
  width: calc(100% + 1.6rem);
  box-sizing: border-box;
}

/* ==========================================================
   生年月日テンキーUI
   ========================================================== */

/* 入力表示欄 */
/* 入力表示欄（副：補助表示に格下げ） */
.dob-display {
  font-size: 0.75rem;
  font-weight: normal;
  letter-spacing: 0.15em;
  text-align: center;
  min-height: 1.4rem;
  padding: 0.15rem 0.5rem;
  background: rgba(10,70,10,1);        /* 不透明・黒板グリーン */
  border: 6px solid rgba(55,55,55,1);  /* inputと同じ枠 */
  border-radius: 0.3rem;
  box-shadow: inset 0.2rem 0.2rem 0.81rem rgba(0,0,0,1);
  margin-bottom: 0.2rem;
  width: 12rem;          /* 西暦8桁が確実に入る固定幅 */
  min-width: 12rem;
  max-width: 12rem;
  display: inline-block;
  box-sizing: border-box;
  color: rgba(200,200,100,1);
  transition: border-color 0.2s;
}

.dob-display.dob-input-ok { border-color: rgba(25,195,125,0.6); }
.dob-display.dob-input-error { border-color: rgba(255,80,80,0.6); }

/* リザルト表示（主役） */
.dob-preview-wrap {
  width: 100%;
  text-align: center;
  margin-bottom: 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.dob-preview-text {
  font-size: 1rem;
  color: rgba(16,16,16,1);
  min-height: 1.4rem;
}

/* リザルト主役スタイル：1行に収まるようclampで制御 */
.dob-preview-text.dob-preview-main {
  font-size: clamp(0.78rem, 3.2vw, 1.05rem);
  font-weight: bold;
  color: rgba(16,16,16,1);
  min-height: 1.4rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

/* ヒント */

/* テンキーグリッド */
.dob-numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 0.5rem;
}

.dob-numpad-key {
  aspect-ratio: 2 / 1;
  font-size: 1.3rem;
  font-weight: bold;
  background: rgba(40,40,40,1);
  color: rgba(244,244,244,1);
  border: 2px solid rgba(70,70,70,1);
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dob-numpad-key:active {
  background: rgba(80,80,80,1);
  transform: scale(0.95);
}

.dob-numpad-del {
  background: rgba(180,60,60,1);
  color: rgba(255,255,255,1);
  border-color: rgba(220,80,80,1);
}
.dob-numpad-del:active {
  background: rgba(220,80,80,1);
}

.dob-numpad-clr {
  background: rgba(40,100,180,1);
  color: rgba(255,255,255,1);
  border-color: rgba(60,130,220,1);
}
.dob-numpad-clr:active {
  background: rgba(60,130,220,1);
}

/* 入力欄クリアボタン（STEP1/2/3/9）*/
.input-clr-btn {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1rem;
  font-weight: bold;
  background: rgba(40,100,180,1);
  color: rgba(255,255,255,1);
  border: 2px solid rgba(60,130,220,1);
  border-radius: 0.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
  margin-left: 0.3rem;
}
.input-clr-btn:active {
  background: rgba(60,130,220,1);
  transform: scale(0.95);
}

/* 音声入力行 */

/* ① 姓名フィールド縦並び */

/* ③ アバターカルーセルキャプション */
.avatar-carousel-caption {
  font-size: 0.78rem;
  color: rgba(16,16,16,1);
  text-align: center;
  margin: 0.25rem 0 0.5rem;
}

/* ⑤ summaryMapボタン前面 */

/* ============================================================
   STEP3 オーバーフロー修正
   ============================================================ */

/* アバタープレビュー枠 */
.avatar_summary {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.avatar-circle-180 {
  width: 4rem;
  height: 4rem;
  min-width: 0;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}

.avatar-circle-180 img,
.avatar-preview-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
  display: block;
}

/* ナビボタン行 */
.fp-step-inner .step-nav-row {
  width: calc(100% - 1rem);
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow: visible;
  margin: 0.5rem auto 0.5rem auto;
  margin-top: auto;
  padding: 0;
  flex-shrink: 0;
}

.fp-step-inner .step-nav-row .btn-back,
.fp-step-inner .step-nav-row .primary-btn,
.fp-step-inner .step-nav-row .primary-btn button {
  min-width: 0;
  flex-shrink: 1;
  max-width: 100%;
  box-sizing: border-box;
}

/* btn-icon は固定サイズ */
.btn-icon {
  width: 1.2rem !important;
  height: 1.2rem !important;
  flex-shrink: 0;
}

/* ============================================================
   fullPage profile セクション修正 v1.0.6
   ============================================================ */

.stepper {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.stepper li {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

/* ============================================================
   STEP3 レイアウト整備
   ============================================================ */

/* カルーセル行：[<] [スライダー] [>] を横一直線に */
#fp-step-3 .preset-carousel-row,
#fp-step-6 .preset-carousel-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;  /* 矢印ボタンを画像と同高さに */
  width: 100% !important;
  gap: 0.3rem !important;
  box-sizing: border-box !important;
}

/* [<][>]ボタン：固定幅・縦方向はauto */

/* スライダービューポート */
#fp-step-3 .multi-carousel-viewport,
#fp-step-6 .multi-carousel-viewport {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* スライダー画像 - Splideに高さを任せる（max-width/heightは設定しない） */

#fp-step-3 .avatar-preset-img,
#fp-step-6 .avatar-preset-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/* ③ キャプション：横幅フル・2行に収める */
#fp-step-3 .avatar-carousel-caption,
#fp-step-6 .avatar-carousel-caption {
  width: 100% !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  text-align: center !important;
  margin: 0.3rem 0 !important;
  white-space: normal !important;
}

/* 手持ちボタン */
#fp-step-3 .preset-apply-row,
#fp-step-6 .preset-apply-row {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0.2rem 0 !important;
}

#fp-step-3 .preset-apply-row .btn-junction,
#fp-step-6 .preset-apply-row .btn-junction {
  height: 2.2rem !important;
  padding: 0 1.2rem !important;
  width: auto !important;
}

/* ④ 選択アバター丸画像：コンパクトな丸のみ表示 */
#fp-step-3 .avatar_summary,
#fp-step-6 .avatar_summary {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background-color: transparent !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0.25rem 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: static !important;
  flex-shrink: 0 !important;
}

#fp-step-3 .avatar-circle-180,
#fp-step-6 .avatar-circle-180 {
  /* 真円を保証：幅と高さを等しく */
  width: min(38vw, 9.5rem) !important;
  height: min(38vw, 9.5rem) !important;
  min-width: min(38vw, 9.5rem) !important;
  min-height: min(38vw, 9.5rem) !important;
  max-width: min(38vw, 9.5rem) !important;
  max-height: min(38vw, 9.5rem) !important;
  aspect-ratio: 1/1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background-color: #e5e7eb !important;
  border: 2px solid rgba(100,100,100,0.3) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
  position: static !important;
  box-sizing: border-box !important;
}

#fp-step-3 .avatar-circle-180 img,
#fp-step-3 .avatar-preview-img,
#fp-step-6 .avatar-circle-180 img,
#fp-step-6 .avatar-preview-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 0 !important;
}

/* ナビ行 */
/* #fp-step-3 専用nav: 削除（旧アバターSTEP用の名残り）
   現在のSTEP3（名入力）はfp-step-innerの共通ルールを使用 */

/* btn-icon 全体（img,svg上書き） */

/* ============================================================
 #avatarPreviewWrap 強制サイズ固定
   ============================================================ */
#avatarPreviewWrap {
  width: min(40vw, 10rem) !important;
  height: min(40vw, 10rem) !important;
  max-width: min(40vw, 10rem) !important;
  max-height: min(40vw, 10rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1/1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  position: static !important;
  background-color: #e5e7eb !important;
  border: 2px solid rgba(100,100,100,0.3) !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}

#avatarPreviewWrap img,
#avatarPreview {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: static !important;
}

/* ============================================================
   STEP3 スライダー・矢印ボタン
   ============================================================ */

/* Splideの幅計算を邪魔しない。aspect-ratioで正方形を保つ */

#fp-step-3 .img-container img,
#fp-step-3 .avatar-preset-img,
#fp-step-6 .avatar-preset-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ============================================================
   OTTバナー（LINEブラウザ警告）
   ============================================================ */
.ott-banner {
  background: rgba(255,200,0,0.12);
  border: 1px solid rgba(255,200,0,0.4);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 10px;
  font-size: 13px;
  color: #b8860b;
  line-height: 1.8;
}
.ott-banner-title {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}
.ott-banner-key { color: #8a6400; }
.ott-banner-note { color: #9a7000; }

/* ============================================================
   フォーム・フィールド初期非表示
   ============================================================ */
.form-hidden-submit { display: none; }
.name-fields-hidden { display: none; }

/* ============================================================
   ① STEPPERの完了・現在・未来状態
   ============================================================ */

/* 完了済み */
ol.stepper li.done {
  color: rgba(244,244,244,1);
  background-color: rgba(25,195,125,1);
  position: relative;
}

/* ✓マーク廃止 */

/* 未完了（デフォルトより薄く） */
ol.stepper li:not(.on):not(.done) {
  opacity: 0.5;
}

/* ============================================================
   ② インラインエラーメッセージ
   ============================================================ */

.step-error-msg {
  display: none;
  width: 100%;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.3rem;
  font-size: 0.82rem;
  color: rgba(220,38,38,1);
  background-color: rgba(254,226,226,1);
  border: 1px solid rgba(220,38,38,0.3);
  border-radius: 0.375rem;
  box-sizing: border-box;
}

/* ============================================================
   ③ ボタンローディング状態
   ============================================================ */

.btn-loading {
  opacity: 0.65;
  cursor: not-allowed;
  position: relative;
}

.btn-loading::after {
  content: '';
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-left: 0.4rem;
  border: 2px solid rgba(244,244,244,0.4);
  border-top-color: rgba(244,244,244,1);
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  vertical-align: middle;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   section-background 汎用背景システム
   ページ固有クラス（page-xxx）でSTEP背景を完全分離
   構造：左=blackboard.jpg / 右=STEP固有画像
   ============================================================ */

/* 基底：共通プロパティ */
.section-background {
  background-color: var(--white) !important;
  background-position: center right, center left !important;
  background-size: auto 100%, cover !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* ── user_profile.php ── */
.page-user-profile #fp-step-1  .section-background { background-image: url(../img/neme0.png),  url(../img/blackboard.jpg) !important; }
.page-user-profile #fp-step-2  .section-background { background-image: url(../img/neme1.png),  url(../img/blackboard.jpg) !important; }
.page-user-profile #fp-step-3  .section-background { background-image: url(../img/neme2.png),  url(../img/blackboard.jpg) !important; }
.page-user-profile #fp-step-4  .section-background { background-image: url(../img/sex.png),    url(../img/blackboard.jpg) !important; }
.page-user-profile #fp-step-5  .section-background { background-image: url(../img/bd.png),     url(../img/blackboard.jpg) !important; }
.page-user-profile #fp-step-6  .section-background { background-image:                         url(../img/blackboard.jpg) !important; }
.page-user-profile #fp-step-7  .section-background { background-image: url(../img/geo.png),    url(../img/blackboard.jpg) !important; }
.page-user-profile #fp-step-8  .section-background { background-image: url(../img/lang.png),   url(../img/blackboard.jpg) !important; }
.page-user-profile #fp-step-9  .section-background { background-image: url(../img/tel.png),    url(../img/blackboard.jpg) !important; }
.page-user-profile #fp-step-10 .section-background { background-image:                         url(../img/blackboard.jpg) !important; }

/* ── worker_mypage.php ── */
.page-worker-mypage #fp-step-1 .section-background { background-image: url(../img/mypage_w.png), url(../img/blackboard.jpg) !important; }
.page-worker-mypage #fp-step-2 .section-background,
.page-worker-mypage #fp-step-3 .section-background,
.page-worker-mypage #fp-step-4 .section-background,
.page-worker-mypage #fp-step-5 .section-background,
.page-worker-mypage #fp-step-6 .section-background { background-image: url(../img/blackboard.jpg) !important; }

/* ── worker_onboarding.php ── */
.page-worker-onboarding #fp-step-1 .section-background,
.page-worker-onboarding #fp-step-2 .section-background,
.page-worker-onboarding #fp-step-3 .section-background,
.page-worker-onboarding #fp-step-4 .section-background,
.page-worker-onboarding #fp-step-5 .section-background,
.page-worker-onboarding #fp-step-6 .section-background { background-image: url(../img/blackboard.jpg) !important; }

/* ── client_mypage.php ── */
.page-client-mypage #fp-step-1 .section-background { background-image: url(../img/mypage_c.png), url(../img/blackboard.jpg) !important; }
.page-client-mypage #fp-step-2 .section-background,
.page-client-mypage #fp-step-3 .section-background,
.page-client-mypage #fp-step-4 .section-background,
.page-client-mypage #fp-step-5 .section-background { background-image: url(../img/blackboard.jpg) !important; }

/* ── index.php ── */
.page-index #fp-step-1 .section-background,
.page-index #fp-step-2 .section-background,
.page-index #fp-step-3 .section-background,
.page-index #fp-step-4 .section-background,
.page-index #fp-step-5 .section-background,
.page-index #fp-step-6 .section-background { background-image: url(../img/blackboard.jpg) !important; }

/* ============================================================
   本文フェイドイン演出
   背景を先に見せて3秒後に本文フェイドイン
   ============================================================ */

/* 初期状態: fp-step-inner（本文div）は非表示・即座に消える */
.fp-step .section-background > .fp-step-inner {
  opacity: 0;
  transition: none;
  visibility: hidden;
}

/* フェイドイン（2秒かけて出現） */
.fp-step .section-background > .fp-step-inner.step-content-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.5s ease-in;
}

/* STEP10のみ即表示（サマリーはフェードイン不要） */
#fp-step-10 .section-background > .fp-step-inner {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

/* ============================================================
   profile.php・index.phpのみヘッダー背景にgatagを使用
   ============================================================ */
.site-header.header-bg-gatag {
  background-image: url(../img/large-fotor-154795211681050.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ============================================================
   STEP10 サマリー: MAP上・テーブル下 縦組み（1:1.62）
   ============================================================ */
.summary-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
}

/* 上: 地図エリア: position:relativeでボタンabsoluteの基準点にする */
.summary-col-map {
  flex: 1 1 0;
  position: relative;
  min-height: 0;
  width: 100%;
  overflow: visible;
  z-index: 0;
}

/* 地図本体: height 100%（ボタンはabsolute bottomで重なる） */
.summary-map {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
}

/* 「建物の位置を訂正する」ボタン:
   summary-col-map(position:relative)直下のabsolute bottomでMAP底部に重ねる
   GoogleMaps本体(mapEl)の外に配置しているためGMが破壊しない */
.summary-map-overlay-btn {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 2rem !important;
  z-index: 10000 !important;  /* GoogleMaps(~1000)より確実に前面 */
  white-space: nowrap !important;
  font-size: 0.6rem !important;
  padding: 0.3rem 0.4rem !important;
  background: rgba(255,220,0,0.95) !important;
  border-radius: 0 !important;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.2) !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3rem !important;
  pointer-events: auto !important;
}

/* STEP10専用テーブル */
#fp-step-10 .sum-table {
  width: 100%;
  flex: 1 1 auto;
  border-collapse: collapse;
  font-size: 0.6rem;    /* html基準fontの0.6倍：10行収まるサイズ */
  table-layout: auto;
  display: table;
}

#fp-step-10 .sum-table th {
  width: 1%;            /* auto：内容に最小フィット */
  white-space: nowrap;
  padding: 0.1rem 0.2rem;
  vertical-align: middle;
  line-height: 1.3;
}

#fp-step-10 .sum-table td {
  width: auto;          /* 残り幅を全て使う */
  overflow-wrap: break-word;
  word-break: break-word;
  padding: 0.1rem 0.2rem;
  vertical-align: middle;
  line-height: 1.3;
}

/* バッジ列：コンパクトに */
#fp-step-10 .sum-table .sum-badge {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  padding: 0.1rem 0.15rem;
  font-size: 0.5rem;
}

/* 公開・秘密バッジ */
.sum-badge {
  width: 2.5em;
  text-align: center;
  font-size: 0.65rem;
  white-space: nowrap;
  padding: 0.1rem;
  vertical-align: middle;
}
.sum-public { color: rgba(0,120,0,1); }
.sum-secret { color: rgba(150,0,0,1); }

/* スクロールバー排除: テーブルエリアはoverflowを制御しない */
.summary-col-table {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.summary-col-table .note-box {
  overflow: hidden !important;
}

/* ============================================================
   STEP6 アバタースライダーレイアウト修正
   ============================================================ */
#fp-step-6 .fp-step-inner {
  overflow: hidden;
  justify-content: flex-start;
}

/* STEP6: アバター丸枠 20vh */
#fp-step-6 .avatar_summary {
  flex-shrink: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0.3rem 0 !important;
}

#fp-step-6 .avatar-circle-180,
#fp-step-6 #avatarPreviewWrap {
  width: 20vh !important;
  height: 20vh !important;
  max-width: 20vh !important;
  max-height: 20vh !important;
  min-width: 20vh !important;
  min-height: 20vh !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  display: block !important;
}

#fp-step-6 .avatar-circle-180 img,
#fp-step-6 #avatarPreviewWrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}

/* STEP6: カルーセル行・キャプション・ボタン・丸枠のサイズをvhで制御 */
/* カルーセル画像コンテナ：Splideスライド幅に追従・正方形・黒背景なし */
#fp-step-6 .img-container {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

#fp-step-6 .img-container .avatar-preset-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* SplideのtrackとListの左寄り防止 */
#fp-step-6 .multi-carousel-viewport .splide__track {
  margin: 0 !important;
  width: 100% !important;
}

#fp-step-6 .multi-carousel-viewport .splide__list {
  width: 100% !important;
}

/* Splideスライド：中央揃え */
#fp-step-6 .multi-carousel-item.splide__slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

/* 矢印ボタン: 正方形・カルーセルと縦幅を合わせる */
#fp-step-6 .arrow-btn {
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  width: 2.4rem !important;
  min-width: 2.4rem !important;
  flex-shrink: 0 !important;
  background-color: var(--white) !important;
  border-radius: 0.3rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* キャプション: 最小限 */
#fp-step-6 .avatar-carousel-caption {
  font-size: 0.7rem !important;
  margin: 0.2rem 0 !important;
  line-height: 1.2 !important;
  max-height: 2.5rem !important;
  overflow: hidden !important;
}

/* 手持ちボタン: コンパクト */
#fp-step-6 .preset-apply-row {
  margin: 0.2rem 0 !important;
}

/* 丸枠: カルーセル画像の1/4サイズ */
#fp-step-6 .avatar-circle-180,
#fp-step-6 #avatarPreviewWrap {
  width: 14vh !important;
  height: 14vh !important;
  min-width: 14vh !important;
  min-height: 14vh !important;
  max-width: 14vh !important;
  max-height: 14vh !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

#fp-step-6 .avatar-circle-180 img,
#fp-step-6 .avatar-preview-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 0 !important;
}

#fp-step-6 .preset-carousel-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0.3rem !important;
}

#fp-step-6 .multi-carousel-viewport {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#fp-step-6 .avatar-preset-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* ============================================================
   v2.1.2 パッチ: STEP別修正 2026-03-28
   ============================================================ */

/* ② STEP5: dob-mic-hint削除後、ミニMICを大きく表示 */
#fp-step-5 .mini-mic-wrap {
  margin: 0.5rem auto !important;
}
#fp-step-5 .mini-mic-img {
  height: 14vh !important;
  max-height: 100px !important;
  min-height: 48px !important;
}
#fp-step-5 .mini-mic-caption {
  font-size: 0.8rem !important;
}

/* ③ STEP6: 四角枠（img-container）と丸枠を同一サイズ（20vh正方形）に統一 */
#fp-step-6 .img-container {
  width: 20vh !important;
  height: 20vh !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  box-sizing: border-box !important;
  border-radius: 0.4rem !important;
}
#fp-step-6 .avatar-circle-180,
#fp-step-6 #avatarPreviewWrap {
  width: 20vh !important;
  height: 20vh !important;
  min-width: 20vh !important;
  min-height: 20vh !important;
  max-width: 20vh !important;
  max-height: 20vh !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
/* 矢印ボタンも同高さ */
#fp-step-6 .arrow-btn {
  height: 20vh !important;
  width: 2.4rem !important;
  min-width: 2.4rem !important;
  aspect-ratio: unset !important;
  flex-shrink: 0 !important;
  background-color: var(--white) !important;
  border-radius: 0.3rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ⑤ STEP10: MAP高さ1・テーブル高さ1.62（指定の逆比率）スクロールなし全項目表示 */
.summary-col-map {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;
  z-index: 1 !important;
}
.summary-map {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
}
#fp-step-10 .summary-layout {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
.summary-col-table {
  flex: 1.62 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;  /* スクロールバーなし */
  overflow-x: hidden !important;
}
/* テーブルのフォントをさらにコンパクトに（全行表示） */
#fp-step-10 .sum-table {
  font-size: 0.55rem !important;
}
#fp-step-10 .sum-table th,
#fp-step-10 .sum-table td {
  padding: 0.05rem 0.15rem !important;
  line-height: 1.2 !important;
}

/* ⑥ 訂正ボタンは上部の .summary-map-overlay-btn で定義済み */

/* ============================================================
   map_picker: 都道府県→市区町村セレクト行 v2026-03-28
   ============================================================ */
.mp-instruction {
  font-size: 0.78rem;
  color: rgba(0,0,0,1);
  background: rgba(255,255,255,1);
  padding: 0.15rem 0;
  display: block;
  width: calc(100% + 1.6rem);
  box-sizing: border-box;
  margin: 0 -0.8rem 0.3rem -0.8rem;
  text-align: center;
}

.mp-select-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.4rem;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.3rem;
}

/* 市区町村・検索ボタン行（都道府県確定後に表示） */

.mp-pref-select,
.mp-city-select {
  flex: 1 1 0;
  min-width: 0;
  height: var(--control-min-height);
  font-size: 0.78rem;
  box-sizing: border-box;
}

/* セレクト間のラベル「内から探す。」 */
.mp-select-label {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: rgba(16,16,16,1);
  white-space: nowrap;
  line-height: 1.3;
  text-align: center;
}

/* オーバーレイの改行対応 */
#mpClickOverlay {
  line-height: 1.6;
}

/* オーバーレイPINアイコン */
.mp-overlay-line1 {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  justify-content: center;
}

.mp-overlay-pin {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

/* オーバーレイ背景：700ms周期で点滅 */
#mpClickOverlay {
  animation: overlay-blink 0.7s ease-in-out infinite alternate;
}

/* 住所確定後：点滅停止・青系に変更 */
#mpClickOverlay.mp-overlay-confirmed {
  animation: none;
  background: rgba(30,100,200,0.93) !important;
}

@keyframes overlay-blink {
  0%   { background: rgba(25,195,125,0.93); }
  100% { background: rgba(25,195,125,0.25); }
}

/* ============================================================
   header通知エリア：エラー表示モード
   ============================================================ */
.header-notify-area.header-notify-error {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%) !important;
  box-shadow: 0 2px 8px rgba(192,57,43,0.5) !important;
  animation: none !important;  /* エラー時はアニメーション停止 */
}
.header-notify-area.header-notify-error .header-notify-ticker {
  animation: none !important;  /* スクロール停止・固定表示 */
  font-size: 0.78rem !important;
}

/* ============================================================
   stepperエラーバナー（赤帯・白文字・stepper同寸法）
   ============================================================ */

/* ============================================================
   スキル登録：ラジオボタングループ
   ============================================================ */

/* 公的資格ラベル */

/* ============================================================
   index.php p6: LINEログイン／ログアウト大ボタン
   ============================================================ */
.line-login-btn-large {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 20rem;
  margin: 1rem auto 0;
  padding: 0.9rem 1.2rem;
  background: rgba(6,199,85,1);
  border-radius: 0.6rem;
  text-decoration: none;
  color: rgba(255,255,255,1);
  font-weight: bold;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: opacity 0.15s, transform 0.1s;
}
.line-login-btn-large:active {
  opacity: 0.85;
  transform: scale(0.97);
}
.line-logout-btn {
  background: rgba(100,100,100,1);
}
.line-login-logo {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}
.line-login-label {
  letter-spacing: 0.05em;
}

/* ============================================================
   ヘッダーメニュースライダー 項目別スタイル
   アイコン：実ファイル参照 / テキスト：::before / 背景色：各ボタン個別
   文字色：rgb(16,16,16) 共通
   ============================================================ */

/* 共通：ボタンレイアウト（アイコン左・テキスト右・横並び・厳密垂直センター） */
.header-menu-item-btn[class*="menu-"] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  font-size: 0;
  position: relative;
  z-index: 200001;
  pointer-events: auto;
  background-image: none !important;
  /* タブ上半分に収める：上から文字高さ半分(0.4em)の位置に配置 */
  padding: 0.4em 0.3rem 0 0.3rem;
  height: 3.5vh;        /* タブ高さ7vhの上半分のみ使用 */
  align-self: flex-start; /* 親のstretchを無効化・上詰め */
  box-sizing: border-box;
}

/* アイコン（::before） */
.header-menu-item-btn[class*="menu-"]::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-right: 0.3rem;
}

/* テキストラベル（::after） */
.header-menu-item-btn[class*="menu-"]::after {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(16,16,16,1);
  line-height: 1.25;
  text-align: left;
  white-space: pre;
  pointer-events: none;
}

.menu-home {
  background-color: rgb(244,244,244);
}
.menu-home::before { background-image: url("../img/house-fill.svg"); }
.menu-home::after { content: "Home"; }

.menu-mypage {
  background-color: rgb(244,244,244);
}
.menu-mypage::before { background-image: url("../img/emoji-smile-fill.svg"); }
.menu-mypage::after { content: "My page"; }

.menu-post_job {
  background-color: rgb(0,182,255);
}
.menu-post_job::before { background-image: url("../img/person-fill-add.svg"); }
.menu-post_job::after { content: "募集投稿"; }

.menu-jobs_active {
  background-color: rgb(164,220,255);
}
.menu-jobs_active::before { background-image: url("../img/person-fill-gear.svg"); }
.menu-jobs_active::after { content: "募集中"; }

.menu-jobs_progress {
  background-color: rgb(235,247,255);
}
.menu-jobs_progress::before { background-image: url("../img/person-fill-check.svg"); }
.menu-jobs_progress::after { content: "訪問予定"; }

.menu-jobs_history {
  background-color: rgb(217,229,237);
}
.menu-jobs_history::before { background-image: url("../img/person-fill-slash.svg"); }
.menu-jobs_history::after { content: "完了済"; }

.menu-jobs_list {
  background-color: rgb(0,182,255);
}
.menu-jobs_list::before { background-image: url("../img/search.svg"); }
.menu-jobs_list::after { content: "募集一覧"; }

.menu-worker_applied {
  background-color: rgb(164,220,255);
}
.menu-worker_applied::before { background-image: url("../img/house-gear-fill.svg"); }
.menu-worker_applied::after { content: "応募中"; }

.menu-worker_scheduled {
  background-color: rgb(235,247,255);
}
.menu-worker_scheduled::before { background-image: url("../img/house-check-fill.svg"); }
.menu-worker_scheduled::after { content: "訪問予定"; }

.menu-worker_done {
  background-color: rgb(217,229,237);
}
.menu-worker_done::before { background-image: url("../img/house-slash-fill.svg"); }
.menu-worker_done::after { content: "完了済"; }

.menu-worker_reward {
  background-color: rgb(255,182,0);
}
.menu-worker_reward::before { background-image: url("../img/ajax.svg"); }
.menu-worker_reward::after { content: "報酬管理"; }

.menu-flow {
  background-color: rgb(0,255,182);
}
.menu-flow::before { background-image: url("../img/sign-turn-slight-right-fill.svg"); }
.menu-flow::after { content: "利用の流れ"; }

.menu-faq {
  background-color: rgb(0,255,146);
}
.menu-faq::before { background-image: url("../img/question-diamond-fill.svg"); }
.menu-faq::after { content: "FAQ"; }

.menu-info {
  background-color: rgb(0,255,109);
}
.menu-info::before { background-image: url("../img/info-square-fill.svg"); }
.menu-info::after { content: "サイト情報"; }

.menu-settings {
  background-color: rgb(255,220,165);
}
.menu-settings::before { background-image: url("../img/setting.svg"); }
.menu-settings::after { content: "Profile"; }

.menu-profile {
  background-color: rgb(255,220,165);
}
.menu-profile::before { background-image: url("../img/setting.svg"); }
.menu-profile::after { content: "Profile"; }

.menu-become_worker {
  background-color: rgb(255,182,0);
}
.menu-become_worker::before { background-image: url("../img/ajax.svg"); }
.menu-become_worker::after { content: "お手伝い\Aさんになる"; }

.menu-become_client {
  background-color: rgb(255,182,0);
}
.menu-become_client::before { background-image: url("../img/ajax.svg"); }
.menu-become_client::after { content: "依頼者に\Aなる"; }

.header-menu-item-btn.is-active[class*="menu-"] {
  background-color: rgba(40,100,180,1);
}
.header-menu-item-btn.is-active[class*="menu-"]::after {
  color: rgba(255,255,255,1);
}

/* ============================================================
   PWA誘導モーダル・ミニバナー
   ============================================================ */

/* モーダル背景 */
#pwa-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* モーダル本体 */
#pwa-modal {
  background: rgba(255,255,255,1);
  border-radius: 1.2rem;
  padding: 2rem 1.5rem 1.5rem;
  width: min(88vw, 340px);
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

#pwa-modal-icon {
  font-size: 3rem;
  line-height: 1;
}

#pwa-modal-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: rgba(20,20,20,1);
  margin: 0;
}

#pwa-modal-desc {
  font-size: 0.88rem;
  color: rgba(60,60,60,1);
  line-height: 1.7;
  margin: 0;
}

#pwa-modal-btn {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(6,199,85,1);
  color: rgba(255,255,255,1);
  border: none;
  border-radius: 0.7rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.15s;
}
#pwa-modal-btn:active { opacity: 0.8; }

#pwa-modal-later {
  background: none;
  border: none;
  color: rgba(120,120,120,1);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.3rem;
  text-decoration: underline;
}

/* ミニバナー */
#pwa-mini-banner {
  width: 100%;
  background: rgba(6,199,85,0.12);
  border-bottom: 1px solid rgba(6,199,85,0.3);
  padding: 0.3rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgba(0,100,40,1);
  box-sizing: border-box;
}

#pwa-mini-btn {
  flex-shrink: 0;
  background: rgba(6,199,85,1);
  color: rgba(255,255,255,1);
  border: none;
  border-radius: 0.4rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}

/* ============================================================
   client_mypage.php v4.1
   外枠固定・min306/max1632・AI画像背景・白38%オーバーレイ
   ============================================================ */

/* 外枠フレーム */
.cmp-frame {
  position: fixed;
  top: calc(7vh + 7vh + 4vh - 2vh); /* header上段+メニュー+ribbon */
  left: 0; right: 0; bottom: 0;
  min-width: 306px;
  max-width: 1632px;
  margin: 0.4rem auto;
  border-radius: 0.5rem;
  outline: 0.25rem solid var(--primary-dark, rgba(30,50,90,1));
  outline-offset: -0.25rem;
  /* 背景レイヤー：mypage_c.png + blackboard.jpg（オリジナル世襲） */
  background-image: url(../img/mypage_c.png), url(../img/blackboard.jpg);
  background-position: center right, center left;
  background-size: auto 100%, cover;
  background-repeat: no-repeat, no-repeat;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 検索欄（フレーム内固定） */
.cmp-search-bar {
  flex-shrink: 0;
  padding: 0.45rem 0.6rem;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(30,50,90,0.2);
  z-index: 2;
}
.cmp-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.42rem 0.85rem;
  border: 1.5px solid rgba(30,50,90,0.35);
  border-radius: 2rem;
  font-size: 0.8rem;
  background: rgba(255,255,255,0.85);
  color: rgba(20,20,20,1);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.cmp-search-input::placeholder { color: rgba(100,100,120,0.7); }
.cmp-search-input:focus {
  border-color: rgba(30,50,90,0.6);
  background: rgba(255,255,255,0.98);
}

/* スクロールエリア */
.cmp-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cmp-scroll::-webkit-scrollbar { width: 0.2rem; }
.cmp-scroll::-webkit-scrollbar-thumb {
  background: rgba(30,50,90,0.25);
  border-radius: 1rem;
}

/* カードリスト */
.cmp-list {
  padding: 0.5rem 0.45rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* カード */
.cmp-card {
  border-radius: 0.45rem;
  outline: 0.2rem solid var(--primary-dark, rgba(30,50,90,1));
  outline-offset: -0.2rem;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  opacity: 1;
  transform: translateY(0);
  transition: outline-color 0.15s;
}
.cmp-card.is-visible { opacity: 1; transform: translateY(0); }
.cmp-card[data-status="matched"]   { outline-color: rgba(40,80,220,0.75); }
.cmp-card[data-status="completed"] { outline-color: rgba(100,100,100,0.5); }
.cmp-card[aria-expanded="true"]    { outline-color: rgba(200,140,0,0.9); }

/* AI画像背景エリア */
.cmp-card-bg {
  position: relative;
  min-height: calc((100dvh - var(--header-h,12vh) - 3vh - 3.2rem) / 4);
  background-size: cover;
  background-position: center center;
  background-color: rgba(200,200,200,1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 白38%半透明レイヤー */
.cmp-card-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.38);
  pointer-events: none;
  z-index: 0;
}

/* 本文レイヤー（z-index:1で白レイヤーの上） */
.cmp-badge-wrap,
.cmp-card-bottom {
  position: relative;
  z-index: 1;
}

/* ステータスバッジ（左上） */
.cmp-badge-wrap {
  padding: 0.38rem 0.45rem 0;
}
.cmp-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 2rem;
  white-space: nowrap;
}

/* 情報エリア（左下） */
.cmp-card-bottom {
  padding: 0 0.5rem 0.42rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.cmp-id {
  font-size: 0.6rem;
  color: rgba(40,40,60,0.8);
  font-family: monospace;
  letter-spacing: 0.04em;
}
.cmp-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: rgba(16,16,32,1);
  margin: 0;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmp-meta { font-size: 0.67rem; color: rgba(40,40,60,0.85); margin: 0; }
.cmp-deadline  { color: rgba(160,40,0,1);  font-weight: 700; }
.cmp-work-date { color: rgba(20,60,160,1); font-weight: 700; }
.cmp-address {
  color: rgba(40,40,60,0.8);
  font-size: 0.64rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
}
.cmp-map-link {
  color: rgba(20,80,200,1);
  font-weight: 700;
  font-size: 0.64rem;
  text-decoration: none;
  white-space: nowrap;
}
.cmp-map-link:active { opacity: 0.7; }
.cmp-countdown {
  font-size: 0.68rem;
  font-weight: 800;
  color: rgba(140,60,0,1);
}

/* 展開詳細 */
.cmp-card-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease, padding 0.32s ease;
  padding: 0 0.7rem;
  background: rgba(245,247,252,0.97);
  border-top: 0 solid transparent;
}
.cmp-card-detail.is-open {
  max-height: 22rem;
  padding: 0.6rem 0.7rem;
  border-top: 1px solid rgba(30,50,90,0.15);
}
.cmp-detail-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(40,60,100,1);
  margin: 0 0 0.28rem;
}

/* 応募者リスト */
.cmp-applicant-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}
.cmp-applicant,
.cmp-applicant-single {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.28rem 0.4rem;
  background: rgba(255,255,255,0.92);
  border-radius: 0.35rem;
  border: 1px solid rgba(30,50,90,0.15);
}
.cmp-applicant-single { margin-bottom: 0.42rem; }
.cmp-applicant-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(30,50,90,0.2);
}
.cmp-applicant-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
  min-width: 0;
}
.cmp-applicant-rank {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}
.cmp-applicant-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(20,20,40,1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmp-applicant-meta {
  font-size: 0.62rem;
  color: rgba(90,90,110,1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 汎用ボタン */
.cmp-btn {
  padding: 0.2rem 0.5rem;
  border: none;
  border-radius: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.cmp-btn:active  { opacity: 0.75; }
.cmp-btn-detail  { background: rgba(40,80,200,0.12); color: rgba(20,60,180,1); }
.cmp-btn-hire    { background: rgba(25,195,125,1);   color: rgba(255,255,255,1); }

/* アクション行 */
.cmp-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.cmp-action-btn {
  flex: 1;
  padding: 0.4rem;
  border: none;
  border-radius: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
  text-align: center;
}
.cmp-action-btn:active  { opacity: 0.75; }
.cmp-action-edit        { background: rgba(40,80,200,0.12); color: rgba(20,60,180,1); }
.cmp-action-cancel      { background: rgba(200,40,0,0.12);  color: rgba(160,30,0,1); }
.cmp-action-detail      { background: rgba(40,80,200,0.12); color: rgba(20,60,180,1); }
.cmp-action-contact     { background: rgba(0,160,100,0.12); color: rgba(0,120,70,1); }
.cmp-action-tip         { background: rgba(200,150,0,0.15); color: rgba(140,90,0,1); }

/* ローダー */
.cmp-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  padding: 1.2rem 0;
}
.cmp-loader span {
  width: 0.45rem;
  height: 0.45rem;
  background: rgba(30,50,90,0.3);
  border-radius: 50%;
  animation: cmp-bounce 1.2s infinite ease-in-out both;
}
.cmp-loader span:nth-child(1) { animation-delay: -0.32s; }
.cmp-loader span:nth-child(2) { animation-delay: -0.16s; }
@keyframes cmp-bounce {
  0%,80%,100% { transform:scale(0); opacity:0.3; }
  40%         { transform:scale(1); opacity:1;   }
}

/* ============================================================
   worker_mypage.php v4.0 追加スタイル
   cmp-frame/card等はclient_mypage.phpと共通
   ============================================================ */

/* worker_mypage.php用：背景をmypage_w.pngに上書き */
.page-worker-mypage .cmp-frame {
  background-image: url(../img/mypage_w.png), url(../img/blackboard.jpg);
}

/* clientアイコン行 */
.cmp-client-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.08rem 0;
}
.cmp-client-avatar {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(30,50,90,0.25);
}
.cmp-client-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(30,30,50,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.cmp-reward {
  font-size: 0.72rem;
  font-weight: 800;
  color: rgba(100,60,0,1);
  white-space: nowrap;
}

/* 展開詳細内の報酬（大） */
.cmp-reward-lg {
  font-size: 0.9rem;
  font-weight: 800;
  color: rgba(100,60,0,1);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 領収書ボタン */
.cmp-action-receipt {
  background: rgba(30,80,30,0.12);
  color: rgba(20,100,40,1);
}

/* ============================================================
   .san：「お手伝いさん」の「さん」を小さく表示
   em単位でどのフォントサイズ文脈でも親の75%
   ============================================================ */
.san {
  font-size: 0.75em;
  letter-spacing: 0.02em;
}

/* cmp-empty: 募集カードなし時 */
.cmp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1rem;
  text-align: center;
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
}
.cmp-empty-btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  background: rgba(25,195,125,1);
  color: rgba(255,255,255,1);
  border-radius: 2rem;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: opacity 0.15s;
}
.cmp-empty-btn:active { opacity: 0.8; }

/* ============================================================
   index.php STEP1 移植スタイル（style.css / basic.css 準拠）
   ============================================================ */

.pink  { color: rgba(238,130,238,1); }
.green { color: rgba(0,185,1,1); }

/* Swipe */
.Swipe {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.7rem;
  height: 2.7rem;
  margin: 0 auto;
  padding: 0.25em;
  background-color: var(--primary-dark, rgba(116,118,231,1));
  border-radius: 50%;
}
.Swipe img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* highlighter */
.highlighter {
  background: linear-gradient(transparent 81%, rgba(244,244,0,1) 0%);
}

/* white-back */
.white-back {
  max-width: 16.25rem;
  height: 5em;
  margin: 0 auto;
  text-align: center;
  background-color: rgba(244,244,244,0.62);
  border: 0.25rem solid rgba(244,244,244,1);
  border-radius: 0.5rem;
}
.white-back-large {
  max-width: 21rem;
  height: 4.5em;
  background-color: rgba(244,244,244,0.62);
  border: 0.25rem solid rgba(244,244,0,1);
  border-radius: 0.5rem;
}

/* text_scroll / text_box */
.text_scroll,
.text_scroll-solid,
.text_box,
.text_box-solid {
  position: relative;
  width: 100%;
  max-width: 21rem;
  padding: 0.125em;
  text-align: left;
  font-size: clamp(0.9rem, 4vw, 1.6rem);
  font-family: "M PLUS 1", sans-serif;
  line-height: 1.2;
  font-weight: 900;
  color: rgba(55,55,55,1);
  text-shadow: 0.1rem 0.1rem 0.1rem rgba(244,244,244,1);
}
.mask {
  width: 100%;
  max-width: 21rem;
}

/* catch / catch-min */
.catch,
.catch-min {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  font-size: 1.5rem;
  font-family: "M PLUS 1", sans-serif;
  line-height: 1;
  font-weight: 900;
}
.catch-min {
  font-size: clamp(0.75rem, 3vw, 1.1rem);
}
.REO .catch-min {
  width: 13.5rem;
  font-size: 1rem;
}

/* first_page 背景（style.css準拠：3枚重ね） */
#first_page {
  background-image: url(../img/am_image.png), url(../img/runa14.png), url(../img/rakuraku_back1_B.jpg);
  background-position: center right, center right, center center;
  background-size: auto 100%, auto 100%, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
}