/* (Fri, 06 Feb 2026 06:00:07 GMT) COPY FROM #kjufMjig*/
@charset "UTF-8";
/**
 * [Synquery-OuenPay] index.scss 
 */
/* #76203acc; なぜかコンパイルで落ちる。*/
/* font-size */
/* font-family */
/* input theme */
/* orthodox */
/* SCSS変数の色をCSS変数として定義 */
:root {
  --theme-color-ouen: $theme-color-ouen;
  --theme-pale-ouen: $theme-pale-ouen;
  --theme-pale-ouen-hover: $theme-pale-ouen-hover;
  --theme-dark-ouen: $theme-dark-ouen;
  --white: $white; }

@font-face {
  font-family: 'ubuntu';
  src: url(./f/fonts/Ubuntu-Bold.ttf); }

html, body {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: ubuntu; }

.my {
  /* absolute-center */
  /* Chromeの自動入力スタイルを上書きするCSS */ }
  .my * {
    box-sizing: border-box;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    opacity: 1;
    outline: none; }
    .my *.hidden {
      display: none; }
    .my *.transparent {
      opacity: 0; }
  .my button, .my input, .my optgroup, .my select, .my textarea {
    /* FOR SAFARI: カーソルが乗らなくなるため、入力不可になる。*/
    font-family: roboto, "Nato Sans Manmar UI", arial, sans-serif;
    -webkit-user-select: auto;
    user-select: auto;
    color: #333333; }
  .my input:-webkit-autofill,
.my input:-webkit-autofill:hover,
.my input:-webkit-autofill:focus,
.my input:-webkit-autofill:active {
    /* 背景色を白（または希望の色）で上書き */
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    /* テキストの色を上書き (例: 黒) */
    -webkit-text-fill-color: #000 !important;
    /* 背景色の変化を非常に遅くすることで、デフォルトの黄色の反映を防ぐ */
    transition: background-color 5000s ease-in-out 0s; }
  .my .digit {
    font-family: digital-clock-font; }
  .my .nldiv {
    position: relative;
    display: block;
    width: 100%;
    height: 1px; }
  .my .abc {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .my .fxc {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: center; }
  .my .btn {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    border-radius: 4px;
    border: 2px solid #ffffff;
    height: 42px;
    line-height: 28px;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 2px;
    text-align: center;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: pointer; }
  .my .btn-std {
    width: 108px; }
  .my .btn-wide {
    width: 45%; }
  .my .btn-theme.ouen {
    color: #63063c;
    border-color: #63063c;
    background-color: #ffffff; }
    .my .btn-theme.ouen:hover {
      background-color: #ffffffcc; }
  .my .btn-theme.pale {
    color: #333333;
    border-color: #a64d79;
    background-color: #ffe3ec; }
    .my .btn-theme.pale:not(.active):hover {
      background-color: #ffebe3; }
    .my .btn-theme.pale.active {
      background-color: #fffab6; }
  .my .btn-theme.icon {
    border-color: transparent;
    color: #ffffff;
    margin: 0 2px;
    padding: 0;
    border: 1px solid #ffffff;
    background-color: #a64d79; }
    .my .btn-theme.icon:hover {
      background-color: #c55b8f; }
    .my .btn-theme.icon > .btn-icn {
      float: left;
      width: 40px;
      height: 40px;
      margin: 0;
      padding: 4px;
      fill: #333333;
      background: #ffffff; }
    .my .btn-theme.icon > .btn-txt {
      line-height: 40px; }
  .my .btn-disabled {
    opacity: 0.6;
    cursor: default; }
  .my .btn.btn-disabled {
    opacity: 0.6;
    cursor: default; }
  .my .btn-qr-reader {
    transition: 80ms ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 300px;
    margin-top: 24px;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff96;
    padding: 4px 8px 4px 4px;
    border-radius: 4px;
    font-family: "Material Icons", arial, sans-serif;
    cursor: pointer; }
    .my .btn-qr-reader:hover {
      background: #ffffffcc; }
    .my .btn-qr-reader > div {
      display: inline-block;
      width: 40px;
      height: 40px;
      margin-right: 8px;
      padding: 2px; }
    .my .btn-qr-reader > span {
      vertical-align: top;
      line-height: 44px; }
  .my .btn-area {
    margin-top: 28px; }
    .my .btn-area > span.btn {
      display: inline-block;
      width: 220px;
      text-align: center;
      line-height: 22px;
      margin: 0;
      padding: 8px 12px;
      background: #ab3379;
      color: #fff;
      border-right: 2px solid #63063c;
      border-bottom: 2px solid #63063c;
      cursor: pointer; }
      .my .btn-area > span.btn:after {
        /* FOR NEW LINE */
        /* content: "　";
        display: none; width: 100%; height: 4px; */ }
      .my .btn-area > span.btn > i.material-icons {
        margin: -2px 0 0 -36px; }
  .my .pointer {
    cursor: pointer; }
    .my .pointer[disabled], .my .pointer.disabled {
      cursor: default;
      pointer-events: none; }
  .my .copyright {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    color: #ab3379; }
    .my .copyright > .cr_to {
      padding-right: 4px; }

.background_container {
  position: absolute;
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0; }
  .background_container .arc0 {
    position: absolute;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(190deg, rgba(171, 51, 121, 0.5) 40px, rgba(255, 227, 236, 0.5) 80px, rgba(220, 64, 155, 0.5) 120px, rgba(255, 227, 236, 0.5) 160px, rgba(248, 202, 216, 0.5) 200px, rgba(255, 227, 236, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px, rgba(255, 227, 236, 0.5) 300px), repeating-linear-gradient(-190deg, rgba(171, 51, 121, 0.5) 30px, rgba(255, 227, 236, 0.5) 60px, rgba(220, 64, 155, 0.5) 90px, rgba(255, 227, 236, 0.5) 120px, #ffffff 150px, rgba(255, 227, 236, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px, rgba(255, 227, 236, 0.5) 230px), repeating-linear-gradient(23deg, rgba(171, 51, 121, 0.5) 50px, rgba(255, 227, 236, 0.5) 100px, rgba(220, 64, 155, 0.5) 150px, rgba(255, 227, 236, 0.5) 200px, #ffffff 250px, rgba(255, 227, 236, 0.5) 300px, violet 350px, rgba(255, 227, 236, 0.5) 370px);
    width: 600px;
    border-bottom-right-radius: 600px; }
  .background_container .arc1 {
    position: absolute;
    right: 30px;
    bottom: 30px;
    background: #ffffff;
    width: 600px;
    border-bottom-right-radius: 600px; }

/* 
 * - - - - - - - - - - - - - - - -
 *  ログイン画面のデザイン
 * - - - - - - - - - - - - - - - -
 */
.signin_container {
  position: absolute;
  display: grid;
  grid-template-rows: 1fr 30px;
  grid-template-columns: 100%;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /* // .signin_contaienr > .pfoot */ }
  .signin_container > .pbody {
    position: relative;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 50% 50%;
    grid-row: 1;
    grid-column: 1;
    overflow-x: hidden;
    overflow-y: auto;
    background: #b32a7b;
    /*background: $theme-color-ouen;*/
    /*background: $repeating-background;*/ }
    .signin_container > .pbody > .wave-container {
      position: fixed;
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0; }
      .signin_container > .pbody > .wave-container > .wave-canvas {
        display: block; }
    .signin_container > .pbody > .catchy-box {
      grid-row: 1;
      grid-column: 1;
      flex-direction: row-reverse;
      /*右寄せ*/
      padding-bottom: 60px; }
      .signin_container > .pbody > .catchy-box > div {
        box-sizing: border-box;
        width: 400px;
        padding-right: 36px; }
      .signin_container > .pbody > .catchy-box .title {
        color: #ffffff;
        font-family: ubuntu;
        font-size: 32px;
        padding-left: 18px; }
      .signin_container > .pbody > .catchy-box .sub {
        color: #ffffff;
        font-size: 18px; }
    .signin_container > .pbody > .center-box {
      grid-row: 1;
      grid-column: 2; }
      .signin_container > .pbody > .center-box > div {
        box-sizing: border-box;
        position: relative;
        width: 90%;
        max-width: 400px;
        padding: 2rem;
        background: #ffffff66;
        background: linear-gradient(-90deg, #d9c88666, #ffffff66);
        box-shadow: 0 4px 30px #fff3;
        border-radius: 8px; }
      .signin_container > .pbody > .center-box .title {
        position: absolute;
        display: none;
        margin-top: -120px;
        width: 100%;
        text-align: center;
        color: #ffffff;
        font-family: ubuntu;
        font-size: 36px;
        letter-spacing: 2px;
        font-weight: bold; }
      .signin_container > .pbody > .center-box input {
        height: 44px;
        line-height: 40px;
        color: #000;
        background-color: #fff !important;
        border: 1px solid #999;
        box-shadow: 0 1px 2px #d9d9d9 inset;
        margin-bottom: 15px;
        font-size: 17px !important;
        letter-spacing: 2px !important;
        text-align: center;
        outline: none; }
        .signin_container > .pbody > .center-box input.input-large {
          width: 384px;
          max-width: 100%;
          padding: 0px 7px 2px 18px;
          border-radius: 4px; }
        .signin_container > .pbody > .center-box input.input-char {
          width: 40px;
          padding-left: 2px;
          border-radius: 4px;
          margin-left: 2px; }
      .signin_container > .pbody > .center-box .item-box {
        position: relative;
        margin-top: 3rem i [data-material-icon];
          margin-top-margin-top: 10px;
          margin-top-cursor: pointer;
          margin-top-right: 10px; }
      .signin_container > .pbody > .center-box #InputID {
        margin-top: 4rem; }
        .signin_container > .pbody > .center-box #InputID > input:-webkit-autofill {
          font-size: 17px !important;
          /* autocomplete の上書き */ }
      .signin_container > .pbody > .center-box #ValueID {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        font-size: 20px;
        color: #ffffff;
        letter-spacing: 2px;
        margin-top: 1rem; }
        .signin_container > .pbody > .center-box #ValueID > input:-webkit-autofill {
          font-size: 17px !important;
          /* autocomplete の上書き */ }
        .signin_container > .pbody > .center-box #ValueID i[data-material-icon=close] {
          position: absolute;
          right: 0;
          height: 20px;
          margin-top: 0; }
      .signin_container > .pbody > .center-box #InputMFA {
        margin-top: 1rem; }
      .signin_container > .pbody > .center-box #BtnNext {
        height: 44px;
        margin-top: 8px; }
        .signin_container > .pbody > .center-box #BtnNext > span {
          display: inline-block;
          width: 44px;
          height: 44px;
          margin: 0;
          padding: 6px 0 0 2px;
          background: #ffffff;
          color: #ab3379;
          font-weight: bold;
          font-size: 28px;
          line-height: 28px;
          border-radius: 22px;
          border: 2px solid #ffffff;
          cursor: pointer; }
          .signin_container > .pbody > .center-box #BtnNext > span:hover {
            background-color: #ffe3ec; }
  .signin_container > .pfoot {
    grid-row: 2;
    grid-column: 1;
    overflow: hidden;
    background: #ffe3ec; }
    .signin_container > .pfoot > .view-box {
      color: #ab3379;
      line-height: 30px;
      padding-left: 50px;
      cursor: pointer; }
      .signin_container > .pfoot > .view-box > i.material-icons {
        margin-left: -32px; }
      .signin_container > .pfoot > .view-box > span {
        vertical-align: top; }
      .signin_container > .pfoot > .view-box:after {
        content: "▼";
        color: #ab3379;
        position: right;
        margin-right: -8px;
        margin-top: 0;
        vertical-align: top;
        font-size: 12px;
        cursor: pointer; }
      .signin_container > .pfoot > .view-box.focus:after {
        content: "▲"; }
    .signin_container > .pfoot > .select-box {
      position: fixed;
      display: none;
      width: 312px;
      padding: 12px 6px 0;
      bottom: 32px;
      left: 4px;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;
      background: #fff; }
      .signin_container > .pfoot > .select-box .ul-block {
        box-sizing: border-box;
        display: inline-block;
        width: 148px;
        vertical-align: top;
        list-style-type: none;
        padding-left: 12px; }
        .signin_container > .pfoot > .select-box .ul-block > li > a {
          display: block;
          padding: 4px 6px 4px 8px;
          background: transparent;
          color: #222;
          border-radius: 18px; }
        .signin_container > .pfoot > .select-box .ul-block > li.selected {
          background: #eee; }
        .signin_container > .pfoot > .select-box .ul-block > li:hover > a {
          text-decoration: none;
          background: #008;
          color: #fff; }
      .signin_container > .pfoot > .select-box.focus {
        display: block; }
    .signin_container > .pfoot .copyright {
      top: 4px;
      left: 120px;
      right: 120px; }

@media all and (max-width: 800px) {
  .signin_container > .pbody {
    grid-template-rows: 100%;
    grid-template-columns: 0% 100%; }
    .signin_container > .pbody > .catchy-box {
      display: none; }
    .signin_container > .pbody > .center-box {
      text-align: center; }
      .signin_container > .pbody > .center-box > div {
        display: inline-block; }
      .signin_container > .pbody > .center-box .title {
        line-height: 32px;
        padding-left: 0;
        display: block; } }

@media all and (max-width: 400px) {
  .signin_container > .pbody > .center-box > div {
    width: calc(100% - 8px);
    margin: 0 4px; }
  .signin_container > .pbody > .center-box .input-large {
    width: 320px;
    max-width: 100%;
    font-size: 14px; } }

/* 
 * - - - - - - - - - - - - - - - -
 *  メイン画面のデザイン
 * - - - - - - - - - - - - - - - -
 */
.service_container {
  transition: 200ms ease-in-out;
  position: absolute;
  display: grid;
  grid-template-rows: 50px 1fr;
  grid-template-columns: 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  /* initialize bootstrap */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  /* .service_container に .pfoot はなくなった。 */ }
  .service_container.hidden {
    display: none; }
  .service_container > .phead {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    overflow: hidden;
    background: #ffffff; }
    .service_container > .phead .hamburger {
      transition: 120ms ease-in-out;
      position: absolute;
      display: inline-block;
      width: 60px;
      height: 24px;
      left: 12px;
      top: 12px;
      margin: 0;
      padding-right: 36px;
      cursor: pointer; }
      .service_container > .phead .hamburger path {
        fill: #76203a; }
      .service_container > .phead .hamburger:hover {
        width: 64px;
        top: 10px; }
        .service_container > .phead .hamburger:hover path {
          fill: #a22d50; }
    .service_container > .phead .title {
      color: #76203a;
      font-size: 24px;
      font-family: ubuntu;
      line-height: 50px;
      text-align: left;
      margin-left: 50px; }
    .service_container > .phead .btn {
      float: right;
      width: 180px;
      margin: 4px 8px; }
      .service_container > .phead .btn img {
        position: absolute;
        display: inline-block;
        width: 24px;
        height: 24px;
        right: 0px;
        top: 2px; }
  .service_container > .pbody {
    position: relative;
    grid-row: 2;
    grid-column: 1;
    overflow-x: hidden;
    overflow-y: auto; }
    .service_container > .pbody > .panel-body {
      padding: 0;
      /* 決済画面 */
      /* 「応援マルシェ」画面 */
      /* 「予定の追加」画面 */ }
      .service_container > .pbody > .panel-body.hidden {
        display: none; }
      .service_container > .pbody > .panel-body.panel-payment {
        position: absolute;
        display: grid;
        grid-template-rows: 306px 1fr;
        grid-template-columns: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #a64d79; }
        .service_container > .pbody > .panel-body.panel-payment > .upper-row {
          position: relative;
          grid-row: 1;
          grid-column: 1; }
          .service_container > .pbody > .panel-body.panel-payment > .upper-row .barcode-area, .service_container > .pbody > .panel-body.panel-payment > .upper-row .qrcode-area, .service_container > .pbody > .panel-body.panel-payment > .upper-row .stock-area {
            background: #ffffff;
            position: relative;
            text-align: center;
            width: 100%;
            height: 256px; }
          .service_container > .pbody > .panel-body.panel-payment > .upper-row .qrcode-area {
            display: flex;
            align-items: center; }
          .service_container > .pbody > .panel-body.panel-payment > .upper-row .barcode-area > div, .service_container > .pbody > .panel-body.panel-payment > .upper-row .qrcode-area > div {
            display: inline-block;
            width: auto;
            height: auto;
            margin-left: auto;
            margin-right: auto; }
          .service_container > .pbody > .panel-body.panel-payment > .upper-row .barcode-area > .broken, .service_container > .pbody > .panel-body.panel-payment > .upper-row .qrcode-area > .broken {
            padding: 4px;
            color: #ffffff;
            text-align: center; }
          .service_container > .pbody > .panel-body.panel-payment > .upper-row .stock-area > div.stock-container {
            position: relative;
            display: inline-block;
            width: 408px;
            max-width: calc(100% - 24px);
            height: 250px;
            margin: 0 auto;
            padding: 1.25rem;
            border-radius: 12px;
            font-size: 16px;
            font-family: roboto, "Nato Sans Manmar UI", arial, sans-serif;
            color: #ffffff;
            text-align: left;
            gap: 0.25rem;
            background-image: linear-gradient(to bottom right, #c33c7b, #9b3b8d); }
            .service_container > .pbody > .panel-body.panel-payment > .upper-row .stock-area > div.stock-container > div {
              display: block;
              width: 100%; }
              .service_container > .pbody > .panel-body.panel-payment > .upper-row .stock-area > div.stock-container > div.account_class {
                color: rgba(255, 255, 255, 0.8); }
              .service_container > .pbody > .panel-body.panel-payment > .upper-row .stock-area > div.stock-container > div.amount {
                font-family: Manrope, sans-serif; }
                .service_container > .pbody > .panel-body.panel-payment > .upper-row .stock-area > div.stock-container > div.amount > span.value {
                  font-size: 36px; }
                .service_container > .pbody > .panel-body.panel-payment > .upper-row .stock-area > div.stock-container > div.amount > span.unit {
                  padding-left: 4px;
                  font-size: 16px; }
              .service_container > .pbody > .panel-body.panel-payment > .upper-row .stock-area > div.stock-container > div.amount_time {
                font-family: Manrope, sans-serif;
                color: rgba(255, 255, 255, 0.8); }
          .service_container > .pbody > .panel-body.panel-payment > .upper-row .btn[data-op] {
            transition: right 80ms ease-in-out;
            position: absolute;
            right: 8px;
            bottom: 54px;
            width: 80px;
            height: 80px;
            margin: 0;
            padding: 0;
            border: 0;
            box-shadow: none; }
            .service_container > .pbody > .panel-body.panel-payment > .upper-row .btn[data-op].bye {
              right: -96px; }
          .service_container > .pbody > .panel-body.panel-payment > .upper-row .btn-area {
            height: 50px;
            margin-top: 0; }
            .service_container > .pbody > .panel-body.panel-payment > .upper-row .btn-area .btn-wide.icon {
              margin: 0 2px; }
        .service_container > .pbody > .panel-body.panel-payment > .lower-row {
          position: relative;
          grid-row: 2;
          grid-column: 1;
          background-color: #63063c; }
          .service_container > .pbody > .panel-body.panel-payment > .lower-row > .tabs-area {
            height: 50px; }
            .service_container > .pbody > .panel-body.panel-payment > .lower-row > .tabs-area > div {
              flex: auto;
              vertical-align: bottom;
              font-size: 18px;
              font-weight: bold;
              text-align: center;
              line-height: 42px;
              color: #ffffff;
              cursor: pointer; }
              .service_container > .pbody > .panel-body.panel-payment > .lower-row > .tabs-area > div:not(.active):hover {
                background-color: #ffffff44; }
              .service_container > .pbody > .panel-body.panel-payment > .lower-row > .tabs-area > div.active {
                color: #63063c;
                background: #ffffff;
                margin-bottom: -8px; }
          .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area {
            width: 100%;
            height: calc(100% - 50px); }
            .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div {
              position: absolute;
              display: none;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
              padding: 4px;
              overflow-x: hidden;
              overflow-y: auto; }
              .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div.active {
                display: block;
                background-color: #ffe3ec; }
              .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div > .plan-card {
                width: 100%;
                height: 100%;
                max-width: 720px;
                max-height: 80px;
                position: relative;
                margin-top: 0;
                margin-bottom: 4px;
                margin-left: auto;
                margin-right: auto;
                padding-top: 4px;
                font-size: 1rem;
                background: #fff;
                overflow: hidden; }
                .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div > .plan-card > .plan-chead {
                  padding: 0 12px;
                  margin-bottom: 4px; }
                  .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div > .plan-card > .plan-chead > .headline {
                    font-size: 14px !important;
                    line-height: 21.34px !important;
                    margin: 0; }
                    .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div > .plan-card > .plan-chead > .headline > .view {
                      padding-left: 4px;
                      font-weight: bold; }
                .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div > .plan-card > .plan-cbody {
                  -webkit-box-flex: 1;
                  -ms-flex-positive: 1;
                  flex-grow: 1;
                  width: 100%;
                  height: 52px;
                  padding: 0 20px; }
                  .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div > .plan-card > .plan-cbody > .center-image {
                    display: inline-block;
                    width: 44px;
                    height: 44px;
                    vertical-align: top; }
                    .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div > .plan-card > .plan-cbody > .center-image img {
                      position: relative;
                      width: 100%;
                      height: 100%; }
                  .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div > .plan-card > .plan-cbody > .payment-plan {
                    display: inline-block;
                    font-size: 14px; }
                .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div > .plan-card > .plan-pbtns {
                  position: absolute;
                  width: 72px;
                  height: 72px;
                  bottom: 4px;
                  right: 84px; }
                  .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div > .plan-card > .plan-pbtns > .btn {
                    width: 100%;
                    height: 100%;
                    padding: 8px; }
                    .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div > .plan-card > .plan-pbtns > .btn img {
                      width: 100%;
                      height: 100%; }
                .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div > .plan-card > .plan-cbtns {
                  position: absolute;
                  width: 72px;
                  height: 72px;
                  bottom: 4px;
                  right: 4px; }
                  .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div > .plan-card > .plan-cbtns > .btn {
                    height: 32px;
                    margin-bottom: 6px;
                    padding-top: 0; }
            .service_container > .pbody > .panel-body.panel-payment > .lower-row > .bodies-area > div.past-view > .plan-card > .plan-cbtns {
              width: auto; }
        .service_container > .pbody > .panel-body.panel-payment > .abs-row {
          position: absolute;
          width: 50%;
          height: 108px;
          bottom: 0;
          left: 25%;
          right: 25%; }
          .service_container > .pbody > .panel-body.panel-payment > .abs-row > .btn {
            display: block;
            height: 100%;
            padding: 0;
            background: transparent;
            border-color: transparent; }
            .service_container > .pbody > .panel-body.panel-payment > .abs-row > .btn:active {
              box-shadow: none; }
            .service_container > .pbody > .panel-body.panel-payment > .abs-row > .btn > .btn-icn {
              position: relative;
              display: inline-block;
              width: 72px;
              height: 72px;
              fill: #76203a;
              background-color: #ffffff;
              border-radius: 25px; }
              .service_container > .pbody > .panel-body.panel-payment > .abs-row > .btn > .btn-icn > img {
                position: absolute;
                width: 44px;
                height: 44px;
                left: 14px;
                top: 14px;
                filter: invert(50%) sepia(13%) saturate(1500%) hue-rotate(290deg) brightness(100%) contrast(105%); }
              .service_container > .pbody > .panel-body.panel-payment > .abs-row > .btn > .btn-icn:before {
                content: '';
                position: absolute;
                display: inline-block;
                text-decoration: none;
                width: 72px;
                height: 72px;
                left: 0;
                top: 0;
                border-radius: 50%;
                text-align: center;
                background-color: #ffe3ec;
                /*fallback*/
                background-image: linear-gradient(#ffe3ec 0%, #ffffff 100%);
                text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
                box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
                border-bottom: solid 2px #ffe3ec; }
              .service_container > .pbody > .panel-body.panel-payment > .abs-row > .btn > .btn-icn:active:before {
                background-image: linear-gradient(#ffebe3 0%, #ffffff 100%);
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
                border-bottom: solid 2px #ffffff; }
            .service_container > .pbody > .panel-body.panel-payment > .abs-row > .btn > .btn-txt {
              position: absolute;
              width: 100%;
              bottom: 0;
              color: #76203a;
              background-color: #ffffffcc;
              border-radius: 8px; }
      .service_container > .pbody > .panel-body.panel-marche {
        position: absolute;
        display: grid;
        grid-template-rows: 48px 1fr;
        grid-template-columns: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #a64d79; }
        .service_container > .pbody > .panel-body.panel-marche .nav-icon, .service_container > .pbody > .panel-body.panel-marche .nav-sprite {
          background-image: url(./f/images/nav-sprite-global.png);
          background-position: 0 1000px;
          background-repeat: repeat-x; }
        .service_container > .pbody > .panel-body.panel-marche > .upper-row {
          grid-row: 1;
          grid-column: 1; }
          .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area {
            display: block;
            width: 100%;
            max-width: 720px;
            height: 40px;
            margin: 4px auto;
            padding: 0 4px;
            overflow: hidden; }
            .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area > div {
              display: flex;
              height: 100%;
              flex: 1 1 0px;
              flex-wrap: nowrap;
              border-radius: 4px; }
            .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area .nav-left, .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area .nav-right {
              position: relative;
              display: -webkit-box;
              display: -moz-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              float: none;
              height: 100%; }
            .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area .nav-left {
              background-color: #f3f3f3;
              width: auto;
              height: 100%;
              white-space: nowrap; }
              .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area .nav-left .nav-search-facade {
                position: relative;
                float: left;
                cursor: default;
                overflow: hidden;
                top: 3px; }
                .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area .nav-left .nav-search-facade .nav-search-label {
                  line-height: 34px;
                  padding: 2px 20px; }
                .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area .nav-left .nav-search-facade .nav-icon {
                  position: absolute;
                  top: 14px;
                  right: 8px;
                  border-style: solid;
                  border-width: 4px;
                  border-color: transparent;
                  width: 0;
                  height: 0;
                  font-size: 0;
                  line-height: 0; }
              .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area .nav-left select[for=marcheCategory] {
                position: absolute;
                display: block;
                top: -1px;
                left: 0;
                height: 35px;
                width: auto;
                font-family: inherit;
                outline: 0;
                margin: 0;
                padding: 0;
                cursor: pointer;
                opacity: 0;
                filter: alpha(opacity=0);
                visibility: visible;
                border: 0;
                line-height: 35px; }
            .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area .nav-fill {
              background-color: #ffffff;
              flex-grow: inherit;
              height: 100%; }
              .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area .nav-fill > .nav-search-field {
                display: inline-block;
                width: 100%;
                height: 100%; }
                .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area .nav-fill > .nav-search-field .nav-input {
                  position: absolute;
                  display: block;
                  width: 100%;
                  height: 42px;
                  top: 0;
                  left: 0;
                  line-height: 15px;
                  margin: 0;
                  padding: 7px 10px 10px 0;
                  border: 0;
                  font-family: inherit;
                  font-size: 15px;
                  background: 0 0;
                  color: #111;
                  outline: 0;
                  -webkit-appearance: none;
                  box-shadow: none;
                  text-indent: 8px;
                  direction: ltr; }
            .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area .nav-right {
              background-color: #ffe3ec;
              width: 45px; }
              .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area .nav-right .nav-search-submit {
                background-image: none;
                border: none;
                width: 45px; }
                .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area .nav-right .nav-search-submit .nav-input {
                  text-indent: -1000px;
                  background: none;
                  border: none; }
              .service_container > .pbody > .panel-body.panel-marche > .upper-row .search-area .nav-right .nav-sprite {
                width: auto;
                height: auto;
                background-position: 2px -280px; }
        .service_container > .pbody > .panel-body.panel-marche > .lower-row {
          grid-row: 2;
          grid-column: 1;
          overflow-y: hidden;
          /*.marche-area*/ }
          .service_container > .pbody > .panel-body.panel-marche > .lower-row .marche-area {
            flex-wrap: wrap;
            overflow-y: auto; }
            .service_container > .pbody > .panel-body.panel-marche > .lower-row .marche-area > .marche-card {
              position: relative;
              height: 100%;
              max-width: 344px;
              max-height: 420px;
              margin-top: 0;
              margin-left: 4px;
              margin-right: 4px;
              margin-bottom: 8px;
              padding-top: 20px;
              font-size: 1rem;
              background: #ffffff;
              overflow: hidden; }
              .service_container > .pbody > .panel-body.panel-marche > .lower-row .marche-area > .marche-card > .marche-chead {
                padding: 0 20px;
                margin-bottom: 10px; }
                .service_container > .pbody > .panel-body.panel-marche > .lower-row .marche-area > .marche-card > .marche-chead > h2 {
                  font-size: 17px !important;
                  line-height: 21.34px !important; }
              .service_container > .pbody > .panel-body.panel-marche > .lower-row .marche-area > .marche-card > .marche-cbody {
                -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                flex-grow: 1;
                height: 275px;
                margin-bottom: 44px;
                padding: 0 20px; }
                .service_container > .pbody > .panel-body.panel-marche > .lower-row .marche-area > .marche-card > .marche-cbody > .center-image {
                  height: 100%;
                  width: 100%; }
                  .service_container > .pbody > .panel-body.panel-marche > .lower-row .marche-area > .marche-card > .marche-cbody > .center-image img {
                    max-width: 100%; }
              .service_container > .pbody > .panel-body.panel-marche > .lower-row .marche-area > .marche-card > .marche-cfoot {
                padding: 0 20px;
                margin-bottom: 20px;
                position: absolute;
                bottom: 0;
                width: 100%;
                font-size: 108%; }

@media all and (max-width: 768px) {
  .service_container > .pbody > .panel-body.panel-marche > .lower-row .marche-area > .marche-card {
    max-width: 172px;
    max-height: 210px;
    padding-top: 8px; }
    .service_container > .pbody > .panel-body.panel-marche > .lower-row .marche-area > .marche-card > .marche-chead > h2 {
      margin-top: 4px; }
    .service_container > .pbody > .panel-body.panel-marche > .lower-row .marche-area > .marche-card > .marche-cfoot {
      margin-bottom: 16px; } }
      .service_container > .pbody > .panel-body.panel-reserve {
        position: absolute;
        display: grid;
        grid-template-rows: 210px 1fr;
        grid-template-columns: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #a64d79; }

@media all and (max-width: 600px) {
  .service_container > .pbody > .panel-body.panel-reserve {
    grid-template-rows: 258px 1fr; } }
        .service_container > .pbody > .panel-body.panel-reserve > .upper-row {
          grid-row: 1;
          grid-column: 1; }
          .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box {
            display: grid;
            grid-template-rows: 48px 48px 48px;
            grid-template-columns: 20% 20% 20% 20% 20%;
            text-align: right; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box label[for=planSubj] {
              grid-row: 1;
              grid-column: 1; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box input#planSubj {
              grid-row: 1;
              grid-column: 2 / 4; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box label[for=planWays] {
              grid-row: 1;
              grid-column: 4; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box select#planWays {
              grid-row: 1;
              grid-column: 5; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box label[for=planDate] {
              grid-row: 2;
              grid-column: 1; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box input#planDate {
              grid-row: 2;
              grid-column: 2 / 4; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box select#planTime_hh {
              grid-row: 2;
              grid-column: 4; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box select#planTime_mm {
              grid-row: 2;
              grid-column: 5; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box label[for=planAmt] {
              grid-row: 3;
              grid-column: 1; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box select#planCint {
              grid-row: 3;
              grid-column: 2 / 4; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box input#planAmnt {
              grid-row: 3;
              grid-column: 4; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box input#planCoin {
              grid-row: 3;
              grid-column: 5; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box label {
              width: 100%;
              font-size: 108%;
              margin: 0;
              padding: 0;
              padding-top: 8px;
              padding-right: 5px;
              line-height: 40px;
              vertical-align: top;
              text-align: center;
              color: #ffffff; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box input, .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box select {
              width: calc(100% - $input-right-margin);
              height: 40px;
              margin-top: 8px;
              margin-right: 4px;
              padding-right: 18px;
              background: #f7f8f9;
              border: 1px solid #dbdbdb;
              border-radius: 3px;
              text-align: center; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box input#planSubj {
              text-align: left;
              padding-left: 12px;
              padding-right: 12px; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box input#planAmt {
              text-align: right; }

@media all and (max-width: 600px) {
  .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box {
    grid-template-rows: 48px 48px 48px 48px;
    grid-template-columns: 25% 25% 25% 25%; }
    .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box label[for=planSubj] {
      grid-row: 1;
      grid-column: 1; }
    .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box input#planSubj {
      grid-row: 1;
      grid-column: 2 / 4; }
    .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box label[for=planWays] {
      grid-row: 1;
      grid-column: 1;
      display: none; }
    .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box select#planWays {
      grid-row: 1;
      grid-column: 4; }
    .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box label[for=planDate] {
      grid-row: 2;
      grid-column: 1;
      display: none; }
    .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box input#planDate {
      grid-row: 2;
      grid-column: 1 / 3; }
    .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box select#planTime_hh {
      grid-row: 2;
      grid-column: 3; }
    .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box select#planTime_mm {
      grid-row: 2;
      grid-column: 4; }
    .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box label[for=planAmt] {
      grid-row: 3;
      grid-column: 1; }
    .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box select#planCint {
      grid-row: 3;
      grid-column: 2 / 5; }
    .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box input#planAmnt {
      grid-row: 4;
      grid-column: 1 / 4; }
    .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .sub-box input#planCoin {
      grid-row: 4;
      grid-column: 4 / 5; } }
          .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .btn-area {
            margin-top: 8px;
            height: 50px; }
            .service_container > .pbody > .panel-body.panel-reserve > .upper-row > .btn-area .btn > .btn-txt {
              padding-right: 20px; }
        .service_container > .pbody > .panel-body.panel-reserve > .lower-row {
          position: relative;
          grid-row: 2;
          grid-column: 1; }
          .service_container > .pbody > .panel-body.panel-reserve > .lower-row > .graph-box {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            width: 100%;
            height: 100%;
            padding: 8px;
            background: #ffffff; }
            .service_container > .pbody > .panel-body.panel-reserve > .lower-row > .graph-box canvas {
              position: relative;
              width: 100%;
              max-width: 720px; }

/* 
 * - - - - - - - - - - - - - - - -
 *  スライドアップコンテンツのデザイン
 * - - - - - - - - - - - - - - - -
 */
.panel-container {
  transition: 800ms cubic-bezier(0, 0.48, 0, 1);
  position: absolute;
  display: grid;
  grid-template-rows: 50px 1fr;
  grid-template-columns: 100%;
  width: 100%;
  height: 100%;
  left: auto;
  top: 0;
  right: -100%;
  bottom: 0;
  z-index: 99997;
  /* message, overlay の下 */
  background: #ffffff;
  overflow: hidden; }
  .panel-container.hidden {
    display: none; }
  .panel-container.slideup {
    top: 100%;
    right: 0; }
  .panel-container.focus, .panel-container.slideup.focus {
    right: 0;
    top: 0; }
  .panel-container > .phead {
    grid-row: 1;
    grid-column: 1;
    overflow: hidden;
    background: #76203a; }
    .panel-container > .phead .title {
      color: #ffffff;
      font-size: 18px;
      line-height: 50px;
      text-align: center; }
    .panel-container > .phead .close {
      position: absolute;
      display: inline-block;
      width: 20px;
      height: 20px;
      left: 14px;
      top: 14px;
      cursor: pointer; }
      .panel-container > .phead .close path {
        fill: #ffffff; }
    .panel-container > .phead .btn .btn-icn {
      position: absolute;
      display: inline-block;
      width: 24px;
      height: 24px;
      right: 0;
      top: 1px; }
      .panel-container > .phead .btn .btn-icn img {
        width: 100%;
        height: 100%; }
  .panel-container > .pbody {
    grid-row: 2;
    grid-column: 1;
    overflow-x: hidden;
    overflow-y: auto; }
    .panel-container > .pbody #QRwrap {
      box-sizing: border-box;
      position: relative;
      width: calc(100% - 8px);
      max-width: 600px;
      margin: 8px auto;
      border: 2px solid #76203a; }
    .panel-container > .pbody #QRcamera {
      position: absolute;
      top: -9999px; }
    .panel-container > .pbody #QRreader {
      position: absolute;
      top: 0;
      left: 0; }
    .panel-container > .pbody #QRfigure {
      position: absolute;
      top: 0;
      left: 0; }
    .panel-container > .pbody .QRtext {
      position: relative;
      margin-top: 0px;
      text-align: center;
      padding: 0 4px 4px; }
  .panel-container.app-set-account > .pbody {
    padding-left: 4px;
    padding-right: 4px; }
  .panel-container.info-contact > .pbody .contact-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
    /* --- INPUT要素の共通モダンデザイン --- */
    /* [ADD START] 入力要素とフィードバックアイコンを格納するコンテナ */
    /* --- エラーメッセージ/状態 --- */
    /* [ADD START] 成功時のスタイル */
    /* --- プライバシーチェックボックス (新規追加) --- */
    /* --- 送信ボタンエリア --- */
    /* --- メッセージ表示エリア --- */ }
    .panel-container.info-contact > .pbody .contact-form .contact-header {
      padding: 0 0 25px 0;
      border-bottom: 1px solid #eee;
      /* 区切り線 */
      margin-bottom: 25px; }
      .panel-container.info-contact > .pbody .contact-form .contact-header .description {
        font-size: 14px;
        line-height: 1.6;
        color: #333333; }
        .panel-container.info-contact > .pbody .contact-form .contact-header .description .note {
          display: block;
          margin-top: 5px;
          font-size: 12px;
          color: #888; }
    .panel-container.info-contact > .pbody .contact-form .form-group {
      margin-bottom: 20px;
      /* グループ間の余白を少し広げる */ }
      .panel-container.info-contact > .pbody .contact-form .form-group label {
        display: block;
        font-size: 15px;
        /* ラベルを少し大きく */
        font-weight: 500;
        /* 太すぎないフォントウェイト */
        color: #63063c;
        /* テーマカラーをラベルに適用 */
        margin-bottom: 8px;
        /* ラベルと入力欄の距離を適度に取る */ }
      .panel-container.info-contact > .pbody .contact-form .form-group .required {
        color: #dc409b;
        /* アクセントカラーを維持 */
        font-size: 14px;
        font-weight: bold;
        margin-left: 5px; }
    .panel-container.info-contact > .pbody .contact-form .input-large, .panel-container.info-contact > .pbody .contact-form textarea.input-large {
      width: 100%;
      height: 40px;
      padding: 0 15px;
      border: 1px solid #e0e0e0;
      /* 細く薄いボーダー */
      border-radius: 5px;
      /* 角丸を少し大きく */
      background-color: #f7f8f9;
      /* 薄い背景色 */
      font-size: 16px;
      /* 適切なフォントサイズ */
      color: #333333;
      transition: border-color 0.3s, box-shadow 0.3s; }
      .panel-container.info-contact > .pbody .contact-form .input-large:focus, .panel-container.info-contact > .pbody .contact-form textarea.input-large:focus {
        border-color: #dc409b;
        /* テーマカラーのボーダー */
        box-shadow: 0 0 0 2px rgba(220, 64, 155, 0.3);
        /* ソフトな影 */
        background-color: #ffffff;
        /* フォーカス時は白く */ }
    .panel-container.info-contact > .pbody .contact-form textarea.input-large {
      height: auto;
      min-height: 120px;
      padding: 10px 15px;
      /* 縦方向のパディングを追加 */
      line-height: 1.6; }
    .panel-container.info-contact > .pbody .contact-form .input-container {
      position: relative;
      display: flex;
      /* フィードバックアイコンを横に並べるために使用 */
      align-items: center; }
      .panel-container.info-contact > .pbody .contact-form .input-container .input-large {
        flex-grow: 1;
        /* inputが幅いっぱいになるように */
        margin-right: 0;
        /* フィードバックアイコンが隣接するため */ }
      .panel-container.info-contact > .pbody .contact-form .input-container .input-feedback {
        position: absolute;
        right: 15px;
        /* inputの右端から15px */
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        opacity: 0;
        /* 初期状態では非表示 */
        transition: opacity 0.3s;
        /* 白いチェックマークアイコンを作成 */ }
        .panel-container.info-contact > .pbody .contact-form .input-container .input-feedback::before {
          content: "\e5ca";
          /* Material Iconの'check'のコードポイント */
          font-family: 'Material Icons';
          font-size: 20px;
          color: #ffffff; }
    .panel-container.info-contact > .pbody .contact-form .error-message {
      color: #76203a;
      font-size: 13px;
      /* エラーメッセージを少し大きく */
      margin-top: 5px;
      min-height: 20px; }
    .panel-container.info-contact > .pbody .contact-form .input-error {
      border: 1px solid #76203a !important;
      background-color: #ffe3ec !important;
      /* エラー時の背景を薄いピンクに */
      box-shadow: none !important;
      /* エラー時は影を消す */
      /* input-container がある場合は、input-large ではなく input-container 内の input に適用 */
      /* エラー時はフィードバックアイコンを非表示 */ }
      .panel-container.info-contact > .pbody .contact-form .input-error.input-large {
        border: 1px solid #76203a !important;
        background-color: #ffe3ec !important;
        box-shadow: none !important; }
      .panel-container.info-contact > .pbody .contact-form .input-error ~ .input-feedback {
        opacity: 0 !important; }
    .panel-container.info-contact > .pbody .contact-form .input-success {
      border: 1px solid #4CAF50 !important;
      /* 緑色のボーダー */
      background-color: #eaf6eb !important;
      /* 薄い緑の背景 */
      /* 成功時にフィードバックアイコンを表示 */ }
      .panel-container.info-contact > .pbody .contact-form .input-success ~ .input-feedback {
        opacity: 1;
        background-color: #4CAF50;
        /* 緑の円の背景 */
        border-radius: 50%; }
    .panel-container.info-contact > .pbody .contact-form .privacy-check-group {
      margin-top: 30px;
      /* チェックボックスのエラー時は、エラーメッセージのみ表示 */ }
      .panel-container.info-contact > .pbody .contact-form .privacy-check-group .checkbox-container {
        display: flex;
        align-items: center; }
        .panel-container.info-contact > .pbody .contact-form .privacy-check-group .checkbox-container input[type="checkbox"] {
          /* デフォルトのチェックボックスを隠すハック */
          position: absolute;
          opacity: 0;
          /* カスタムチェックボックスを作成 */
          /* チェックされた時のスタイル */
          /* チェックされた時のチェックマークアイコン */ }
          .panel-container.info-contact > .pbody .contact-form .privacy-check-group .checkbox-container input[type="checkbox"] + label::before {
            content: '';
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 2px solid #63063c;
            border-radius: 4px;
            margin-right: 8px;
            vertical-align: middle;
            transition: background-color 0.2s, border-color 0.2s; }
          .panel-container.info-contact > .pbody .contact-form .privacy-check-group .checkbox-container input[type="checkbox"]:checked + label::before {
            background-color: #dc409b;
            border-color: #dc409b; }
          .panel-container.info-contact > .pbody .contact-form .privacy-check-group .checkbox-container input[type="checkbox"]:checked + label::after {
            content: '\2713';
            /* Unicodeチェックマーク */
            display: block;
            position: absolute;
            top: 0;
            left: 3px;
            color: #ffffff;
            font-size: 14px;
            line-height: 18px;
            font-weight: bold; }
        .panel-container.info-contact > .pbody .contact-form .privacy-check-group .checkbox-container label {
          /* ラベルのスタイルをチェックボックス用に調整 */
          display: inline-flex;
          align-items: center;
          position: relative;
          /* チェックマーク配置のため */
          font-size: 14px;
          color: #333333;
          margin-bottom: 0;
          cursor: pointer; }
        .panel-container.info-contact > .pbody .contact-form .privacy-check-group .checkbox-container .privacy-link {
          color: #dc409b;
          text-decoration: underline;
          font-weight: bold; }
      .panel-container.info-contact > .pbody .contact-form .privacy-check-group .error-message {
        text-align: left;
        margin-left: 26px;
        /* チェックボックスの幅に合わせてインデント */
        font-weight: bold; }
    .panel-container.info-contact > .pbody .contact-form .form-actions {
      text-align: center;
      margin-top: 40px;
      /* 上部の余白を広げ、目立たせる */
      padding-bottom: 20px;
      /* パネル下端との余白 */ }
      .panel-container.info-contact > .pbody .contact-form .form-actions .btn-submit-lg {
        min-width: 250px;
        height: 50px;
        /* ボタンの高さを上げる */
        font-size: 18px;
        /* ボタンの文字を強調 */
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center; }
        .panel-container.info-contact > .pbody .contact-form .form-actions .btn-submit-lg .material-icons {
          margin-left: 10px;
          font-size: 20px; }
    .panel-container.info-contact > .pbody .contact-form .alert {
      padding: 12px 15px;
      margin-bottom: 20px;
      border: 1px solid transparent;
      border-radius: 5px;
      font-size: 14px;
      text-align: center; }
      .panel-container.info-contact > .pbody .contact-form .alert.alert-error {
        color: #76203a;
        background-color: #ffe3ec;
        border-color: #76203a; }
      .panel-container.info-contact > .pbody .contact-form .alert.alert-info {
        color: #63063c;
        background-color: #ffe3ec;
        border-color: #f11193; }

/* 
 * - - - - - - - - - - - - - - - -
 *  Hamburger Menu のデザイン
 * - - - - - - - - - - - - - - - -
 */
.panel-navi {
  transition: 800ms cubic-bezier(0, 0.48, 0, 1);
  position: absolute;
  display: grid;
  grid-template-rows: 72px 1fr 18px;
  grid-template-columns: 100%;
  width: 320px;
  height: 100%;
  left: -320px;
  top: 0;
  right: auto;
  bottom: 0;
  background: #ffe3ec;
  z-index: 99999; }
  .panel-navi.focus {
    left: 0; }
  .panel-navi > .phead {
    grid-row: 1;
    grid-column: 1;
    overflow: hidden;
    text-align: center;
    background: #76203a;
    color: #ffffff; }
    .panel-navi > .phead .title {
      display: block;
      font-family: ubuntu;
      font-size: 32px; }
    .panel-navi > .phead .uname {
      font-size: 14px;
      letter-spacing: 2px; }
    .panel-navi > .phead .anchor {
      font-size: 10px;
      text-decoration: underline;
      position: absolute;
      right: 8px;
      bottom: 8px; }
  .panel-navi > .pbody {
    overflow-y: auto;
    grid-row: 2;
    grid-column: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 8px;
    padding-bottom: 80px; }
    .panel-navi > .pbody ul > li {
      position: relative;
      display: block;
      list-style-type: none;
      height: 40px;
      line-height: 40px;
      padding-left: 24px;
      cursor: pointer; }
      .panel-navi > .pbody ul > li[data-op=operateLogout] {
        position: absolute;
        width: 280px;
        bottom: -60px; }
      .panel-navi > .pbody ul > li:before {
        position: absolute;
        display: inline-block;
        content: '▼';
        transform: rotate(-90deg);
        width: 24px;
        height: 40px;
        line-height: 40px;
        top: -4px;
        left: -30px;
        font-size: 14px;
        color: #76203a; }
      .panel-navi > .pbody ul > li.sub:before {
        color: #dc409b; }
      .panel-navi > .pbody ul > li > span {
        color: #76203a;
        vertical-align: middle;
        font-size: 16px;
        font-weight: bold; }
      .panel-navi > .pbody ul > li:hover {
        background: #ffffffcc; }
    .panel-navi > .pbody ul > hr {
      border: 1px solid #d6c7d0;
      margin-left: -20px;
      margin-right: 24px;
      margin-top: 8px;
      margin-bottom: 4px; }
  .panel-navi > .pfoot {
    grid-row: 3;
    grid-column: 1;
    overflow: hidden;
    text-align: center;
    background: #76203a;
    color: #ffffff;
    font-family: ubuntu;
    font-size: 12px; }
    .panel-navi > .pfoot .copyright {
      color: #ffffff; }

/* .panel-navi { ... } */
/*
 * モーダルダイアログデザイン
 */
/* 既存のSCSSの雰囲気を再現するアニメーションとユーティリティ */
.dialog-overlay {
  background: rgba(60, 60, 60, 0.7);
  backdrop-filter: blur(4px);
  transition: all 0.3s cubic-bezier(0, 0.48, 0, 1); }

.dialog-content {
  border-top: 4px solid var(--theme-color-ouen);
  animation: slideUp 0.3s ease-out; }

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95); }
  to {
    opacity: 1;
    transform: translateY(0) scale(1); } }

.btn-ouen-primary {
  background-color: var(--theme-color-ouen);
  color: white;
  transition: all 0.2s; }

.btn-ouen-primary:hover {
  background-color: var(--theme-dark-ouen);
  transform: translateY(-1px); }

.btn-ouen-outline {
  border: 1px solid var(--theme-color-ouen);
  color: var(--theme-color-ouen);
  background-color: var(--white); }

.btn-ouen-outline:hover {
  background-color: var(--theme-pale-ouen); }

/* 
 * - - - - - - - - - - - - - - - -
 *  その他の共通デザイン2
 * - - - - - - - - - - - - - - - -
 */
.initial-curtain {
  transition: 800ms cubic-bezier(0, 0.48, 0, 1);
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000088;
  color: #ffffff;
  overflow: hidden; }
  .initial-curtain.hidden {
    display: none; }
  .initial-curtain > .center-image {
    font-family: ubuntu;
    font-size: 32px; }
  .initial-curtain.open {
    left: -100%; }

#MessageBand.panel-message {
  position: absolute;
  width: calc(100% - 16px);
  margin: 8px;
  top: auto;
  z-index: 99999; }
  #MessageBand.panel-message .alert {
    text-align: center;
    padding: 8px 15px; }
    #MessageBand.panel-message .alert.alert-info {
      color: #ab3379;
      background-color: #ffffff;
      border-color: #ffe3ec; }

#OverlayCover.panel-overlay {
  transition: 200ms cubic-bezier(0, 0.48, 0, 1);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99998;
  background: rgba(0, 0, 0, 0); }
  #OverlayCover.panel-overlay.cover {
    background: rgba(60, 60, 60, 0.7); }

/* 
 * - - - - - - - - - - - - - - - -
 *  その他の共通デザイン2
 * - - - - - - - - - - - - - - - -
 */
.rb-ouen {
  background: repeating-linear-gradient(190deg, rgba(171, 51, 121, 0.5) 40px, rgba(255, 227, 236, 0.5) 80px, rgba(220, 64, 155, 0.5) 120px, rgba(255, 227, 236, 0.5) 160px, rgba(248, 202, 216, 0.5) 200px, rgba(255, 227, 236, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px, rgba(255, 227, 236, 0.5) 300px), repeating-linear-gradient(-190deg, rgba(171, 51, 121, 0.5) 30px, rgba(255, 227, 236, 0.5) 60px, rgba(220, 64, 155, 0.5) 90px, rgba(255, 227, 236, 0.5) 120px, #ffffff 150px, rgba(255, 227, 236, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px, rgba(255, 227, 236, 0.5) 230px), repeating-linear-gradient(23deg, rgba(171, 51, 121, 0.5) 50px, rgba(255, 227, 236, 0.5) 100px, rgba(220, 64, 155, 0.5) 150px, rgba(255, 227, 236, 0.5) 200px, #ffffff 250px, rgba(255, 227, 236, 0.5) 300px, violet 350px, rgba(255, 227, 236, 0.5) 370px); }

@-webkit-keyframes knockAnim {
  0% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg); }
  15% {
    -webkit-transform: rotate(55deg);
    transform: rotate(55deg); }
  35% {
    -webkit-transform: rotate(32deg);
    transform: rotate(32deg); }
  55% {
    -webkit-transform: rotate(55deg);
    transform: rotate(55deg); }
  90% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg); }
  100% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg); } }

@keyframes knockAnim {
  0% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg); }
  15% {
    -webkit-transform: rotate(55deg);
    transform: rotate(55deg); }
  35% {
    -webkit-transform: rotate(32deg);
    transform: rotate(32deg); }
  55% {
    -webkit-transform: rotate(55deg);
    transform: rotate(55deg); }
  90% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg); }
  100% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg); } }