@charset "UTF-8";
/* #Normalize.css
   -------------------------------------------------------------------------- */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  scroll-behavior: smooth;
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="email"],
input[type="file"],
textarea {
  font-size: 1.6rem !important;
}

input[type="text"],
input[type="password"] {
  /* background-color: rgb(232, 240, 254) !important; */
  background-color: rgb(255, 255, 255) !important;
}

input[type="text"] {
  box-shadow: 0px 0px 100px 100px #fff inset;
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -moz-appearance: button;
  appearance: button;
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  transform: scale(1.6);
  cursor: pointer;
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -moz-appearance: textfield;
  appearance: textfield;
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
  font-size: inherit;
  margin-bottom: 0;
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  max-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.arrow {
  background: #2a86b0;
  content: "";
  font-family: FontAwesome;
  position: absolute;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: "Noto Sans JP", sans-serif !important;
  text-align: justify !important;
  word-break: break-all;
}

::-ms-reveal {
  display: none;
}

label[for],
label:has(input) {
  cursor: pointer;
}

:root {
  /*-----icon-path-----*/
  --svg-01-navichan: url(/static/img/svg/01_navichan.svg);
  --svg-static-arrow-up: url(/static/img/svg/arrow-up.svg);

  /* Font-awesome */
  --svg-fa-download: url(/static/libs/fontawesome-free/svgs/solid/download.svg);
  --svg-fa-up-right-from-square: url(/static/libs/fontawesome-free/svgs/solid/up-right-from-square.svg);
  --svg-hash-tag: url(/static/libs/fontawesome-free/svgs/solid/hashtag.svg);

  /* bootstrap icons */
  --svg-arrow-bar-down: url(/static/libs/bootstrap-icons/icons/arrow-bar-down.svg);
  --svg-arrow-clockwise: url(/static/libs/bootstrap-icons/icons/arrow-clockwise.svg);
  --svg-arrow-down-circle-fill: url(/static/libs/bootstrap-icons/icons/arrow-down-circle-fill.svg);
  --svg-arrow-down-small: url(/static/libs/bootstrap-icons/icons/arrow-down-small.svg);
  --svg-arrow-left: url(/static/libs/bootstrap-icons/icons/arrow-left.svg);
  --svg-arrow-left-short: url(/static/libs/bootstrap-icons/icons/arrow-left-short.svg);
  --svg-arrow-repeat: url(/static/libs/bootstrap-icons/icons/arrow-repeat.svg);
  --svg-arrow-return-right: url(/static/libs/bootstrap-icons/icons/arrow-return-right.svg);
  --svg-arrow-right: url(/static/libs/bootstrap-icons/icons/arrow-right.svg);
  --svg-arrow-right-circle: url(/static/libs/bootstrap-icons/icons/arrow-right-circle.svg);
  --svg-arrow-right-short: url(/static/libs/bootstrap-icons/icons/arrow-right-short.svg);
  --svg-arrow-up: url(/static/libs/bootstrap-icons/icons/arrow-up.svg);
  --svg-balloon-fill: url(/static/libs/bootstrap-icons/icons/balloon-fill.svg);
  --svg-bell-fill: url(/static/libs/bootstrap-icons/icons/bell-fill.svg);
  --svg-box-arrow-in-down: url(/static/libs/bootstrap-icons/icons/box-arrow-in-down.svg);
  --svg-box-arrow-in-right: url(/static/libs/bootstrap-icons/icons/box-arrow-in-right.svg);
  --svg-box-arrow-right: url(/static/libs/bootstrap-icons/icons/box-arrow-right.svg);
  --svg-calendar-date: url(/static/libs/bootstrap-icons/icons/calendar-date.svg);
  --svg-calendar-check: url(/static/libs/bootstrap-icons/icons/calendar-check.svg);
  --svg-calendar-check-fill: url(/static/libs/bootstrap-icons/icons/calendar-check-fill.svg);
  --svg-calendar2-day: url(/static/libs/bootstrap-icons/icons/calendar2-day.svg);
  --svg-calendar2-event-fill: url(/static/libs/bootstrap-icons/icons/calendar2-event-fill.svg);
  --svg-calendar3: url(/static/libs/bootstrap-icons/icons/calendar3.svg);
  --svg-calendar3-event: url(/static/libs/bootstrap-icons/icons/calendar3-event.svg);
  --svg-calendar3-week: url(/static/libs/bootstrap-icons/icons/calendar3-week.svg);
  --svg-caret-right-fill: url(/static/libs/bootstrap-icons/icons/caret-right-fill.svg);
  --svg-chat-dots-fill: url(/static/libs/bootstrap-icons/icons/chat-dots-fill.svg);
  --svg-check: url(/static/libs/bootstrap-icons/icons/check.svg);
  --svg-check2: url(/static/libs/bootstrap-icons/icons/check2.svg);
  --svg-chevron-down: url(/static/libs/bootstrap-icons/icons/chevron-down.svg);
  --svg-chevron-left-bold: url(/static/libs/bootstrap-icons/icons/chevron-left-bold.svg);
  --svg-chevron-right-bold: url(/static/libs/bootstrap-icons/icons/chevron-right-bold.svg);
  --svg-chevron-up: url(/static/libs/bootstrap-icons/icons/chevron-up.svg);
  --svg-circle-fill: url(/static/libs/bootstrap-icons/icons/circle-fill.svg);
  --svg-clock: url(/static/libs/bootstrap-icons/icons/clock.svg);
  --svg-copy: url(/static/libs/bootstrap-icons/icons/copy.svg);
  --svg-crosshair: url(/static/libs/bootstrap-icons/icons/crosshair.svg);
  --svg-cursor-fill: url(/static/libs/bootstrap-icons/icons/cursor-fill.svg);
  --svg-dash-circle-fill: url(/static/libs/bootstrap-icons/icons/dash-circle-fill.svg);
  --svg-dot: url(/static/libs/bootstrap-icons/icons/dot.svg);
  --svg-envelope: url(/static/libs/bootstrap-icons/icons/envelope.svg);
  --svg-exclamation: url(/static/libs/bootstrap-icons/icons/exclamation.svg);
  --svg-exclamation-circle: url(/static/libs/bootstrap-icons/icons/exclamation-circle.svg);
  --svg-filter-left: url(/static/libs/bootstrap-icons/icons/filter-left.svg);
  --svg-filetype-csv: url(/static/libs/bootstrap-icons/icons/filetype-csv.svg);
  --svg-filetype-docx: url(/static/libs/bootstrap-icons/icons/filetype-docx.svg);
  --svg-filetype-jpg: url(/static/libs/bootstrap-icons/icons/filetype-jpg.svg);
  --svg-filetype-lzh: url(/static/libs/bootstrap-icons/icons/filetype-lzh.svg);
  --svg-filetype-pdf: url(/static/libs/bootstrap-icons/icons/filetype-pdf.svg);
  --svg-filetype-ppt: url(/static/libs/bootstrap-icons/icons/filetype-ppt.svg);
  --svg-filetype-pptx: url(/static/libs/bootstrap-icons/icons/filetype-pptx.svg);
  --svg-filetype-txt: url(/static/libs/bootstrap-icons/icons/filetype-txt.svg);
  --svg-filetype-xls: url(/static/libs/bootstrap-icons/icons/filetype-xls.svg);
  --svg-filetype-xlsx: url(/static/libs/bootstrap-icons/icons/filetype-xlsx.svg);
  --svg-filetype-xltx: url(/static/libs/bootstrap-icons/icons/filetype-xltx.svg);
  --svg-file-zip-fill: url(/static/libs/bootstrap-icons/icons/file-zip-fill.svg);
  --svg-flag-fill: url(/static/libs/bootstrap-icons/icons/flag-fill.svg);
  --svg-gear-fill: url(/static/libs/bootstrap-icons/icons/gear-fill.svg);
  --svg-reference: url(/static/libs/bootstrap-icons/icons/building.svg);
  --svg-zip: url(/static/img/svg/portalcode.svg);
  --svg-geo-alt-fill: url(/static/libs/bootstrap-icons/icons/geo-alt-fill.svg);
  --svg-grid-fill: url(/static/libs/bootstrap-icons/icons/grid-fill.svg);
  --svg-house-fill: url(/static/libs/bootstrap-icons/icons/house-fill.svg);
  --svg-image-fill: url(/static/libs/bootstrap-icons/icons/image-fill.svg);
  --svg-info-circle: url(/static/libs/bootstrap-icons/icons/info-circle.svg);
  --svg-info-circle-fill: url(/static/libs/bootstrap-icons/icons/info-circle-fill.svg);
  --svg-list-fill-og: url(/static/libs/bootstrap-icons/icons/list-fill-og.svg);
  --svg-lock-fill: url(/static/libs/bootstrap-icons/icons/lock-fill.svg);
  --svg-megaphone: url(/static/libs/bootstrap-icons/icons/megaphone.svg);
  --svg-megaphone-fill: url(/static/libs/bootstrap-icons/icons/megaphone-fill.svg);
  --svg-paperclip: url(/static/libs/bootstrap-icons/icons/paperclip.svg);
  --svg-pencil-square: url(/static/libs/bootstrap-icons/icons/pencil-square.svg);
  --svg-people-fill: url(/static/libs/bootstrap-icons/icons/people-fill.svg);
  --svg-person-fill: url(/static/libs/bootstrap-icons/icons/person-fill.svg);
  --svg-person-fill-add: url(/static/libs/bootstrap-icons/icons/person-fill-add.svg);
  --svg-person-lines-fill: url(/static/libs/bootstrap-icons/icons/person-lines-fill.svg);
  --svg-person-x-fill: url(/static/libs/bootstrap-icons/icons/person-x-fill.svg);
  --svg-pin-angle-fill: url(/static/libs/bootstrap-icons/icons/pin-angle-fill.svg);
  --svg-plus: url(/static/libs/bootstrap-icons/icons/plus.svg);
  --svg-plus-circle-fill: url(/static/libs/bootstrap-icons/icons/plus-circle-fill.svg);
  --svg-question-circle-fill: url(/static/libs/bootstrap-icons/icons/question-circle-fill.svg);
  --svg-quora: url(/static/libs/bootstrap-icons/icons/quora.svg);
  --svg-reply-fill: url(/static/libs/bootstrap-icons/icons/reply-fill.svg);
  --svg-search: url(/static/libs/bootstrap-icons/icons/search.svg);
  --svg-send: url(/static/libs/bootstrap-icons/icons/send.svg);
  --svg-square-fill-02: url(/static/libs/bootstrap-icons/icons/square-fill_02.svg);
  --svg-suit-heart-fill: url(/static/libs/bootstrap-icons/icons/suit-heart-fill.svg);
  --svg-trash3: url(/static/libs/bootstrap-icons/icons/trash3.svg);
  --svg-trash-fill: url(/static/libs/bootstrap-icons/icons/trash-fill.svg);
  --svg-x: url(/static/libs/bootstrap-icons/icons/x.svg);
  --svg-x-lg: url(/static/libs/bootstrap-icons/icons/x-lg.svg);
  --svg-zoom-in: url(/static/libs/bootstrap-icons/icons/zoom-in.svg);
  --svg-zoom-out: url(/static/libs/bootstrap-icons/icons/zoom-out.svg);

  /*-----icon-color-----*/
  --icon-delete-color: #de3545;
  --icon-white-color: #ffffff;
  --icon-black-color: #333333;
  --icon-favorite-color: #ef4565;
  --icon-favorite-white: var(--icon-white-color);
  --icon-arrowlink-color: var(--icon-primary-color);
  --icon-primary-color-active: invert(100%) sepia(0%) saturate(4523%)
    hue-rotate(275deg) brightness(112%) contrast(110%);

  --icon-white-color-filter: brightness(0) saturate(100%) invert(100%) sepia(1%)
    saturate(1689%) hue-rotate(185deg) brightness(111%) contrast(100%);
  --icon-black-color-filter: brightness(0) saturate(100%) invert(18%) sepia(6%)
    saturate(9%) hue-rotate(317deg) brightness(92%) contrast(91%);
  /*-----box-shadow------*/
  --boxshadow-primary-style: 0px 3px 6px -2px rgba(57, 57, 57, 0.3);
  --boxshadow-secondary-style: 0px 3px 6px -3px rgba(57, 57, 57, 0.3);

  /*-----placeholder-----*/
  --placeholder-color: #888888;

  /*---parts CTAボタン primary secondary以外のスタイル ---*/
  /* -検索メニュー 検索するボタン */
  /* --btn-primary-search-color: #53546b;
  --btn-primary-search-bgcolor: #ffffff;
  --btn-primary-search-bordercolor: var(--btn-primary-search-color);
  --btn-primary-search-icon-color: #53546b; */
  --btn-primary-search-color: var(--btn-secondary-color);
  --btn-primary-search-bgcolor: var(--btn-secondary-bgcolor);
  --btn-primary-search-bordercolor: var(--btn-secondary-bordercolor);
  --btn-primary-search-icon-color: var(--icon-primary-color);

  /* 汎用 - 削除するボタン */
  --btn-secondary-delete-color: var(--btn-secondary-color);
  --btn-secondary-delete-bgcolor: #f3f3f3;
  --btn-secondary-delete-bordercolor: #666666;
  --btn-secondary-delete-bgcolor-hover: var(--btn-secondary-bgcolor-hover);
  --btn-secondary-delete-icon-color: var(--btn-secondary-icon-color);

  /* 予約設定一覧など - 詳細を見るボタン */
  --btn-secondary-detail-color: var(--btn-secondary-color);
  --btn-secondary-detail-bgcolor: #ffffff;
  --btn-secondary-detail-bordercolor: var(--btn-secondary-bordercolor);
  --btn-secondary-delete-bgcolor-hover: var(--btn-secondary-bgcolor-hover);
  --btn-secondary-delete-icon-color: var(--btn-secondary-icon-color);

  /* 検索メニュー 検索条件をクリアするボタン */
  /* --btn-secondary-clear-color: #ffffff;
  --btn-secondary-clear-bgcolor: #53546b;
  --btn-secondary-clear-bordercolor: var(--btn-secondary-clear-bgcolor);
  --btn-secondary-clear-bgcolor-hover: #3f404f;
  --btn-secondary-clear-icon-color: var(--icon-white-color); */
  --btn-secondary-clear-color: var(--btn-secondary-delete-color);
  --btn-secondary-clear-bgcolor: var(--btn-secondary-delete-bgcolor);
  --btn-secondary-clear-bordercolor: var(--btn-secondary-delete-bordercolor);
  --btn-secondary-clear-bgcolor-hover: var(
    --btn-secondary-delete-bgcolor-hover
  );
  --btn-secondary-clear-icon-color: #333333;

  /*-----link - visited-----*/
  --a-link-color-visited: #690080;

  /*-----loginfield-----*/
  --icon-loginfield-color: #555555;

  /*-----SPヘッダーメニュー共通部分*/
  --icon-offcanvas-menu-width: 18px;
  --icon-offcanvas-menu-height: var(--icon-offcanvas-menu-width);

  /*---page - 会員登録 /account/regist/ ---*/

  /*---parts フッターナビゲーション ---*/
  --icon-fnavi-width: 1.5rem;
  --icon-fnavi-height: 1.5rem;

  /*---parts フッター　グローバルナビゲーション*/
  --icon-footer-width: 2.4rem;
  --icon-footer-height: 2.4rem;

  /*---parts - タブ　アイコン ---*/
  --icon-tab-width: 1.8rem;
  --icon-tab-height: 1.8rem;

  /*---parts - 検索機能　アイコン ---*/
  --icon-search-width: 1.6rem;
  --icon-search-height: 1.6rem;

  /*---parts - マイページ、SNS、レビュー、住所 アイコン ---*/
  --icon-other-width: 2rem;
  --icon-other-height: 2rem;

  /*---parts - 必須マーク---*/
  --label-required-color: #e62041;

  /*---parts - 情報修正提案 ---*/
  --label-post-exclamation-bgcolor: #fcf8e1;
  --dark-yellow: #c88903;
  --label-post-exclamation-bordercolor: var(--dark-yellow);

  /*---parts - ヘッダーのログイン/ログアウト ボタン*/
  --btn-header-log-width: 5rem;
  --btn-header-log-height: 5rem;
  --btn-header-log-bgcolor: var(--bg-headerMenu-color);
  --a-header-log-fontsize: 1rem;
  --btn-header-log-width-before: 2.8rem;
  --btn-header-log-height-before: 2.8rem;
  --btn-header-login-a-paddingtop: 4rem;
  --btn-haeder-login-a-lineheight: 0.9rem;
  --btn-header-login-a-before-left: 0.85rem;
  --btn-header-login-a-before-bottom: 1.6rem;

  /*---parts - list_result tileとlistでの表示切替 ---*/
  --btn-switchDisp-fontsize: 1.6rem;
  --btn-switchDisp-borderradius: 0.5rem;
  --btn-switchDisp-before-size: 2rem;
  --btn-switchDisp-before-left: 2.4rem;
  --btn-switchDisp-before-bottom: 0.7rem;

  /*---parts - 投稿カード ---*/
  --card-postflame-xxl-size: 41.3rem;
  --card-postflame-xl-size: 35.3rem;
  --card-postflame-lg-size: 44.8rem;
  --card-postflame-md-size: 32.8rem;
  --card-postflame-sm-size: 49.3rem;
  --card-postflame-xs-size: calc(100vw - 67px);

  /*---parts - カレンダー　イベント情報 ---*/
  --card-calendar-xxl-size: 16rem;
  --card-calendar-xl-size: 16rem;
  --card-calendar-lg-size: 13.075rem;

  /*---parts - カレンダー sticky対応用の数値---*/
  --top-calendar-monthlymenu: 80px;

  /*---parts - 予約　カード---*/
  --card-reserve-borderradius: 0.375rem;
  --card-reserve-borderstyle: solid;

  /*---parts - ボタンのボーダー 一般化*/
  --btn-primary-borderwidth: 0.1rem;

  /*---parts - お知らせバッチ ---*/
  --badge-static-padding-x: 0.65rem;
  --badge-static-padding-xl: 2.1rem;
  --badge-static-padding-yt: 0.35rem;
  --badge-static-padding-yb: 0.4rem;
  --badge-static-fontsize: 1.2rem;
  --badge-static-fontweight: 600;
  --badge-static-borderradius: 0.375rem;
  --badge-top-priority-bgcolor: #fced99;
  --badge-top-priority-color: #664816;
  --badge-important-bgcolor: #fbc5c5;
  --badge-important-color: #820202;
  --badge-new-bgcolor: #cde6ff;
  --badge-new-color: #054582;
  --badge-file-exit-bgcolor: #ededed;
  --badge-file-exit-color: #4e4e4e;

  /*---parts - アンカーリンク ---*/
  --icon-anchorjump-color: var(--icon-primary-color);
  --anchorJump-borderwidth: 0.1rem;
  --anchorJump-borderstyle: solid;
  --anchorJump-bordercolor: #dee2e6;
  --anchorJump-color: var(--text-primary-color);

  /*---parts - アウトライン ---*/
  --item-outline-style: solid 2px #de6d16;
  --item-outline-borderradius: 0.1rem;

  /*---parts - bootstrap風のlabel ---*/
  --label-outline-primary-color: #0d6efd;
  --label-outline-primary-borderwidth: var(--bs-border-width);
  --label-outline-primary-boedercolor: var(--label-outline-primary-color);
  --label-outline-primary-borderradius: var(--bs-btn-border-radius);

  /*一時退避場所*/
  --span-switch02-width: 100%;
  --span-switch02-height: 3.5rem;

  /*TODO - あとでカラバリ対応*/
  --border-navisma-color: #dee2e6;
  --border-navisma-style: solid;
  --border-navisma-width: 1px;

  /*---parts - ユーザの状態---*/
  --user-status-all-color: #fefefe; /*全員*/
  --user-status-public-color: #e67f19; /*一般*/
  --user-status-member-color: #57e680; /*会員*/
  --user-status-certified-color: #3659c0; /*公認*/

  /*---parts - ユーザの状態---*/
  --dark-green: #25724e;
  --dark-yellow: #9a6810;
  --dark-red: #b72f3e;
}

main {
  background-color: var(--bg-primary-color);
  flex-grow: 1;
  overflow: clip;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

input::-webkit-input-placeholder {
  color: var(--placeholder-color);
}

input::-moz-placeholder {
  color: var(--placeholder-color);
}

input:-ms-input-placeholder {
  color: var(--placeholder-color);
}

input::-ms-input-placeholder {
  color: var(--placeholder-color);
}

input::placeholder {
  color: var(--placeholder-color);
}

.bg-anonymous {
  min-height: calc(100dvh - 80px - 151px);
}

.bgnone {
  background: none !important;
}

@font-face {
  font-family: "MyYuGothicM";
  font-weight: normal;
  src:
    local("YuGothic-Medium"), local("Yu Gothic Medium"),
    local("YuGothic-Regular");
}

/* 共通パーツ - width: 575px以下のとき、左右余白を制御するためのクラス */
.main-inner {
  width: 100%;
}

/* form-areaの間隔 */

.form_spacing {
  margin-bottom: 2rem !important;
}

.checkbox_spacing {
  /* display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: start; */
  display: grid;
  grid-template-columns: 16px 1fr;
  grid-template-rows: 16px 16px;
  margin: 1.6rem 0 2rem;
  font-size: 1.6rem;
  width: 100%;
}

.checkbox_spacing input {
  width: 16px;
  /* margin-left: 4px; */
}

.checkbox_spacing label {
  margin-left: 1.6rem;
  line-height: 1.4;
}

/* Main */
div.ccm-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
div.ccm-page h1,
div.ccm-page h2,
div.ccm-page h3,
div.ccm-page h4,
div.ccm-page h5,
div.ccm-page h6,
div.ccm-page ul,
div.ccm-page ol,
div.ccm-page dl,
div.ccm-page blockquote,
div.ccm-page p,
div.ccm-page address,
div.ccm-page hr,
div.ccm-page table,
div.ccm-page fieldset,
div.ccm-page figure,
div.ccm-page pre {
  margin-top: 0;
  margin-bottom: 0;
}

.month-wrapper {
  overflow: hidden;
  top: var(--top-calendar-monthlymenu);
  z-index: 1;
}

.wrapper-inner {
  background-color: var(--bg-primary-color);
  position: fixed;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  top: var(--top-calendar-monthlymenu);
}

.content {
  padding-bottom: 2rem;
}

@media screen and (max-width: 767px) {
  .content {
    padding-bottom: 2rem;
  }
}

.bg_main_color {
  background-color: var(--bg-main-color);
}

.bg_base_color {
  background-color: var(--bg-primary-color);
}

/* .text_base_color {
  color: var(--text-wireflame-color);
} */

.text_primary_color {
  color: var(--text-primary-color);
}

/* TODO:以下二つのcssの必要性を検討 */
.icon_base_color {
  filter: var(--icon-primary-color-filter);
}

.icon_primary_color {
  background-color: var(--icon-primary-color);
}

/* .icon_primary_color:active {
  filter: var(--icon-primary-color-active);
} */

.icon_white {
  background-color: var(--icon-white-color);
}

.w-fit-content {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

/* ---------------------container 同一要素に配置してpadding-xを保つクラス ---------------------*/
/* 共通パーツ - containerクラスと同一要素においてpadding-xを保つ */
div[class*="container"].p-all-none {
  padding-right: 0;
  padding-left: 0;
}

@media screen and (max-width: 575px) {
  div[class*="container"].p-sp-0 {
    padding-right: 0;
    padding-left: 0;
  }

  div[class*="container"].p-sp-15 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media screen and (min-width: 992px) {
  div[class*="container"].p-pc-0 {
    padding-right: 0;
    padding-left: 0;
  }
}

/* ---------------------container 同一要素に配置してwidth:992px以上の時表示しないクラス ---------------------*/
@media screen and (min-width: 992px) {
  div[class*="container"].disp-pc-none {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  .disp-pc-none {
    display: flex;
  }
}

/* ---------------------汎用クラス containerと同じwidthを取り続けるcontainerのinnerクラス ---------------------*/
@media screen and (min-width: 576px) {
  .container-inner {
    max-width: 540px;
  }
}

@media screen and (min-width: 768px) {
  .container-inner {
    max-width: 720px;
  }
}

@media screen and (min-width: 992px) {
  .container-inner {
    max-width: 960px;
  }
}

@media screen and (min-width: 1200px) {
  .container-inner {
    max-width: 1140px;
  }
}

@media screen and (min-width: 1400px) {
  .container-inner {
    max-width: 1320px;
  }
}

/* ---------------------疑似要素 共通クラス----------------------- */
/* ---MEMO : svgをmaskで挿入している要素のみに対応、backgroundで挿入している場合は各々で記述する --- */

/* 疑似要素 - relative側 */
.pseudoElements-bx,
.pseudoElements-ax,
.pseudoElements-by,
.pseudoElements-ay {
  position: relative;
}

/* 疑似要素 - absolute側 */
/* 横方向 before */
.pseudoElements-bx::before {
  position: absolute;
  content: "";
  mask-repeat: no-repeat;
  mask-size: cover;
  width: 1em;
  height: 1em;
  top: 50%;
  transform: translate(0, -50%);
  left: 0;
}

/* 横方向 after */
.pseudoElements-ax::after {
  position: absolute;
  content: "";
  mask-repeat: no-repeat;
  mask-size: cover;
  width: 1em;
  height: 1em;
  top: 50%;
  transform: translate(0, -50%);
  right: 0;
}

/* 縦方向 before */
.pseudoElements-by::before {
  position: absolute;
  content: "";
  mask-repeat: no-repeat;
  mask-size: cover;
  width: 1em;
  height: 1em;
  left: 50%;
  transform: translate(-50%, 0);
}

/* 縦方向 after */
.pseudoElements-ay::after {
  position: absolute;
  content: "";
  mask-repeat: no-repeat;
  mask-size: cover;
  width: 1em;
  height: 1em;
  left: 50%;
  transform: translate(-50%, 0);
}

/* Extra - 疑似要素を挿入した部分に折り返しが発生する場合、文字の先頭に疑似要素をつけ続ける */
.pseudoElements__fr-bx,
.pseudoElements__fr-ax {
  position: relative;
  display: block flow-root;
}

.pseudoElements__fr-bx::before {
  position: absolute;
  content: "";
  mask-repeat: no-repeat;
  mask-size: cover;
  width: 1em;
  height: 1em;
  top: 0.25em;
}

.pseudoElements__fr-ax::before {
  position: absolute;
  content: "";
  mask-repeat: no-repeat;
  mask-size: cover;
  width: 1em;
  height: 1em;
}

/* ---------------------共通クラス 投稿情報に表示される疑似要素----------------------- */

/* ---投稿詳細 必須情報--- */
.p-postInfo {
  font-size: 18px;
  padding-left: 3rem;
}

.p-postInfo::before {
  background-color: var(--icon-primary-color);
}

.p-postInfo span {
  padding-left: 3rem;
}

.p-postInfo.pseudoElements__fr-bx {
  padding-left: 0;
}

/* ---投稿一覧など 省略表示情報--- */
.p-postTitle {
  font-size: 18px;
  padding: 0.25rem 0.25rem 0 0;
  margin-bottom: 0.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.p-postTitle::before {
  background-color: var(--icon-primary-color);
}

.p-postTitle span {
  padding-left: 3rem;
}

/* ---parts - 投稿情報掲載部分にて、aタグが投稿名のみに限定されている場合、共通クラスによってaタグのwidthを限定する--- */
.p-postTitle__link,
a:has(.p-postTitle__link) {
  width: fit-content !important;
  font-size: 16px;
  font-weight: 600;
}

.p-postTitle:has(+ .p-postInfo) {
  font-size: 18px;
}

.p-postcard-info {
  font-size: 16px;
  padding-left: 2.4rem;
}

.p-postcard-info::before {
  background-color: var(--icon-primary-color);
}

.p-postcard-infoMultiple {
  display: flex;
  justify-content: space-between;
  font-size: 1.6rem;
}

.p-peopleNumber-wrapper {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.p-peopleNumber-new {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: 0.5rem;
}

.p-peopleNumber-new strong {
  color: var(--text-danger-color);
}

.p-peopleNumber-deadline {
  display: flex;
  flex-direction: row;
}

.p-peopleNumber-deadline strong {
  color: var(--text-primary-color);
}

/* ---予約画面において、予約の人数が表示されている部分のスタイルを共通化 → 今後改修で別パーツに合流？--- */

/* ---イベント--- */
.p-pseudo-event::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-balloon-fill);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* ---スポット--- */
.p-pseudo-spot::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-flag-fill);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* ---日付、カレンダーから探す--- */
.p-pseudo-date::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-calendar3);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* ---曜日---  */
.p-pseudo-weekofday::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-calendar3-week);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* ---時間--- */
.p-pseudo-time::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-clock);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* ---参照先名称（主催者）--- */
.p-pseudo-reference::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-reference);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* ---郵便番号--- */
.p-pseudo-zip::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-zip);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* ---住所、マップから探す--- */
.p-pseudo-address::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-geo-alt-fill);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* ---レビュー数--- */
.p-pseudo-review::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-pencil-square);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* ---お知らせ--- */
.p-pseudo-news::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-bell-fill);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* --- 予約 --- */
.p-pseudo-reserve::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-check2);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* --- 投稿管理 --- */
.p-pseudo-management::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-gear-fill);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* --- 新規投稿 --- */
.p-pseudo-new::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-plus-circle-fill);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* --- お問い合わせ --- */
.p-pseudo-contact::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-question-circle-fill);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* --- ログアウト --- */
.p-pseudo-logout::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-box-arrow-right);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* ---人マーク (Ex1.人数 Ex2.マイページ)--- */
.p-pseudo-person::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-person-fill);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* --- 新規会員登録 --- */
/* .p-pseudo-regist::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-person-fill-add);
  color: var(--icon-primary-color);
} */

/* --- ログイン --- */
/* .p-pseudo-login::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-box-arrow-in-right);
  color: var(--icon-primary-color);
} */

/* --- よくある質問 --- */
.p-pseudo-qa::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-quora);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* --- お気に入り --- */
.p-pseudo-favorite::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-suit-heart-fill);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* --- パスワード --- */
.p-pseudo-password::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-lock-fill);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* --- 退会 --- */
.p-pseudo-quit::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-person-x-fill);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* --- タグ --- */
.p-pseudo-tag::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-hash-tag);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* ---リストから探す タイル表示--- */
.p-pseudo-tile:before {
  content: attr(data-pseudo);
  mask-image: var(--svg-grid-fill);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* ---チャット--- */
.p-pseudo-chat::before {
  content: attr(data-pseudo);
  mask-image: var(--svg-chat-dots-fill);
  color: var(--icon-primary-color);
  background-color: var(--icon-primary-color);
}

/* --- 疑似要素 赤 --- */
.p-pseudoIcon-red::before {
  background-color: var(--icon-delete-color) !important;
}
/* ---------------------共通パーツ CTA BUTTONS--------------------- */
/* ---MEMO:カラバリ対応--- */
/* - 基本スタイル - */
.p-button__primary {
  color: var(--btn-primary-color);
  background-color: var(--btn-primary-bgcolor);
  border: 2px solid var(--btn-primary-bordercolor);
  border-radius: 0.5rem;
  height: 4.6rem; /* TODO:リサイズ検討 */
  box-shadow: var(--boxshadow-primary-style);
}

/* モーダル内 btn-closeと同じ要素内にprimaryを定義したいとき */
.btn-close.p-button__primary {
  --bs-btn-close-bg: none;
  --bs-btn-close-opacity: 1;
  background-image: var(--bs-btn-close-bg) !important;
  opacity: var(--bs-btn-close-opacity);
  box-sizing: border-box;
}

.p-button__secondary {
  color: var(--btn-secondary-color);
  background-color: var(--btn-secondary-bgcolor);
  border: 1px solid var(--btn-secondary-bordercolor);
  border-radius: 0.5rem;
  height: 4.6rem; /* TODO:リサイズ検討 */
  box-shadow: var(--boxshadow-primary-style);
}

/* 機能分岐 - 削除、ログアウトなど */
.button__delete {
  background-color: var(--btn-secondary-delete-bgcolor);
  border: 1px solid var(--btn-secondary-delete-bordercolor);
  text-wrap: nowrap;
}

.button__delete span {
  color: var(--btn-secondary-delete-color);
}

/* 機能分岐 - 通報（自治体管理画面のみ） */
.button__report {
  background-color: var(--bs-danger-bg-subtle);
  border: 1px solid var(--dark-red);
}

.button__report span {
  color: var(--dark-red);
}

/* 機能分岐 - カード内の詳細遷移 */
.button__detail {
  background-color: var(--btn-secondary-detail-bgcolor);
  border: 1px solid var(--btn-secondary-detail-bordercolor);
  border-radius: 9999px;
  box-shadow: none;
}

.button__detail:focus,
.button__detail:active,
.button__detail:hover {
  border-radius: 9999px;
}

.button__detail span {
  color: var(--btn-secondary-detail-color);
}

/* 機能分岐 - 検索メニュー 検索 */
.button__search {
  background-color: var(--btn-primary-search-bgcolor);
  border: 1px solid var(--btn-primary-search-bordercolor);
  border-radius: 9999px;
  color: var(--btn-primary-search-color);
  font-weight: 600;
}

.button__search span {
  width: fit-content !important;
  padding-left: 2.4rem;
}

.p-button__primary.button__search:hover {
  background-color: var(--btn-primary-search-bgcolor);
  color: var(--btn-primary-search-color);
}

.button__search:focus,
.button__search:active {
  border-radius: 9999px;
}

/* 機能分岐 - 検索メニュー 条件を削除 */
.button__clear {
  background-color: var(--btn-secondary-clear-bgcolor);
  border: 1px solid var(--btn-secondary-clear-bordercolor);
  border-radius: 9999px;
  color: var(--btn-secondary-clear-color);
  font-weight: 600;
}

.button__clear span {
  width: fit-content !important;
  padding-left: 2.4rem;
}

.p-button__secondary.button__clear:hover {
  background-color: var(--btn-secondary-clear-bgcolor-hover);
  color: var(--btn-secondary-clear-color);
}

.button__clear:focus,
.button__clear:active {
  border-radius: 9999px;
}

/* ターシャリー */
.p-button__tertiary {
  color: var(--text-primary-color);
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 0.6rem;
  padding-left: 1.8rem;
  width: fit-content;
  cursor: pointer;
}

.p-button__tertiary::before {
  mask-image: var(--svg-caret-right-fill);
  background-color: var(--icon-primary-color);
}

/* flow-root採用時のleft明示 */
.pseudoElements__fr-bx.p-button__tertiary {
  width: auto;
}

.pseudoElements__fr-bx.p-button__tertiary::before {
  left: 0 !important;
  top: 0.5em;
}

/* ユーザーのレビュー一覧での対応 */
.detail-review-postname .pseudoElements__fr-bx.p-button__tertiary::before {
  top: 0.25em;
}

.pseudoElements__fr-bx.p-button__tertiary {
  padding: 0.25rem 0.25rem 0 0;
}

.pseudoElements__fr-bx.p-button__tertiary span {
  padding-left: 1.8rem;
}

/* ボタン内文字 */

.p-button__primary span,
.p-button__secondary span {
  font-size: 1.6rem;
  font-weight: 600;
  /* text-align: center; */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
}

/* 疑似要素 */

.p-button__primary span::after {
  mask-image: var(--svg-cursor-fill);
  transform: translate(0, -50%) rotate(45deg);
  background-color: var(--btn-primary-icon-color);
  right: 1rem;
}

.p-button__primary span::before {
  mask-image: var(--svg-cursor-fill);
  transform: translate(0, -50%) rotate(-135deg);
  background-color: var(--btn-primary-icon-color);
  left: 1rem;
}

.p-button__secondary span::after {
  mask-image: var(--svg-cursor-fill);
  transform: translate(0, -50%) rotate(45deg);
  background-color: var(--btn-secondary-icon-color);
  right: 1rem;
}

.p-button__secondary span::before {
  mask-image: var(--svg-cursor-fill);
  transform: translate(0, -50%) rotate(45deg);
  background-color: var(--btn-secondary-icon-color);
  left: 1rem;
}

.button__delete span::after {
  mask-image: var(--svg-cursor-fill);
  transform: translate(0, -50%) rotate(45deg);
  background-color: var(--btn-secondary-delete-icon-color);
  right: 1rem;
}

.button__delete span::before {
  mask-image: var(--svg-cursor-fill);
  transform: translate(0, -50%) rotate(-135deg);
  background-color: var(--btn-secondary-delete-icon-color);
  left: 1rem;
}

.button__search span::before {
  mask-image: var(--svg-search);
  background-color: var(--btn-primary-search-icon-color);
  transform: translateY(-50%);
  left: 0;
}

.button__search:hover span::before {
  background-color: var(--btn-primary-search-icon-color);
}

.button__clear span::before {
  mask-image: var(--svg-trash3);
  background-color: var(--btn-secondary-clear-icon-color);
  transform: translateY(-50%);
  left: 0;
}

.button__clear:hover span::before {
  background-color: var(--btn-secondary-clear-icon-color);
}

/* hover */
.p-button__primary:hover {
  background-color: var(--btn-primary-bgcolor-hover);
  opacity: 1;
  text-decoration: none;
}

.btn-close.p-button__primary:hover {
  --bs-btn-close-color: var(--btn-primary-color);
  color: var(--bs-btn-close-color);
}

.p-button__primary:hover span,
.p-button__primary span:hover {
  text-decoration-line: none;
}

.p-button__secondary:hover {
  background-color: var(--btn-secondary-bgcolor-hover);
  opacity: 1;
  text-decoration: none;
}

.button__delete:hover {
  background-color: var(--btn-secondary-delete-bgcolor-hover);
  opacity: 1;
  text-decoration: none;
}

.p-button__tertiary:hover {
  text-decoration: underline;
  opacity: 0.6;
}

.p-button__primary:active {
  background-color: var(--btn-primary-bgcolor-hover);
  outline: 2px solid var(--focus-outline-color);
  box-shadow: none;
}

.p-button__secondary:active {
  background-color: var(--btn-secondary-bgcolor-hover);
  outline: 2px solid var(--focus-outline-color);
  box-shadow: none;
}

.button__delete:active {
  background-color: var(--btn-secondary-delete-bgcolor-hover);
  box-shadow: none;
}

.p-button__tertiary:active {
  text-decoration: none;
}

/* disabled */
.p-button__primary:disabled,
.p-button__secondary:disabled {
  pointer-events: none;
  opacity: 0.6;
  color: #666666;
  background-color: #ffffff;
  border: 1px solid #999999;
}

.p-button__primary:disabled span::before,
.p-button__primary:disabled span::after {
  background-color: #666666;
  opacity: 0.6;
}

@media screen and (max-width: 991px) {
  .p-button__primary,
  .p-button__secondary {
    height: 4.6rem; /* TODO:リサイズ検討 */
  }

  .p-button__primary span,
  .p-button__secondary span,
  .p-button__tertiary {
    font-size: 1.6rem;
  }
}

/* 分岐対応 ---　ボタン内の文字が意図的に改行されている場合 */
.p-button__textClamp {
  height: 6rem;
}

.p-button__textClamp span {
  text-align: center;
}

/* ---------------------共通パーツ ページ下部のボタンなどのスタイル--------------------- */
.p-button__flame {
  display: grid;
  gap: 0.5rem;
  /* margin: 0 auto; */
  margin: 2rem 0;
}

.p-button__flameSprit {
  display: flex;
  gap: 0.5rem;
  margin: 2rem 0;
}

.p-button__flame.form-style,
.p-button__flameSprit.form-style {
  margin-bottom: 0.5rem !important;
}

td .p-button__flame,
td .p-button__flameSprit {
  margin: 0;
}

.p-button__flameTertiary {
  display: flex;
  column-gap: 0.5rem;
  row-gap: 0.3rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  flex-direction: row;
  flex-wrap: wrap;
}

/* フッターメニューの戻るボタンとのレイアウト関係で、一部画面サイズでwidthを変更 */
@media screen and (768px <= width <= 991px) {
  .footerNavigation .p-button__flameTertiary {
    width: 80%;
  }
}

/*ボタンを画面サイズに関係なく縦に配置したいとき*/
.p-button__flameVertical {
  display: flex;
  gap: 0.25rem;
  flex-direction: column;
}

.p-button__flameVertical .p-button__item {
  max-height: 30.35px;
}

/* .p-button__flameSprit .p-button__item-half span.pseudoElements-bx {
  padding-left: clamp(2rem, 1.654rem + 1.54vw, 3rem);
} */

/* .p-button__flameSprit .p-buttons__item-half span.pseudoElements-ax {
  padding-right: clamp(2rem, 1.654rem + 1.54vw, 3rem);
} */

/* 1カラムでボタンを表示する場合 */
.p-button__item {
  padding: 1rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* 2カラム以上でボタンを表示する場合 */
.p-button__item-half {
  padding: 1rem;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.p-button__item span,
.p-button__item-half span {
  font-size: 1.6rem;
}

.p-button__flameSprit:not(:has(.p-button__item-half:nth-child(2)))
  > .p-button__item-half {
  width: 100%;
}

@media screen and (min-width: 576px) {
  .p-button__flameSprit:has(.p-button__item-half:nth-child(3))
    > .p-button__item-half {
    width: calc(100% / 3);
  }

  .p-button__flameSprit:has(.p-button__item-half:nth-child(4))
    > .p-button__item-half {
    width: calc(100% / 4);
  }

  .p-button__flameSprit:has(.p-button__item-half:nth-child(5))
    > .p-button__item-half {
    width: calc(100% / 5);
  }

  .p-button__flameSprit:has(.p-button__item-half[style="display: none;"])
    > .p-button__item-half {
    width: 49.3%;
  }
}

@media screen and (576px <= width <= 991px) {
  .p-button__flameSprit:has(.p-button__item-half:nth-child(3)),
  .p-button__flameSprit:has(.p-button__item-half:nth-child(4)) {
    flex-wrap: wrap;
  }

  .p-button__flameSprit:has(.p-button__item-half:nth-child(3))
    > .p-button__secondary {
    width: 49.3%;
  }

  .p-button__flameSprit:has(.p-button__item-half[style="display: none;"])
    .p-button__secondary {
    width: 100%;
  }

  .p-button__flameSprit:has(.p-button__item-half:nth-child(3))
    > .p-button__primary {
    width: 100%;
  }

  .p-button__flameSprit:has(.p-button__item-half:nth-child(4))
    > .p-button__secondary {
    width: 32.5%;
  }

  .p-button__flameSprit:has(.p-button__item-half:nth-child(4))
    > .p-button__primary {
    width: 100%;
  }
}

@media screen and (max-width: 575px) {
  .p-button__flameSprit {
    flex-direction: column;
  }

  .p-button__item-half {
    width: 100%;
  }
  /* 条件分岐 - ボタンの2カラム表示をレスポンシブ時も維持したいときの対応 */
  .p-button__flameSprit:has(> .splitMaintain) {
    flex-direction: row;
  }

  .p-button__item-half.splitMaintain {
    width: 50%;
  }
}
/* 
@media screen and (max-width: 991px) {
  .p-button__flameSprit:has(.p-button__item-half[style="display: none;"]) {
    flex-direction: row;
  }

  .p-button__flameSprit:has(.p-button__item-half[style="display: none;"])
    .p-button__item-half {
    width: 49.3%;
  }
} */

.p-button__title {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
}

.p-button__text {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 400;
  white-space: pre-line;
}

/* ---------------------共通パーツ リストなどで情報が登録されていないときのスタイル--------------------- */
.p-empty__message {
  display: flex;
  width: 100%;
  row-gap: 0.5rem;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 1rem;
}

.p-empty__title {
  font-size: 2rem;
  font-weight: 600;
  margin-top: auto !important;
}

.p-empty__text {
  font-size: 1.6rem;
  font-weight: 400;
}

#no_reserve_list:has(.p-empty__title) {
  height: 40dvh;
}

#no_reserve_list div:has(> .p-button__flame) {
  margin-top: auto;
}

/* ---------------------共通パーツ 横スクロール--------------------- */
/* TODO:jsで機能追加 - overflow-xが適用されている部分でスクロールできる部分をつかめるようにしたい */
.p-Xscroll {
  overflow: auto;
  overflow-x: scroll;
  cursor: grab;
  scrollbar-width: none; /* 適宜上書き */
}

.p-Xscroll.scrollHint-white {
  cursor: pointer;
}

.p-Xscroll:active {
  cursor: grabbing;
  background: rgb(241, 241, 241, 1);
}

.p-Xscroll.scrollHint-white:active {
  cursor: pointer;
  background: fixed;
}

@media screen and (max-width: 991px) {
  .p-Xscroll-sp {
    overflow: auto;
    overflow-x: scroll;
    cursor: grab;
    scrollbar-width: none;
  }
}

/* for MacOS */
.p-Xscroll::-webkit-scrollbar,
.p-Xscroll-sp::-webkit-scrollbar {
  display: none;
}

/* ---------------------横スクロール scrollHint----------------------- */
.scrollHint {
  /*bgcolor shadowの色*/
  --scrollHint-bgcolor: 255 255 255;
  --scrollHint-shadow: 0 0 0;
  --scrollHint-shadow-size: 50px;
  --scrollHint-shadow-opacity: 0.5;

  overflow: auto;
  width: 100%;
  /* max-height: 63px; */
  height: fit-content;
  margin: 0 auto;
  background-image:
    linear-gradient(to right, white, white),
    linear-gradient(to right, white, white),
    linear-gradient(
      to right,
      rgba(128, 128, 128, 0.25),
      rgba(255, 255, 255, 0)
    ),
    linear-gradient(to left, rgba(128, 128, 128, 0.25), rgba(255, 255, 255, 0));
  background-position:
    left center,
    right center,
    left center,
    right center;
  background-repeat: no-repeat;
  background-color: white;
  background-size:
    5px 100%,
    5px 100%,
    5px 100%,
    5px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* SP限定でscrolling hintを出したいときに使う */
@media screen and (max-width: 991px) {
  .scrollHint-sp {
    /*bgcolor shadowの色*/
    --scrollHint-bgcolor: 255 255 255;
    --scrollHint-shadow: 0 0 0;
    --scrollHint-shadow-size: 50px;
    --scrollHint-shadow-opacity: 0.5;

    overflow: auto;
    width: 100%;
    /* max-height: 63px; */
    height: fit-content;
    margin: 0 auto;
    background-image:
      linear-gradient(to right, white, white),
      linear-gradient(to right, white, white),
      linear-gradient(
        to right,
        rgba(128, 128, 128, 0.25),
        rgba(255, 255, 255, 0)
      ),
      linear-gradient(
        to left,
        rgba(128, 128, 128, 0.25),
        rgba(255, 255, 255, 0)
      );
    background-position:
      left center,
      right center,
      left center,
      right center;
    background-repeat: no-repeat;
    background-color: white;
    background-size:
      20px 100%,
      20px 100%,
      10px 100%,
      10px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* scrollHint カラーバリエーション */
/* TODO:もうちょっと目立つようにする */
.scrollHint-white {
  /*bgcolor shadowの色*/
  --scrollHint-bgcolor: 255 255 255;
  --scrollHint-shadow: 0 0 0;
  --scrollHint-shadow-size: 50px;
  --scrollHint-shadow-opacity: 0.5;

  overflow: auto;
  width: 100%;
  /* max-height: 63px; */
  height: fit-content;
  margin: 0 auto;
  background-image:
    linear-gradient(to right, white, white),
    linear-gradient(to right, white, white),
    linear-gradient(
      to right,
      rgba(200, 200, 200, 0.25),
      rgba(255, 255, 255, 0)
    ),
    linear-gradient(to left, rgba(200, 200, 200, 0.25), rgba(255, 255, 255, 0));
  background-position:
    left center,
    right center,
    left center,
    right center;
  background-repeat: no-repeat;
  background-color: white;
  background-size:
    5px 100%,
    5px 100%,
    5px 100%,
    5px 100%;
  background-attachment: local, local, scroll, scroll;
  z-index: 3;
}

/* ---- 共通パーツ - カテゴリー表示部分の外枠スタイル  ---- */
.p-Xscroll-flame {
  /* border: 0.5px solid var(--border-navisma-color); */
  border-radius: 9999px;
  box-shadow: inset 1px 1px 3px 1px rgb(220, 220, 220);
  padding: 0 0.6rem;
}

/* ---- 共通パーツ - 文章が長い時に折り返しさせず3点リーダー化させる */

.p-text__lineclamp-3,
.p-text__lineclamp-2,
.p-text__lineclamp-1 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  text-align: -webkit-left;
}

/* 3行で三点リーダー化 */
.p-text__lineclamp-3 {
  -webkit-line-clamp: 3;
  white-space: wrap !important;
}

/* 2行で三点リーダー化 */
.p-text__lineclamp-2 {
  -webkit-line-clamp: 2;
  white-space: wrap !important;
}

/* 1行で三点リーダー化 */
.p-text__lineclamp-1 {
  -webkit-line-clamp: 1;
  white-space: wrap;
}

.p-text__lineclamp-1:not(:has(+ .icon-referrer-FA)) {
  padding-right: 0.5rem;
}

/* 試作段階 - iOSでの表示崩れを改善する */
.post-lineclamp_jump {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* 外部リンクマーク */
/* TODO:文章がちょうど親要素の100%になったとき、
  改行判定が起こらないため、アイコンが隠れてしまう */
.p-referrerLink {
  width: fit-content;
  /* padding-right: 1.5em !important; */
  font-size: 1.6rem;
  font-weight: 600;
  line-break: strict;
  display: flow-root;
}
/* 
.p-button__tertiary.p-referrerLink {
  padding: 0.25rem 0.25rem 0 0;
}

.p-button__tertiary.p-referrerLink span {
  padding-left: 3rem;
} */

.p-form__info-heading .p-referrerLink {
  font-size: 1.8rem;
}

.p-referrerLink::after {
  margin: 0 0 0 3px;
  color: var(--icon-primary-color);
  font-family: "Font Awesome 5 Free";
  content: "\f35d";
  font-weight: 900;
}

/*p-text__lineclamp-nが干渉する場合の対応*/
.p-referrerLink-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  font-size: 1.6rem;
  gap: 0.5rem;
}

.p-referrerLink-wrapper .p-text__lineclamp-1 {
  flex-grow: 1;
}

.p-referrerLink-wrapper .icon-referrer-FA {
  width: fit-content;
}

.icon-referrer-FA {
  font-size: 1em;
  /* margin-left: 0.75rem; */
  color: var(--icon-primary-color);
}

.p-text__lineclamp-1:has(+ .icon-referrer-FA) .p-referrerLink {
  display: unset;
}

.p-text__lineclamp-1:has(+ .icon-referrer-FA) .p-referrerLink::after {
  content: "";
  margin: inherit;
  font-family: inherit;
  font-weight: inherit;
}

/* ダウンロードマーク */
.p-downloadLink {
  width: fit-content;
  font-size: 16px;
  font-weight: 600;
  line-break: strict;
  display: flow-root;
}

.p-downloadLink::after {
  margin: 0 0 0 3px;
  color: var(--icon-black-color);
  font-family: "Font Awesome 5 Free";
  content: "\f019";
  font-weight: 900;
}

.disabled.p-downloadLink::after,
.pe-none.p-downloadLink::after {
  content: "";
}

/* 必須マーク */
.required_label::after {
  margin-left: 0.5rem;
  font-size: 14px;
  font-weight: 600;
  content: "必須";
  color: var(--text-white-color);
  padding: 0 1rem;
  background: var(--label-required-color);
  border-radius: 2rem;
}

/* 注意文 */
.warning_label {
  width: fit-content;
  height: 4.6rem;
  padding: 1rem 1.6rem;
  background-color: var(--label-post-exclamation-bgcolor);
  color: var(--dark-yellow);
  border: 1px solid var(--dark-yellow);
  border-radius: 0.5rem;
  font-size: 1.6rem;
  cursor: default;
}

/* 項目の公開対象 */
.label-onlyPublic {
  color: var(--text-white-color);
  background-color: var(--user-status-public-color);
}
.label-onlyMember {
  color: var(--text-primary-color);
  background-color: var(--user-status-member-color);
}
.label-onlyCertified {
  color: var(--label-onlyCertified-color);
  background-color: var(--user-status-certified-color);
}

/* チャット機能のみ表示 */
.label-admin {
  color: var(--text-white-color);
  background-color: #c03636;
}

.label-owner {
  color: var(--text-white-color);
  background-color: #666666;
}

.label-deleted {
  color: var(--text-white-color);
  background-color: #707070;
}

.invalid_message {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--label-required-color);
}

.invalid-feedback,
.feedback p {
  font-size: 1.6rem;
  font-weight: 600;
}

/* static header*/
.p-header-wrapper {
  position: fixed;
  z-index: 1030;
  top: 0;
  right: 0;
  left: 0;
}

.p-header {
  box-shadow: var(--boxshadow-primary-style);
  background-color: var(--bg-menu-color);
}

@media screen and (min-width: 992px) {
  .p-header {
    height: 80px;
  }
}

@media screen and (max-width: 991px) {
  .p-header {
    height: 70px;
  }
}

.p-header-inner {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}

@media screen and (max-width: 991px) {
  .p-header-inner {
    min-height: 70px;
    max-height: 70px;
  }
}

@media screen and (min-width: 992px) {
  .p-header-inner {
    min-height: 80px;
    max-height: 80px;
  }
}

.header_buttons {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.header_buttons a:hover {
  text-decoration-line: none !important;
}

/* 共通パーツ テーブル */
.p-table__container {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  font-size: 1.6rem;
  padding: 1rem 0.5rem;
  min-height: 20rem;
}

.p-table__container::-webkit-scrollbar {
  display: none;
}

/* 行についてのスタイル */
.p-table__header {
  display: flex;
  flex-wrap: nowrap;
  background-color: #eeeeee;
  text-align: center;
}

.p-table__header span {
  background-color: #eeeeee;
  color: #333333;
  font-size: 1.6rem;
  font-weight: 600;
  padding: 1rem 0;
}

.p-table__header input {
  margin: 1.5rem;
}

.p-table__data {
  display: flex;
  flex-wrap: nowrap;
  background-color: #ffffff;
  text-align: center;
  padding: 1rem 0;
  border-bottom: 1px solid #dee2ed;
}

.p-table__data:last-of-type {
  border-bottom: none;
}

.p-table__data span,
.p-table__data time {
  background-color: inherit;
  color: #333333;
  font-size: 1.6rem;
  font-weight: 400;
}

/*予約管理テーブル データが一件のみの時のレイアウト*/
.p-table__data:has(.p-table__reserve-item.data-alone) {
  padding: 1rem 0 5rem 0;
}

/* 列についてのスタイル */

/* テーブル内で固定表示したい部分に適用 */
.p-table__scrollSticky {
  display: flex;
  position: sticky;
  left: 0 !important;
  z-index: 3;
}

@media screen and (max-width: 991px) {
  .p-table__scrollSticky {
    border-right: 1px solid #dee2e6;
  }
}

.p-table__scrollOverflow {
  display: flex;
  z-index: 2;
  height: 100%;
}

.p-table__scrollEmpty {
  display: flex;
  position: sticky;
  right: 0 !important;
  z-index: 3;
}

/* ページ単位対応　予約管理周りのテーブル対応 */
.p-table__reserve-checkbox {
  position: relative;
}

.p-table__reserve-item .p-table__reserve-checkbox input {
  margin: 0 1.5rem;
}

.p-table__reserve-item .p-table__reserve-sticky {
  background-color: #ffffff;
}

.p-table__reserve-button {
  position: absolute;
  display: block;
  width: 100%;
  top: 3rem;
  text-wrap: nowrap;
  z-index: 4;
}

.p-table__reserve-button .p-button__flame {
  margin: 0;
  display: flex;
  justify-content: center;
}

.p-table__reserve-sticky {
  justify-content: space-between;
}

.p-table__reserve-sticky:not(:has(.p-table__reserve-checkbox)) {
  justify-content: flex-end;
  z-index: 2;
}

.p-table__resreve-scroll {
  justify-content: space-between;
}

.p-table__reserve-scroll:not(:has(.p-table__reserve-capacity)) {
  justify-content: flex-end;
}

@media screen and (min-width: 992px) {
  .p-table__reserve-data {
    display: flex;
    width: 100%;
  }

  .p-table__data .p-table__reserve-data {
    flex-direction: column;
    row-gap: 0.1rem;
  }

  .p-table__reserve-item {
    display: flex;
    flex-direction: row;
  }

  .p-table__reserve-sticky {
    width: calc(calc(100% / 12) * 3);
  }

  .p-table__reserve-scroll {
    width: calc(calc(100% / 12) * 9);
  }

  .p-table__reserve-checkbox {
    width: calc(calc(100% / 12) * 4);
  }

  .p-table__reserve-eventDate {
    width: calc(calc(100% / 12) * 8);
  }

  .p-table__reserve-eventTime {
    width: calc(calc(100% / 12) * 4);
  }

  .p-table__reserve-capacity {
    width: calc(calc(100% / 12) * 4);
  }

  .p-table__reserve-subscriber {
    width: calc(calc(100% / 12) * 4);
  }
}

@media screen and (max-width: 991px) {
  .p-table__reserve-data {
    display: flex;
    flex-wrap: nowrap;
    /* width: 100%; */
  }

  .p-table__data .p-table__reserve-data {
    flex-direction: column;
  }

  .p-table__data .p-table__reserve-data .p-table__reserve-item {
    padding-bottom: 0.1rem;
  }

  .p-table__data .p-table__reserve-data .p-table__reserve-item:last-child {
    padding-bottom: 0;
  }

  .p-table__reserve-item {
    display: flex;
    flex-direction: row;
  }

  .p-table__reserve-sticky {
    min-width: 240px;
  }

  .p-table__reserve-scroll {
    min-width: 480px;
  }

  .p-table__reserve-checkbox {
    width: 70px;
    flex-grow: 1;
  }

  .p-table__header .p-table__reserve-checkbox {
    background-color: #eeeeee;
  }

  .p-table__reserve-eventDate {
    width: 160px;
  }

  .p-table__reserve-sticky:not(:has(.p-table__reserve-checkbox))
    .p-table__reserve-eventDate {
    margin-left: 60px;
  }

  .p-table__reserve-eventTime {
    min-width: 160px;
  }

  .p-table__reserve-capacity {
    min-width: 160px;
  }

  .p-table__reserve-subscriber {
    min-width: 160px;
  }
}

.more,
.fewer {
  margin-top: 0.8rem;
}

/* ページ単位対応　予約管理　確認画面 */
.p-table__confirm-sticky {
  justify-content: center;
}

.p-table__confirm-scroll {
  width: calc(calc(100% / 12) * 9);
}

.p-table__confirm-date {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.p-table__confirm-capacity {
  display: flex;
  justify-content: center;
}

.p-table__confirm-data {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.p-table__confirm-item {
  display: flex;
  flex-direction: row;
}

@media screen and (min-width: 992px) {
  .p-table__confirm-sticky {
    width: calc(calc(100% / 12) * 3);
  }

  .p-table__confirm-date {
    width: calc(calc(100% / 12) * 6);
  }

  .p-table__confirm-capacity {
    width: calc(calc(100% / 12) * 6);
  }
}

@media screen and (max-width: 991px) {
  .p-table__confirm-sticky {
    width: 160px;
  }
}
/* ---------------------hover--------------------- */
a:hover,
.accordion-button:hover,
.qa_accordion:hover,
.switch_disp_buttons:hover,
.btn_search:hover,
.btn_delete:hover {
  text-decoration: underline;
  opacity: 0.6;
}

button:hover {
  opacity: 0.6;
}

/*ここに追加*/
.header_logo:hover,
.fnavi_systemName:hover,
.gloNavi-item:hover,
.img-cover-link:hover,
.mypage-list-link:hover,
.btn-back2Pagetop:hover,
.calendar-cardFlame a:hover,
.change_date:hover,
.a-post-list:hover,
.accordion-button:hover,
.qa_accordion:hover,
.switch_disp_buttons:hover,
.btn_search:hover,
.btn_delete:hover,
.page-link:hover,
.btn-map:hover,
.btn-showSpotMap:hover,
.btn-editPost:hover,
.btn-deletePost:hover,
.btn-showReserveDetail:hover,
.reserve-title a:hover,
.btn-gotoReserveAll:hover,
.btn-backtoTopPage:hover,
.btn-continueReserveSetting:hover,
.btn-backtoLoginPage:hover,
.btn-backtoPrevPage:hover,
.btn-confirmPost:hover,
.pageback_btn:hover,
.btn-reserveSetting:hover,
.btn-change_reserveAndCapacity:hover,
.btn-update_ReserveInfo:hover,
.btn-addBulk:hover,
.btn-removeBulk:hover,
.btn-change:hover,
.btn-backto:hover,
.btn-forwardToLogin:hover,
.btn-loginAndRegist-inModal:hover,
.btn-gotoEvent:hover,
.btn-backtoPostDetail:hover,
.btn-viewReserve:hover,
.btn-reserveCancel:hover,
.btn-reserveRetry:hover,
.btn-change_SettingSchedule:hover,
.btn-backtoMypage:hover,
.btn-forwardToReserveSetting:hover,
.btn-admin-reportRequest:hover,
.btn-admin-reportSuccess:hover,
.btn-pageback:hover,
.btn-forwardToContact:hover,
.list-item_01:hover,
.link-list-box a:hover,
.btn-reportReview:hover {
  text-decoration: none;
}
/* ----------------共通パーツ タブ(navigation)---------------- */
.navigation-fluid .navigation-item,
.navigation-fluid .navigation-link {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
  transition: 0.75s;
}

.navigation-item a:hover {
  text-decoration: none;
  background: #fff0d8;
  opacity: 1;
}

.navigation-link:not(.active):hover {
  text-decoration: none;
  border-bottom: 1px solid #8b8b8b;
  background: #fff0d8;
  opacity: 1;
  transition: 0.75s;
}

@media screen and (max-width: 991px) {
  .navigation-link:not(.active):hover {
    border-bottom: 1px solid #dee2e6;
  }
}

.navigation-link:hover {
  text-decoration: none;
  border-bottom: 1px solid #ffffff;
  background: #fff0d8;
  opacity: 1;
}

.search-menu-cover {
  position: relative;
}

.search-menu-cover:hover {
  text-decoration: none;
  opacity: 1;
}

.footer_ul a:hover {
  text-decoration: none;
  border-radius: 4px;
  background-color: #fff0d8;
  opacity: 1;
}

.btn-copyPost:hover {
  text-decoration: none;
  opacity: 1;
  transform: scale(1.2);
}

/* ---------------------outline focus active--------------------- */
a,
button,
.accordion-button,
.qa_accordion,
.switch_disp_buttons {
  text-decoration: none;
  color: var(--text-primary-color);
  transition: 0.75s;
}

a:focus,
button:focus,
textarea:focus,
select:focus,
.form-select:focus,
.btn:focus-visible,
.accordion-button:focus {
  outline: solid 2px var(--focus-outline-color);
  border-radius: 0.3rem;
  transition: 0s;
  /* box-sizing: border-box; */
}

button,
button:hover,
button:active,
button:focus {
  text-decoration: none;
}

button:focus:not(:focus-visible) {
  outline: solid 2px var(--focus-outline-color);
}

button {
  transition: 0.75s;
}

.btn:focus-visible {
  background-color: var(--bs-btn-bg);
  border-color: transparent;
  box-shadow: none;
}

.form-select:focus,
.form-select:active {
  border-color: transparent;
  outline: solid 2px var(--focus-outline-color);
  border-radius: 0.3rem;
  transition: 0s;
}

.navigation-link:focus,
.navigation-link.active:focus {
  z-index: 2;
  color: inherit;
  outline: solid 2px var(--focus-outline-color);
  border-radius: 0.3rem;
  background-color: transparent;
  transition: 0s;
  box-shadow: none;
  outline-offset: -2px;
}

.navigation-link:not(.active):active {
  transition: 0s;
}

.pageback_btn a:focus,
.pageback_btn a:active {
  outline: solid 2px var(--focus-outline-color);
  border-radius: 0.5rem;
  transition: 0s;
}

.form-check-input {
  transition: 0.5s;
}

/* チェックボックス　一般画面 */
.form-check-input:checked {
  background-color: var(--form-check-color);
  border-color: var(--border-navisma-color);
}

.form-check-input:focus,
.form-check-input:active {
  outline: solid 2px var(--focus-outline-color);
  outline-offset: -1px;
  border-color: transparent;
  box-shadow: none;
  transition: 0s;
}

.form-check-label > .form-check-input {
  margin-right: 0.5rem !important;
}

.page-item > .page-link:focus,
.page-item > .page-link.active:focus {
  z-index: 6;
  color: var(--pagination-color);
  outline: solid 2px var(--focus-outline-color);
  box-shadow: none;
  transition: 0s;
}

.page-item > .page-link:focus {
  background-color: transparent;
}

.page-item.active > .page-link:focus {
  background-color: var(--pagination-bgcolor-active);
}

.page-item > .page-link:active {
  transition: 0s;
}

.form-control:focus {
  color: inherit;
  background-color: transparent;
  border-color: transparent;
  outline: solid 2px var(--focus-outline-color);
  box-shadow: none;
  transition: 0s;
}

.form-range:focus {
  outline: solid 2px var(--focus-outline-color);
  transition: 0s;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: none;
  -webkit-transition: 0s;
  transition: 0s;
}
.form-range:focus::-moz-range-thumb {
  box-shadow: none;
  -moz-transition: 0s;
  transition: 0s;
}
.form-range::-moz-focus-outer {
  outline: solid 2px var(--focus-outline-color);
  -moz-transition: 0s;
  transition: 0s;
}

.btn-close:focus,
.btn-close:active {
  border: solid 2px var(--focus-outline-color);
  box-shadow: none;
  border-radius: 0.5rem;
  transition: 0s;
}

a:active,
textarea:active,
select:active,
button:active,
.form-select:active,
.form-control:active,
.accordion-button:active,
.change_month:active {
  outline: solid 2px var(--active-outline-color);
  border-radius: 0.3rem;
  transition: 0s;
  /* box-sizing: border-box; */
}

input:focus,
input:active {
  outline: solid 2px var(--active-outline-color);
  border-radius: 0.375rem;
  transition: 0s;
}

.btn_delete {
  text-decoration: none;
  transition: 0.75s;
}

.btn_delete:focus,
.btn_delete:active {
  outline: solid 2px var(--focus-outline-color);
  border-radius: 5rem;
  transition: 0s;
}

.btn-back2Pagetop:focus,
.btn-back2Pagetop:active {
  outline: solid 2px var(--focus-outline-color);
  border-radius: 9999px;
  transition: 0s;
}

.change_date:focus,
.change_date:active {
  outline-offset: -0.2rem;
}

/* ---------------------header--------------------↓ */
.globalNavigation {
  background-color: var(--bg-primary-color);
  margin-top: 80px;
  align-items: center;
  width: 100%;
  min-height: 80px;
}

.gloNavi-list {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  width: 94%;
  list-style: none;
  z-index: 2;
}

.gloNavi-list li {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  height: 3.2rem;
  transition: 1s;
  opacity: 1;
}

.gloNavi-list li:hover {
  opacity: 0.6;
}

.gloNavi-list li:hover .gloNavi-list {
  opacity: 1;
}

.gloNavi-item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-wrap: nowrap;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text-primary-color);
  background-color: var(--bg-primary-color);
  width: 100%;
  height: 100%;
}

.gloNavi-item:focus,
.gloNavi-item:active {
  z-index: 4;
}

.gloNavi-item:hover {
  z-index: 3;
  opacity: 1;
}

/* デザイン1:チャットに通知があるときの表示分岐 */
/* ここにいれる */

@media screen and (max-width: 991px) {
  .globalNavigation {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .globalNavigation::-webkit-scrollbar {
    display: none;
  }

  .gloNavi-item {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 20px;
  }
}

/* ヘッダー画像 */
.system_image {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}

.footerNavigation .system_image {
  width: fit-content;
}

.system_image img {
  height: 5rem;
}

.system_image p.sp-none {
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
}

.system_image:hover,
a.system_image p:hover,
a.system_image:hover p {
  text-decoration: none !important;
}

/**/

/* システム名 */
.header_logo {
  color: var(--text-primary-color);
  font-weight: 600;
  font-size: 1.6rem;
  height: 100%;
  text-decoration: none;
  text-wrap: wrap;
  font-feature-settings: "fwid" 1;
}

.header_menu_fnavi .header_logo {
  height: auto;
}

.header_logo.pseudoElements__bx {
  position: relative;
}

/*ヘッダーメニューの表示切替*/
@media screen and (max-width: 991px) {
  .header_sp-menu {
    display: block;
  }

  .header_pc-menu {
    display: none;
  }

  .main_content {
    margin-top: 70px;
  }
}

@media screen and (min-width: 992px) {
  .header_sp-menu {
    display: none;
  }

  .header_pc-menu {
    display: flex;
    justify-content: center;
  }

  .main_content {
    margin-top: 0px;
  }
}

.header_icon {
  height: 35px;
  width: 35px;
}

/* ---------------------header_btn--------------------↓ */
/* .header_menu_Btn {
  font-weight: bold;
  width: var(--btn-header-log-width);
  height: var(--btn-header-log-height);
} */

.header_menu_text {
  width: var(--btn-header-log-width);
  height: var(--btn-header-log-height);
  text-align: center;
  padding-top: 4rem;
  line-height: 0.9rem;
}

.header_menu_text:before {
  mask-image: var(--svg-filter-left);
  background-color: var(--icon-primary-color);
  width: var(--btn-header-log-width-before);
  height: var(--btn-header-log-height-before);
  /* left: var(--btn-header-login-a-before-left); */
  bottom: var(--btn-header-login-a-before-bottom);
}

@media screen and (min-width: 992px) {
  .header_buttons-item {
    margin: 0 0.7rem;
    padding: 0.6rem;
  }
}

@media screen and (max-width: 991px) {
  .header_buttons-item {
    margin: 0 0.3rem;
    padding: 0.15rem;
  }
}

.header_buttons-item:first-child {
  margin-left: 0;
}

.header_buttons-item:last-child {
  margin-right: 0;
}

.header_buttons-item span {
  color: var(--text-primary-color);
  font-size: var(--a-header-log-fontsize);
  font-weight: 500;
  text-decoration: none;
  display: block;
}

/* 本文へ ボタン制御*/
/* MEMO:focusが当たった時だけ表示する */
.header_link-main {
  vertical-align: bottom;
  opacity: 0;
  pointer-events: none;
}

.header_link-main:focus {
  opacity: 1;
  outline: 2px solid var(--focus-outline-color);
}

.header_link-main span {
  display: block;
  width: var(--btn-header-log-width);
  height: var(--btn-header-log-height);
  text-align: center;
  font-size: var(--a-header-log-fontsize);
  line-height: 0.9rem;
  padding-top: 4rem;
  color: var(--text-primary-color);
  font-weight: 700;
  text-decoration: none;
}

.header_link-main span::before {
  mask-image: var(--svg-arrow-bar-down);
  background-color: var(--icon-primary-color);
  width: var(--btn-header-log-width-before);
  height: var(--btn-header-log-height-before);
  bottom: 1.5rem;
}

.header_link-main:hover {
  text-decoration: none;
}

/* 画面名が表示されていないとき、本文へのボタンが出ないようにする */
.header:not(:has(+ #main)) .header_link-main {
  display: none;
}

/*自治体管理画面 - サイドバー関連*/

.nav-fill .nav-link {
  color: var(--text-primary-color);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--btn-primary-bgcolor);
}

/* 未読表示 */
.nav-pills .nav-link.unread {
  position: relative;
}

.nav-pills .nav-link.unread::after {
  position: absolute;
  content: "";
  mask-image: var(--svg-circle-fill);
  mask-size: 100%;
  mask-repeat: no-repeat;
  background-color: var(--chat-notice-bgcolor);
  width: 1.5rem;
  height: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  right: 40%;
}

@media screen and (min-width: 992px) {
  #main:not(:has(#muni-sidebar)) {
    position: relative;
    bottom: 1rem;
    padding-top: 80px;
    margin-top: -80px;
  }

  #main:not(:has(#muni-sidebar))::before {
    position: absolute;
    content: "";
    display: block;
    height: 80px;
    margin-top: -80px;
    visibility: hidden;
  }

  #main:has(.p-search-map) {
    bottom: 0;
  }

  /* マップから探すのコピーライツの位置制御 */
  .p-all-none + .p-search-map #ZMap div > p {
    position: relative;
    bottom: 34px;
  }

  /* サイドバーのスクロール用のクラス */
  .muni-sidebar__inner {
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
    padding: 0.15rem;
  }
}

@media screen and (max-width: 992px) {
  .header_link-main {
    display: none;
  }

  /* コピーライツの位置制御 */
  .p-all-none + .p-search-map #ZMap div > p {
    right: -2px;
  }
}

.header_login_Btn span {
  width: var(--btn-header-log-width);
  height: var(--btn-header-log-height);
  text-align: center;
  padding-top: 4rem;
  line-height: 0.9rem;
}

.header_login_Btn span::before {
  mask-image: var(--svg-box-arrow-in-right);
  background-color: var(--icon-primary-color);
  width: var(--btn-header-log-width-before);
  height: var(--btn-header-log-height-before);
  /* left: var(--btn-header-login-a-before-left); */
  bottom: 1.5rem;
}

/* --未読のチャットがあるとき--  */
@media screen and (max-width: 991px) {
  .header_buttons:has(.header_mypage_Btn.unread) .header_sp-menu {
    position: relative;
  }

  .header_buttons:has(.header_mypage_Btn.unread) .header_sp-menu::after {
    position: absolute;
    content: attr(data-pseudo);
    mask-image: var(--svg-circle-fill);
    mask-repeat: no-repeat;
    mask-size: 100%;
    width: 1rem;
    height: 1rem;
    top: 0.5rem;
    right: 0.5rem;
    background-color: var(--chat-notice-bgcolor);
    color: var(--chat-notice-bgcolor);
  }
}

@media screen and (min-width: 992px) {
  .header_mypage_Btn.unread {
    position: relative;
  }

  .header_mypage_Btn.unread::before {
    position: absolute;
    content: attr(data-pseudo);
    width: 124px;
    height: 20px;
    top: 0;
    left: -110px;
    font-size: 1.2rem;
    text-align: center;
    border-radius: 9999px;
    background-color: var(--chat-notice-bgcolor);
    color: var(--text-white-color);
    padding: 0 0.8rem;
  }

  .header_mypage_Btn.unread::after {
    position: absolute;
    content: "";
    background-color: var(--chat-notice-bgcolor);
    width: 10px;
    height: 10px;
    clip-path: polygon(75% 0, 100% 100%, 0 75%);
    top: 12px;
    left: 4px;
  }

  /* 「本文へ」ボタンにfocusされたときに吹き出しの表示を隠す */
  .header_buttons:has(.header_link-main:focus)
    .header_mypage_Btn.unread::before,
  .header_buttons:has(.header_link-main:focus)
    .header_mypage_Btn.unread::after {
    position: unset;
    content: unset;
  }
}

.header_mypage_Btn span {
  display: block;
  width: var(--btn-header-log-width);
  height: var(--btn-header-log-height);
  text-align: center;
  padding-top: 4rem;
  line-height: 0.9rem;
}

.header_mypage_Btn span::before {
  mask-image: var(--svg-person-fill);
  background-color: var(--icon-primary-color);
  width: var(--btn-header-log-width-before);
  height: var(--btn-header-log-height-before);
  /* left: var(--btn-header-login-a-before-left); */
  bottom: 1.5rem;
}

.header_sp-menu {
  background-color: #ffffff !important;
  border: none;
}

.offcanvas_icon_user {
  height: 4rem;
  width: 4rem;
}

.offcanvas_icon_menu {
  height: var(--icon-offcanvas-menu-width);
  width: var(--icon-offcanvas-menu-height);
}

.system_title {
  font-size: 2rem;
  font-weight: bold;
  color: var(--text-systemtitle-color);
  margin: 0;
  padding: 2rem;
  position: relative;
  background-color: var(--bg-headerMenu-color);
  text-align: center;
  border-bottom: 1px solid #dee2e6;
}

/* システム設定 下のコントロールバーのスタイル */
.controlbar__footer {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: #ffffff;
  border-top: 1px solid var(--border-navisma-color);
}

@media screen and (min-width: 992px) {
  .controlbar__footer {
    margin-left: calc(190px + 1rem);
  }
}

@media screen and (max-width: 991px) {
  .controlbar__footer {
    padding: 0.75rem;
  }

  .controlbar__footer
    .p-button__flameSprit:has(.p-button__secondary:nth-child(4)) {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .controlbar__footer .p-button__secondary {
    height: 2.3rem;
    width: 49%;
  }
}

/* 共通パーツ --- 画面上部に表示されるタイトル */
/* ページタイトル */
.screen_header {
  display: flex;
  align-items: center;
  text-align: center !important;
  width: 100%;
  margin-left: 0 !important;
}

@media screen and (min-width: 992px) {
  .screen_header {
    flex-direction: row;
  }
}

@media screen and (max-width: 991px) {
  .screen_header {
    flex-direction: column;
  }

  .screen_header:has(.screen_right) {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 575px) {
  .TitleResponsive-sp .screen_header {
    padding-right: 15px;
    padding-left: 15px;
  }
}

/* ページタイトル表示領域 */
.screen_center {
  /* flex-grow: 1; */
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 991px) {
  /* スクリーンネーム以外に、何も表示されていないパターン */
  .screen_header:has(> .screen_center) {
    /* margin-top: 70px; */
    padding-top: 64px;
  }

  /* 自治体管理画面での対応 */
  .muni_content .screen_header {
    padding-top: 0;
  }

  /* スクリーンネーム上に、タブが表示されているパターン */
  .TitleResponsive-sp .screen_header {
    margin-top: 0px;
    padding-top: 2.4rem;
  }

  /* スクリーンネーム上に、戻るボタンが表示されているパターン */
  .screen_header:has(.pageback_btn) {
    padding-top: 2rem;
  }
}

/* 左に表示される「戻る」ボタンなどの表示領域 */
.screen_left {
  display: flex;
  justify-content: flex-start;
  text-align: start;
  width: 25%;
}

.screen_left + .screen_center {
  width: 50%;
}

@media screen and (max-width: 991px) {
  .screen_left,
  .screen_left + .screen_center {
    width: 100%;
  }

  .screen_header:has(.screen_right) .screen_left {
    width: 50%;
  }

  .screen_header:has(.screen_right) .screen_center {
    width: 100%;
  }
}

/* 右に表示される「予約管理」などの表示領域 */
.screen_right {
  display: flex;
  justify-content: flex-end;
  text-align: end;
  width: 25%;
}

@media screen and (max-width: 991px) {
  .screen_right {
    width: 50%;
  }
}

/* ページのタイトルを表示 */
.screen_name {
  color: var(--text-primary-color);
  font-weight: 700;
  text-align: center;
}

@media screen and (min-width: 992px) {
  .screen_header {
    padding-top: 6.4rem;
    margin-bottom: 3.2rem;
    min-height: 3rem;
  }

  /* 自治体管理画面での対応 */
  .muni_content .screen_header {
    padding-top: 0;
  }

  .TitleResponsive-pc {
    display: block;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }

  .TitleResponsive-sp {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  .screen_header {
    padding-top: 2.4rem;
    margin-bottom: 1.2rem;
  }

  .TitleResponsive-pc {
    display: none;
  }

  .TitleResponsive-sp {
    display: block;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
}

/* MEMO:要確認 */
/* .btn-cls-color {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%)
    hue-rotate(207deg) brightness(102%) contrast(102%);
} */

/*----------------------header-sidemenu----------------------*/
.header_menu-size {
  width: 80vw !important;
}

.header_menu {
  display: flex;
  justify-content: space-between;
  border-bottom: 3px solid #ffffff;
  padding-left: 2.1rem;
  padding-right: 1rem;
  height: 70px;
  font-weight: 700;
  align-items: center;
}

.header_title {
  position: relative;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary-color);
  display: flex;
  align-items: center;
}

.header_close_text {
  width: var(--btn-header-log-width);
  height: var(--btn-header-log-height);
  text-decoration: none;
  text-align: center;
  padding-top: 4rem;
  line-height: 0.9rem;
  display: flex;
  justify-content: center;
}

.header_close_text::before {
  mask-image: var(--svg-x-lg);
  background-color: var(--icon-black-color);
  width: 2rem;
  height: 2rem;
  top: 0.9rem;
}

.header_menu_scroll_palent {
  height: calc(100dvh - 70px);
}

.header_menu_scroll_children {
  white-space: nowrap;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: 0;
  scrollbar-width: thin;
}

/* ユーザーネーム */
.header_menu_userInfo {
  display: flex;
  flex-direction: column;
}

.header_username {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  overflow-wrap: normal;
  width: 100%;
  font-size: 17px;
  font-weight: 600;
}

.header_userID {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  overflow-wrap: normal;
  width: 100%;
  font-size: 13px;
}

/* li */
.header_menu_item {
  display: block;
  color: var(--text-primary-color);
  text-decoration: none;
  background-color: var(--bg-headerMenu-color);
  border: 1px solid #dee2e6;
  height: fit-content;
  width: 100%;
}

/* a */
.header_menu_link {
  padding: 2.6rem 2.8rem;
  display: block;
  width: 100%;
}

.header_menu_link:has(> .header_menu_userInfo) {
  padding: 1.5rem 2.8rem;
}

/* span */
.header_menu_link > span {
  padding-left: 4rem;
  font-size: 16px;
  font-weight: 700;
}

.header_menu_userInfo::before {
  mask-image: var(--svg-01-navichan);
  width: 4rem;
  height: 4rem;
  left: -1rem;
  /* top: 0.3rem; */
  background-color: var(--icon-primary-color);
}

.header_menu_link > span:not(.header_menu_userInfo)::before {
  width: var(--icon-offcanvas-menu-width);
  height: var(--icon-offcanvas-menu-height);
  background-color: var(--icon-primary-color);
}

.header_menu_news::before {
  mask-image: var(--svg-bell-fill);
}

.header_menu_reserve::before {
  mask-image: var(--svg-check2);
}

.header_menu_new::before {
  mask-image: var(--svg-plus-circle-fill);
}

.header_menu_management::before {
  mask-image: var(--svg-gear-fill);
}

.header_menu_qa::before {
  mask-image: var(--svg-quora);
}

.header_menu_contact::before {
  mask-image: var(--svg-question-circle-fill);
}

.header_menu_logout::before {
  mask-image: var(--svg-box-arrow-right);
}

/*--未ログイン状態のみ表示されるもの--*/
.header_menu_regist::before {
  mask-image: var(--svg-person-fill-add);
}

.header_menu_login::before {
  mask-image: var(--svg-box-arrow-in-right);
}

.header_menu_item a:not(.header_menu_navichan) {
  position: relative;
  padding: 2.6rem 2.8rem;
  display: block;
}

.header_menu_navichan {
  position: relative;
  padding: 1.5rem 2.8rem;
  display: block;
}

.header_menu_item > a,
.header_menu_item > a:hover,
.header_menu_item > a:active {
  text-decoration: none;
  outline: none;
}

/* .header_menu_item:hover,
.header_menu_item:active,
.header_menu_item:focus-within {
  background-color: var(--bg-headerMenu-color-active);
  color: var(--text-primary-color);
  outline: solid 2px var(--focus-outline-color);
  outline-offset: -2px;
  transition: 0s;
  border-radius: 0.3rem;
} */

.header_menu_item:hover {
  background-color: var(--bg-headerMenu-color-active);
  transition: 0.75s;
  opacity: 1;
}

.header_menu_item:focus-within {
  outline: solid 2px var(--focus-outline-color);
  outline-offset: -2px;
  border-radius: 0.3rem;
  transition: 0s;
}

.header_menu_item:active {
  background-color: var(--bg-headerMenu-color-active);
  outline: solid 2px var(--focus-outline-color);
  border-radius: 0.3rem;
  opacity: 1;
  transition: 0s;
}

.header_menu_item:focus {
  color: var(--text-primary-color);
  outline: solid 2px var(--focus-outline-color);
  outline-offset: -2px;
  transition: 0s;
  border-radius: 0.3rem;
}

.header_menu_menuText {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary-color);
  padding-left: 4.3rem;
}

/* .header_menu_navichan > .header_menu_menuText {
  padding-left: 5rem;
  left: -0.7rem;
} */

/* 
.header_menu_navichan,
.header_menu_public,
.header_menu_reserve,
.header_menu_new,
.header_menu_management,
.header_menu_qa,
.header_menu_contact,
.header_menu_logout,
.header_menu_regist,
.header_menu_login {
  position: relative;
  display: block;
} */

.header_menu_login:hover::before {
  content: "";
  position: absolute;
  mask-image: var(--svg-box-arrow-in-right);
  background-color: var(--icon-primary-color);
  width: var(--icon-offcanvas-menu-width);
  height: var(--icon-offcanvas-menu-height);
  left: 0;
  top: 0.3rem;
  background-color: var(--icon-primary-color);
}

.header_menu_fnavi {
  padding: 13.5px 16px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.header_menu_fnavi-item {
  font-size: 1.6rem;
  margin-bottom: 10px;
  padding-right: 0px !important;
}

/* account/mypage... */

@media screen and (max-width: 575px) {
  .mypage-list-item {
    /* margin-left: 0.5rem;
    margin-right: 0.5rem; */
  }
}

.mypage-list-link {
  display: flex;
  box-sizing: content-box;
  padding: 18px 35px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary-color);
  border-radius: 0.375rem;
  background-color: #ffffff;
  box-shadow: var(--boxshadow-primary-style);
}

.mypage_list {
  padding-top: 32px;
  margin-bottom: 32px !important;
  list-style: none;
}

/* デザインアイデア2 - チャット遷移リンクをマイページに */

.mypage_linklist {
  display: grid;
  list-style: none;
  padding-top: 32px;
  margin-bottom: 3.2rem !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.mypage_linklist-item {
  display: grid;
  grid-template-rows: subgrid;
  width: 100%;
}

.mypage_linklist-item a {
  display: flex;
  box-sizing: border-box;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text-primary-color);
  border-radius: 0.375rem;
  background-color: #ffffff;
  box-shadow: var(--boxshadow-primary-style);
  position: relative;
}

.mypage_linklist-item a::before {
  background-color: var(--icon-primary-color);
  mask-size: 100%;
}

.mypage_linklist-item.unread .p-pseudo-chat::after {
  position: absolute;
}

@media screen and (min-width: 992px) {
  .mypage_linklist-item a {
    padding: 1.8rem 3.5rem 1.8rem 5rem;
  }

  .mypage_linklist-item a::before {
    left: 2rem;
  }

  .mypage_linklist-item.unread .p-pseudo-chat::after {
    content: "未読のチャットあり";
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-white-color);
    background-color: var(--chat-notice-bgcolor);
    padding: 0.5rem 0.8rem;
    border-radius: 9999px;
    top: 50%;
    transform: translateY(-50%);
    right: 2.8rem;
  }
}

@media screen and (max-width: 991px) {
  .mypage_linklist {
    grid-template-columns: repeat(3, 1fr);
    padding-left: 0;
  }

  .mypage_linklist-item a {
    border-radius: 1.5rem;
    padding: 6.5rem 1.6rem 0.8rem 1.6rem;
    justify-content: center;
    align-items: center;
    text-wrap: wrap;
    font-size: 1.4rem;
    text-align: center;
    aspect-ratio: 1 / 1;
  }

  .mypage_linklist-item:has(.p-pseudo-chat).unread {
    position: relative;
  }

  .mypage_linklist-item:has(.p-pseudo-chat).unread::after {
    position: absolute;
    content: "";
    mask-image: var(--svg-circle-fill);
    mask-size: 100%;
    mask-repeat: no-repeat;
    width: 2.5rem;
    height: 2.5rem;
    top: -0.6rem;
    right: -0.6rem;
    background-color: var(--chat-notice-bgcolor);
  }

  .mypage_linklist-item a::before {
    width: 3.5rem;
    height: 3.5rem;
    top: 30%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

  /* .mypage_linklist-item.unread a::after {
    position: absolute;
    content: "";
    mask-image: var(--svg-dot);
    mask-repeat: no-repeat;
    mask-size: 100%;
    width: 1rem;
    height: 1rem;
    top: 0;
    right: 0;
    transform: translate(-25%) translateY(-50%);
    background-color: var(--chat-notice-bgcolor);
  } */
}

.mypage_img-bg {
  background-color: var(--bg-navichan-primary-color);
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.mypage_userInfo {
  display: flex;
  flex-direction: column;
  padding: 20px 40px;
  width: 100%;
  background-color: var(--bg-mypage-userInfo-color);
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.mypage_userInfo h2 {
  font-weight: 600;
}

.mypage_userName {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary-color);
}

.mypage_userID {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary-color);
}

.mypage-list-link {
  box-sizing: border-box;
  padding-left: 5rem;
}

.mypage-list-link::before {
  left: 2rem;
  background-color: var(--icon-primary-color);
}

.mypage-favorite::before {
  mask-image: var(--svg-suit-heart-fill);
}

.mypage-review::before {
  mask-image: var(--svg-chat-dots-fill);
}

.mypage-post::before {
  mask-image: var(--svg-gear-fill);
}

.mypage-reserve::before {
  mask-image: var(--svg-check2);
}

.mypage-change::before {
  mask-image: var(--svg-person-fill);
}

.mypage-password::before {
  mask-image: var(--svg-lock-fill);
}

.mypage-quit::before {
  mask-image: var(--svg-x-lg);
}

.mypage-logout::before {
  mask-image: var(--svg-box-arrow-right);
  background-color: var(--icon-delete-color);
}

.btn-returnPrevPage,
.btn-to-top {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  color: var(--text-primary-color);
  background-color: #f8f8f8;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  border-radius: 0.375rem;
  border: 1px solid var(--border-primary-color);
}

#iconImage img {
  width: 100%;
  min-width: 129.19px;
  border-radius: 10%;
}

@media screen and (max-width: 575px) {
  #iconImage img {
    width: 100%;
    min-width: 84.42px;
    border-radius: 10%;
  }
}

#id_icon_image label {
  transition: 0.5s;
  border-radius: 0.5rem;
}

#iconImage input[name="icon_image"] {
  position: absolute;
  left: 15%;
  opacity: 0;
}

#id_icon_image label:has(input[type="radio"]:checked + img) {
  outline: solid 2px var(--imgchecked-outline-color);
  box-sizing: border-box;
  border-radius: 0.5rem;
  transform: scale(1.05);
  /* filter: none; */
}

#id_icon_image label:has(input[type="radio"]:hover + img) {
  background: var(--btn-radio-primary-bgcolor-selected);
  transition: 0.75s;
}

#id_icon_image label:has(input[type="radio"]:focus + img) {
  outline: solid 2px var(--focus-outline-color);
  box-sizing: border-box;
  border-radius: 0.5rem;
  transition: 0s !important;
  transform: scale(1.05);
}

/* input[type="radio"]:focus + img {
  filter: none;
} */

#iconImage .form-check {
  display: block;
  min-height: 1.5rem;
  padding: 0.75rem;
  margin: 0;
  width: 33.3%;
}

/* filterでのカラーリングが正 */
.mypage_img {
  margin: 0 auto;
  width: auto;
  max-height: 30vh;
  max-width: 100vw;
}

.mypage_img[src*="svg"] {
  filter: var(--icon-primary-color-filter);
  width: 20%;
  margin: 0 auto;
}
/* 
.mypage-edit_img {
  width: 20%;
  filter: var(--icon-primary-color-filter);
} */
/* 
@media screen and (max-width: 575px) {
  .mypage-edit_img {
    width: 20%;
    min-width: 90.75px;
  }
} */

.modaltxt-center {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.info_area {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 1.5rem;
  justify-content: space-between;
}

/*
.btn-edit01 {
  width: 30%;
  min-width: 30%;
  height: 42px;
  background: var(--bs-btn-bg);
  color: var(--bs-btn-color);
  border-radius: 0.5rem;
  text-align: center;
} */

.ds_12data {
  display: flex;
  width: 49%;
  box-sizing: content-box;
}

.ds_12data a {
  background: #fff;
  border-radius: 0.5rem;
  font-size: 1.6rem;
  font-weight: 600;
}

@media screen and (max-width: 991px) {
  .mypage_img[src*="svg"] {
    width: 25%;
  }

  /* .mypage-edit_img {
    width: 30%;
  } */

  .mypage_list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    padding-left: 0;
  }

  .ds_12data {
    width: 94%;
    gap: 1.5rem 1.5rem;
    box-sizing: content-box;
  }
}

/* account/mypage/edit/ */

#id_nickname,
#id_mail_address {
  padding: 1rem 1.6rem;
}

.mypage-item-style {
  font-weight: 600;
  font-size: 1.6rem;
}

.mypage-item-style2 {
  font-weight: 400;
  font-size: 1.6rem;
  padding: 0.8rem 0rem;
}

.ntfctn-area {
  display: flex;
  align-items: center;
}

.ntfctn-area input {
  transform: scale(2.4);
  margin-left: 0.6rem;
}

.mypg-space {
  padding-left: 0.8rem;
}

/* account/forget */
.mypage_img-bg_editEdition {
  background-color: var(--bg-navichan-secondary-color);
  border: none;
  border-radius: 0.5rem;
  text-align: center;
}

/* account/mypage/pass...edit_form.html*/
/* ログインID・パスワード入力が要求されるページのスタイルも含まれる */

.form-pass-space {
  margin: 25px 15px;
}

.pass-modify input,
#id_password,
#id_new_password,
#id_confirm_password {
  padding: 1rem 1.6rem !important;
  width: 100%;
  margin-right: auto;
}

.pass-modify input:not(.is-invalid),
#id_password:not(.is-invalid),
#id_new_password:not(.is-invalid),
#id_confirm_password:not(.is-invalid) {
  border: transparent;
}

#id_username {
  padding: 1rem 1.6rem;
  width: 100%;
  margin-right: auto;
}

.pass-wrapper {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
  /* position: relative; */
}

.pass-wrapper:focus-within {
  outline: solid 2px var(--focus-outline-color);
  transition: 0s;
}

.pass-wrapper:has(.is-invalid) ~ .invalid-feedback {
  /* position: absolute; */
  /* bottom: -50%; */
  display: block;
}

#id_password,
#id_current_password,
#id_new_password,
#id_confirm_password {
  outline: none;
  box-shadow: none;
}

.pass-wrapper .is-invalid .form-input-style {
  font-size: 1.6rem;
}

.form-input-style .form-control {
  display: block;
  width: 100%;
  padding: 1rem 1.6rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: none;
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

#current_password {
  outline: none !important;
}
/* account/pass/complete */

/* account/regist... */

.regist_text {
  font-size: 1.6rem;
}

.progressbar {
  position: relative;
  margin: 2rem 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.progressbar li {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 24%;
  background: var(--bg-progressbar-color);
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  padding-left: 12px;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .progressbar li {
    width: 22%;
    font-size: 1.2rem;
  }
}

.progressbar li:nth-child(1) {
  z-index: 4;
}

.progressbar li:nth-child(2) {
  z-index: 3;
}

.progressbar li:nth-child(3) {
  z-index: 2;
}

.progressbar li:nth-child(4) {
  z-index: 1;
}

.progressbar li:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-left: 10px solid var(--bg-main-color);
  top: 0;
  left: 0;
  z-index: -1;
}

.progressbar li:not(:nth-child(4)):after {
  position: absolute;
  content: "";
  width: 20px;
  height: 40px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 10% 100%, 10% 0);
  background: var(--bg-progressbar-color);
  top: 0;
  left: 96%;
}

.progressbar li.active,
.progressbar li.active:before,
.progressbar li.active:after {
  color: var(--text-white-color);
  background: var(--bg-progress-active-color);
}

.progressbar li.complete,
.progressbar li.complete:before,
.progressbar li.complete:after {
  background: var(--bg-bright-gray);
}

.title-space {
  margin: 4rem 0;
}

.complete-title {
  margin: 1.6rem auto;
  font-size: 1.8rem;
  font-weight: 600;
  max-inline-size: -webkit-max-content;
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
}

.regist-area #id_nickname,
.regist-area #id_mail_address,
.regist-area #id_mail_address_confirm {
  padding: 1rem 1.6rem !important;
}

.intro-wrapper img {
  width: 30%;
}

@media (min-width: 992px) {
  .intro-wrapper img {
    width: 15%;
  }
}

@media (max-width: 442px) {
  .intro-wrapper img {
    width: 40%;
  }
}

.intro-wrapper {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-bottom: 0.8rem;
}

.intro-wrapper img {
  margin-right: 0.8rem;
}

.intro-txt {
  flex-grow: 1;
}

.intro-txt .intro-heading {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0.8rem 0;
}

.intro-txt .c-button01 {
  padding: 1.5rem 1.5rem;
  border-color: var(--btn-cbutton01-bordercolor);
  border-radius: var(--btn-cbutton01-borderradius);
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 1.6rem;
  position: relative;
  text-decoration: none;
  color: var(--text-white-color);
  background: var(--btn-cbutton01-bordercolor);
  margin: 1rem auto;
}

.c-button01:hover {
  text-decoration: none;
  border-color: var(--btn-cbutton01-bordercolor-hover);
  background: var(--btn-cbutton01-bgcolor-hover);
}

.c-button02 {
  border: 2px solid var(--btn-cbutton02-bordercolor);
  padding: 1.5rem 1.5rem;
  border-radius: var(--btn-cbutton01-borderradius);
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 1.6rem;
  position: relative;
  text-decoration: none;
  background: #fff;
  margin: 1rem auto;
}

.c-button02:hover {
  text-decoration: none;
  background: var(--btn-cbutton02-bgcolor-hover);
}

.c_link {
  /* margin: 1rem 1rem 3rem 1rem; */
  text-align: center;
}

.c_link a:visited {
  color: var(--a-link-color-visited);
}

.r_link {
  margin: 1rem 1rem 3rem 1rem;
  text-align: right;
}
/* 
.r_link a:visited {
  color: var(--a-link-color-visited);
} */

.login_field_icon {
  color: var(--icon-loginfield-color);
  cursor: pointer;
  /* margin-right: 0.5rem; */
  margin-top: -3.1rem;
  position: relative;
  z-index: 2;
}

.btn-confirmRegist:disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* login modal */

/* search */
.border_navisma {
  border: var(--border-navisma-width) var(--border-navisma-style)
    var(--border-navisma-color);
  border-bottom: none !important;
}

/* fnavi */
.footerNavigation {
  padding: 20px;
}

@media screen and (max-width: 991px) {
  .footerNavigation {
    padding: 14px;
  }

  .footer_disp {
    box-shadow: 0px -1px 6px -2px rgba(220, 220, 220, 1);
    border-radius: 2rem 2rem 0 0;
  }

  .footerNavigation:has(+ .footer_disp) {
    padding: 14px;
    padding-bottom: calc(14px + 64px);
  }

  .footerNavigation:has(+ .footer_disp #selected-category_button) {
    padding: 14px;
    padding-bottom: calc(14px + 33px + 64px);
  }
}

.fnavi_borderTop {
  border-top: 1px solid #eaeaea;
}

.fnavi_systemName {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 1.6rem;
  padding: 0.1rem 0.5rem 0.1rem 4rem;
  position: relative;
}

/* MEMO:svgはbackgroundで定義が正 */
.fnavi_systemName::before {
  position: absolute;
  content: "";
  background: url(/static/img/svg/NaviSma_logo.svg) no-repeat;
  width: 3.8rem;
  height: 3.8rem;
  left: 0rem;
}

.fnavi_item {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 16px;
}

.fnavi_link {
  color: var(--text-primary-color);
  padding-left: 1.8rem;
  padding-right: 0.6rem;
  text-decoration: none;
  margin-bottom: 0.6rem;
  font-size: 1.6rem;
  font-weight: 500;
}

.fnavi_link::before {
  display: inline-block;
  mask-image: var(--svg-caret-right-fill);
  background-color: var(--icon-primary-color);
  width: var(--icon-fnavi-width);
  height: var(--icon-fnavi-height);
  left: 0;
  /* top: 0.4rem;
  transform: translateY(0.1rem); */
}

.fnavi_copyright {
  font-size: 16px;
  padding: 0 0.6rem;
}
/* ---------------------footer---------------------↓ */

/* .footer_color {
  color: var(--text-fnavi-color);
}

.footer_btn {
  background-color: transparent;
  border: 1px solid transparent;
}

.footer_icon {
  filter: var(--icon-footer-color);
  height: var(--icon-footer-height);
  width: var(--icon-footer-width);
}

.footer_color .active,
.footer_color:hover .footer_btn {
  color: #fff !important;
  filter: var(--icon-white-color);
} */
/* ---------------------footer(nav)---------------------↓ */

.navi-bt {
  height: 64px;
}

/*----------------------footer----------------------*/
/*検索メニューが完成したら外す*/

@media screen and (min-width: 992px) {
  .footer_disp {
    display: none;
  }

  /*「マップから探す」にて、検索メニューを開いたときにフッターナビゲーションを表示しないようにする*/
  .footer_disp .footerMenu {
    display: none;
  }
}

.footer_ul {
  padding: 4px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  background-color: var(--bg-footerMenu-color); /*変数化*/
  text-decoration: none;
}

.footer_li-item {
  background-color: var(--bg-white-color);
  border-radius: 4px;
  margin-right: 6px;
  width: -webkit-fill-available;
  max-height: 56px;
}

.footer_li-item a {
  display: flex;
  justify-content: center;
  color: var(--text-primary-color);
  font-size: 12px;
  font-weight: 600;
  padding-bottom: 4.8px;
  padding-top: 34.2px;
}

.footer_ul .footer_li-item:last-of-type {
  margin-right: 0px !important;
}

.footer_li-item a::before {
  background-color: var(--icon-footer-color);
  width: var(--icon-footer-width);
  height: var(--icon-footer-height);
  bottom: 25px;
}

.footer-list::before {
  content: "" / "リストから探す";
}

.footer-map::before {
  content: "" / "マップから探す";
}

.footer-calendar::before {
  content: "" / "カレンダーから探す";
}

.footer-favorite::before {
  content: "" / "カレンダーから探す";
}

.footer-post::before {
  content: "" / "新規投稿する";
}

/* Parts */
/* .main_content {
  width: 100%;
  top: 0;
  overflow-y: auto;
} */

.x_scroll {
  white-space: nowrap;
  -ms-overflow-style: none; /* IE, Edge 対応 */
  scrollbar-width: none; /* Firefox 対応 */
}

.x_scroll::-webkit-scrollbar {
  /* Chrome, Safari 対応 */
  display: none;
}

.tab_icon {
  width: var(--icon-tab-width);
  height: var(--icon-tab-height);
}

.mypage_icon,
.sns_icon,
.review_icon,
.address_icon {
  width: var(--icon-other-width);
  height: var(--icon-other-height);
}

.page-title {
  background-color: var(--bg-primary-color);
}

/*リスト系の投稿表示にて、なんらかの条件で投稿が表示されないときに同じメッセージを表示する*/
.empty-message {
  padding: 5rem 0;
  text-align: center;
}

.empty-message:has(.empty-message-subtext) {
  display: flex;
  flex-direction: column;
}

.empty-message-text {
  font-size: 20px;
  font-weight: 600;
}

.empty-message-subtext {
  font-size: 16px;
  font-weight: 400;
}

.p-card__container:has(.empty-message) {
  justify-content: center;
}

/* post/list */
.per-tile {
  display: block;
  margin-bottom: 3rem;
}

.list-flame {
  border-width: 1px;
  border-color: #90b4ce;
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: var(--boxshadow-primary-style);
}

/*card*/
.post-img {
  width: 100%;
}

.post-flame {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem 0.5rem 0 0;
}

.img-cover-link {
  display: block;
  width: 100%;
}

.post-photograph {
  max-width: 100%;
  width: 100%;
  max-height: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0.5rem 0.5rem 0 0;
}

@media screen and (max-width: 767px) {
  /* .row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-top: var(--bs-gutter-y);
  } */

  .per-tile {
    display: block;
    margin-bottom: 0;
  }
}

/*post-body*/

.post-body {
  width: 100%;
  padding: 2rem 2rem 5.5rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 384px) {
  .post-body {
    padding: 2rem 1.5rem 5.5rem;
  }
}

.card-body-status {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.card-body-status__item,
.p-form__item-status {
  width: fit-content;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0.3rem 1rem;
}

.card-body-statusgroup {
  padding-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/*お気に入り表示*/
.card-body-favorite {
  /* padding-right: 1rem; */
}

.favorite-label {
  width: 9.8rem;
  height: 2.5rem;
}

/* .post-title {
  width: 100%;
  padding-bottom: 0.5rem;
}

.post-title-text {
  color: var(--text-primary-color);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
} */

.a-post-list {
  display: block;
  background-color: var(--bg-white-color);
  padding: 2rem 2rem 6rem 2rem;
  border-radius: 0.375rem !important;
}

.post-category {
  position: absolute;
  display: block;
  width: calc(100% - 4rem);
  margin: 1rem 2rem;
  padding: 0 0.6rem;
  bottom: 0;
  left: 0;
  white-space: nowrap !important;
  overflow: hidden;
  overflow-x: scroll;
  scrollbar-width: none;
}

/* Safariでの対応 */
.post-category::-webkit-scrollbar {
  display: none;
}

.post-reserveManagement {
  position: absolute;
  display: block;
  margin-top: 1rem;
  padding: 0 2rem 2rem;
  bottom: 0;
  top: 0;
}

.post-list-review {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.post-status {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.post-tile {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: left;
}

.tile_favorite {
  position: absolute;
  right: calc(100% - 2.5rem);
  z-index: 1;
}

/* .tile_status {
  position: absolute;
  top: var(--card-status-position);
  right: var(--card-status-position);
  z-index: 1;
}

.favorite_status {
  position: absolute;
  top: var(--card-status-position);
  left: var(--card-status-position);
  z-index: 1;
} */

/*post-body内の要素*/
/* .post-title {
  font-weight: 700;
  padding: 0.25rem 0.25rem 0.25rem 0;
} */

.post-address,
.post-date,
.post-review {
  display: flex;
}

.post-date-icon,
.post-review-icon {
  display: block;
  position: relative;
  width: 16px;
  height: 16px;
}

.post-address span,
.post-date span,
.post-review span {
  color: var(--text-primary-color);
  font-size: 16px;
  font-weight: 400;
  display: block;
  padding-left: 2rem;
  padding-right: 2rem;
}

.post-address span::before {
  mask-image: var(--svg-geo-alt-fill);
  background-color: var(--icon-primary-color);
  left: 0;
}

.post-date span::before {
  mask-image: var(--svg-calendar3);
  background-color: var(--icon-primary-color);
  left: 0;
}

.post-review span::before {
  mask-image: var(--svg-chat-dots-fill);
  background-color: var(--icon-primary-color);
  left: 0;
}

/**
 * 画面上部 検索メニュー等
 */
/* 検索メニュー系エリア */
.useful_navi {
  margin: 0 auto;
  min-height: 5rem;
}

.calendar_result .useful_navi {
  min-height: 0 !important;
}

/* 件数 */
.num-hits {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-primary-color);
  text-wrap: nowrap;
  letter-spacing: 1px;
  /* margin-left: 8px; */
}

/* .calendar_content div:has(> .num-hits) {
  display: none;
} */

/* 検索メニュー */
.accordion_search_menu {
  width: 100%;
}

/* 検索メニュー（表示切替ボタンがない場合） */
.accordion_search_menu:has(+ .switch_disp_buttons) {
  flex-grow: 1;
}

/* 検索メニュー 開閉ボタン */
.accordion-button_extend {
  height: 45px;
  border-radius: 0.5rem 0.5rem 0 0;
  /* border-bottom: 2px solid #dee2e6; */
  color: var(--text-primary-color);
  box-shadow: var(--boxshadow-secondary-style);
  font-size: 1.6rem;
  font-weight: 600;
  padding: 12.5px;
  letter-spacing: 0.6px;
}

/* 検索メニューの中身 */
.accordion-body {
  padding: 32px;
  max-height: 400px;
  overflow: auto;
  scrollbar-width: thin;
  box-shadow: var(--boxshadow-secondary-style);
}

/* 開閉ボタンアイコン(開) */
.accordion-button_extend::before {
  flex-shrink: 0;
  content: "";
  mask-image: var(--svg-arrow-down-small);
  mask-size: cover;
  transition: var(--bs-accordion-btn-icon-transition);
  background-color: var(--icon-primary-color);
  margin: 0 1rem 0 0.4rem;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
}
/* 開閉ボタン文言(開) */
.accordion-button_extend_content::before {
  content: "ひらく";
  letter-spacing: 0.6px;
}

/* 開閉ボタン(閉) */
.accordion-button_extend:not(.collapsed) {
  color: var(--text-primary-color);
  background-color: var(--bg-white-color);
}
/* 開閉ボタン文言(閉) */
.accordion-button_extend:not(.collapsed)
  .accordion-button_extend_content::before {
  content: "とじる";
  letter-spacing: 0.6px;
}
/* 開閉ボタンアイコン(閉) */
.accordion-button_extend:not(.collapsed)::before {
  mask-image: var(--svg-arrow-down-small);
  mask-size: cover;
  transform: var(--bs-accordion-btn-icon-transform);
}

/* 開閉ボタンアイコン(デフォルト非表示) */
.accordion-button_extend::after,
.accordion-button_extend:not(.collapsed)::after {
  background-image: none;
  width: 0;
  height: 0;
}

/* 開閉ボタンfocus */
.accordion-button_extend:focus {
  outline: solid 2px var(--focus-outline-color);
  border-color: transparent;
  box-shadow: none;
}
.accordion-button_extend:active,
.accordion-button_extend:focus:not(:focus-visible) {
  outline: solid 2px var(--focus-outline-color);
  box-shadow: none;
}

/* 検索メニューボタン類エリア */
.accordion_search_menu .search_menu_footer {
  margin: 0;
}

/* 削除ボタン
.search_menu_footer .btn_delete {
  width: 256px;
  min-width: 147px;
  max-width: 256px;
  padding: 10px 10px 10px 36px;
  line-height: 1;
  box-sizing: border-box;
  font-size: 1.6rem;
  border: var(--bg-primary-color);
  border: var(--btn-delete-bordercolor) var(--btn-primary-borderstyle)
    var(--btn-primary-borderwidth);
  border-radius: 5rem;
  background-color: var(--bg-delete-color);
  color: var(--text-white-color);
  cursor: pointer;
}
削除ボタンアイコン
.search_menu_footer .btn_delete > span::before {
  display: inline-block;
  mask-image: var(--svg-trash3);
  background-color: var(--icon-white-color);
  width: var(--icon-search-width);
  height: var(--icon-search-height);
  left: -26px;
  top: 4px;
} */

/* 見出しラベル */
/* .q-head-deco > p:not(.head-not-deco),
.q-head-deco > legend:not(.head-not-deco),
.q-head-deco > label:not(.head-not-deco) {
  position: relative;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  margin-left: 1.6rem;
  margin-bottom: 1rem;
} */

/* 見出しラベル「｜」に付与 */
/* .q-head-deco > p:not(.head-not-deco)::before,
.q-head-deco > legend:not(.head-not-deco)::before,
.q-head-deco > label:not(.head-not-deco)::before {
  position: absolute;
  display: block;
  content: "";
  mask-image: var(--svg-square-fill-02);
  background-color: var(--icon-arrowlink-color);
  width: 2.2rem;
  height: 2.2rem;
  left: -2.4rem;
  bottom: 11.5px;
  transform: translateY(10px);
} */

/* 「｜」を付けないラベル */
/* .head-not-deco {
  font-size: 1.6rem !important;
  font-weight: bold !important;
} */

/* 検索メニュー 開閉したときの画面占領域制御 */
.search_menu-wrapper {
  height: 80% !important;
  border-radius: 2rem 2rem 0 0;
}

/* 複数選択肢をラベルの見た目に */
.search_menu-body
  fieldset
  .form-check-label:not(:has(input[type="checkbox"])):has(input[type="radio"]) {
  position: relative;
  font-size: 1.6rem;
  border: 1px solid #dee2e6;
  border-radius: 5rem;
  padding: 0.25em 1em;
  cursor: pointer;
}
/* ラジオボタンを非表示 */
.search_menu-body fieldset input[type="radio"] {
  position: absolute;
  left: 15%;
  opacity: 0;
}
/* チェックされたラジオボタンの色変え */
.search_menu-body
  fieldset
  .form-check-label:has(> input[type="radio"]:checked) {
  background-color: var(--btn-radio-primary-bgcolor-selected);
  color: var(--text-primary-color);
}

.search_menu-body fieldset .form-check-label:has(> input[type="radio"]:focus) {
  background-color: var(--btn-radio-primary-bgcolor-selected);
  color: var(--text-primary-color);
  outline: 2px solid var(--focus-outline-color);
}

/* いったんコメントアウト */
/* .search_menu-body
  fieldset
  .form-check-label:not(:has(> input[type="radio"]:checked)):focus,
.search_menu-body
  fieldset
  .form-check-label:not(:has(> input[type="radio"]:checked)):active {
  outline: 2px solid var(--focus-outline-color);
} */

.search_menu-body
  fieldset
  .form-check-label:has(> input[type="radio"]:checked):active,
.search_menu-body
  fieldset
  .form-check-label:has(> input[type="radio"]:focus)
  :active,
.search_menu-body
  fieldset
  .form-check-label:has(> input[type="radio"]:checked):focus,
.search_menu-body
  fieldset
  .form-check-label:has(> input[type="radio"]:focus):focus {
  user-select: none;
  outline: none;
}
/* 検索メニューのテキストボックスのpadding */
.search_menu-body .form-control {
  padding: 1rem 1.6rem;
}
/* 検索メニューのチェックボックスのレイアウト */
.search_menu-body input[type="checkbox"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  transform: scale(1.6);
  border-radius: 0.2em;
  margin-right: 1rem !important;
  font-size: 1.6rem;
}
/* 検索メニューの複数選択肢に紐づくラベル */
.search_menu-body .form-check-label {
  font-size: 1.6rem;
}

.useful_navi-sp {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 住所検索のフォーム */
.p-search_textbox-button {
  display: flex;
}

.p-search_textArea {
  flex-grow: 1;
  margin-right: 0.25rem;
}

.p-search_buttonArea {
  width: 124px;
  text-wrap: nowrap;
  margin-left: 0.25rem;
}

/* カルーセル掲載用画像を選択するフォーム下にあるファイルの説明文 */
.explainList {
  margin-left: 2.4rem;
  font-size: 1.6rem;
}

@media (max-width: 991px) {
  .explainList {
    margin-left: 0.5rem;
  }
}

/* PC */
@media (min-width: 992px) {
  /* 検索メニュー系エリア */
  .useful_navi {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    z-index: 60;
    padding-top: 40px;
    padding-bottom: 30px;
  }

  .useful_navi:has(.show) {
    background: linear-gradient(rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
  }
  .calendar_content .useful_navi {
    margin-top: 0;
  }

  /* 検索メニュー系エリアが表示切替ボタンだけの時は、sticky解除 */
  .useful_navi:not(:has(.accordion_search_menu)):has(.switch_disp_buttons) {
    position: static;
  }

  /* 表示切替類（SP） */
  .useful_navi-sp {
    display: none;
  }

  /* 検索ボタン類 */
  .search_menu_footer {
    margin-top: 64px;
    margin-bottom: 40px;
  }
}

/* SP */
@media (max-width: 991px) {
  /* 検索メニュー系エリア */
  .useful_navi {
    margin-top: 10px;
  }
  /* 表示切替ボタン類（PC） */
  .useful_navi-pc {
    display: none;
  }

  .num-hits {
    position: absolute;
    transform: translateY(-125%);
  }

  /* 検索メニュー */
  .accordion_search_menu {
    width: max(7.67vw, 510px);
  }

  .search_menu_footer {
    margin-top: 30px;
  }
}

/*　カード - タイル表示とリスト表示を切り替えるボタン */
.switch_disp_buttons button {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 47px;
  background-color: var(--btn-switchDisp-bgcolor);
  border: 1px solid #dee2e6;
  border-radius: var(--btn-switchDisp-borderradius);
  margin-left: 20px;
  box-shadow: var(--boxshadow-secondary-style);
}

.switch_disp_buttons span {
  padding-left: 3rem;
  letter-spacing: 0.6px;
  text-wrap: nowrap;
  text-decoration: none;
  color: var(--btn-switchDisp-color);
  font-size: var(--btn-switchDisp-fontsize);
  font-weight: 600;
}

.tile_Btn span::before {
  mask-image: var(--svg-grid-fill);
  background-color: var(--btn-switchDisp-before-color);
  width: var(--btn-switchDisp-before-size);
  height: var(--btn-switchDisp-before-size);
  left: 0;
  content: attr(data-pseudo);
  color: var(--icon-primary-color);
}

.abbreviated_Btn span::before {
  mask-image: var(--svg-list-fill-og);
  background-color: var(--btn-switchDisp-before-color);
  width: var(--btn-switchDisp-before-size);
  height: var(--btn-switchDisp-before-size);
  left: 0;
  content: attr(data-pseudo);
  color: var(--icon-primary-color);
}

.switch_disp_buttons button:active {
  outline: solid 2px var(--focus-outline-color);
}

/* これまでに投稿したレビュー一覧,
/account/detail/ */

.review-wrapper {
  display: flex;
  flex: wrap;
}

.review-wrapper-size {
  flex: 0 0 auto;
  width: 100%;
}

@media screen and (max-width: 575px) {
  .review-wrapper {
    padding: 0 0.75rem;
  }

  .review-wrapper-size .useful_navi {
    min-height: 3.2rem;
  }
}

.bulkdelete-btn {
  font-weight: 600;
  padding: 1rem 1.5rem;
  text-wrap: nowrap;
}

/* 絞込検索 */
a.search-menu-cover:active,
a.search-menu-cover:focus,
a.search-menu-cover:focus-visible {
  display: block;
  outline: solid 2px var(--focus-outline-color);
  outline-offset: -0.2rem;
  border-radius: 2rem 2rem 0 0;
  border: 0;
}

.open-search,
.close-search {
  padding-left: 2.5rem;
  font-size: 1.4rem !important;
  font-weight: 600;
  color: var(--text-primary-color);
}

.open-search::before {
  display: inline-block;
  mask-image: var(--svg-plus-circle-fill);
  background-color: var(--icon-primary-color);
}

.close-search::before {
  display: inline-block;
  mask-image: var(--svg-dash-circle-fill);
  background-color: var(--icon-primary-color);
}

.form_search {
  display: inline-block;
}

/*選択したカテゴリー*/
.btn-selectedCategory {
  /* display: flex;
  align-items: center; */
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  /* background-color: var(--btn-category-bgcolor); */
  /* border-top-left-radius: var(--btn-category-borderradius); */
  /* border-bottom-left-radius: var(--btn-category-borderradius); */
  /* border: solid 1px var(--btn-category-bordercolor); */
  /* border-right: none; */
  font-size: 1.4rem;
  user-select: none !important;
  pointer-events: none !important;
}

/* .btn-selectedCategory:focus {
  outline: none;
  user-select: none;
  border-top-left-radius: var(--btn-category-borderradius);
  border-bottom-left-radius: var(--btn-category-borderradius);
} */

.btn-unselectCategory {
  /* display: flex;
  align-items: center; */
  background-color: var(--btn-category-bgcolor);
  /* border-top-right-radius: var(--btn-category-borderradius);
  border-bottom-right-radius: var(--btn-category-borderradius); */
  border: solid 1px var(--btn-category-bordercolor);
  border-radius: 9999px;
  margin: 0.25rem;
  transition: 0.75s;
  /* border-left: none;
  font-size: 1.4rem; */
}

.p-pseudo-x-lg:after {
  content: "" / "から絞り込みを取り消す";
  mask-image: var(--svg-x-lg);
  color: var(--icon-black-color);
  background-color: var(--icon-black-color);
}

.btn-unselectCategory:focus {
  outline: 2px solid var(--focus-outline-color);
  border-radius: 9999px;
  /* border-top-right-radius: var(--btn-category-borderradius);
  border-bottom-right-radius: var(--btn-category-borderradius); */
}

/*アコーディオン型検索メニュー内の選択済みカテゴリ*/
.accordion_search_menu .btn-selectedCategory {
  /* padding: 0.3rem 0.2rem 0.3rem 0.8rem; */
  padding: 0.3rem 2rem 0.3rem 0.2rem;
}

/*フッター型検索メニュー内の選択済みカテゴリ*/
footer .btn-selectedCategory {
  /* padding: 0.1rem 0.2rem 0.1rem 0.8rem; */
  padding: 0.1rem 2rem 0.1rem 0.8rem;
}

/* 検索バー表示カテゴリーの表示エリア */

/* アコーディオン型検索メニューの選択済みカテゴリ表示エリア*/

.accordion_search_menu .selected-categories-area {
  position: absolute;
  max-width: calc(100% - 218px - 12.5px);
  min-width: calc(100% - 218px - 12.5px);
  top: 10%;
  left: 218px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 0.3rem;
}

.accordion_search_menu .p-Xscroll-flame:not(:has(.btn-group)) {
  border: none;
}

.accordion-header .p-Xscroll-flame:has(.btn-group) {
  padding: 0.3rem 0.6rem;
}

/* フッター型検索メニューの選択済みカテゴリ表示エリア */
footer .selected-categories-area {
  max-width: calc(100vw - 170px);
  min-width: calc(100vw - 170px);
  top: 4px;
  left: 148px;
  position: absolute;
}

.search_menu-wrapper.show .selected-categories-area {
  max-width: calc(100vw - 154px);
  min-width: calc(100vw - 154px);
  top: 4px;
  left: 148px;
  position: absolute;
}

footer .p-Xscroll-flame:not(:has(.btn-group)) {
  border: none;
}

footer .p-Xscroll:has(.btn-group) {
  padding: 0.2rem 0.6rem;
}

/* 検索バー表示カテゴリー */
.selected-categories {
  /* width: inherit; */
  width: 100%;
  /* max-width: inherit; */
  height: inherit;
  overflow-x: auto !important;
  white-space: nowrap !important;
  /* スクロールバーに関しては、フロント対応により、スマホ表示のみ下部にある想定なので一旦none */
  scrollbar-width: none;
}

/* for MacOS */
.selected-categories::-webkit-scrollbar {
  display: none;
}

.form_search {
  display: inline-block;
}

.search_menu_wrapper {
  position: relative;
  background-color: #ffffff;
}

/* 「条件で絞り込む」のヘッダー */
.search_menu_header {
  display: flex;
  align-items: center;
  border: var(--border-navisma-color) var(--border-navisma-style)
    var(--border-navisma-width);
  padding: 0.5rem 1.5rem;
  background: var(--bg-primary-color);
  height: 3.8rem;
  width: 100%;
  border-radius: 2rem 2rem 0 0;
}
/* 「条件で絞り込む」の中身 */
.search_menu {
  border-right: var(--border-navisma-color) var(--border-navisma-style)
    var(--border-navisma-width);
  border-left: var(--border-navisma-color) var(--border-navisma-style)
    var(--border-navisma-width);
  padding: 32px;
  overflow-y: auto;
  scrollbar-width: thin;
}

@media screen and (max-width: 991px) {
  .search_menu {
    padding: 14px;
  }
}
/* 「条件で絞り込む」のフッター */
/* post/calendar */
.hidden-text {
  opacity: 0;
  height: 0 !important;
}

.calendar_content {
  height: auto;
  width: 100%;
}

@media screen and (min-width: 992px) {
  .calendar_content {
    display: flex;
  }

  .calendar-sp {
    display: none;
  }

  .calendar-pc {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    padding-top: 40px;
    margin-bottom: 2rem;
  }

  .calendar_sprit {
    display: flex;
    flex-direction: row;
    column-gap: 2rem;
    padding-bottom: 2rem;
  }

  .calendar_result {
    order: 0;
    flex-grow: 1;
  }

  .calendar {
    order: 1;
    min-width: 488px;
    max-width: 488px;
  }
}

@media screen and (max-width: 991px) {
  .calendar_content {
    display: block;
    height: auto;
  }

  .calendar-pc {
    display: none;
  }

  .calendar-sp {
    position: fixed;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 200;
    top: 70px;
  }

  .calendar {
    display: none;
  }

  .calendar_result {
    margin-top: 190px;
    width: 100%;
  }

  .calendar_content .row > * {
    flex-shrink: 0;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }
}

/* calendar-spのleft */

.calendar-pc_flame {
  width: 100%;
  height: auto;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: var(--boxshadow-primary-style);
  padding: 20px;
  /* margin-bottom: 1rem; */
}

.calendar-sp_flame {
  padding-top: 20px;
  padding-bottom: 20px;
  /* background-color: inherit; */
  height: auto;
}

.calendar-selectedDay {
  color: var(--text-primary-color);
  margin-bottom: 16px;
  letter-spacing: 1px;
  padding-left: 26px;
  font-size: 18px; /* clamp検討 */
  font-weight: 600;
}

.calendar-selectedDay::before {
  mask-image: var(--svg-balloon-fill);
  background-color: var(--icon-primary-color);
}

@media screen and (max-width: 991px) {
  .calendar-selectedDay {
    color: var(--text-primary-color);
    letter-spacing: 1px;
    padding-left: 18px;
    font-size: 18px;
    font-weight: 600;
  }
}

.calendar-dataFigure {
  padding-left: 26px;
  font-size: 1.8rem;
  font-weight: 600;
  text-wrap: nowrap;
}

@media screen and (375px <= width <= 991px) {
  .calendar-dataFigure {
    letter-spacing: 1px;
  }
}

/*calendar-pc*/

.calendar_controller {
  height: 36px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media screen and (max-width: 575px) {
  .calendar_content .calendar_controller {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.btn-calendarPrev,
.btn-calendarNext {
  display: inline-block;
  border: 1px solid var(--btn-calendar-bordercolor);
  border-radius: var(--btn-calendar-borderradius);
  background-color: var(--btn-calendar-bgcolor);
  text-align: center;
  align-items: center;
  vertical-align: middle;
  padding: 1rem;
}

.btn-calendarPrev:disabled,
.btn-calendarNext:disabled {
  opacity: 0.6;
  pointer-events: none;
}

.btn-calendarPrev:disabled .btn-calendarPrev-text::before,
.btn-calendarNext:disabled .btn-calendarNext-text::after {
  background-color: #999999;
}

.btn-calendarPrev-text {
  padding-left: 2rem;
}

.btn-calendarNext-text {
  padding-right: 2rem;
}

.btn-calendarPrev-text::before {
  mask-image: var(--svg-chevron-left-bold);
  background-color: var(--icon-primary-color);
}

.btn-calendarNext-text::after {
  mask-image: var(--svg-chevron-right-bold);
  background-color: var(--icon-primary-color);
}

.calendar-MonthAndBtn {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 2px;
}

.calendar-selectedMonth {
  font-size: 24px;
  font-weight: 600;
  margin-right: 10px;
}

.btn-returnToday {
  margin-top: 4px;
  padding: 6px 19px;
  border-radius: 9999px;
  border-style: none;
  background-color: var(--btn-calendar-returnToday-bgcolor);
  color: #ffffff;
  font-size: 16px;
}

.btn-returnToday:active,
.btn-returnToday:focus {
  border-radius: 9999px;
}

.clndr-table {
  margin-top: 16px !important;
}

.calendar-week {
  background-color: var(--bg-primary-color);
}

.header-day {
  background-color: #fafafa !important;
  height: 48px;
}

.calendar-weekofday {
  font-size: 16px;
  color: var(--text-primary-color);
}

.header-day:first-child .calendar-weekofday {
  color: var(--btn-calendar-date-sunday);
}

.header-day:last-child .calendar-weekofday {
  color: var(--btn-calendar-date-saturday);
}

.clndr-block.empty,
.clndr-block.day {
  padding: 0px !important;
}

.clndr-block.empty > .change_date,
.clndr-block.day > .change_date {
  background-color: #ffffff;
  color: var(--text-primary-color);
  font-size: 20px;
  font-weight: 600;
  /* margin: 3.5px 4px; */
  border-radius: 5px;
  min-height: 56px;
}

@media screen and (min-width: 992px) {
  .clndr-block.empty > .change_date,
  .clndr-block.day > .change_date {
    margin: 0.2rem;
  }
}

.calendar-dayblock {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding-top: 3px !important;
  padding-bottom: 10px !important;
}

.exist-data {
  margin-top: 4px;
  width: 8px;
  height: 8px;
  filter: brightness(0) saturate(100%) invert(63%) sepia(0%) saturate(3068%)
    hue-rotate(170deg) brightness(96%) contrast(105%);
}

/*calendar-sp*/
.calendar-spBody {
  display: flex;
  margin-top: 10px;
  width: 100%;
  overflow-x: auto;
  overflow: auto;
  gap: 0.7rem;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.calendar-spBody::-webkit-scrollbar {
  display: none;
}

.calendar-spBody .clndr-block-item {
  width: 64px;
  height: 56px;
  border: 1px solid #dee2e6;
  border-radius: 3.75px;
  padding-top: 14px !important;
}

@media screen and (max-width: 991px) {
  .calendar-selectedMonth {
    margin-top: 2px;
    font-size: 18px;
  }
}

.calendar-spBody .calendar-dow-0 .calendar-sp_dayInfo {
  color: var(--btn-calendar-date-sunday);
}

.calendar-spBody .calendar-dow-6 .calendar-sp_dayInfo {
  color: var(--btn-calendar-date-saturday);
}

/* .calendar-spBody .today .clndr-block-item {
  background-color: #5faa34 !important;
} */

.disp_day_color {
  background-color: var(--btn-calendar-selected-bgcolor) !important;
}

.disp_day_color span {
  color: var(--btn-calendar-selected-color);
}

.disp_day_color .exist-data {
  filter: var(--btn-calendar-selected-eventColor);
}

/* .calendar-spBody .today .calendar-sp_dayInfo {
  color: #ffffff;
} */

.calendar-sp_spacer01,
.calendar-sp_spacer02 {
  background-color: #ffffff;
  opacity: 0;
  display: block;
}

/* @media screen and (768px <= width <= 991px) {
  .calendar-spBody .clndr-block:first-of-type {
    margin-left: calc(calc(100vw - 720px) / 2);
  }

  .calendar-spBody .clndr-block:last-of-type {
    margin-right: calc(calc(100vw - 734px) / 2);
  }
}

@media screen and (576px <= width <= 767px) {
  .calendar-spBody .clndr-block:first-of-type {
    margin-left: calc(calc(100vw - 540px) / 2);
  }

  .calendar-spBody .clndr-block:last-of-type {
    margin-right: calc(calc(100vw - 554px) / 2);
  }
} */

@media screen and (max-width: 575px) {
  .calendar-spBody .clndr-block:first-of-type {
    margin-left: 1.5rem;
  }

  .calendar-spBody .clndr-block:last-of-type > .change_date {
    margin-right: 1.5rem;
  }
}

.calendar-sp_eventInfo {
  display: flex;
  flex-direction: column;
}

.calendar-sp_dayInfo {
  display: flex;
  align-items: end;
  width: auto;
  justify-content: center;
}

.calendar-sp_dayNumber {
  font-size: 17px;
  margin-right: 7px;
}

.calendar-sp_dayofWeek {
  font-size: 12px;
  margin-bottom: 3px;
}

.calendar-spBody .exist-data {
  margin-right: auto;
  margin-left: auto;
}

/* calendarの投稿 */
.calendar-cardFlame {
  display: block;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  background-color: #ffffff;
  box-shadow: var(--boxshadow-primary-style);
  /* margin-bottom: 16px; */
  position: relative;
}

.calendar-cover-link {
  display: block;
  width: 100%;
}

.calendar-imgFlame {
  width: 200px;
  height: 200px;
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem 0 0 0.5rem;
  flex: 1 1 auto;
  position: relative;
}

@media screen and (min-width: 1200px) {
  .calendar-body .label-onlyCertified {
    display: block;
  }

  .calendar-imgFlame .label-onlyCertified {
    display: none;
  }
}

@media screen and (992px <= width < 1200px) {
  .calendar-body .label-onlyCertified {
    display: none;
  }

  .calendar-imgFlame .label-onlyCertified {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0.5rem;
    pointer-events: none;
  }
}

@media screen and (max-width: 991px) {
  .calendar-body .label-onlyCertified {
    display: block;
  }

  .calendar-imgFlame .label-onlyCertified {
    display: none;
  }
}
.calendar-body {
  width: calc(100% - 200px);
  padding: 2rem;
  flex: 1 1 auto;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  /* row-gap: 5px; */
  flex-grow: 1;
}

.calendar-title {
  margin-bottom: 5px;
}

.calendar-category {
  width: calc(100% - calc(200px + 4rem));
  left: 200px;
}

@media screen and (1400px <= width) {
  .calendar-card {
    height: var(--card-calendar-xxl-size);
  }

  .calendar-content {
    height: calc(var(--card-calendar-xxl-size) - 0.2rem);
    display: flex;
    justify-content: center;
  }

  .calendar-imgFlame {
    height: 100%;
  }
}

@media screen and (576px <= width <= 1399px) {
  .calendar-card {
    height: var(--card-calendar-lg-size);
  }

  .calendar-content {
    height: calc(var(--card-calendar-lg-size) - 0.2rem);
    display: flex;
    justify-content: center;
  }
}

@media screen and (375px <= width <= 575px) {
  .calendar-imgFlame {
    display: none;
  }

  .calendar-card {
    height: auto;
  }

  .calendar-content {
    height: auto;
  }

  .calendar-category {
    width: calc(100% - 4rem);
    left: 0;
  }
}

.calendar-photograph {
  max-width: 100%;
  width: 100%;
  max-height: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0.5rem 0 0 0.5rem;
}

.calendar-status {
  position: relative;
  display: flex;
}

.calendar-img {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* post/detail */
@media screen and (max-width: 575px) {
  .sp-p-plus {
    padding: 0 0.75rem;
  }
}

@media screen and (min-width: 992px) {
  /* .postDetail-btns-p-none {
    padding: 0;
  } */

  .postDetail-buttons-top {
    display: flex;
    gap: 1.2rem;
    padding: 1rem 0.8rem;
  }

  .btn-postDetail_top {
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    flex: 1 0 0%;
  }

  .btn-postDetail_top:first-child {
    padding-left: 0;
  }

  .btn-postDetail_top:last-child {
    padding-right: 0;
  }
}

@media screen and (max-width: 991px) {
  .postDetail-buttons-top {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .btn-postDetail_top {
    flex-grow: 1;
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    /* min-width: fit-content;
    flex: none; */
  }
}

.postDetail-buttons-top a:hover {
  text-decoration: none;
}

/* 575-360を考慮した指定 */
@media screen and (max-width: 575px) {
  .postDetail-buttons-top .p-button__detail-item span {
    padding-left: clamp(1.6rem, 1.265rem + 1.49vw, 1.8rem);
  }
}

.intro_text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.description_text,
.text_content {
  margin-top: 1rem;
  font-size: 1.6rem;
}

.list-result .text_content {
  margin-top: 0;
  margin-bottom: 0.8rem;
}

.review_user-top .description_text,
.review_user-bottom .description_text {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin: 1rem 0;
}

.review_show_more {
  position: absolute;
  bottom: 0;
  right: 0;
  /* padding-right: 12px; */
}

.description_text,
.disapproval_text {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

@media screen and (min-width: 992px) {
  .carousel-wrapper {
    position: relative;
    margin-top: 1.5rem;
    width: 100%;
  }

  .carousel-photos {
    display: flex;
    justify-content: center;
    height: 65dvh;
  }

  .carousel-item {
    width: 75%;
  }
}

@media screen and (max-width: 991px) {
  .carousel-wrapper {
    position: relative;
    margin-top: 1rem !important;
    width: 100%;
  }

  .carousel-photos {
    width: 100%;
  }
}

@media screen and (max-width: 575px) {
  .carousel-wrapper {
    margin-top: 0 !important;
  }
  /* 
  .sp-crsl-p-none {
    padding: 0;
  } */

  .carousel-wrapper ~ .reportArea-wrapper {
    margin-right: 4rem;
    padding-bottom: 0;
  }
}

.post-detail-fixedArea .invalid-feedback,
.post-detail-fixedArea_2nd .invalid-feedback {
  font-size: 1.6rem;
}

.carousel-controller {
  margin: auto !important;
}

[data-bs-theme="dark"] .carousel .carousel-indicators [data-bs-target],
[data-bs-theme="dark"].carousel .carousel-indicators [data-bs-target] {
  background: var(--bg-primary-color);
}

.carousel-controller [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 12px;
  height: 12px;
  padding: 0;
  margin: 0 8px 12px;
  text-indent: -999px;
  cursor: pointer;
  background-clip: padding-box;
  border-top: none;
  border-bottom: none;
  border: 1px solid var(--border-navisma-color);
  border-radius: 50%;
  opacity: 1;
  transition: 0.75s;
}

.carousel-controller .active {
  background: var(--carousel-controller-color) !important;
}

.carousel-controller button:focus,
.carousel-controller button:active {
  outline: solid 2px var(--focus-outline-color) !important;
  border-radius: 50%;
  transition: 0s;
}

.carousel-controller button:hover {
  transform: scale(1.2);
  transition: 0.25s;
}

.carousel-photos {
  background-color: var(--inner-carousel-bgcolor);
  aspect-ratio: 16/9;
  border-radius: 0.5rem;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  background: var(--bg-primary-color);
  border-radius: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  color: transparent;
  text-align: center;
  border: 1px solid var(--border-navisma-color) !important;
  opacity: 1;
  top: 54%;
  transform: translate(0, -50%);
  transition: 0.75s;
}

.carousel-control-prev {
  left: -20px;
}

.carousel-control-next {
  right: -20px;
}

.carousel-control-prev::before {
  position: absolute;
  content: "";
  mask-image: var(--svg-arrow-down-small);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--icon-primary-color);
  width: 2rem;
  height: 2rem;
  left: 20%;
  top: 50%;
  transform: translate(0, -50%) rotate(90deg);
}

.carousel-control-next::before {
  position: absolute;
  content: "";
  mask-image: var(--svg-arrow-down-small);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--icon-primary-color);
  width: 2rem;
  height: 2rem;
  right: 20%;
  top: 50%;
  transform: translate(0, -50%) rotate(-90deg);
}

.carousel-control-prev:focus-within,
.carousel-control-next:focus-within,
.carousel-control-prev:active,
.carousel-control-next:active {
  outline: solid 2px var(--focus-outline-color) !important;
  border-radius: 50%;
  transition: 0s;
}

.carousel-control-next:hover,
.carousel-control-prev:hover {
  transform: translate(0, -50%) scale(1.1);
  transition: 0.25s;
}

@media screen and (max-width: 575px) {
  .carousel-photos {
    aspect-ratio: 5/4;
    border-radius: 0;
  }

  .carousel-control-prev {
    left: 4px;
  }

  .carousel-control-next {
    right: 4px;
  }
}

.carousel-item {
  margin: 0 auto;
  height: 100%;
}

.carousel-img {
  display: block;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.carousel-img:has(+ .noimage-background) {
  position: relative;
  z-index: 4;
}

.carousel-item:has(.noimage-background) {
  display: flex;
  justify-content: center;
}

.noimage-background {
  position: absolute;
  top: 0;
  background-color: #ffffff;
  height: 100%;
  aspect-ratio: 1 / 1;
  z-index: 3;
}

.write_review,
.write_report {
  cursor: pointer;
}

/*投稿詳細　基礎情報*/
/* 投稿詳細 表示箇所固定 */
.post-detail-fixedArea {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background: var(--bg-main-color);
}

.detail_title-spot,
.detail_title-event {
  padding-left: 3rem;
  font-size: 20px;
  font-weight: 700;
}

.detail_title-spot::before {
  mask-image: var(--svg-flag-fill);
  background-color: var(--icon-primary-color);
}

.detail_title-event::before {
  mask-image: var(--svg-balloon-fill);
  background-color: var(--icon-primary-color);
}

/* TODO:投稿情報が表示される部分ではクラス名を統一したい */
.detail_date,
.detail_weekofday,
.detail_time,
.detail_address {
  position: relative;
  font-size: 1.6rem;
  padding-left: 2.4rem;
  color: var(--post-detail-sub-text);
  font-weight: 500;
}

.detail_date::before,
.detail_weekofday::before,
.detail_time::before,
.detail_address::before {
  position: absolute;
  content: "";
  background-color: var(--icon-primary-color);
  width: 26px;
  height: 26px;
  mask-size: cover;
  top: 73%;
  left: 0;
  transform: translate(0, -50%);
}

.detail_title-spot::before {
  mask: var(--svg-flag-fill) no-repeat;
  mask-size: cover;
}

.detail_title-event::before {
  mask: var(--svg-balloon-fill) no-repeat;
  mask-size: cover;
}

.detail_date::before {
  mask-image: var(--svg-calendar3);
  background-color: var(--icon-primary-color);
}

.detail_weekofday::before {
  mask-image: var(--svg-calendar2-day);
  background-color: var(--icon-primary-color);
}

.detail_time::before {
  mask-image: var(--svg-clock);
  background-color: var(--icon-primary-color);
}

.detail_address::before {
  mask-image: var(--svg-geo-alt-fill);
  background-color: var(--icon-primary-color);
}

.post-detail-fixedArea_2nd {
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;
  width: 100%;
  padding: 0.8rem 0;
  background: var(--bg-main-color);
}

@media screen and (max-width: 768px) {
  .post-detail-fixedArea_2nd {
    padding: 0.75rem 0;
  }
}

/*投稿情報　追加情報*/
/*パーツのタイトル（これは共通）*/
.detail_infoTitle {
  font-size: 1.8rem;
  color: var(--text-primary-color);
  padding-bottom: 3px;
  border-bottom: 1px solid #dee2e6;
}

/*パーツの内容（疑似要素とかがない限りこれで実装）*/
.detail_infoText {
  font-size: 1.6rem;
  color: var(--text-primary-color);
}

/*追加情報　上部*/
/*紹介文*/
.detail_introTitle {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-primary-color);
  padding-top: 0.8rem;
}

/*投稿された文言がない時のスタイル*/
.notAny-content-style,
.submit-success-style {
  margin: 2.4rem auto;
  text-align: center;
  font-size: 1.6rem;
}

/*みんなのレビュー (フォームを閉じる部分もあり)*/
.postDetail-style-review {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 0.8rem;
  margin-bottom: 2rem;
}

.review-contents-top {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  width: -moz-available; /* WebKit-based browsers will ignore this. */
  width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
  width: fill-available;
  border-bottom: 1px dashed var(--border-navisma-color);
  padding-bottom: 1rem;
}

.review-ttl {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 500;
  margin-right: 1.2rem;
  flex-grow: 1;
}

.detail_reviewMoreView {
  border: 0.1rem solid #dee2e6;
  border-radius: 0.5rem;
  color: var(--text-primary-color);
  /* padding-right: 3rem; */
  padding: 0.5rem 3rem 0.5rem 0.5rem;
  font-size: 1.6rem;
  font-weight: 600;
}

.detail_reviewMoreView::after {
  mask-image: var(--svg-arrow-right);
  background-color: var(--icon-primary-color);
  right: 0.5rem;
}

.detail_reviewMoreView.detail_reviewMoreView:hover {
  text-decoration: none;
}

.detail_reviewTitle {
  display: flex;
  align-items: center;
  position: relative;
  font-size: 1.8rem;
  font-weight: 600;
  padding-left: 3rem;
  margin-bottom: 0.2rem !important;
  flex-grow: 1;
}

.detail_reviewTitle::before {
  mask-image: var(--svg-pencil-square);
  background-color: var(--icon-primary-color);
}

.review-contents {
  display: flex;
  flex-wrap: wrap;
  margin: 1.5rem 0;
  padding: 1.5rem;
  border: 0.1rem solid #dee2e6;
  border-radius: 0.5rem;
}

.review-info {
  display: flex;
  flex-direction: column;
  align-items: end;
  font-size: 1.4rem;
  text-wrap: nowrap;
}

.review-reviewer,
.review-postDate {
  position: relative;
  /* padding-left: 2rem; */
  color: var(--review-subcolor);
  font-weight: 500;
  font-size: 1.6rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
/* 
.review-postDate::before {
  mask-image: var(--svg-calendar2-event-fill);
  background-color: var(--icon-black-color);
}

.review-reviewer::before {
  mask-image: var(--svg-person-lines-fill);
  background-color: var(--icon-black-color);
} */

.opn_text-area {
  width: 100%;
  text-align: right;
  font-size: 1.4rem;
  font-weight: 600;
  padding-top: 0.8rem;
}

.open_text {
  padding-left: 2rem;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  background: none;
  border: none;
}

.open_text::before {
  mask-image: var(--svg-arrow-down-small);
  background-color: var(--icon-black-color);
  transform: translateY(-50%) rotate(-180deg);
}

.description_text + div > .open_text::before {
  mask-image: var(--svg-arrow-down-small);
  background-color: var(--icon-black-color);
  transform: translateY(-50%) rotate(0deg) !important;
}

.btn-reportReview {
  display: inline-block;
  background-color: #ffbe4b;
  border: 1px solid #ffbe4b;
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
}

.btn-reportReview span {
  padding-left: 2.4rem;
  color: #333333;
  font-size: 16px;
  font-weight: 600;
}

.btn-reportReview span::before {
  mask-image: var(--svg-megaphone);
  background-color: #333;
}

.btn-reportReview:focus,
.btn-reportReview:active {
  border-radius: 9999px;
}

/* hover */

.btn-reportReview:hover {
  background-color: #ebae46;
  opacity: 1;
}

.btn-reportReview .msg-reportSent {
  color: #e62041;
}

.close_review_report {
  padding-left: 2rem;
  color: var(--text-primary-color);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 600;
}

.close_review_report:before {
  mask-image: var(--svg-arrow-down-small);
  background-color: var(--text-primary-color);
  transform: translateY(-50%) rotate(-180deg);
}

/* 情報修正提案、レビューのフォーム入力部分の共通パーツ */
/* 外枠 */
.write_report_flame:has(+ .report_form.d-none),
.write_review_flame:has(+ .review_form.d-none) {
  margin-bottom: 2rem;
}

/* フォームの外枠 */
.p-resArea__Flame {
  padding: 1.5rem;
  border: 1px solid #dee2ed;
  border-radius: 0.5rem;
  background-color: #ffffff;
  margin-bottom: 2rem;
  transition: opacity 0.5s;

  @starting-style {
    opacity: 0;
  }
}

.p-resArea__Flame:has(.p-resArea__form.d-none) {
  padding-left: 0;
  padding-right: 0;
  border: none;
  background-color: transparent;
}

.p-resArea__form .form-flame {
  margin: 2rem 0 0 0;
}

.p-resArea__form .p-button__flameSprit {
  margin: 0;
}

/* タイトル */
.p-resArea__title {
  font-size: 1.6rem;
  font-weight: 600;
  width: 100%;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed #dee2e6;
}

/* 疑似要素 */
.p-pseudo-write,
.p-pseudo-report {
  padding-left: 3rem;
}

.p-pseudo-write::before {
  mask-image: var(--svg-pencil-square);
  background-color: var(--icon-primary-color);
}

.p-pseudo-report::before {
  mask-image: var(--svg-megaphone-fill);
  background-color: var(--icon-primary-color);
}

.detail_writeReview-request {
  font-size: 1.6rem;
  font-weight: 500;
}

/*レビューを投稿する*/
#id_review_title,
#id_review_body {
  padding: 1rem 1.6rem;
}

.detail_infoTitle.postDtl-style {
  font-weight: 600;
  font-size: 1.6rem;
  border-bottom: 1px dashed var(--border-navisma-color);
  padding-bottom: 1.5rem;
}

.detail_infoItem {
  background-color: var(--bg-primary-color);
  border: 1px solid var(--border-navisma-color);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.6rem;
}

.detail_infoItem:has(+ .reportArea-wrapper) {
  margin-bottom: 0rem;
}

/*インフォメーション*/
.post-detail-info {
  display: flex;
  flex-direction: column;
  background: var(--bg-main-color);
}

.detail_information {
  position: relative;
  font-size: 1.8rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border-navisma-color);
  padding: 1rem 0 1rem 3rem;
  margin-bottom: 1.5rem !important;
}

.detail_information::before {
  mask-image: var(--svg-info-circle-fill);
  background-color: var(--icon-primary-color);
}

.postDetail-btnArea {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  padding: 0 0.75rem;
  margin: 4rem 0 8.8rem;
}

.postDetail-btnArea:has(strong) {
  grid-template-columns: none;
  font-size: 1.6rem;
}

.announce-style strong {
  padding-bottom: 0.8rem;
}

.postDetail-btnArea .announce-style {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--area-reserve-bordercolor);
  border-radius: 0.5rem;
  padding: 1.6rem;
}

/* .postDetail-btnArea button:not(:has(.btn-editPost + .btn-deletePost)) {
  width: 50%;
}

@media screen and (max-width: 767px) {
  .postDetail-btnArea button:not(:has(.btn-editPost + .btn-deletePost)) {
    width: 100%;
  }
} */

/*情報の修正を提案する*/
.writeReport-comboBox {
  font-size: 1.4rem;
  width: 100%;
}

/* .detail_map {
  position: relative;
  padding-left: 3rem;
  font-size: 16px;
}

.detail_map::before {
  position: absolute;
  content: "";
  background: url(/static/libs/bootstrap-icons/icons/play-fill.svg) no-repeat;
  filter: var(--icon-primary-color);
  background-size: 100%;
  width: 20px;
  height: 20px;
  left: 0;
  top: 2px;
} */

/* adminのみ表示 予約者がいるときのメッセージ表示 */
.message-editPost {
  padding: 2rem;
  border: 2px solid var(--area-reserve-bordercolor);
  background-color: var(--area-reserve-bgcolor);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  text-align: start !important;
  margin-bottom: 0.5rem;
}

.message-editPost strong {
  font-size: 1.6rem;
}

/* メッセージが表示されているとき、投稿を編集するボタンを押せなくする */
.message-editPost + .p-button__flameSprit .btn-editPost {
  display: none;
}

/* メッセージが表示されているときのボタンのレイアウト */
.p-button__flameSprit:has(.message-editPost) {
  flex-direction: column;
}

.p-button__flameSprit:has(.message-editPost) > .p-button__item-half {
  width: 100%;
}

/* 投稿詳細-下部のスタイル */
.message-editPost:has(> strong) {
  row-gap: 0.8rem;
}

.message-editPost .p-button__tertiary {
  margin-bottom: 0;
}

/* card_header_leftと同じ */
.post-status-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

/*投稿管理→投稿詳細 投稿ステータス*/
.post-status-badge span,
.post-status-badge button {
  font-weight: 700;
  width: 80px;
  height: 76px;
  padding: 0 8px 12px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem 0.5rem 100% 0.5rem;
  font-size: 1.4rem;
}

@media screen and (max-width: 575px) {
  .post-status-badge span,
  .post-status-badge button {
    border-radius: 0 0.5rem 100% 0.5rem;
  }
}

.postStatus-private {
  background-color: var(--post-private-bgcolor);
  color: var(--post-status-white-color);
}

.postStatus-open {
  background-color: var(--post-open-bgcolor);
  color: var(--post-status-white-color);
}

.postStatus-temporary {
  background-color: var(--post-temporary-bgcolor);
  color: var(--post-status-primary-color);
}

.postStatus-await {
  background-color: var(--post-await-bgcolor);
  color: var(--post-status-primary-color);
}

.postStatus-deny {
  background-color: var(--post-deny-bgcolor);
  color: var(--post-status-white-color);
}

.postStatus-deleteAwait {
  background-color: var(--post-deleteAwait-bgcolor);
  color: var(--post-status-white-color);
  border: 1px solid var(--post-deleteAwait-bordercolor);
}

/* 投稿詳細　予約ステータス */
.reserve-status-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  padding: 0.5rem;
}

.postStatus-deleted {
  background-color: var(--post-deleteAwait-bgcolor);
  color: var(--post-status-white-color);
  border: 1px solid var(--post-deleteAwait-bordercolor);
}

/*投稿詳細　開催ステータス*/
.post-status-area {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;
  margin-bottom: 0.8rem;
}

.post-status-area:not(:has(.post-status__item)) {
  display: none;
}

.post-status__item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3rem 1rem;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  height: 2.5rem;
  letter-spacing: 1px;
}

/* post/detail/review */
.reviewDetail_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}

.reviewDetail_tile {
  width: 49.5%;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

@media screen and (max-width: 991px) {
  .reviewDetail_tile {
    width: 100%;
  }
}

.reviewDetail_tile .review-info {
  margin-left: 1.2rem;
}

.reviewDetail_top {
  background-color: var(--bg-white-color);
  border-bottom: 1px dashed #dee2e6;
  padding-bottom: 1.6rem;
  display: flex;
  justify-content: space-between;
}

.reviewDetail_title {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 600;
}

.reviewDetail_middle {
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  row-gap: 0.5rem;
  background-color: var(--bg-white-color);
}

.reviewDetail_middle-buttons {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  align-items: center;
}

.reviewDetail_bottom {
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
  opacity: 1;
  transition: opacity 0.5s;

  @starting-style {
    opacity: 0;
  }
}

.reviewDetail_bottom:not(:has(.reviewDetail_reportmsg)) {
  display: none;
}

.list-result .review_body {
  row-gap: 0rem;
}

.reviewDetail_reportmsg {
  font-size: 1.6rem;
  font-weight: 600;
}

.review-spot,
.review-event {
  padding-left: 3rem;
  font-size: 24px;
  font-weight: 700;
}

.review-spot::before {
  mask-image: var(--svg-flag-fill);
  background-color: var(--icon-primary-color);
}

.review-event::before {
  mask-image: var(--svg-balloon-fill);
  background-color: var(--icon-primary-color);
}

/* post/reserve */
/* 予約ページ 代替テキスト */
/* イベント 開催期間 */
.event-date::before {
  content: "" / "イベント開催期間";
}

.event-address::before {
  content: "" / "イベント開催場所";
}

.reserve-list {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: left;
}

.card_reserve {
  background-color: #ffffff;
  border-radius: 0.375rem;
  border-width: var(--card-reserve-borderwidth);
  border-style: none;
  box-shadow: var(--boxshadow-primary-style);
}

.card_reserve_top {
  background-color: var(--bg-primary-color);
  border-top-right-radius: var(--card-reserve-borderradius);
  border-top-left-radius: var(--card-reserve-borderradius);
  border-bottom: none;
  border-style: none;
  padding: 2rem 2rem 0;
  display: flex;
  flex-direction: column;
  row-gap: 5px;
}

.card_reserve_bottom {
  background-color: var(--bg-primary-color);
  border-bottom-right-radius: var(--card-reserve-borderradius);
  border-bottom-left-radius: var(--card-reserve-borderradius);
  border-style: none;
  border-top: none;
  padding: 0 2rem 2rem 2rem;
}

.card_reserve_bottom-inner {
  display: flex;
  margin-top: 1rem;
}

.card_reserve_bottom-clipArea {
  position: relative;
  /* width: 40%; */ /* TODO:クリップのスタイル作成に着手次第解放 */
}

.card_reserve_bottom-btnArea {
  /* width: 60%; */ /* TODO:クリップのスタイル作成に着手次第解放 */
  width: 100%;
}

/* ---parts - 文字で情報名が表示される場合のスタイル --- */
.p-card_reserve__item {
  display: flex;
  flex-direction: row;
}

.p-card_reserve__label {
  flex-grow: 2;
  max-width: calc(calc(100% / 12) * 2);
  font-size: 1.6rem;
  font-weight: 600;
}

.p-card_reserve__info {
  flex-grow: 10;
  max-width: calc(calc(100% / 12) * 10);
  font-size: 1.6rem;
}

.reserve-status,
.reserve-title,
.reserve-date,
.reserve-time,
.reserve-address,
.reserve-peopleNumber {
  margin-bottom: 0.3rem;
}

.batch-reserveStatus {
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.3rem 1rem;
  letter-spacing: 1px;
}

/* 予約中 */
.batch-reserveStatus.reserved {
  color: var(--label-reserveStatus-accept-color);
  background-color: var(--label-reserveStatus-accept-bgcolor);
}

/* キャンセル */
.batch-reserveStatus.canceled {
  color: var(--label-eventTerminated-color);
  background-color: var(--label-eventTerminated-bgcolor);
}

/* 終了しました */
.batch-reserveStatus.archive {
  color: var(--label-reserveStatus-achive-color);
  background-color: var(--label-reserveStatus-achive-bgcolor);
}

.reserve-title-text {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  width: fit-content;
  padding-right: 2rem;
}

.reserve-date,
.reserve-time,
.reserve-peopleNumber,
.reserve-address {
  padding: 0.25rem 0.25rem 0.25rem 0;
}

.reserve-date span,
.reserve-time span,
.reserve-peopleNumber span,
.reserve-address-text {
  font-size: 14px;
  font-weight: 400;
  padding-left: 2rem;
}

.reserve-date span::before {
  mask-image: var(--svg-calendar3);
  background-color: var(--icon-primary-color);
}

.reserve-time span::before {
  mask-image: var(--svg-clock);
  background-color: var(--icon-primary-color);
}

.reserve-peopleNumber span::before {
  mask-image: var(--svg-person-fill);
  background-color: var(--icon-primary-color);
}

.show-reserve-detail {
  margin-top: 2rem;
}

.btn-showReserveDetail {
  text-decoration: none;
  background-color: #fffffe;
  border: 1px solid var(--button-showReserve-bordercolor);
  border-radius: 9999px;
  padding: 1rem;
  text-align: center;
}

.btn-showReserveDetail:active,
.btn-showReserveDetail:focus {
  background-color: #fffffe;
  border: 1px solid #5faa34;
  border-radius: 9999px;
  padding: 1rem;
  text-align: center;
}

.btn-showReserveDetail span {
  color: var(--text-primary-color);
  font-size: 16px;
}

.btn-showReserveDetail span::after {
  mask-image: var(--svg-cursor-fill);
  background-color: var(--icon-primary-color);
  right: -3rem;
  transform: translateY(-50%) rotate(45deg);
}

.btn-checkReserve:disabled {
  opacity: 0.3;
  pointer-events: none;
}

.btn-selectDate,
.btn-selectTime {
  padding: 1rem;
  display: inline-block;
  background-color: var(--bg-primary-color);
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
}

/* 共通パーツ カード表示のレイアウト方法 */
.p-card__container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: start;
  row-gap: 1.5rem;
  column-gap: 1.5rem;
  margin: 1.5rem 0;
}
/* 
@media screen and (max-width: 575px) {
  .p-card__container {
    padding: 0 7.5px;
  }
} */

/* TODO:1枚表示のときのmargin-topを消す */
/* 他、カードに揃えて、stretch一旦無効*/

/* .p-card__container:has(.review_card) {
  align-items: stretch;
} */

.p-card__container:has(.relation_card),
.p-card__container:has(.mypage-list-item) {
  padding: 0 !important;
}

/* 表示分岐 --- 画面サイズに応じてカードが3カラム→2カラム→1カラムと表示されるスタイル */
.p-card__3column {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0;
  max-width: 100%;
  margin-top: 1.5rem;
  width: 100%;
}

@media screen and (max-width: 575px) {
  .p-card__3column {
    width: 100%;
    margin-top: 0;
  }
}

@media screen and (min-width: 768px) {
  .p-card__3column {
    width: calc(calc(100% - 1.5rem) / 2);
  }
}

@media screen and (min-width: 1200px) {
  .p-card__3column {
    width: calc(calc(100% - calc(1.5rem * 2)) / 3);
  }
}

/* 表示分岐 --- 画面サイズに応じてカードが3カラム→2カラムと表示されるスタイル */
.p-card__3-2column {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0;
  max-width: 100%;
  margin-top: 1.5rem;
  width: 100%;
}

@media screen and (max-width: 991px) {
  .p-card__3-2column {
    width: calc(calc(100% - 1.5rem) / 2);
  }
}

@media screen and (min-width: 992px) {
  .p-card__3-2column {
    width: calc(calc(100% - calc(1.5rem * 2)) / 3);
  }
}

/* 表示分岐 --- 画面サイズに応じてカードが5カラム→4カラム→3カラム→2カラムと表示されるスタイル */
.p-card__5-2column {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0;
  max-width: 100%;
  margin-top: 1.5rem;
  width: 100%;
}

@media screen and (max-width: 575px) {
  .p-card__5-2column {
    width: calc(calc(100% - 1.5rem) / 2);
  }
}

@media screen and (min-width: 576px) {
  .p-card__5-2column {
    width: calc(calc(100% - calc(1.5rem * 2)) / 3);
  }
}

@media screen and (min-width: 992px) {
  .p-card__5-2column {
    width: calc(calc(100% - calc(1.5rem * 3)) / 4);
  }
}

@media screen and (min-width: 1200px) {
  .p-card__5-2column {
    width: calc(calc(100% - calc(1.5rem * 4)) / 5);
  }
}

/* 表示分岐 --- 画面サイズに応じてカードが6カラム→5カラム→4カラム→3カラム→2カラムと表示されるスタイル */
.p-card__6-2column {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0;
  max-width: 100%;
  margin-top: 1.5rem;
  width: 100%;
}

@media screen and (max-width: 575px) {
  .p-card__6-2column {
    width: calc(calc(100% - 1.5rem) / 2);
  }
}

@media screen and (min-width: 576px) {
  .p-card__6-2column {
    width: calc(calc(100% - calc(1.5rem * 2)) / 3);
  }
}

@media screen and (min-width: 768px) {
  .p-card__6-2column {
    width: calc(calc(100% - calc(1.5rem * 3)) / 4);
  }
}

@media screen and (min-width: 992px) {
  .p-card__6-2column {
    width: calc(calc(100% - calc(1.5rem * 4)) / 5);
  }
}

@media screen and (min-width: 1200px) {
  .p-card__6-2column {
    width: calc(calc(100% - calc(1.5rem * 5)) / 6);
  }
}

/* 表示分岐 --- 画面サイズに応じてカードが2カラム→1カラムと表示されるスタイル */
.p-card__2column {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0;
  max-width: 100%;
  margin-top: 1.5rem;
  width: 100%;
}

@media screen and (min-width: 992px) {
  .p-card__2column {
    width: calc(calc(100% - 1.5rem) / 2);
  }
}

@media screen and (max-width: 991px) {
  .p-card__2column {
    width: 100%;
    margin-top: 0;
  }
}

/* 表示分岐 --- 画面サイズに応じてカードのwidthが親要素の100%を取り続けるスタイル */
.p-card__1column {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0;
  max-width: 100%;
  margin-top: 0.5rem;
  width: 100%;
}

/* 表示分岐 --- マイページにおけるカード（メニュー）のレイアウトについて */
.p-card__container:has(.mypage-list-item) {
  row-gap: 0.5rem;
  column-gap: 0.5rem;
}

.p-card__2column.mypage-list-item {
  margin-top: 0.5rem;
}

/* 表示分岐 投稿系専用のカードスタイル */
.p-card__post {
  position: relative;
  height: 100%;
  /* border: 1px solid #90b4ce; */
  border-radius: 0.5rem;
  background-color: #ffffff;
  box-shadow: var(--boxshadow-primary-style);
}

/* 表示分岐 予約情報専用のカード */
.p-card__reserve {
  position: relative;
  /* padding: 2rem; */
  width: 100%;
  height: fit-content;
  background-color: var(--bg-primary-color);
  box-shadow:
    0px 0px 2px 0px rgb(141 141 141 / 30%),
    1px 5px 3px 0px rgba(203, 203, 203, 0.3);
  z-index: 1;
  display: flex;
  flex-direction: column;
  column-gap: 0;
}

.p-card__reserve::before {
  position: absolute;
  content: "";
  z-index: -1;
  bottom: 5px;
  width: 50%;
  height: 50%;
  box-shadow: 0 10px 8px rgba(203, 203, 203, 1);
  border-radius: 0;
  border: none;
  right: 5px;
  transform: rotate(3deg);
}

@media screen and (max-width: 768px) {
  .p-card__reserve::before {
    bottom: 8px;
  }
}

.p-card__reserve-top {
  background-color: var(--card-reserve-bgcolor);
  border-style: none;
  padding: 2rem 2rem 0;
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  z-index: 1;
  position: relative;
}

.p-card__reserve-bottom {
  background-color: var(--card-reserve-bgcolor);
  border-style: none;
  padding: 0 2rem 2rem 2rem;
  position: relative;
  z-index: 1;
  font-size: 16px;
}

.p-card__reserve-bottomInner {
  display: flex;
  flex-direction: row;
  margin-top: 1rem;
  align-items: flex-end;
}

.p-card__reserve-bottomClip {
  width: 30%;
  position: relative;
  z-index: 1;
  font-size: 16px;
  filter: drop-shadow(0px 4px 2px rgba(57, 57, 57, 0.3));
}

.p-card__reserve-bottomClip::after {
  content: "";
  position: absolute;
  mask-image: var(--svg-paperclip);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--icon-primary-color);
  transform: rotate(45deg);
  width: 5.5em;
  height: 5.5em;
  left: -9px;
  display: block;
  z-index: 1;
  bottom: -35px;
  clip-path: polygon(18% 0%, 18% 100%, 62% 100%, 81% 68%, 62% 84%, 61% 0);
}

/* クリップ色分岐 */
/* 予約受付前 */
.schedule.p-card__reserve-bottomClip::after {
  background-color: var(--label-reserveStatus-schedule-bgcolor);
  content: "" / attr(data-pseudo);
}

/* 予約中・受付中 */
.reserved.p-card__reserve-bottomClip::after,
.accepting.p-card__reserve-bottomClip::after {
  background-color: var(--label-reserveStatus-accept-bgcolor);
  content: "" / attr(data-pseudo);
}

/* キャンセル・受付終了 */
.canceled.p-card__reserve-bottomClip::after,
.closed.p-card__reserve-bottomClip::after {
  background-color: var(--label-eventTerminated-bgcolor);
  content: "" / attr(data-pseudo);
}

/* 終了しました・予約未設定 */
.archive.p-card__reserve-bottomClip::after,
.notset.p-card__reserve-bottomClip::after {
  background-color: var(--label-reserveStatus-achive-bgcolor);
  content: "" / attr(data-pseudo);
}

@media screen and (min-width: 992px) {
  .p-card__reserve-bottomBtn {
    width: 100%;
  }
}

@media screen and (768px <= width <= 991px) {
  .p-card__reserve-bottomBtn {
    width: 70%;
  }
}

@media screen and (425px <= width <= 767px) {
  .p-card__reserve-bottomBtn {
    width: 100%;
  }
}

@media screen and (max-width: 424px) {
  .p-card__reserve-bottomBtn {
    width: 90%;
  }
}

/* TODO:クリップがなかったときの表示分岐 */
.p-card__reserve-bottomInner:not(:has(.p-card__reserve-bottomClip))
  > .p-card__reserve-bottomBtn {
  width: 100%;
}

/* ---表示分岐 レビューのカード--- */
/* 共通部分 */
.review_card {
  display: flex;
  flex-direction: column;
}

.review_top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  background-color: var(--review-bgcolor);
  border: 1px solid var(--review-bgcolor);
  border-radius: 0.5rem 0.5rem 0 0;
  min-height: 7rem;
  height: fit-content;
}

.review_top:has(.review_top-left),
.review_top:has(.review_top-right) {
  gap: 0.5rem;
}

.review_top:has(.review_top-left h2) {
  gap: 1.5rem;
}

.review_top-left {
  display: flex;
  align-items: center;
}

.review_top-left,
.checkbox_spacing {
  margin: 0;
}

.review_top-right {
  width: 30%;
}

@media screen and (min-width: 992px) {
  .review_top-left:has(.button__report) {
    width: 45%;
  }

  .review_top-right:has(.button__delete) {
    width: 15%;
    min-width: 15%;
  }
}

@media screen and (max-width: 991px) {
  .review_top-left:has(.button__report),
  .review_top-right:has(.button__delete) {
    width: fit-content;
    text-wrap: nowrap;
  }

  .review_top-left:has(.button__report) .button__report span,
  .review_top-right:has(.button__delete) .button__delete span {
    padding: 0 0.25rem;
  }
}

/* これまでに投稿したレビュー一覧の見出しを3点リーダ対応に伴いnoneの処理上書き */
h2.checkbox_spacing {
  grid-template-rows: none;
}

@media screen and (max-width: 575px) {
  .review_top {
    margin: 1rem 0 0 0;
  }

  .review_bottom {
    margin: 0 0 1rem 0;
  }
}

.review_bottom {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  flex-wrap: wrap;
  /* gap: 1rem 0; */
  background-color: var(--bg-white-color);
  border: 1px solid #dee2e6;
  border-top: 1px solid var(--review-bgcolor);
  border-radius: 0 0 0.5rem 0.5rem;
}

.review_top + .review_bottom {
  flex-grow: 1;
}

.review_bottom:not(:has(.review_top)) {
  height: 100%;
}

/* 表示分岐 review_topがないとき、border-topの色を変える */
.review_card:not(:has(> .review_top)) > .review_bottom {
  border: 1px solid #dee2e6 !important;
  border-radius: 0.5rem;
  gap: 0;
}

.review_muni_top + .review_bottom {
  border: 1px solid #dee2e6;
  border-top: 1px solid var(--review-bgcolor);
  border-radius: 0 0 0.5rem 0.5rem;
}

.review_contentTop {
  display: flex;
  flex-direction: column;
  column-gap: 0.25rem;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 0.5px dashed #dee2ed;
}

.review_card:not(:has(> .review_top)) > .review_bottom .review_contentTop {
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 0.5px dashed #dee2ed;
}

.review_ttl {
  width: fit-content;
  display: flex;
  flex-direction: column;
  /* flex-grow: 1; */
  row-gap: 2.5rem;
  /* max-width: 75%; */
}

.review_info:not(:has(.review-reviewer)) + .review_ttl {
  /* max-width: 70%; */
}

.review_info {
  width: fit-content;
  display: flex;
  flex-direction: column;
  font-size: 1.4rem;
  justify-content: flex-start;
  margin-bottom: 0.8rem;
  /* align-items: flex-end; */
  /* text-align: end; */
}

.review_body {
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;
}

.review_postTitle {
  font-weight: 600;
  width: fit-content;
}

.review_text {
  text-align: start;
  font-size: 1.6rem;
  font-weight: 400;
}

/* ユーザーページにおけるレビューのカードのスタイル */

.detail-review-postname {
  /* padding: 1.6rem 0 0 2.2rem; */
}

.detail-review-postname .p-button__tertiary {
  font-size: 1.8rem;
  font-weight: 600;
}

.detail-review-postname .p-button__tertiary::before {
  width: 1em;
  height: 1em;
  left: -6px;
}

.user-review-title {
  flex: 0 0 auto;
  width: 100%;
  font-size: 1.6rem;
  font-weight: 600;
  margin-top: 0;
}

.rsm-flame:has(.review_show_more[style="display: none;"]) {
  display: none;
}

.user-review-date,
.user-review-detail {
  flex: 0 0 auto;
  width: 100%;
  font-size: 1.6rem;
}

/* 異なるユーザーのレビューが表示されるページのカードのスタイル */

/* 表示分岐 関連サイトリンク集のカード */
.link_card {
  display: flex;
}

.p-card__container:has(.link_card) {
  align-items: stretch;
}

.link_item {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 100%;
  height: auto;
  background-color: var(--bg-link-color);
  padding: 1.6rem;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  column-gap: 0.25rem;
}

.link_image {
  flex: 0 0 auto;
  width: calc(calc(100% / 12) * 5);
  max-width: 100%;
}

.link_image img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.link_text {
  font-size: 1.6rem;
  padding: 0.8rem;
  color: var(--text-primary-color);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  width: calc(calc(100% / 12) * 7);
  row-gap: 0.5rem;
}

/* 表示分岐 トップページ・投稿詳細の関連カードのスタイル */
.relation_card {
  list-style: none;
  display: inline-block;
}

.relation_link {
  width: 100%;
  min-width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

.relation_image {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: contain;
  aspect-ratio: 16 / 9;
}

.relation_image img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  border-radius: 0.375rem;
  border: 0.5px solid var(--border-navisma-color);
}

.relation_text {
  width: 100%;
}

/* 表示分岐 予約設定内のカードスタイル */
.setting_card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid var(--border-navisma-color);
  border-radius: 0.375rem;
  row-gap: 0.5rem;
}

/* 共通パーツ 予約情報 */
.reserveInformation {
  background-color: var(--area-reserve-bgcolor);
  border: 2px solid var(--area-reserve-bordercolor);
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 1.5rem 0;
  padding: 1.5rem;
  row-gap: 5px;
}

.reserveInfo-item:has(> [class*="reserveInfo-"]) {
  width: 100%;
  margin-bottom: 0.5rem;
}

/* .reserveInfo-item:not(:has(> [class*="reserveInfo-"])) {
  display: none;
} */

/* .reserveInfo-item:has(.reserveInfo-title) {
  width: 100%;
  margin-bottom: 0.75rem;
} */

.reserveInfo-title {
  font-weight: 700;
  color: var(--text-primary-color);
  padding-right: 2rem;
  font-size: 1.8rem;
}

/* 投稿したイベントの */

.reserveInfo-date,
.reserveInfo-time,
.reserveInfo-weekofday,
.reserveInfo-address {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary-color);
  padding-left: 3rem;
}

.reserveInfo-weekofday::before {
  content: "";
  mask-image: var(--svg-calendar2-day);
  background-color: var(--icon-primary-color);
}

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

.reserveData {
  margin: 0.5rem 0;
}

.reserveData_column {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary-color);
}

.reserveData_detail {
  font-weight: 400;
  font-size: 16px;
  color: var(--text-primary-color);
}

/* post/reserve/detail */

.reserve_detail {
  background-color: #e9ecef;
  display: flex;
  justify-content: center;
  -o-object-fit: contain;
  object-fit: contain;
  height: 32rem;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.reserve_image {
  height: 32rem;
  width: auto;
}

.reserve_information {
  padding: 2rem clamp(2rem, 0.597rem + 6.23vw, 8rem);
  background-color: var(--bg-white-color);
}

.reserved-data {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.reserved-dataName {
  font-size: 1.6rem;
  font-weight: 700;
  width: fit-content;
  padding-right: 2rem;
}

.reserved-info {
  font-size: 1.6rem;
  font-weight: 400;
  text-align: start;
  width: fit-content;
}

.reserve_cancel {
  padding: 0 2rem 1rem 2rem;
  background-color: var(--bg-white-color);
}

.reserveDetail_mapInfo {
  display: flex;
  flex-direction: column;
  padding: 2rem 0;
}

.reserve_potalcode,
.reserve_address {
  padding-left: 2rem;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.reserve_potalcode::before {
  mask-image: var(--svg-zip);
  background-color: var(--icon-primary-color);
}

.reserve_address::before {
  mask-image: var(--svg-geo-alt-fill);
  background-color: var(--icon-primary-color);
}

.btn-addressCopy {
  padding: 1rem 3rem;
  margin: 1rem 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 9999px;
  border: 1px solid var(--btn-category-bordercolor);
  background-color: #ffffff;
}

.btn-addressCopy:focus,
.btn-addressCopy:active,
.btn-addressCopy:focus:not(:focus-visible) {
  border-radius: 9999px;
  outline: solid 2px var(--focus-outline-color);
  transition: 0s;
}

.btn-addressCopy p {
  padding-left: 3rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary-color);
}

.btn-addressCopy p::before {
  mask-image: var(--svg-copy);
  background-color: var(--icon-primary-color);
}

/* post/reserve/complete */
.reserveCancel-explainText {
  font-size: 1.6rem;
  line-height: 1.6;
}

/* /post/management/# */
.btn-reserveSetting {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  border: transparent;
  outline: 1px solid #dee2e6;
  padding: 0.3rem 1rem;
  height: 3.6rem;
  border-radius: 0.5rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.btn-reserveSetting span {
  color: var(--text-primary-color);
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  padding-right: 2.5rem;
}

.btn-reserveSetting span::after {
  mask-image: var(--svg-arrow-right-short);
  background-color: var(--icon-primary-color);
  width: 20px;
  height: 20px;
}

@media screen and (max-width: 991px) {
  .btn-reserveSetting span {
    font-size: 1.4rem;
  }
}

.card_header_left {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.card_header_right {
  position: absolute;
  top: 2.3rem;
  right: 2rem;
  z-index: 3;
}

/*投稿コピーボタン*/
.btn-copyPost {
  background-color: #52546a;
  color: #ffffff;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 4px 12px;
}

/*投稿ステータス*/
.releaseManagement {
  font-size: 1.2rem;
  font-weight: 600;
  width: 80px;
  height: 76px;
  padding: 0 8px 12px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem 0.5rem 100% 0.5rem;
}

.release-private {
  background-color: var(--post-private-bgcolor);
  color: var(--post-status-primary-color);
}

.release-open {
  background-color: var(--post-open-bgcolor);
  color: var(--post-status-white-color);
}

.release-temporary {
  background-color: var(--post-temporary-bgcolor);
  color: var(--post-status-primary-color);
}

.release-await {
  background-color: var(--post-await-bgcolor);
  color: var(--post-status-primary-color);
}

.release-deny {
  background-color: var(--post-deny-bgcolor);
  color: var(--post-status-white-color);
}

.release-deleteAwait {
  background-color: var(--post-deleteAwait-bgcolor);
  color: var(--post-status-white-color);
}

.reserveManagement-info {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

/* post/management/reserve/setting */
.reserveSetting-formTitle {
  border-bottom: 1px solid #999999;
  padding: 0.3rem;
}

.reserveSetting-item {
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
}

/*---parts - 予約一覧テーブル---*/
.reserveTable {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  font-size: 16px;
}

/* for MacOS */
.reserveTable::-webkit-scrollbar {
  display: none;
}

.reserveTable-columnName {
  width: 100%;
  background-color: #eeeeee;
}

.reserveTable-data {
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #dedede;
}

.columnName_items {
  display: flex;
}

.data_items {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

.data_btn-change {
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  text-align: center;
  z-index: 3;
}

.reserveTable-absolute {
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  left: 0 !important;
  z-index: 3;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.reserveTable-overflow {
  display: flex;
  z-index: 2;
}

.reserveTable-empty {
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  background-color: #eeeeee;
  flex-shrink: 0;
  z-index: 3;
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.columnName_items-checkbox,
.columnName_items-date {
  background-color: #eeeeee;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.columnName_items-time,
.columnName_items-capacity,
.columnName_items-request {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #eeeeee;
}

.data_showMore,
.data_closeMore {
  width: 100%;
  text-align: center;
  padding: 1rem;
  cursor: pointer;
  background-color: inherit;
  border: none;
  position: sticky;
}

.data_showMore span,
.data_closeMore span {
  padding-left: 3rem;
  font-weight: 700;
}

.data_showMore span::before {
  mask-image: var(--svg-chevron-down);
  background-color: var(--icon-primary-color);
}

.data_closeMore span::before {
  mask-image: var(--svg-chevron-up);
  background-color: var(--icon-primary-color);
}

@media screen and (min-width: 992px) {
  .reserveTable {
    width: 100%;
  }

  .columnName_items {
    width: 100%;
  }

  .data_items {
    width: calc(calc(100% / 12) * 11);
  }

  .data_items-inner {
    width: 100%;
    display: flex;
  }

  .data_btn-change {
    width: calc(calc(100% / 12) * 1);
  }

  .reserveTable-absolute {
    width: calc(calc(100% / 11) * 3);
  }

  .reserveTable-overflow {
    width: calc(calc(100% / 11) * 8);
  }

  .reserveTable-empty {
    width: calc(calc(100% / 12) * 1);
  }

  .columnName_items-checkbox,
  .data_items-checkbox {
    width: calc(calc(100% / 3) * 1);
    text-align: center;
  }

  .columnName_items-date,
  .data_items-date {
    width: calc(calc(100% / 3) * 2);
    text-align: center;
  }

  .columnName_items-time,
  .data_items-time {
    width: calc(calc(100% / 8) * 4);
    text-align: center;
  }

  .columnName_items-capacity,
  .data_items-capacity {
    width: calc(calc(100% / 8) * 2);
    text-align: center;
  }

  .columnName_items-request,
  .data_items-request {
    width: calc(calc(100% / 8) * 2);
    text-align: center;
  }

  .data_items-more {
    width: 100%;
    display: flex;
  }

  .data_items-dateMore {
    margin-left: calc(calc(100% / 3) * 1);
    width: calc(calc(100% / 3) * 2);
    text-align: center;
  }

  .data_items-requestMore {
    margin-left: calc(calc(100% / 8) * 6);
    width: calc(calc(100% / 8) * 2);
    text-align: center;
  }
}

@media screen and (max-width: 991px) {
  .reserveTable {
    width: 100%;
  }

  .columnName_items {
    width: 880px;
    padding-right: 80px;
  }

  .data_items {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .data_items-inner {
    width: 880px;
    display: flex;
  }

  .data_items-inner .reserveTable-absolute {
    background-color: #ffffff;
  }

  .data_btn-change {
    width: 80px;
    background-color: #ffffff;
    z-index: 3;
    flex-shrink: 0;
  }

  .reserveTable-absolute {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .reserveTable-overflow {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 2;
  }

  .reserveTable-empty {
    width: 80px;
  }

  .columnName_items-checkbox,
  .data_items-checkbox {
    width: 80px;
    text-align: center;
  }

  .columnName_items-date,
  .data_items-date {
    width: 160px;
    text-align: center;
  }

  .columnName_items-time,
  .data_items-time {
    width: 320px;
    text-align: center;
  }

  .columnName_items-capacity,
  .data_items-capacity {
    width: 160px;
    text-align: center;
  }

  .columnName_items-request,
  .data_items-request {
    width: 160px;
    text-align: center;
  }

  .data_items-more {
    width: 100%;
    display: flex;
  }

  .data_showMore,
  .data_closeMore {
    width: 240px;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    cursor: pointer;
  }

  .data_items-dateMore {
    margin-left: 80px;
    width: 160px;
    text-align: center;
    background-color: #ffffff;
    z-index: 7;
  }

  .data_items-requestMore {
    margin-left: 480px;
    width: 160px;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .columnName_items {
    width: 660px;
    padding-right: 60px;
  }

  .data_items {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .data_items-inner {
    width: 660px;
    display: flex;
  }

  .data_items-inner .reserveTable-absolute {
    background-color: #ffffff;
  }

  .data_btn-change {
    width: 60px;
    background-color: #ffffff;
    z-index: 3;
    flex-shrink: 0;
  }

  .reserveTable-absolute {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .reserveTable-overflow {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 2;
  }

  .reserveTable-empty {
    width: 60px;
  }

  .columnName_items-checkbox,
  .data_items-checkbox {
    width: 60px;
    text-align: center;
  }

  .columnName_items-date,
  .data_items-date {
    width: 120px;
    text-align: center;
  }

  .columnName_items-time,
  .data_items-time {
    width: 240px;
    text-align: center;
  }

  .columnName_items-capacity,
  .data_items-capacity {
    width: 120px;
    text-align: center;
  }

  .columnName_items-request,
  .data_items-request {
    width: 120px;
    text-align: center;
  }

  .data_items-more {
    width: 100%;
    display: flex;
  }

  .data_showMore,
  .data_closeMore {
    width: 100%;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    cursor: pointer;
  }

  .data_items-dateMore {
    margin-left: 60px;
    width: 120px;
    text-align: center;
    background-color: #ffffff;
    z-index: 3;
  }

  .data_items-requestMore {
    margin-left: 360px;
    width: 120px;
    text-align: center;
  }
}

/* /post/management/review/# */
.sortchange_btn02 {
  font-weight: 600;
  color: var(--btn-sortchange-color);
  width: 200px;
  height: var(--btn-sortchange-a-height);
  background: var(--btn-sortchange-bgcolor);
  border-radius: var(--btn-sortchange-borderradius);
  border: transparent;
  outline: var(--btn-sortchange-outline);
}

.sortchange_btn02 a {
  position: relative;
  display: flex;
  width: auto;
  height: var(--btn-sortchange-a-height);
  text-decoration: none;
  color: var(--btn-sortchange-color);
  font-size: var(--btn-sortchange-a-fontsize);
  padding-top: 1rem;
  padding-left: 34%;
}

.sortchange_btn02 a::before {
  position: absolute;
  content: "";
  mask-image: var(--svg-calendar-date);
  background-color: var(--btn-sortchange-a-color-before);
  width: var(--btn-sortchange-a-size-before);
  height: var(--btn-sortchange-a-size-before);
  left: var(--btn-sortchange-a-left-before);
  bottom: 0.8rem;
}

.review_tile {
  /* display: flex; */
  /* align-items: stretch; */
  width: 50%;
}

.reviw-lbl-style {
  font-size: 1.8rem;
  font-weight: 600;
  /* padding-top: 1.1rem; */
  width: auto;
  height: auto;
  margin-inline: auto;
  max-inline-size: -webkit-max-content;
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
}

@media (max-width: 504px) {
  .reviw-lbl-style {
    font-size: 1.6rem;
  }
}

.review_title {
  display: flex;
  width: auto;
  height: auto;
  margin-inline: auto;
  max-inline-size: -webkit-max-content;
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

.form-check02 {
  display: block;
  min-height: 1rem;
  padding-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 2.2rem;
}

.btn_delete-tile {
  text-align: end;
}

@media (min-width: 992px) {
  .review_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

@media (max-width: 991px) {
  .review_tile {
    width: 100%;
  }
}

.detail-jump-btn {
  padding: 0.5rem 0.5rem 0.3rem 3.5rem;
  text-decoration: none;
}

.detail-jump-btn::before {
  display: inline-block;
  mask-image: var(--svg-arrow-return-right);
  background-color: var(--icon-primary-color);
  width: 2.2rem;
  height: 2.2rem;
  left: 0.5rem;
  top: 0.1rem;
  transform: translateY(0.1rem);
}

/* post/new */

/* 共通 - フォームのwidthを全体的に制御する PC表示時には80%にする*/
.form-style {
  width: 100%;
  padding: 0 7.5px;
}

@media screen and (min-width: 992px) {
  .form-style {
    width: 80%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 575px) {
  .p-sp-15 .form-style {
    padding: 0 !important;
  }
}

.form-selector {
  font-size: 1.6rem;
  text-align: center;
}

.form-selector div {
  display: flex !important;
  justify-content: center !important;
}

.form-flame {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  margin-bottom: 2rem;
}

.form-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 1rem;
}

.form-subItem {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 1rem;
}

.form-item > .form-inner:has(> .form-item) {
  row-gap: 2rem;
}

.p-form__heading {
  font-size: 1.6rem;
  font-weight: 600;
  margin-left: 1.6rem;
  margin-bottom: 0;
}

.p-form__heading::before {
  display: block;
  content: "";
  mask-image: var(--svg-square-fill-02);
  mask-size: cover;
  background-color: var(--icon-primary-color);
  width: 2.2rem;
  height: 1.2em;
  left: -2.4rem;
  top: 0.12em;
}

.checkbox_spacing .p-form__heading::before {
  display: none;
}

.p-form__centerHeading {
  text-align: center;
  font-weight: 600;
}

.p-form__centerHeading span,
.p-form__centerHeading p {
  font-size: 1.6rem;
  font-weight: 600;
}

.p-form__underbarHeading {
  border-bottom: 1px dashed #999999;
  padding: 0.8rem 0;
  font-weight: 600;
  width: 100%;
}

/* 特殊分岐 --- 子要素にボタンがあるとき */
.p-form__underbarHeading:has(.p-button__flameSprit) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.p-form__subHeading {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 0;
}

.p-form__text {
  font-size: 1.6rem;
  font-weight: 400;
}

.p-form__flame-fromto,
.p-form__flame-datetime,
.p-form__flame-afterText {
  display: flex;
  flex-direction: row;
  column-gap: 1rem;
  justify-content: space-between;
}

.p-form__flame-fromto .p-form__from,
.p-form__flame-fromto .p-form__to {
  flex: 0 0 auto;
  width: calc(calc(calc(100% - 2rem) / 12) * 5);
  max-width: 100%;
}

.p-form__from:has(> time.p-form__text),
.p-form__to:has(> time.p-form__text) {
  text-align: center;
}

.p-form__flame-fromto .p-form__tilda {
  flex: 0 0 auto;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(calc(calc(100% - 2rem) / 12) * 2);
  max-width: 100%;
}

.p-form__flame-datetime .p-form__date,
.p-form__flame-afterText .p-form__textbox {
  flex: 0 0 auto;
  width: calc(calc(calc(100% - 1rem) / 12) * 7);
  max-width: 100%;
}

.p-form__flame-datetime .p-form__time,
.p-form__flame-afterText .p-form__suffix {
  flex: 0 0 auto;
  width: calc(calc(calc(100% - 1rem) / 12) * 5);
  max-width: 100%;
}

.p-form__suffix {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.p-form__flame-withSubmit {
  display: flex;
  flex-direction: row;
  column-gap: 0.25rem;
  align-items: flex-start;
}

.p-form__formArea-withSubmit {
  display: flex;
  flex-grow: 1;
}

.p-form__submitArea-withSubmit {
  width: 12.4rem;
  text-wrap: nowrap;
}

/* 自治体管理画面で住所検索が表示崩れしているため、応急処置 */
.muni_content .p-form__submitArea-withSubmit .p-button__flame {
  margin: 0 auto;
}

.p-form__list {
  font-size: 1.4rem;
  color: var(--text-primary-color);
  font-weight: 400;
  padding-left: 2rem;
}

.p-form__list li::marker {
  color: var(--list-marker-color);
  font-size: 2rem;
  font-weight: 600;
}

.p-form__flame-checklist {
  gap: 1.6rem;
  display: grid;
}

/* iOS MacOSにてfieldsetの表示が保てないため厳密に記述 */
fieldset.form-item,
fieldset.form-item:has(.p-form__flame-checklist) {
  display: contents;
}

/* シンプルなチェックボックスのグリッド分岐 */
@media screen and (min-width: 992px) {
  .p-form__flame-checklist {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 991px) {
  .p-form__flame-checklist {
    grid-template-columns: 1fr 1fr;
  }
}

/* 表示分岐 - イベントの曜日指定のチェックボックス */
@media screen and (min-width: 576px) {
  .p-form__flame-checklist[id*="_week_days"],
  .p-form__flame-checklist.event-weekofday {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}

/* 表示分岐 - 検索メニュー内(カテゴリ以外)のチェックボックスのレイアウト */
@media screen and (min-width: 992px) {
  .p-form__flame-checklist[id*="post_status"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
}

.search_menu-body .p-form__flame-checklist:has(input[type="radio"]) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.search_menu-body .p-form__checkbox.form-check:has(input[type="radio"]) {
  padding: 0;
  margin: 0;
}

.p-form__checkbox {
  display: flex;
  flex-direction: row;
  column-gap: 0.9rem;
  font-size: 1.6rem;
}

.p-form__checkbox input {
  font-size: 1.6rem;
}

.p-form__information {
  padding: 1.5rem;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  background-color: #ffffff;
  border: 2px solid var(--area-reserve-bordercolor);
  border-radius: 0.5rem;
  color: var(--text-primary-color);
}

.p-form__info-heading {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem !important;
}

/* 情報を疑似要素ではなくラベルで表現している場合 */
.p-form__info-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  column-gap: 0.24rem;
}

.p-form__info-label {
  font-size: 1.6rem;
  font-weight: 600;
  width: 72px;
}

.p-form__info-text {
  font-size: 1.6rem;
  font-weight: 400;
  flex-grow: 1;
}

.pseudoElements-bx.p-form__info-text {
  padding-left: 3rem;
}

/* bs記述クラスを上書き */
.form-control {
  padding: 1rem 1.6rem !important;
}

/* 共通 - フォームの入力内容を確認するconfirmの各パーツのスタイル */
.confirm-flame {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

@media screen and (max-width: 575px) {
  .confirm-flame {
    padding: 0 7.5px;
  }

  .p-sp-15 .confirm-flame {
    padding: 0 !important;
  }

  /* TODO:CSSセレクターももう少し厳重化 */
  .p-sp-15:has(.p-search-map) {
    padding: 0 7.5px;
  }
}

.confirm-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 1rem;
}

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

.create-input-style .form-control {
  padding: 1rem 1.6rem;
}

.PostNew_announcement {
  text-align: center;
  font-size: 1.6rem;
  color: var(--text-primary-color);
  margin: 2.4rem 0 3.2rem 0;
}

/* post/edit */

.btn-post {
  display: inline-block;
  padding: 1rem;
  background-color: var(--btn-confirm-primary-bgcolor);
  border: 1px solid var(--btn-confirm-primary-bordercolor);
  border-radius: var(--btn-confirm-primary-borderradius);
  width: 100%;
}

.btn-post span {
  /* padding-left: 3rem; */
  color: var(--btn-confirm-primary-color);
  font-size: 16px;
  font-weight: 700;
}

.btn-post span::before {
  left: -3rem;
  mask-image: var(--svg-plus-circle-fill);
  background-color: var(--btn-confirm-primary-iconcolor);
}

/*--位置情報を指定する--*/
/*共通部*/
.btn-close_extend {
  display: inline-block;
  padding: 0.375rem 1rem;
  width: 100%;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
}

.selectLocation-menu:first-child {
  margin-right: 1rem;
  margin-left: 0 !important;
}

.selectLocation-menu:last-child {
  margin-right: 0 !important;
  margin-left: 1rem;
}

/*それぞれのボタン*/
.btn-close_extend {
  --bs-btn-close-color: var(--btn-primary-color);
  --bs-btn-close-opacity: 1;
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
  --bs-btn-close-bg: none;

  box-sizing: border-box;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /*---カラバリ対応部分---*/
  background-color: var(--btn-primary-bgcolor);
  border: 1px solid var(--btn-primary-bordercolor);
  border-radius: 0.375rem;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.btn-close_extend:hover {
  --bs-btn-hover-bg: var(--btn-primary-bgcolor);
  --bs-btn-hover-border-color: var(--btn-primary-bordercolor);

  color: var(--btn-primary-color);
  background-color: var(--bs-btn-hover-bg);
  border: 1px solid var(--bs-btn-hover-border-color);
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
}

/*独自項目 - URL*/
.detail-relationURL {
  position: relative;
  display: flow;
  width: fit-content;
  font-size: 1.6rem;
}

.detail-relationURL > .fa-up-right-from-square {
  color: var(--icon-jumplink-iconcolor);
}

/*独自項目　- 添付ファイルリスト*/
@media screen and (min-width: 992px) {
  .detail-listItem {
    margin-left: 2rem;
  }
}

@media screen and (max-width: 991px) {
  .detail-listItem {
    margin-left: 0;
  }
}
/* 
.detail-file {
  font-size: 18px;
  margin-right: 2rem;
  color: #0d6efd;
} */

.file-name .fa-download {
  color: #0d6efd;
}

/* news/list */

.information-list {
  margin: 1rem 0;
  /* margin-top: 10px; */
}

.news_search-area {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0 auto;
  padding-top: 32px;
  padding-bottom: 8px;
}

.news_search-btn {
  width: 15%;
  text-wrap: nowrap;
}

@media screen and (max-width: 991px) {
  .news_search-area {
    width: 90%;
  }

  .news_search-btn {
    width: 20%;
  }
}
.news_search #id_word,
.search_form_area #id_qa {
  padding: 1rem 1.6rem;
}

.qa_search-btn {
  width: 15%;
}

@media screen and (max-width: 575px) {
  .qa_search-btn {
    width: 20%;
  }
}

/* お知らせ バッチ関連 --- 共通部分 */

.badge_member_target {
  display: inline-block;
  padding: var(--badge-static-padding-yt) var(--badge-static-padding-x)
    var(--badge-static-padding-yb);
  font-size: var(--badge-static-fontsize);
  font-weight: var(--badge-static-fontweight);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-bottom: 3px solid #e5a235;
}

.p-news__badge {
  display: inline-block;
  padding: var(--badge-static-padding-yt) var(--badge-static-padding-x)
    var(--badge-static-padding-yb);
  font-size: var(--badge-static-fontsize);
  font-weight: var(--badge-static-fontweight);
  border-radius: var(--badge-static-borderradius);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  height: 19.5px;
  min-width: 40.6px;
}

/* 優先 */
.p-news__badge.badge_top_priority {
  background-color: var(--badge-top-priority-bgcolor);
  padding-left: var(--badge-static-padding-xl);
  color: var(--badge-top-priority-color);
}

.p-news__badge.badge_top_priority::before {
  mask-image: var(--svg-pin-angle-fill);
  background-color: var(--badge-top-priority-color);
  width: 1.2rem;
  height: 1.2rem;
  bottom: 0.4rem;
  left: 0.65rem;
}

/* new */
.p-news__badge.badge_new {
  background-color: var(--badge-new-bgcolor);
  color: var(--badge-new-color);
}

/* 重要 */
.p-news__badge.badge_important {
  background-color: var(--badge-important-bgcolor);
  color: var(--badge-important-color);
}

/* ファイル */
.p-news__badge.badge_file_exit {
  background-color: var(--badge-file-exit-bgcolor);
  padding-left: var(--badge-static-padding-xl);
  color: var(--badge-file-exit-color);
}

.p-news__badge.badge_file_exit::before {
  mask-image: var(--svg-paperclip);
  background-color: var(--badge-file-exit-color);
  width: 1.4rem;
  height: 1.4rem;
  bottom: 0.3rem;
  left: 0.55rem;
  transform: translate(0, -50%) rotate(45deg);
}

.news_details-info {
  display: flex;
  align-items: center;
}

.notice_date {
  display: flex;
  gap: 5px;
  color: var(--text-notice-color);
  font-size: 1.4rem;
  font-weight: 500;
  align-items: center;
  margin-top: 12px;
}

.p-news__flame {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}

.p-news__article {
  display: block;
  border-radius: 0.5rem;
  text-decoration: none;
  border-bottom: var(--newsUnit-borderwidth) var(--newsUnit-borderstyle)
    var(--newsUnit-bordercolor);
}

.p-news__article:nth-child(1) {
  border-top: var(--newsUnit-borderwidth) var(--newsUnit-borderstyle)
    var(--newsUnit-bordercolor);
}

.p-news__item,
.p-news__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 0.8rem;
  text-decoration: none;
  padding: 1.6rem 0.8rem;
}

.p-news__header {
  padding-bottom: 0;
}

.p-news__header .p-news__title {
  padding-bottom: 0.8rem;
  border-bottom: var(--newsUnit-borderwidth) var(--newsUnit-borderstyle)
    var(--newsUnit-bordercolor);
}

.p-news__header .btn-category {
  padding: 0 0.8rem;
}

.p-news__inner,
.p-group__flame {
  display: flex;
  flex-direction: row;
  column-gap: 0.4rem;
  row-gap: 0.4rem;
  flex-wrap: wrap;
}

.p-news__inner time {
  font-size: 1.4rem;
  font-weight: 500;
  margin-right: 0.4rem;
}

.p-news__inner .btn-category {
  margin: 0 !important;
}

.p-news__article:hover,
.p-news__article:focus,
.p-news__article:active,
.p-news__item:hover,
.p-news__item:focus,
.p-news__item:active {
  text-decoration: none;
}

.news_link {
  display: block;
  border-radius: 0.5rem;
  padding: 4px 4px 0 4px;
  text-decoration: none !important;
}

.list-result .news_link:nth-child(1) {
  padding: 0px 4px 2px 4px;
  border-top: var(--newsUnit-borderwidth) var(--newsUnit-borderstyle)
    var(--newsUnit-bordercolor);
}

/* parts --- グループ表示 */
/* 基本的にお知らせのバッチ表示に準拠 */
.p-group__item {
  padding: var(--badge-static-padding-yt) var(--badge-static-padding-x)
    var(--badge-static-padding-yb) var(--badge-static-padding-xl);
  background-color: #dcfccb;
  color: #587565;
}

.p-group__item::before {
  mask-image: var(--svg-people-fill);
  background-color: #5e8870;
  width: 1.2rem;
  height: 1.2rem;
  top: 0.3rem;
  /* bottom: 0.4rem; */
  left: 0.65rem;
}

.p-news__title {
  display: flex;
  align-self: self-end;
  width: 100%;
  position: relative;
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 500;
  opacity: 1;
}

/* news-detail */

.p-news__detail {
  display: flex;
  flex-direction: column;
  row-gap: 0.8rem;
  width: 100%;
  padding: 1.6rem 0;
}

.p-news__content {
  font-size: 1.6rem;
  line-height: 1.2;
  padding: 0 1.6rem 1.6rem;
}

.p-news__content-attached {
  display: flex;
  flex-direction: column;
  row-gap: 0.8rem;
  width: 100%;
}

.p-news__content-attached h3 {
  color: #333;
  font-size: 1.6rem;
  font-weight: 600;
  height: 32px;
  padding: 0.8rem 0.8rem 0.8rem 0;
  line-height: 1;
  background: var(--bg-bright-gray);
  vertical-align: middle;
  border-radius: 2.5rem 0.5rem 0.5rem 2.5rem;
}

.p-news__content-attached h3::before {
  content: "●";
  color: var(--bg-primary-color);
  margin: 0 0.8rem;
}

.p-news__content-attached ul {
  display: flex;
  flex-direction: column;
  row-gap: 0.4rem;
  padding: 0 0.8rem;
}

.p-news__content-attached ul li {
  list-style: none;
}

.p-news__content-attached:not(:has(li)) {
  display: none;
}

/* 画像エリア */
.p-news__content-attached .p-news__content-album {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.p-news__content-album li {
  width: 33.1%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
}

@media screen and (max-width: 991px) {
  .p-news__content-album li {
    width: 49.5%;
  }
}

@media screen and (max-width: 575px) {
  .p-news__content-album li {
    width: 100%;
  }
}

.p-news__content-album li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* /news/detail/... */

.info_category-area {
  padding-top: 10px;
}

.info_text-area {
  font-size: 1.6rem;
  padding: 8px 0;
}

.info_text-area.plain-txt {
  padding-bottom: 3.2rem;
}

.news_category-tag,
.info_category-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 0.5rem;
}

.news_category-tag {
  margin-top: 12px;
}

.info_category-area .btn-category {
  color: var(--btn-category-color);
  font-size: 1.4rem;
  background-color: var(--btn-category-bgcolor);
  border: solid 1px var(--btn-category-bordercolor);
  border-radius: var(--btn-category-borderradius);
  margin-top: 0;
  padding: 0 8px;
  margin-right: 0;
  transition: none;
  pointer-events: none;
}

.info_file-area,
.info_img-area {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

.info_img-area:not(:has(.record img)) {
  display: none;
}

/* ファイルエリア分岐後再修正 */

.info_file-area:has(.docx),
.info_file-area:has(.pdf),
.info_file-area:has(.ppt),
.info_file-area:has(.pptx),
.info_file-area:has(.csv),
.info_file-area:has(.txt),
.info_file-area:has(.xls),
.info_file-area:has(.xlsx),
.info_file-area:has(.xltx),
.info_file-area:has(.zip) {
  margin-top: 1rem;
  display: block;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  padding-left: 0;
}

.info_file-area div.record:last-child {
  padding-bottom: 0;
}

.info_file-area .record:has(.docx),
.info_file-area .record:has(.pdf),
.info_file-area .record:has(.ppt),
.info_file-area .record:has(.pptx),
.info_file-area .record:has(.csv),
.info_file-area .record:has(.txt),
.info_file-area .record:has(.xls),
.info_file-area .record:has(.xlsx),
.info_file-area .record:has(.xltx),
.info_file-area .record:has(.zip) {
  padding-bottom: 1rem;
}

.info_img-area .record {
  width: 32.6%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

.info_text-area .p-button__tertiary:last-child {
  margin-bottom: 0;
}

article .info_img-area img {
  position: absolute;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (max-width: 991px) {
  .info_img-area {
    margin-top: 1rem;
    display: block;
    gap: 1rem;
    padding-left: 0;
  }

  .info_img-area .record {
    /* width: calc(50%-1rem); */
    /* width: fit-content; */
    width: 100%;
    max-width: 100%;
    padding-bottom: 1rem;
  }

  .info_img-area img {
    padding-bottom: 1rem;
  }
}

li.record {
  list-style: none;
}

.record .docx,
.record .pdf,
.record .ppt,
.record .pptx,
.record .csv,
.record .txt,
.record .xls,
.record .xlsx,
.record .xltx,
.record .zip,
.record .jpeg {
  color: var(--text-primary-color);
  font-size: 1.6rem;
  font-weight: 500;
  padding-left: 2.6rem;
  margin-bottom: 0.8rem;
}

.record .docx::before {
  display: inline-block;
  mask-image: var(--svg-filetype-docx);
  background-color: #004497;
  width: 2rem;
  height: 2rem;
}

.record .xlsx::before {
  display: inline-block;
  mask-image: var(--svg-filetype-xlsx);
  background-color: #005f34;
  width: 2rem;
  height: 2rem;
}

.record .xls::before {
  display: inline-block;
  mask-image: var(--svg-filetype-xls);
  background-color: #005f34;
  width: 2rem;
  height: 2rem;
}

.record .xltx::before {
  display: inline-block;
  mask-image: var(--svg-filetype-xltx);
  background-color: #005f34;
  width: 2rem;
  height: 2rem;
}

.record .csv::before {
  display: inline-block;
  mask-image: var(--svg-filetype-csv);
  background-color: #eecc00;
  width: 2rem;
  height: 2rem;
}

.record .pptx::before {
  display: inline-block;
  mask-image: var(--svg-filetype-pptx);
  background-color: #e3491c;
  width: 2rem;
  height: 2rem;
}

.record .ppt::before {
  display: inline-block;
  mask-image: var(--svg-filetype-ppt);
  background-color: #e3491c;
  width: 2rem;
  height: 2rem;
}

.record .txt::before {
  display: inline-block;
  mask-image: var(--svg-filetype-txt);
  background-color: #4e4e4e;
  width: 2rem;
  height: 2rem;
}

.record .pdf::before {
  display: inline-block;
  mask-image: var(--svg-filetype-pdf);
  background-color: #be0000;
  width: 2rem;
  height: 2rem;
}

.record .jpeg::before {
  display: inline-block;
  mask-image: var(--svg-filetype-jpg);
  background-color: #0271a5;
  width: 2rem;
  height: 2rem;
}

.record .zip::before {
  display: inline-block;
  mask-image: var(--svg-file-zip-fill);
  background-color: #de9a00;
  width: 2rem;
  height: 2rem;
}

/* セキュリティ的に危うい拡張子の為、許可の必要性要検討 */
/* filter → mask に変更済み */
.record .lzh::after {
  display: inline-block;
  mask-image: var(--svg-filetype-lzh);
  background-color: #333433;
  width: 2rem;
  height: 2rem;
}

.info_text-area ul {
  padding-left: 25px;
}

.info_text-area ol {
  padding-left: 20px;
}

.info_text-area ul li::marker,
.anchor-area ul li::marker {
  color: var(--list-marker-color);
  font-size: 2rem;
  font-weight: 600;
}

.info_text-area ol li::marker {
  color: var(--text-primary-color);
  font-size: 1.8rem;
  font-weight: 500;
}

.quit-profile {
  text-align: center;
  /* margin: auto; */
  padding: 2rem 0;
  background-color: #fafafa;
}

.quit-anouncement-area {
  font-size: 1.6rem;
  padding-left: 2rem;
}

.quit-anouncement-area li::marker {
  color: var(--list-marker-color);
  font-size: 1.6rem;
  font-weight: 500;
}

.search_menu_footer {
  margin-bottom: 7.5rem;
  padding-top: 1rem;
}

/**
* 自治体管理画面
*/
/* ログイン */
.muni-login-box {
  padding: 1rem 0;
}
/* メニュー */
#muni-sidebar {
  height: 100%;
  width: 200px;
  position: fixed;
  background-color: #212529;
  padding: 1rem 1rem 0;
  font-size: 1.6rem;
}

/* 画面 */
.muni_content {
  padding-left: calc(190px + 1rem);
  padding-right: 1rem;
}

.muni_content:has(.NotFound-box) {
  padding: 1rem;
}

/* レスポンシブサイズ（小）時メニュー展開ボタン */
#nav-toggle {
  display: none;
  position: fixed;
  top: 15px;
  right: 15px;
  height: 32px;
}
#nav-toggle > div {
  position: relative;
  width: 32px;
}
#nav-toggle span {
  width: 100%;
  height: 2px;
  left: 0;
  display: block;
  background: #033560;
  position: absolute;
  transition: 0.35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 11px;
}
#nav-toggle span:nth-child(3) {
  top: 22px;
}

#overlay {
  display: none;
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.item_icon {
  width: 32px;
  height: 32px;
}

/* トップページ 各リスト表示枠 */
.top_list_10 {
  height: 24rem;
}
.top_list_5 {
  height: 13rem;
}
.top_list_4 {
  height: 10.5rem;
}

/* 一覧内チェックボックス */
.muni-table-checkbox {
  width: 10%;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}

@media (max-width: 991px) {
  #muni-sidebar {
    position: fixed;
    right: -190px;
    top: 0;
    height: 100%;
    width: 190px;
    color: #333;
    transition: 0.35s ease-in-out;
  }
  .muni_content {
    padding-left: 1rem;
  }

  #nav-toggle {
    display: block;
  }

  /* nav open */
  .open {
    overflow: hidden;
  }
  .open #overlay {
    display: block;
  }
  .open #muni-sidebar {
    transform: translate3d(-190px, 0, 0);
  }

  /* #nav-toggle close */
  .open #nav-toggle span:nth-child(1) {
    top: 11px;
    transform: rotate(45deg);
    background: #fff;
  }
  .open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
    top: 11px;
    transform: rotate(-45deg);
    background: #fff;
  }
  /* z-index */
  #overlay {
    z-index: 200;
  }
  #muni-sidebar {
    z-index: 300;
  }
  #nav-toggle {
    z-index: 400;
  }
}
/* 公開項目 */
.disp-itemTarget:has(.is-invalid) ~ .invalid-feedback {
  display: block;
}

/* js/slick */
.post-slider .slick-list {
  overflow: hidden;
}

@media screen and (min-width: 576px) {
  .post-slider .map-list {
    padding: 0 70px 10px;
  }
}

@media screen and (max-width: 575px) {
  .post-slider .map-list {
    padding: 0 50px 10px;
  }
}

.post-slider ul.slide-items > li:not(:first-child) {
  display: none;
}

.post-slider .slick-track {
  display: flex;
}

.post-slider .slick-slide {
  height: auto !important;
}

.post-slider .slick-prev,
.post-slider .slick-next {
  position: absolute;
  background-color: var(--bg-primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  color: transparent;
  text-align: center;
  border: 1px solid var(--border-navisma-color) !important;
  opacity: 1;
  z-index: 1;
  transition: 0.75s;
  top: 54%;
  transform: translate(0, -50%);
}

.post-slider .slick-prev {
  left: 20px;
}

.post-slider .slick-next {
  right: 20px;
}

@media screen and (max-width: 576px) {
  .post-slider .slick-prev {
    left: 4px;
  }

  .post-slider .slick-next {
    right: 4px;
  }
}

.post-slider .slick-prev::before {
  position: absolute;
  content: "";
  mask-image: var(--svg-arrow-down-small);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--icon-primary-color);
  width: 2rem;
  height: 2rem;
  top: 50%;
  left: 20%;
  transform: translate(0%, -50%) rotate(90deg);
  opacity: 1;
}

.post-slider .slick-next::before {
  position: absolute;
  content: "";
  mask-image: var(--svg-arrow-down-small);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--icon-primary-color);
  width: 2rem;
  height: 2rem;
  top: 50%;
  right: 20%;
  transform: translate(0%, -50%) rotate(-90deg);
}

.slick-prev:before,
.slick-next:before {
  opacity: 1;
}

.post-slider .slick-prev:focus-within,
.post-slider .slick-next:focus-within,
.post-slider .slick-prev:active,
.post-slider .slick-next:active {
  outline: solid 2px var(--focus-outline-color) !important;
  border-radius: 50%;
  transition: 0s;
}

.post-slider .slick-prev:hover,
.post-slider .slick-next:hover {
  transform: translate(0, -50%) scale(1.1);
  transition: 0.25s;
}

.post-slider .slick-prev:focus,
.post-slider .slick-next:focus,
.post-slider .slick-prev:hover,
.post-slider .slick-next:hover {
  color: #fff;
  text-decoration: none;
  outline: 0;
}

.p-search-mapArea {
  margin: 3rem 0.75rem;
}

.p-search-map {
  width: 100% !important;
  padding: 0 !important;
}

/* TODO:一旦、「スポット名・イベント名」1行で対応 */
/* マップから探す画面のみの#ZMap内の高さ指定 */
@media screen and (min-width: 992px) {
  .p-all-none:has(.navigation-fluid) + .p-search-map .map {
    min-height: calc(100dvh - (80px + 80px + 40px));
  }
}

@media screen and (max-width: 991px) {
  .p-all-none:has(.navigation-fluid) + .p-search-map .map {
    min-height: calc(100dvh - (70px + 40px + 64px));
  }
}

/* モーダルの高さに倣った、自治体・当社の地図高さ指定 */
/* SP400時の正方形を意識した高さ指定 */
.muni_content .p-search-map .map {
  min-height: 345px;
}

.p-search-map th,
.p-search-map td {
  max-width: 100% !important;
}

.p-search-map * {
  box-sizing: content-box;
}

.img-mapmsg {
  width: 150px;
  height: 125px;
}

.img-mapmsg img {
  width: 150px;
  height: 125px;
  -o-object-fit: contain;
  object-fit: contain;
}

/* SP400px時正方形になる高さを指定 */
div.get-latlon {
  width: 100%;
  height: 358px;
}

/* 自治体管理画面_自治体ユーザ作成_パスワード自動作成フォーム */

.pass_gnrt-area label {
  font-weight: 700;
}

.pass_gnrt-area #id_password {
  width: 100%;
  border: var(--bs-border-width) solid var(--bs-border-color);
  box-sizing: border-box;
}

.pass_gnrt-area .form_m-bottom {
  display: flex;
  flex-wrap: nowrap;
}

.pass_gnrt-area .pass_input-area,
.news_search,
.qa_form_area {
  flex-grow: 1;
  padding-right: 0.5rem;
}

.pass_gnrt-area button {
  padding: 10px 16px;
  flex-basis: 100px;
  text-wrap: nowrap;
}

/* パスワード再設定(一般、自治体管理画面) */
.reset-area-font-w {
  font-weight: 700;
}

.reset_label-area {
  font-size: 1.6rem;
  padding: 8px 0 12px 0;
}

.reset_input-area {
  font-size: 1.6rem;
  padding: 8px 0;
}

.pb-style {
  padding-bottom: 0.5rem;
}

.pt-style {
  padding-top: 0.5rem;
}

/*自治体管理画面_投稿のプレビュー*/

.reportArea-wrapper {
  display: flex;
  justify-content: end;
  margin-right: 3.4rem;
  padding-bottom: 0.8rem;
}

.muni_content .reportArea-wrapper {
  margin-right: 3.3rem;
}

.reportArea-wrapper button:focus,
.reportArea-wrapper button:active {
  outline: solid 2px var(--focus-outline-color);
  border-radius: 0.3rem;
}

.btn-admin-reportRequest,
.postDetail-exclamation,
.btn-admin-reportSuccess {
  position: relative;
  display: flex;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 3.4rem;
  font-size: 1.4rem;
  border: none;
  z-index: 0;
}

.btn-admin-reportRequest,
.btn-admin-reportSuccess {
  cursor: pointer;
}

.postDetail-exclamation {
  cursor: default;
}

.btn-admin-reportRequest {
  background: var(--bs-danger-bg-subtle);
  color: var(--dark-red);
}

/*誤っている可能性があります*/
.postDetail-exclamation {
  background: var(--label-post-exclamation-bgcolor);
  color: var(--dark-yellow);
}

.btn-admin-reportSuccess {
  background: var(--bs-success-bg-subtle);
  color: var(--dark-green);
}

.btn-admin-reportRequest:before,
.btn-admin-reportRequest:after,
.postDetail-exclamation:before,
.postDetail-exclamation:after,
.btn-admin-reportSuccess:before,
.btn-admin-reportSuccess:after {
  position: absolute;
  content: "";
  mask-size: cover;
  width: 2.42em;
  height: 2.42em;
  z-index: -1;
}

.btn-admin-reportRequest:before,
.btn-admin-reportRequest:after {
  background: var(--bs-danger-bg-subtle);
}

.postDetail-exclamation:before,
.postDetail-exclamation:after {
  background: var(--label-post-exclamation-bgcolor);
}

.btn-admin-reportSuccess:before,
.btn-admin-reportSuccess:after {
  background: var(--bs-success-bg-subtle);
}

.btn-admin-reportRequest:before,
.postDetail-exclamation:before,
.btn-admin-reportSuccess:before {
  border-radius: 0 0 0 100%;
  left: -3.38rem;
  top: 0;
}

.btn-admin-reportRequest:after,
.postDetail-exclamation:after,
.btn-admin-reportSuccess:after {
  border-radius: 0 0 100% 0;
  right: -3.4rem;
  top: 0;
}

:is(
  .carousel-wrapper,
  .p-postTitle,
  .detail_time,
  .detail_address,
  .post-categoryClamp,
  .detail_relationSpot,
  .detail_updatedAt,
  .detail_infoText,
  .detail_infoTitle,
  .opn_text-area,
  .p-postInfo
):has(+ .reportArea-wrapper .btn-admin-reportRequest) {
  border-bottom: 1px solid var(--dark-red);
}

.detail_infoItem:has(+ .reportArea-wrapper .btn-admin-reportRequest) {
  border: 1px solid var(--dark-red);
}

:is(
  .carousel-wrapper,
  .p-postTitle,
  .detail_time,
  .detail_address,
  .post-categoryClamp,
  .detail_relationSpot,
  .detail_updatedAt,
  .detail_infoText,
  .detail_infoTitle,
  .opn_text-area,
  .p-postInfo
):has(+ .reportArea-wrapper .postDetail-exclamation) {
  border-bottom: 1px solid var(--dark-yellow);
}

.detail_infoItem:has(+ .reportArea-wrapper .postDetail-exclamation) {
  border: 1px solid var(--dark-yellow);
}

:is(
  .carousel-wrapper,
  .p-postTitle,
  .detail_time,
  .detail_address,
  .post-categoryClamp,
  .detail_relationSpot,
  .detail_updatedAt,
  .detail_infoText,
  .detail_infoTitle,
  .opn_text-area,
  .p-postInfo
):has(+ .reportArea-wrapper .btn-admin-reportSuccess) {
  border-bottom: 1px solid var(--bs-success);
}

.detail_infoItem:has(+ .reportArea-wrapper .btn-admin-reportSuccess) {
  border: 1px solid var(--bs-success);
}

/*自治体管理画面_検索方法設定画面_ユーザステータスのカラバリ*/

.badge-all,
.badge-public,
.badge-member,
.badge-certified {
  font-size: 14px;
  padding: 0 1rem;
  border-radius: 1rem;
}

/* 全員 */
.badge-all {
  background-color: var(--user-status-all-color);
  color: var(--text-primary-color);
  border: 1px solid var(--text-primary-color);
}

/* 一般 */
.badge-public {
  background-color: var(--user-status-public-color);
  color: var(--text-white-color);
  border: 1px solid var(--user-status-public-color);
}

/* 会員 */
.badge-member {
  background-color: var(--user-status-member-color);
  color: var(--text-primary-color);
  border: 1px solid var(--user-status-member-color);
}

/* 公認 */
.badge-certified {
  background-color: var(--user-status-certified-color);
  color: var(--text-white-color);
  border: 1px solid var(--user-status-certified-color);
}

/* reserve_calendar */
.reserve_calendar-area {
  font-weight: 600;
}

.reserve_calendar-table .reserve_calendar-block .reserve_calendar-block-item {
  padding: 1em;
  display: flex;
  justify-content: center;
}

/* clndr */
.clndr-area {
  font-weight: 600;
}

.clndr-table .clndr-block.day {
  cursor: pointer;
}

.clndr-table .clndr-block .clndr-block-item {
  padding: 1em;
  display: flex;
  justify-content: center;
}

.clndr-table .clndr-block.selected .clndr-block-item {
  background-color: var(--btn-calendar-selected-bgcolor);
  color: #ffffff;
  border-radius: 0.5rem;
  margin: 0.3rem;
}

/* .clndr-table .today {
  background-color: #dac465 !important;
} */

.clndr-table .calendar-dow-0 {
  color: var(--btn-calendar-date-sunday) !important;
}

.clndr-table .calendar-dow-6 {
  color: var(--btn-calendar-date-saturday) !important;
}

.clndr-block.day {
  cursor: pointer;
}

.clndr-block .clndr-block-item {
  padding: 1em;
  display: flex;
  justify-content: center;
}

.clndr-block.seleted .clndr-block-item {
  background-color: #dbefff;
  color: #068fff;
  border-radius: 50%;
}

/* .today {
  background-color: #dac465 !important;
}

.calendar-dow-0 {
  background-color: #e98391 !important;
}

.calendar-dow-6 {
  background-color: #83bbe9 !important;
} */

.clndr-table .calendar-dow-0 > .change_date > .clndr-block-item {
  color: var(--btn-calendar-date-sunday);
}

.clndr-table .calendar-dow-6 > .change_date > .clndr-block-item {
  color: var(--btn-calendar-date-saturday);
}
/**
 * select2
 */
.select2-selection__choice .form-select-image {
  width: 200px;
  height: 200px;
  max-width: 100%;
  max-height: 100%;
}

.select2-selection__rendered .form-select-image {
  width: 200px;
  height: 200px;
  max-width: 100%;
  max-height: 100%;
}

.select2-selection__placeholder {
  font-size: 16px;
}

.form-select-image[src$="/simpleskelton_noimage.svg"] {
  /* background-color: #fff; */
  filter: var(--icon-noimage-color);
}

.search-box {
  position: static;
}

.select2_select_count {
  width: 80px;
}

.select2-results__option {
  font-size: 14px;
}

/*select2内のhover*/
.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--btn-category-bgcolor-hover);
  color: var(--btn-category-color);
}

/**
 * CMS_LIST_RESULT_PUB プルダウン
 */
.select_count .select2_select_count {
  font-weight: 600;
  color: var(--btn-sortchange-color);
  /* height: var(--btn-sortchange-a-height); */
  background: var(--btn-sortchange-bgcolor);
  border-radius: var(--btn-sortchange-borderradius);
  border: transparent;
  outline: var(--btn-sortchange-outline);
}

.select2-container *:focus,
.select2-container *:focus-visible {
  outline: solid 2px var(--focus-outline-color);
  border-radius: 0.3rem;
}

.select2-container--focus {
  outline: solid 2px var(--focus-outline-color);
  border-radius: 0.3rem;
}

.useful_navi .select2-container--default .select2-selection--single {
  border: transparent;
  border-radius: var(--btn-switch02-borderradius);
}

.useful_navi .sortchange_btn .select2-container .select2-selection--single {
  height: 100%;
}

.useful_navi
  .sortchange_btn
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow,
.useful_navi
  .sortchange_btn
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered,
.useful_navi
  .sortchange_btn
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  height: var(--span-switch02-height);
  color: var(--text-primary-color);
}

.useful_navi
  .sortchange_btn
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  padding-top: 0.5rem;
}

.day-select .select2-container--default .select2-selection--single,
.week-select .select2-container--default .select2-selection--single {
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 1rem 1.6rem;
  line-height: 1.5;
  min-height: 44px;
  font-size: 1.6rem;
}

.day-select
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow,
.week-select
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 44px;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 20px;
}

.day-select .bulk-limit-pickrarea .form-control,
.week-select .bulk-limit-pickrarea .form-control {
  padding: 1rem 1.6rem;
  min-height: 44px;
}

.open-time-data .form-control {
  padding: 1rem 1.6rem;
  min-height: 44px;
}

.date-from-to .form-control,
.reservable-day .form-control,
.cancelable-day .form-control {
  padding: 1rem 1.6rem;
  min-height: 44px;
}

/* 投稿画面 単一選択 フォームの大きさ */

.form-item .select2-container .select2-selection--single {
  height: fit-content;
}

.form-item
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  display: block;
  padding: 1rem 1.6rem;
}

.form-item
  .select2-container
  .select2-selection--single
  .select2-selection__rendered[id*="-day-select"] {
  padding: 0;
}

.form-item
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: auto;
  position: absolute;
  top: 50%;
}

.form-item .select2-container--default .select2-selection--single {
  border: 1px solid var(--bs-border-color);
}

.form-item + p {
  font-size: 1.6rem;
}

.form-item img {
  width: fit-content !important;
  align-self: center;
}

/**
 * 投稿画面 選択肢を外に出すselect2 単一選択
 */
.to-bottom
  select[option-img="true"]
  + .select2-container
  .select2-selection--single {
  position: relative;
  padding: 1rem 1.6rem;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
}

/* アイコン(__renderの中身全部描画しなおし かつ 複数選択にあわせてるため --single) */
.to-bottom
  select[option-img="true"]
  + .select2-container
  .select2-selection--single::before {
  content: "\F52A";
  font-family: bootstrap-icons;
  position: absolute;
  /* left: 5px; */
  /* bottom: 0; */
}

/* プルダウンの中身 */
.to-bottom
  select[option-img="true"]
  + .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  overflow: visible;
  cursor: auto;
  padding: 0 5px; /* 複数選択に合わせた表示のためのpadding */
  position: absolute;
}

/* 選択状態のプルダウンの中身 */
.to-bottom
  select[option-img="true"]
  + .select2-container
  .select2-selection--single
  .select2-selection__rendered:not(:has(.select2-selection__placeholder)) {
  top: 3em;
}

/* プレースホルダー */
.to-bottom
  select[option-img="true"]
  + .select2-container
  .select2-selection--single
  .select2-selection__rendered
  .select2-selection__placeholder {
  margin-left: 1.5em;
  /* margin-bottom: 0.2em; */
  color: #888888;
  position: absolute;
  bottom: -1.6em;
}

/* 削除ボタン */
/* __render指定だとプレースホルダーにもかかってしまうので× */
.to-bottom
  select[option-img="true"]
  + .select2-container--default
  .select2-selection--single
  .select2-selection__clear {
  color: #999;
  cursor: pointer;
  font-weight: 600;
  position: absolute;
  padding: 5px;
}

/* 選択内容 */
.to-bottom
  select[option-img="true"]
  + .select2-container
  .select2-selection--single
  .select2-selection__rendered
  .selection__rendered__area {
  background-color: #e4e4e4;
  border: 1px solid #aaa;
  border-radius: 4px;
  margin-right: 5px;
  margin-top: 5px;
  padding: 5px;
  padding-top: calc(5px + 1.5em);
  cursor: default;
}

/* 選択内容タイトル */
.to-bottom
  select[option-img="true"]
  + .select2-container
  .select2-selection__rendered
  .selection__rendered__area
  div:nth-child(2) {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**
 * select2 複数選択(2024/4 現在 投稿入力画面のみ )
 */
/* アイコン+placeholde */
.select2-container .select2-selection--multiple .select2-search--inline {
  position: relative;
}

/* アイコン */
.search-box
  .select2-container
  .select2-selection--multiple
  .select2-search--inline::before {
  content: "\F52A";
  font-family: bootstrap-icons;
  float: left;
  position: absolute;
  left: 0;
  bottom: 0;
}

.pwview-toggle-btn {
  /* position: absolute; */
  border: transparent;
  background: transparent;
  top: 0.75rem;
  right: 1rem;
  font-size: 1.6rem;
  padding: 3px 6px;
  margin: 0 10px;
}

.pwview-toggle-btn:focus {
  outline: solid 2px var(--focus-outline-color);
  border-radius: 50%;
}

/* プレースホルダー */
.select2-container
  .select2-selection--multiple
  .select2-search--inline
  .select2-search__field {
  position: relative;
  margin-left: 1.5em;
}

.select2-container .select2-search--inline .select2-search__field {
  margin-top: 0;
}

.to-bottom .select2-container .select2-selection--multiple,
.to-bottom-img .select2-container .select2-selection--multiple {
  position: static;
  /* min-height: 3em;
  max-height: 3em;
  height: 3em; */
  padding: 1rem 1.6rem;
  min-height: 44px;
  max-height: 44px;
  height: 44px;
  border: 1px solid var(--bs-border-color);
}

/* .to-bottom
  .select2-container
  .select2-selection--multiple
  .select2-selection__rendered {
  padding: 1rem 1.6rem;
} */

.to-bottom
  .select2-container
  .select2-selection--multiple
  .select2-selection__rendered,
.to-bottom-img
  .select2-container
  .select2-selection--multiple
  .select2-selection__rendered {
  position: relative;
  overflow: visible;
  top: 1.6em;
  cursor: auto;
}

.to-bottom
  .select2-container
  .select2-selection--multiple
  .select2-selection__rendered:has(.select2-selection__choice),
.to-bottom-img
  .select2-container
  .select2-selection--multiple
  .select2-selection__rendered:has(.select2-selection__choice) {
  position: relative;
  overflow: visible;
  top: 2.9em;
  cursor: auto;
}

.to-bottom:has(.invalid-feedback)
  .select2-container
  .select2-selection--multiple
  .select2-selection__rendered:has(.select2-selection__choice),
.to-bottom-img:has(.invalid-feedback)
  .select2-container
  .select2-selection--multiple
  .select2-selection__rendered:has(.select2-selection__choice) {
  top: 3.9em;
}

.to-bottom
  .select2-container
  .select2-selection--multiple
  .select2-search--inline,
.to-bottom-img
  .select2-container
  .select2-selection--multiple
  .select2-search--inline {
  position: absolute;
  top: -3em;
}

.to-bottom:has(.invalid-feedback)
  .select2-container
  .select2-selection--multiple
  .select2-selection__rendered:has(.select2-selection__choice)
  .select2-search--inline,
.to-bottom-img:has(.invalid-feedback)
  .select2-container
  .select2-selection--multiple
  .select2-selection__rendered:has(.select2-selection__choice)
  .select2-search--inline {
  top: -3.8em;
}

.to-bottom
  .select2-container
  .select2-selection--multiple
  .select2-search--clear,
.to-bottom-img
  .select2-container
  .select2-selection--multiple
  .select2-search--clear {
  position: relative;
  top: -3em;
}

/* チャットグループ作成 */
.to-bottom:has(select[name="certified_chat_members"])
  .select2-selection__rendered
  .select2-selection__choice,
.to-bottom:has(select[name="muni_chat_members"])
  .select2-selection__rendered
  .select2-selection__choice {
  font-size: 1.6rem;
}
.to-bottom:has(select[name="certified_chat_members"]):has(.invalid-feedback)
  .select2-container
  .select2-selection--multiple
  .select2-selection__rendered:has(.select2-selection__choice),
.to-bottom:has(select[name="muni_chat_members"]):has(.invalid-feedback)
  .select2-container
  .select2-selection--multiple
  .select2-selection__rendered:has(.select2-selection__choice) {
  top: 6em;
}

.to-bottom:has(select[name="certified_chat_members"]):has(.invalid-feedback)
  .select2-container
  .select2-selection--multiple
  .select2-selection__rendered:has(.select2-selection__choice)
  .select2-search--inline,
.to-bottom:has(select[name="muni_chat_members"]):has(.invalid-feedback)
  .select2-container
  .select2-selection--multiple
  .select2-selection__rendered:has(.select2-selection__choice)
  .select2-search--inline {
  top: -6.5em;
}

/**
 * datepicker(flatpickr)
 */
.ui-datepicker {
  font-size: 2rem;
}

table.ui-datepicker-calendar thead th:first-child {
  color: #f00;
}
table.ui-datepicker-calendar thead th:last-child {
  color: #00f;
}

.label-outline-primary {
  color: var(--label-outline-primary-color);
  border: var(--label-outline-primary-borderwidth) solid
    var(--label-outline-primary-boedercolor);
  border-radius: var(--label-outline-primary-borderradius);
}

/* ローディング関連 */
.is-hide {
  display: none;
}
.loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(infinity);
  width: 100%;
  height: 100%;
}
.loading::before {
  content: "";
  display: block;
  position: fixed;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  width: 100px;
  height: 100px;
  border-radius: 5px;
  /* margin-top: -15px;
  margin-left: -15px; */
  background: white;
}
.loading::after {
  content: "";
  display: block;
  position: fixed;
  left: calc(50% - 32px);
  top: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 40px;
  /* margin-top: -10px; */
  /* margin-left: -10px; */
  border: 4px solid var(--loading-navisma-color);
  border-right: 4px solid white;
  -webkit-animation: rotate 1s infinite linear;
  animation: rotate 1s infinite linear;
}
@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* flatpickr 土日色付け */
.flatpickr-weekdaycontainer > .flatpickr-weekday:nth-child(1) {
  color: #dc3545;
}

.flatpickr-weekdaycontainer > .flatpickr-weekday:nth-child(7) {
  color: #007bff;
}

/* --------------------共通 戻るボタン--------------------- */

.btn-pageback {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 1rem;
  border: 0.1rem solid #dee2e6;
  border-radius: 0.5rem;
  height: 3.6rem;
}

.btn-pageback span {
  padding-left: 2.5rem;
  color: var(--text-primary-color);
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
}

@media screen and (max-width: 991px) {
  .btn-pageback span {
    font-size: 1.4rem;
  }
}

.btn-pageback span::before {
  mask-image: var(--svg-arrow-left-short);
  background-color: var(--icon-primary-color);
  width: 20px;
  height: 20px;
  left: 0;
  /* top: 0.1rem; */
}

/* --------------------入力フォームエリア-------------------- */

/* .form-control:focus {
  outline: solid 2px #de6d16;
  border-radius: 0.5rem;
} */

/* ---------------------静的ページ--------------------- */
.anchor-jump {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 1.6rem;
  padding-bottom: 3rem;
  padding-left: 0.5rem;
  font-size: 1.6rem;
}

.anchor-jump__item {
  display: table;
  border-bottom: var(--anchorJump-borderwidth) var(--anchorJump-borderstyle)
    var(--anchorJump-bordercolor);
}

.anchor-jump__item > a {
  display: table-cell;
  vertical-align: middle;
  padding: 1.25rem 3.5rem 1.25rem 0;
  text-decoration: none;
  font-weight: 600;
  color: var(--anchorJump-color);
}

.anchor-jump__item > a::after {
  display: block;
  mask: var(--svg-arrow-down-circle-fill) no-repeat 50% 50% / cover;
  background-color: var(--icon-anchorjump-color);
  width: 2rem;
  height: 2rem;
  right: 0.7rem;
  top: 50%;
  border-radius: 50%;
  /* translate: 0 -50%; */
}

.anchor-jump__item > a:visited {
  color: var(--a-link-color-visited);
  border-color: currentColor;
}

.anchor-jump__item > a:hover {
  color: var(--activeBrown);
  border-color: currentColor;
}

.anchor-area {
  padding: 2.4rem 0;
  font-size: 1.6rem;
}

.anchor-area2 {
  padding: 2.4rem 0;
  font-size: 1.6rem;
}

@media (max-width: 991px) {
  .anchor-jump {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    padding: 0;
  }
}

ul.ns_list {
  list-style: none;
  padding: 0rem;
}

.ns_list_item {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.p-ol-list01 {
  counter-reset: number 0;
  list-style: none;
  margin-bottom: 20px;
  padding-left: 0rem !important;
}

.p-ol-list01__item,
.p-txt-style,
.static_indent,
.cookie_indent {
  padding: 0.8rem 0;
  /* text-indent: -2rem; */
}

.static_indent2 {
  padding: 0.8rem 0 0.8rem 2.5rem;
}

.p-ol-list01__item::before {
  counter-increment: number;
  content: counter(number, decimal-leading-zero) ".";
  font-weight: 600;
  margin-right: 0.8rem;
}
@media screen and (max-width: 991px) {
  .Anker_link_map {
    display: block;
  }
}

.p-ol-list02_item {
  list-style-type: none;
  list-style-position: inside;
  counter-increment: cnt;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.p-ol-list02_item::before {
  content: "(" counter(cnt) ")";
  margin-right: 0.5rem;
}

/*アンカーリンクジャンプしたときに、ヘッダーにかぶらないようにする*/

.anchorText {
  position: relative;
  z-index: 1;
  pointer-events: none;
  font-size: 1.6rem;
  font-weight: 600;
}

.jis-only-heading {
  font-weight: 500;
  padding: 1.2rem 0 0 0;
  font-size: 1.6rem;
}

@media screen and (min-width: 992px) {
  .anchorText::before {
    content: "";
    display: block;
    height: 83px;
    margin-top: -83px;
    visibility: hidden;
  }
}

@media screen and (max-width: 991px) {
  .anchorText::before {
    content: "";
    display: block;
    height: 80px;
    margin-top: -64px;
    visibility: hidden;
  }
}

/* ---------------------qa.html---------------------- */
/* ---------------------qa_result.html---------------------- */

.search_form_area {
  display: flex;
  justify-content: center;
  width: 90%;
  margin: 0 auto 16px;
}

.qa-list-area {
  font-size: 1.6rem;
  padding: 0 0.75rem;
}

@media screen and (max-width: 575px) {
  .search_form_area {
    width: 100%;
    margin: 0 0 16px;
  }

  .qa-list-area {
    padding: 0;
  }
}

.qa_accordion {
  display: flex;
  color: var(--text-primary-color);
  background-color: #f8f8f8;
  /* border: 2px solid #dfdfdf; */
  border-radius: 0.5rem;
  border: transparent;
  text-align: left;
  transition: 0.75s;
  align-items: center;
  padding: 1.6rem;
  font-weight: 600;
  width: 100%;
  font-size: 1.6rem;
}

.answer_area {
  display: flex;
  padding: 1.6rem;
  font-weight: 600;
  align-items: center;
}

.qa_initial-A {
  font-size: 2.2rem;
  margin: 0 1.5rem 0.25rem 0;
}

.answer_text {
  font-size: 1.6rem;
  width: 88%;
}

.accordion-collapse {
  color: var(--text-primary-color);
}

.img_open,
.img_close {
  width: 1.8rem;
  height: 1.8rem;
  filter: var(--icon-primary-color-filter);
}

.btn-forwardToContact {
  display: inline-block;
  background-color: var(--btn-forward-primary-bgcolor);
  padding: 1rem;
  border: 1px solid var(--btn-forward-primary-bordercolor);
  border-radius: var(--btn-forward-primary-borderradius);
  text-align: center;
  vertical-align: middle;
  color: var(--btn-forward-primary-color);
  margin-top: 2.4rem;
  font-size: 1.6rem;
  font-weight: 600;
  width: 100%;
}

.btn-forwardToContact::before {
  mask-image: var(--svg-cursor-fill);
  background: var(--icon-secondary-color);
  width: 1.8rem;
  height: 1.8rem;
  left: 1.6rem;
  top: 50%;
  transform: translate(0, -50%) rotate(45deg);
}

/*----------------operated.html-------------↓ */
.op-space {
  margin-bottom: 55px;
}

.op_texts {
  font-size: 1.6rem;
  /* padding: 0 0.75rem; */
}

.op_texts dt {
  float: left;
  width: 15%;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2rem;
  padding: 1.2em 1em 1em 0;
  text-wrap: nowrap;
}

.op_texts dd {
  padding: 1rem 0;
  line-height: 1.8;
}

@media screen and (max-width: 991px) {
  .op_texts dt {
    float: none;
    margin-right: 7rem;
    padding: 1.2em 1em 0 0;
  }

  dd .fnavi_link {
    font-size: 1.6rem;
  }
}
/* ---------------------link.html--------------------- */
.link-list-style {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0.75rem;
}

.link-list-box {
  width: 50%;
  display: flex;
}

.link-list-box a {
  padding: 1.6rem;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
}

.link-list-box .fa-up-right-from-square {
  color: var(--icon-jumplink-iconcolor);
}

.link-list-box:hover {
  opacity: 0.8;
  transition-duration: 0.1s;
}

.link-list-style a {
  display: flex;
  width: 100%;
  height: auto;
  background: var(--bg-link-color);
}

.link-image-text {
  font-size: 1.6rem;
  padding: 0.8rem;
}

.link-image-text .link-title {
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
}

.ad-link:hover {
  text-decoration: none;
}

.link-image-trim img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (max-width: 991px) {
  .link-list-box {
    width: 100%;
    padding: 0;
  }
}

/* ---------------------contact_form.html--------------------- */
.form_m-bottom {
  margin-bottom: 1.6rem;
}

.contact_address-parts {
  display: flex;
  gap: 0.8rem;
}

.contact_address-form {
  flex-grow: 1;
}

.search-address_btn {
  padding: 1rem 1.6rem;
  width: 124px;
  text-wrap: nowrap;
}

.contact-input-style .form-control {
  display: block;
  width: 100%;
  padding: 1rem 1.6rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.contact-style .form-check-label,
.contact-chck-box label,
.contact-style .invalid-feedback p {
  font-size: 1.6rem !important;
}

/* 404errorスタイリング */
.NotFound-box .message-editPost .p-button__tertiary {
  margin-bottom: 0.6rem;
  &:last-child {
    margin-bottom: 0;
  }
}

.contact-check-area {
  margin-bottom: 3.2rem;
}

.contact-chck-box {
  display: grid;
  grid-template-columns: 16px 1fr;
  grid-template-rows: 16px 16px;
  margin: 1.6rem 0 2rem;
  font-size: 1.6rem;
  width: 100%;
}

.contact-chck-box input {
  width: 16px;
  margin-left: 4px;
}

.contact-chck-box label {
  margin-left: 1.6rem;
}

.btn-forwardToContact {
  display: inline-block;
  background-color: var(--btn-forward-primary-bgcolor);
  padding: 1rem;
  border: 1px solid var(--btn-forward-primary-bordercolor);
  border-radius: var(--btn-forward-primary-borderradius);
  text-align: center;
  vertical-align: middle;
  color: var(--btn-forward-primary-color);
  margin-top: 2.4rem;
  font-size: 1.6rem;
  font-weight: 600;
  width: 100%;
}

.btn-forwardToContact::before {
  mask-image: var(--svg-cursor-fill);
  background: var(--icon-secondary-color);
  width: 1.8rem;
  height: 1.8rem;
  left: 1.6rem;
  top: 50%;
  transform: translate(0, -50%) rotate(45deg);
}

/* account/apply... */

fieldset:disabled .btn {
  color: var(--bs-btn-disabled-color);
  pointer-events: none;
  background-color: var(--bs-btn-confirm-disabled-bg);
  border-color: var(--bs-btn-confirm-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}

/*----------------privacy.html-------------↓ */
.privacy-list h3 {
  padding-top: 24px;
  font-weight: 600;
}

.privacy-list-txt {
  padding: 16px 0 8px 0;
}

/*----------------404error.html-------------↓ */

.NotFound-box {
  font-size: 1.6rem;
  background: var(--bg-main-color);
}

.NotFound-box p:last-child {
  margin-top: 3.2rem;
}

.NotFound-box .attention-wrapper {
  display: flex;
  flex-direction: column;
}

.attention-wrapper a:last-child {
  margin-bottom: 0;
}

/*----------------map.js button-------------↓ */
/*-----------------共通部分-------------↓ */
.homeBtn,
.searchBtn,
.Explain-pin,
.CtrBtn-plus,
.CtrBtn-minus {
  width: var(--button-map-width);
  height: var(--button-map-height);
  background: var(--button-map-bgcolor);
  outline: 0.1rem solid var(--button-map-outlinecolor);
  border-color: transparent;
  border-radius: var(--button-map-borderradius);
  box-shadow: var(--boxshadow-primary-style);
  margin: 0.5rem;
}

.homeBtn:active,
.searchBtn:active,
.Explain-pin:active,
.CtrBtn-plus:active,
.CtrBtn-minus:active,
.homeBtn:focus,
.searchBtn:focus,
.Explain-pin:focus,
.CtrBtn-plus:focus,
.CtrBtn-minus:focus {
  outline: 2px solid var(--focus-outline-color) !important;
  opacity: 1;
  transition: 0s;
}

.Ex-not-fcs:hover,
.homeBtn:hover,
.searchBtn:hover,
.Explain-pin:hover,
.CtrBtn-plus:hover,
.CtrBtn-minus:hover {
  transform: scale(1.1);
  opacity: 1;
}

.Ex-not-fcs,
.Explain-pin,
.homeBtn,
.searchBtn,
.CtrBtn-plus,
.CtrBtn-minus {
  transition: 0.25s;
}

.homeBtn span,
.searchBtn span,
.Explain-pin span,
.CtrBtn-plus span {
  position: relative;
  display: block;
  width: 4rem;
  height: 4rem;
  text-decoration: none;
  text-align: center;
  color: var(--text-primary-color);
  font-size: 1rem;
  padding-top: 3.7rem;
  line-height: 1.3rem;
  left: 0.27rem;
  top: -0.2rem;
  font-weight: 600;
  transition: 0.25s;
}

.CtrBtn-minus span {
  position: relative;
  display: block;
  width: 4rem;
  height: 4rem;
  text-decoration: none;
  text-align: center;
  color: var(--text-primary-color);
  font-size: 1rem;
  padding-top: 3.7rem;
  line-height: 0.9rem;
  top: -0.2rem;
  left: 0.27rem;
  font-weight: 600;
}

/*-----------------現在地ボタン-------------↓ */
.homeBtn span::before {
  position: absolute;
  content: "";
  mask-image: var(--svg-crosshair);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--icon-primary-color);
  width: var(--button-map-icon-size);
  height: var(--button-map-icon-size);
  left: 0.8rem;
  bottom: 4.5rem;
}

/*-----------------検索ボタン-------------↓ */
.searchBtn span::before {
  position: absolute;
  content: "";
  mask-image: var(--svg-search);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--icon-primary-color);
  width: var(--button-map-icon-size);
  height: var(--button-map-icon-size);
  left: 0.8rem;
  bottom: 4.5rem;
}

/*-----------------ピンの説明ボタン-------------↓ */
.Explain-pin span::before {
  position: absolute;
  content: "";
  mask-image: var(--svg-geo-alt-fill);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--icon-primary-color);
  width: var(--button-map-icon-size);
  height: var(--button-map-icon-size);
  left: 0.8rem;
  bottom: 4.5rem;
}

.Ex-not-fcs {
  outline: none !important;
  transition: 0.25s;
}

.Ex-not-fcs:hover {
  opacity: 1;
}

/*-----------------ズームインボタン-------------↓ */

.CtrBtn-plus span::before {
  position: absolute;
  content: "";
  mask-image: var(--svg-zoom-in);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--icon-primary-color);
  width: var(--button-map-icon-size);
  height: var(--button-map-icon-size);
  left: 0.8rem;
  bottom: 4.5rem;
}

/*-----------------ズームアウトボタン-------------↓ */
.CtrBtn-minus span::before {
  position: absolute;
  content: "";
  mask-image: var(--svg-zoom-out);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--icon-primary-color);
  width: var(--button-map-icon-size);
  height: var(--button-map-icon-size);
  left: 0.8rem;
  bottom: 4.5rem;
}

/*-----------------現在地を表すアイコンのカラバリ対応-------------↓ */
img[src*="/crosshair.svg"] {
  filter: var(--icon-primary-color-filter);
}

a:has(img[src*="/crosshair.svg"])::before {
  position: absolute;
  content: "";
  mask-image: url(/static/img/svg/map_crosshair_skyblue.svg);
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: #ffffff;
}

/*-----------------地図利用規約リンク作成------------- */
.map_txtlink {
  display: block;
  font-size: 1.4rem;
  background: rgba(255, 255, 255, 0.8);
  padding: 0.3rem;
  border-radius: 5px;
  height: 24px;
}

/* マップから探すページの「条件で絞り込む」の高さ分上部にする指定*/
.p-all-none + .p-search-map #ZMap div:has(> .map_txtlink) {
  position: static;
}

/* マップから探すページを除く新規投稿、投稿確認、*/
#ZMap div:has(> .map_txtlink) {
  position: relative;
  top: 32px;
}

/*-----------------吹き出し内の画像-------------*/
#ZMap a:has(img) {
  transition: 0.25s;
}

#ZMap a:has(img):focus,
#ZMap a:has(img):active {
  transition: 0s;
}

#ZMap a:has(img):hover {
  transform: scale(1.1);
  opacity: 1 !important;
}

.map_footer {
  box-shadow: 0px -1px 6px -2px rgba(220, 220, 220, 1);
  border-radius: 2rem 2rem 0 0;
}

/* 個別対応 - 「マップからさがす」で検索メニュー内にフッターメニューを表示しない */
/* .map_footer .footerMenu {
  display: none;
} */

@media screen and (min-width: 992px) {
  .map_footer .search_menu_footer {
    margin-bottom: 0;
  }
}

/* 個別対応 -　「マップからさがす」で洗濯したカテゴリーの表示方法を指定する */

@media screen and (min-width: 992px) {
  .map_footer .btn-selectedCategory {
    padding: 0.1rem 2rem 0.1rem 0.8rem;
    height: fit-content;
  }

  .map_footer .btn-unselectCategory {
    padding: 0.1rem 0.8rem 0.1rem 0.2rem;
    height: fit-content;
  }
}

/* post/map */
.slick-slider {
  bottom: 24px;
}

.mapInfo {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: transparent;
  color: var(--text-primary-color);
  row-gap: 0.1rem;
}

.mapInfo span,
.mapInfo time {
  font-size: 16px;
  padding-left: 2rem;
}

/* TODO:疑似要素共通bg-colorが出来たら削除 */
.mapInfo span::before,
.mapInfo time::before {
  background-color: var(--icon-primary-color);
}

.mapInfo-close {
  position: absolute;
  top: 1rem;
  right: 7rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.mapInfo-header {
  display: flex;
  flex-direction: row;
  column-gap: 0.5rem;
}

.mapInfo-header .post-status__item {
  height: 100%;
}

#mapInformation {
  display: flex !important;
  align-items: flex-end !important;
}

.mapInfo-favorite {
  display: flex;
}

.mapInfo-category {
  display: flex;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

/* modal */
.mappin-table {
  display: flex;
  flex-direction: column;
  column-gap: 0.5rem;
}

.mappin-column {
  display: flex;
  flex-direction: row;
  row-gap: 0.3rem;
  width: 100%;
  height: fit-content;
  padding-bottom: 0.3rem;
  border-bottom: 0.5px dashed var(--border-navisma-color);
}

.mappin-column:last-child {
  border-bottom: none;
}

.mappin-flame {
  display: flex;
  align-items: start;
  justify-content: center;
  width: 70px;
}

.mappin-image {
  width: fit-content;
  height: fit-content;
}

.mappin-text {
  display: flex;
  align-items: center;
  text-align: start;
  padding: 0.375rem;
  width: calc(100% - 70px);
}

.mappin-name {
  font-size: 1.6rem;
  font-weight: 400;
}

/* ---------------------about.html---------------------- */
.explain_change {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
  justify-content: flex-start;
  margin: 1.6rem 0;
}

.list-item_01 {
  flex: 32%;
  box-sizing: border-box;
  padding: 20px;
  margin: 5px;
  background: var(--about-box-color);
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  position: relative;
  line-height: 2;
}

.list-item_01 .detail_text {
  margin-top: 1.2rem;
  font-size: 1.4rem;
}

.list-item_01 p:hover {
  text-decoration: none;
}

.about_arrow {
  color: var(--text-primary-color);
  padding-left: 1.8rem;
  padding-right: 0.6rem;
  text-decoration: none;
  margin-bottom: 0.6rem;
  font-size: 16px;
  font-weight: 600;
}

.about_arrow::before {
  display: inline-block;
  mask-image: var(--svg-caret-right-fill);
  background-color: var(--icon-primary-color);
  width: var(--icon-fnavi-width);
  height: var(--icon-fnavi-height);
}

@media screen and (max-width: 991px) {
  .list-item_01 {
    flex: 80%;
    margin: 5px 0;
  }
  .explain_change {
    margin: 1.6rem 0;
  }
}

.about_layout {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.ds_13data {
  display: flex;
  flex: auto;
  width: 33%;
  box-sizing: content-box;
}

@media screen and (max-width: 991px) {
  .ds_13data {
    width: 98%;
    gap: 1.5rem 1.5rem;
    box-sizing: content-box;
  }
}

div.ccm-page .p-index-list {
  display: block;
  background: #ffffff;
  border: 1px solid #007bff;
  padding: 4%;
  text-align: center;
  position: relative;
  margin-bottom: 3rem;
  border-radius: 4px;
  text-decoration: none;
}

/* ---------------------h1-h6_format----------------------- */

.h1-to-label {
  font-size: 2em;
  margin: 0;
}

/*背景色*/
.base-background {
  background-color: #fffffe;
}

/*ヘッダー*/
.base-header {
  height: 7.5rem;
  border-bottom: 1px solid white;
  background-color: #094067;
}

.base-title {
  color: #fffffe;
  font-size: 18px;
}

.base-title-bg {
  background-color: #094067;
}

.btn-header {
  background-color: rgba(0, 0, 0, 0);
  border: none;
}

.bg-headerMenu:not(:hover) .header_menu_logout::before {
  background-color: var(--icon-delete-color) !important;
}

.bg-headerMenu:not(:hover) div::before {
  background-color: var(--icon-primary-color);
}

.bg-headerMenu:hover div::before,
.bg-headerMenu:focus div::before {
  background-color: var(--icon-primary-color);
}

.text-headerBtn {
  color: #fff;
}

/* .btn-headerColor {
  filter: invert(100%) sepia(0%) saturate(4523%) hue-rotate(275deg)
    brightness(112%) contrast(110%);
} */

/* nav-pagelink タブ切替*/

/* .nav-space {
  background-color: var(--bg-primary-color);
} */

.nav-all {
  margin: 0 2.5rem;
}

@media screen and (min-width: 992px) {
  .nav-space {
    margin: 0 calc(110vw / 19.2) 0;
  }

  ol,
  ul {
    padding-left: 0rem;
  }

  .navigation-menu {
    white-space: nowrap;
    display: flex;
    border-bottom: 1px solid #bababa;
    height: 40px;
  }

  .navigation-menu li:last-child {
    border-right: 1px solid #dee2e6;
  }

  .navigation-item {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-bottom: -0.1rem;
    margin-top: 0.3rem;
    letter-spacing: 0.1rem;
  }

  .navigation-link {
    display: flex;
    padding: 0.5rem 1rem;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 600;
    border-top: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
    border-radius: 0.2rem;
    transition: 0.75s;
  }

  .navigation-link.active {
    background-color: #fff;
    border-top: 1px solid #bababa;
    border-right: 1px solid #bababa;
    border-left: 1px solid #bababa;
    border-bottom: 1px solid #fff;
    border-radius: 0.2rem 0.2rem 0 0;
  }

  .navigation-link:not(.active) {
    border-bottom: 1px solid #8b8b8b;
    color: #767678;
  }

  .navigation-link:not(.active) .pseudoElements-bx {
    color: #767678;
  }

  .navigation-link:not(.active) .pseudoElements-bx::before {
    background-color: #767678;
  }

  .navigation-link .pseudoElements-bx {
    display: block;
    margin: 0 2.5rem 0 5rem;
  }

  .navigation-link .pseudoElements-bx::before {
    display: inline-block;
    background-color: var(--btn-switchDimention-icon-color);
    content: "";
    width: 1.6rem;
    height: 1.6rem;
    left: -2.5rem;
    bottom: 0.5rem;
  }
}

@media screen and (max-width: 991px) {
  .nav-space {
    margin-top: 2px;
  }

  .navigation-menu {
    white-space: nowrap;
    overflow-x: auto !important;
    display: flex;
    flex-wrap: nowrap;
    align-content: space-between;
    font-size: 1.6rem;
    font-weight: 600;
    padding-left: 0rem;
    /*Firefoxに対応*/
    scrollbar-width: none;
    margin-bottom: -1px;
    /* border-bottom: 1px solid #dee2e6; */
    height: 40px;
  }

  /* for MacOS */
  .navigation-menu::-webkit-scrollbar {
    display: none;
  }

  .navigation-menu::-webkit-scrollbar {
    height: 3px;
  }

  .navigation-menu::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .navigation-menu::-webkit-scrollbar-thumb .navigation-item {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 100%;
  }

  .navigation-item {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    width: 100%;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
    letter-spacing: 0.1rem;
  }

  .navigation-link {
    display: flex;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0.3rem 0;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .navigation-link.active {
    border-bottom: 3px solid #e5a235;
    transition: 0.75s;
  }

  .navigation-link:not(.active) {
    color: #767678;
    border-bottom: 1px solid #dee2e6;
  }

  .navigation-link:not(.active) .pseudoElements-bx {
    color: #767678;
  }

  .navigation-link:not(.active) .pseudoElements-bx::before {
    background-color: #8b8b8b;
  }

  .navigation-link .pseudoElements-bx {
    display: block;
    margin: 0 2.5rem 0 5rem;
  }

  .navigation-link .pseudoElements-bx::before {
    display: inline-block;
    background-color: var(--btn-switchDimention-icon-color);
    content: "";
    width: 1.6rem;
    height: 1.6rem;
    left: -2.5rem;
    bottom: 0.5rem;
  }
}

.icon-primary-color.active {
  filter: var(--icon-primary-color-active);
}

/*アイコンカラー*/
.icon-noimage-bg {
  filter: var(--icon-noimage-color);
}

.icon-primary-color {
  filter: invert(16%) sepia(94%) saturate(1250%) hue-rotate(182deg)
    brightness(92%) contrast(93%);
}

.icon-secondary-color {
  filter: invert(96%) sepia(7%) saturate(7039%) hue-rotate(175deg)
    brightness(88%) contrast(82%);
}

.icon-delete-color {
  filter: invert(68%) sepia(99%) saturate(5754%) hue-rotate(337deg)
    brightness(109%) contrast(98%);
}

.icon-mappin-color {
  filter: invert(59%) sepia(75%) saturate(2614%) hue-rotate(94deg)
    brightness(99%) contrast(96%);
}

.icon-warning-color {
  filter: invert(97%) sepia(20%) saturate(6759%) hue-rotate(311deg)
    brightness(100%) contrast(96%);
  transform: translateZ(0);
}

.icon-favorite-color {
  filter: invert(46%) sepia(80%) saturate(4311%) hue-rotate(325deg)
    brightness(98%) contrast(91%);
}

.icon-favorite-white {
  filter: invert(88%) sepia(23%) saturate(110%) hue-rotate(336deg)
    brightness(106%) contrast(111%);
}

/*ボーダー*/
.bg-sub-border {
  border: none;
  border-radius: 0.5rem;
  background-color: #fdfdfd;
  box-shadow: var(--boxshadow-primary-style);
  margin-bottom: 0.5rem;
}

/*フォント*/
.base-text-color {
  color: #094067;
}

/* a {
  text-decorate: underline;
  color: #5f6c7b;
} */

/*テキスト*/
.text-heading1 {
  color: #172c66;
  font-weight: 700;
}

.text-heading2 {
  color: #475d5b;
  font-weight: 600;
}

/* .text-introduction-title {
  color: ;
} */

/* TODO:似たような使い方をしたい部分がいくつかあるため、共通化したい */
.post-categoryClamp {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.4rem 0;
  gap: 0.5rem;
}

.post-categoryClamp .btn-category,
.post-categoryClamp .btn-tag {
  margin: 0 !important;
}

/*カード*/
.card-flame {
  border-width: 1px;
  border-color: #90b4ce;
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: var(--boxshadow-primary-style);
}

.card-link-color {
  color: #094067;
  font-weight: 600;
}

/*関連するスポットやイベント*/
.relation-posts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

/* .relation-one {
  width: 600px;
} */

.relation-column {
  width: 100%;
}

.relation-flame {
  aspect-ratio: 1/1;
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.relation-photograph {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0.5rem;
}

.relation-postname-area {
  width: 100%;
  padding: 1rem 0;
  display: flex;
}

.relation-postname-area .p-postTitle {
  padding-left: 2.4rem;
}

/*ボタン*/
/*カテゴリー*/
.btn-category {
  color: var(--btn-category-color);
  font-size: 1.4rem;
  background-color: var(--btn-category-bgcolor);
  border: solid 1px var(--btn-category-bordercolor);
  border-radius: var(--btn-category-borderradius);
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 3px 8px;
  margin-right: 6px;
  transition: 0.75s;
  font-weight: 500;
}

.btn-category:last-child {
  margin-right: 0 !important;
}

button.btn-category:hover,
.btn-unselectCategory:hover {
  color: var(--btn-category-color);
  background-color: var(--btn-category-bgcolor-hover);
  border: solid 1px var(--btn-category-bordercolor);
  text-decoration: none;
  opacity: 1;
}

.btn-category:focus,
.btn-category:active {
  border-radius: var(--btn-category-borderradius);
}

.btn-check:checked + .btn,
.btn-check:checked + .btn-selectTime,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  color: var(--text-primary-color);
  background-color: var(--btn-category-bgcolor-hover);
  border-color: var(--btn-category-bordercolor);
}

.post-category button:focus,
.calendar-category button:focus {
  outline: solid 2px var(--focus-outline-color);
  border-radius: 5rem;
  box-shadow: none;
}

.post-category button:active,
.calendar-category button:active,
.selected-categories-area button:active {
  outline: solid 2px var(--focus-outline-color);
  border-radius: 5rem;
  background-color: var(--btn-category-bgcolor-hover);
  box-shadow: none;
}

/*予約ステータス*/
.label-reserve {
  color: var(--label-reserveStatus-accept-color);
  background-color: var(--label-reserveStatus-accept-bgcolor);
}

/*開催ステータス 開催予定*/
.label-schedule {
  color: var(--label-eventSchedule-color);
  background-color: var(--label-eventSchedule-bgcolor);
}

/*開催ステータス 開催中*/
.label-held {
  color: var(--label-eventHeld-color);
  background-color: var(--label-eventHeld-bgcolor);
}

/*開催ステータス 終了しました*/
.label-terminated {
  color: var(--label-eventTerminated-color);
  background-color: var(--label-eventTerminated-bgcolor);
}

/*投稿ステータス 公認限定*/
.label-onlyCertified {
  color: var(--label-onlyCertified-color);
  background-color: var(--label-onlyCertified-bgcolor);
}

/* ---投稿詳細 共通パーツ--- */

/* --カルーセル下 ボタン類-- */
.p-button__detail-item {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  height: 4rem;
  padding: 0.3rem 0.4rem;
  transition: 0.75s;
}

.p-button__detail-item span {
  font-size: 1.6rem;
  font-weight: 600;
  width: fit-content;
  padding-left: clamp(2rem, 1.654rem + 1.54vw, 3rem);
}

@media screen and (max-width: 575px) {
  .p-button__detail-item {
    padding: 0.6rem 0.4rem;
    height: 3.6rem;
  }

  .p-button__detail-item span {
    font-size: 1.4rem;
  }
}

/*マップからみる*/
.btn-map {
  background-color: var(--btn-map-bgcolor);
  border: solid 1px var(--btn-map-bordercolor);
}

.btn-map span {
  color: var(--btn-map-color);
}

.btn-map span::before {
  mask-image: var(--svg-geo-alt-fill);
  background-color: var(--btn-map-iconcolor);
}

/*予約する*/
.btn-reserve {
  background-color: var(--btn-reserve-bgcolor);
  border: 1px solid var(--btn-reserve-bordercolor);
}

.btn-reserve span {
  color: var(--btn-reserve-color);
}

.btn-reserve span::before {
  mask-image: var(--svg-check2);
  background-color: var(--icon-reserve-color);
}

/*お気に入り 追加削除関連*/
/*お気に入りに追加する*/
.btn-favorite-add {
  background-color: var(--btn-favorite-bgcolor-add);
}

.btn-favorite-reject {
  background-color: var(--btn-favorite-bgcolor-reject);
}

.btn-favorite-add,
.btn-favorite-reject {
  border: 0.1rem solid var(--btn-favorite-bordercolor);
  border-radius: var(--btn-favorite-borderradius);
}

.favorite-add {
  color: var(--btn-favorite-color-add);
}

.favorite-reject {
  color: var(--btn-favorite-color-reject);
}

.favorite-add::before,
.favorite-reject::before {
  mask-image: var(--svg-suit-heart-fill);
}

.favorite-add::before {
  background-color: var(--icon-favorite-color);
}

.favorite-reject::before {
  background-color: var(--icon-favorite-white);
}

/*お気に入りに追加する hover関連*/

.btn-favorite-add:hover {
  background-color: var(--btn-favorite-bgcolor-reject);
}

.btn-favorite-add:hover .favorite-add {
  color: var(--btn-favorite-color-reject);
}

.btn-favorite-add:hover .favorite-add::before {
  background-color: var(--icon-favorite-white);
}

.btn-favorite-reject:hover {
  background-color: var(--btn-favorite-bgcolor-add);
}

.btn-favorite-reject:hover .favorite-reject {
  color: var(--btn-favorite-color-add);
}

.btn-favorite-reject:hover .favorite-reject::before {
  background-color: var(--btn-favorite-color-add);
}

/*投稿詳細　タグ*/
.btn-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  margin-right: 6px;
  padding: 1px 3px;
  padding-left: 2rem;
  color: var(--btn-tag-color);
  font-size: 1.4rem;
  background-color: var(--btn-tag-bgcolor);
  border: 1px solid var(--btn-tag-bordercolor);
  border-radius: 0.5rem;
  width: fit-content;
}

.btn-tag::before {
  background-color: var(--icon-black-color);
  left: 0.6rem;
  width: 0.8em;
  height: 0.8em;
}

.detail_poster,
.detail_relationSpot,
.detail_updatedAt {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 0.8rem !important;
  font-size: 1.6rem;
}

.detail_poster:has(.btn_startChat) {
  gap: 0.8rem;
}

.detail_owner {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.detail_owner .p-button__flame {
  margin: 0 !important;
}

.link-relationSpot {
  padding-left: 2rem;
}

.link-relationSpot::before {
  mask-image: var(--svg-flag-fill);
  background-color: var(--icon-primary-color);
}

.btn_delete {
  border-radius: 5rem;
  border: var(--btn-delete-bordercolor) var(--btn-primary-borderstyle)
    var(--btn-primary-borderwidth);
  background-color: var(--bg-delete-color);
  color: #fff;
  font-weight: 500;
}

/*ページネーション*/
/*-----------------------------一般画面-----------------------------*/
.page-item > .page-link {
  background-color: var(--pagination-bgcolor);
  color: var(--pagination-color);
  border-width: 0.1rem;
  border-color: var(--pagination-bordercolor);
  border-radius: 9999px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.75s;
}

/*選択中の画面のpage-link*/ /*---共通---*/
.active > .page-link {
  background-color: var(--pagination-bgcolor-active);
  pointer-events: none;
}

/*後戻し、先送りボタン*/ /*---共通---*/
.page-item > .page-link-prev,
.page-item > .page-link-next {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-link-prev > .fa-chevron-left,
.page-link-next > .fa-chevron-right {
  color: var(--icon-pagination-chevron-iconcolor);
}

/*disabledのスタイル*/ /*---共通---*/
.page-item:first-child.disabled > .page-link,
.page-item:last-child.disabled > .page-link {
  border-color: var(--pagination-bordercolor-disabled);
  background-color: var(--pagination-bgcolor-disabled);
}

.page-item:first-child.disabled .fa-chevron-left,
.page-item:last-child.disabled .fa-chevron-right {
  color: #dddddd;
}

.page-item:first-child.disabled .page-link-prev,
.page-item:first-child.disabled .page-link-prev:focus,
.page-item:last-child.disabled .page-link-next,
.page-item:last-child.disabled .page-link-next:focus {
  user-select: none;
  outline: none;
}

/*三点リーダー*/ /*---共通---*/

.page-item:has(.page-link-pointleader) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-link-pointleader::before {
  display: inline-block;
  mask-image: url(/static/libs/bootstrap-icons/icons/three-dots.svg);
  background-color: var(--pagination-icon-pointleader);
  left: 0;
  width: 100%;
  height: 100%;
}

/*jsによって3点リーダー化されたページネーションのスタイル制御*/
.page-item:not(:has(.disp-pagination)) {
  display: none;
}

.pagination-pc {
  height: 50px;
  padding-top: 64px;
  padding-bottom: 110px;
}

.pagination-sp {
  height: 44px;
  padding-top: 40px;
  padding-bottom: 64px;
}

.pagination-area-pc,
.pagination-area-sp {
  display: flex;
}

.pagination-area-pc {
  justify-content: space-between;
  margin: 0 auto;
}

.pagination-area-sp {
  justify-content: space-evenly;
  width: 100%;
}

/*レスポンシブで表示切替*/
/*ページネーションのみ、breakpointは576pxで設定*/
@media screen and (max-width: 575px) {
  .pagination-pc {
    display: none !important;
  }

  .page-item > .page-link {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }

  .page-item > .page-link-pointleader {
    width: 16px;
    height: 16px;
  }
}

@media screen and (min-width: 576px) {
  .pagination-sp {
    display: none !important;
  }

  .page-item > .page-link {
    width: 50px;
    height: 50px;
    font-size: 16px;
  }

  .page-item > .page-link-pointleader {
    width: 28px;
    height: 28px;
  }
}

@media screen and (min-width: 992px) {
  .pagination-area-pc {
    width: 50% !important;
  }
}

@media screen and (576px <= width <= 991px) {
  .pagination-area-pc {
    width: 100% !important;
  }
}

/*-----------------------------自治体画面-----------------------------*/

.page-item.verMuni > .page-link {
  background-color: var(--pagination-bgcolor);
  color: var(--pagination-color);
  border-width: 0.1rem;
  border-color: var(--pagination-bordercolor);
  border-radius: 0.375rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.active.verMuni > .page-link {
  background-color: var(--pagination-bgcolor-active);
  pointer-events: none;
}

@media screen and (min-width: 576px) {
  .pagination-sp-muni {
    display: none;
  }
}

@media screen and (max-width: 575px) {
  .pagination-pc-muni {
    display: none;
  }
}

/*フッター*/
.border_navisma {
  border-color: #90b4ce;
}

.footer-menuText {
  color: #fffffe;
}

.file-disp-area:has(.upload-img) {
  width: 200px;
  height: 200px;
  margin-bottom: 1em;
}

.upload-img,
.attache-img {
  max-width: 200px;
  max-height: 200px;
}

.confirm-img-area {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.item-attache-img-area {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
}

@media screen and (width < 550px) {
  .upload-img {
    max-width: 100%;
  }

  .confirm-img-area {
    width: inherit;
  }

  .confirm-img-grid {
    width: 100%;
  }
}

@media screen and (width < 527px) {
  .attache-img {
    max-width: 100%;
    max-height: 200px;
  }

  .item-attache-img-area {
    width: inherit;
  }

  .item-attache-img-grid {
    width: 100%;
  }
}

.w-max-content {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

/*---------------backToPagetop---------------*/

.btn-back2Pagetop {
  display: inline-block;
  width: 82px;
  height: 82px;
  border-radius: 9999px;
}

.btn-backToPagetop {
  display: none;
  position: fixed;
  /* width: 82px;
  height: 82px; */
  box-sizing: content-box;
  max-width: 82px;
  max-height: 82px;
  padding: 0;
  background-color: var(--bg-white-color);
  border: 1px solid #dee2e6;
  border-radius: 9999px;
  /* margin-bottom: 16px; */
  z-index: 4;
  box-shadow: var(--boxshadow-secondary-style);
}

@media screen and (min-width: 1400px) {
  .btn-backToPagetop {
    right: calc(calc(100dvw - 1320px) / 2);
    /* left: calc(calc(calc(calc(100vw - 1320px) / 2) + 1320px) - 41px); */
    bottom: 111px;
  }
}

@media screen and (1200px <= width <= 1399px) {
  .btn-backToPagetop {
    right: clamp(0.938rem, -26.764rem + 36.93vw, 5.531rem);
    /* left: calc(calc(calc(calc(100vw - 1140px) / 2) + 1140px) - 41px); */
    bottom: 111px;
  }
}

@media screen and (992px <= width <= 1199px) {
  .btn-backToPagetop {
    margin-right: 15px;
    right: clamp(0.938rem, -18.082rem + 30.68vw, 4.906rem);
    /* left: calc(calc(calc(calc(100vw - 960px) / 2) + 960px) - 62px); */
    bottom: 111px;
  }
}

@media screen and (768px <= width <= 991px) {
  .btn-backToPagetop {
    margin-right: 15px;
    right: clamp(0.938rem, -16.175rem + 35.65vw, 5.906rem);
    /* left: calc(calc(calc(calc(100vw - 720px) / 2) + 720px) - 62px); */
    bottom: 120px;
  }
}

@media screen and (576px <= width <= 767px) {
  .btn-backToPagetop {
    margin-right: 15px;
    /* left: calc(calc(calc(calc(100vw - 540px) / 2) + 540px) - 41px); */
    right: clamp(0.938rem, -9.9rem + 30.1vw, 4.531rem);
    bottom: 120px;
  }
}

@media screen and (max-width: 575px) {
  .btn-backToPagetop {
    right: 15px;
    /* left: calc(
      calc(calc(calc(100vw - calc(100vw - 15px)) / 2) + calc(100vw - 15px)) -
        82px
    ); */
    bottom: 120px;
  }
}

.backToPagetop {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-top: 36px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--text-primary-color);
}

.backToPagetop::before {
  mask-image: var(--svg-static-arrow-up);
  mask-size: contain;
  background-color: var(--icon-primary-color);
  width: 20px;
  height: 20px;
  top: 25%;
}

/* 自治体管理画面で表示しない */
.ccm-page:has(.muni_content) ~ .btn-backToPagetop,
.ccm-page:has(.muni_content) .btn-backToPagetop {
  display: none !important;
}
/* not(focus)時にopacityが維持されないようにする */

/* チャット画面では表示しない */
.ccm-page:has(.p-chat__flame) ~ .btn-backToPagetop,
.ccm-page:has(.p-chat__flame) .btn-backToPagetop {
  display: none !important;
}

.notFocus-opacity {
  opacity: 1 !important;
}

/*---------------navisma_top.html---------------*/

#img1,
#img2,
#img3,
#img4,
#img5,
#img6,
#img7,
#img8,
#img9 {
  opacity: 0;
}

#img1 {
  transform: translate(220px, 12px) scale(0.75);
  animation: fade-in1 3s ease-in-out 0s forwards;
}

#img2 {
  transform: translate(100px, 86px) scale(0.75);
  animation: fade-in2 3s ease-in-out 0.2s forwards;
}

#img3 {
  transform: translate(342px, 86px) scale(0.75);
  animation: fade-in3 3s ease-in-out 0.4s forwards;
}

#img4 {
  transform: translate(-24px, 156px) scale(0.75);
  animation: fade-in4 3s ease-in-out 0.6s forwards;
}

#img5 {
  transform: translate(220px, 156px) scale(0.75);
  animation: fade-in5 3s ease-in-out 0.8s forwards;
}

#img6 {
  transform: translate(466px, 156px) scale(0.75);
  animation: fade-in6 3s ease-in-out 1s forwards;
}

#img7 {
  transform: translate(96px, 228px) scale(0.75);
  animation: fade-in7 3s ease-in-out 1.2s forwards;
}

#img8 {
  transform: translate(342px, 228px) scale(0.75);
  animation: fade-in8 3s ease-in-out 1.4s forwards;
}

#img9 {
  transform: translate(220px, 300px) scale(0.75);
  animation: fade-in9 3s ease-in-out 1.6s forwards;
}

@keyframes fade-in1 {
  0% {
    opacity: 0;
    transform: translate(220px, -8px) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: translate(220px, 12px) scale(0.75);
  }
}

@keyframes fade-in2 {
  0% {
    opacity: 0;
    transform: translate(100px, 66px) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: translate(100px, 86px) scale(0.75);
  }
}

@keyframes fade-in3 {
  0% {
    opacity: 0;
    transform: translate(342px, 66px) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: translate(342px, 86px) scale(0.75);
  }
}

@keyframes fade-in4 {
  0% {
    opacity: 0;
    transform: translate(-24px, 136px) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: translate(-24px, 156px) scale(0.75);
  }
}

@keyframes fade-in5 {
  0% {
    opacity: 0;
    transform: translate(220px, 136px) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: translate(220px, 156px) scale(0.75);
  }
}

@keyframes fade-in6 {
  0% {
    opacity: 0;
    transform: translate(466px, 136px) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: translate(466px, 156px) scale(0.75);
  }
}

@keyframes fade-in7 {
  0% {
    opacity: 0;
    transform: translate(96px, 208px) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: translate(96px, 228px) scale(0.75);
  }
}

@keyframes fade-in8 {
  0% {
    opacity: 0;
    transform: translate(342px, 208px) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: translate(342px, 228px) scale(0.75);
  }
}

@keyframes fade-in9 {
  0% {
    opacity: 0;
    transform: translate(220px, 280px) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: translate(220px, 300px) scale(0.75);
  }
}

/* first-area以外のsvgデータ(:hover) */

/* second-area */
.fadein #img10 {
  /* transform: translateX(15%); */
  animation: fade-in10 1.5s ease-in-out 1s forwards;
}

/* third-area */
.fadein #img11 {
  /* transform: translateX(15%); */
  animation: fade-in10 1.5s ease-in-out 1s forwards;
}

/* fourth-area */
.fadein #img12 {
  /* transform: translateX(15%); */
  animation: fade-in10 1.5s ease-in-out 1s forwards;
}

#img10,
#img11,
#img12 {
  opacity: 0;
}

@keyframes fade-in10 {
  0% {
    opacity: 0.1;
    /* filter: blur(10px); */
  }
  100% {
    opacity: 1;
    /* filter: blur(0px); */
  }
}

@media screen and (max-width: 991px) {
  .first-area,
  .second-area,
  .third-area,
  .fourth-area {
    width: 100%;
  }
}

#img1_9 {
  width: 100%;
}

#img10 {
  transform: translateX(20%) scale(1);
}

#img11 {
  transform: translateX(10%) scale(1);
}

#img12 {
  transform: translateX(20%) scale(1);
}

@media screen and (max-width: 991px) {
  #img1_9 {
    width: 70%;
    transform: translateX(37%) scale(1);
  }

  #img10 {
    transform: translateX(-5%);
  }

  #img11 {
    transform: translateX(30%) scale(1);
  }

  #img12 {
    transform: translateX(-5%);
  }
}

@media screen and (max-width: 767px) {
  #img1_9 {
    width: 80%;
    transform: translateX(20%) scale(1);
  }

  #img10 {
    transform: translateX(5%) scale(1);
  }

  #img11 {
    transform: translateX(25%) scale(1);
  }

  #img12 {
    transform: translateX(5%) scale(1);
  }
}

/* MEMO:ここから左右にスプ  リットしなくなるため、同じ値で問題なし。 */
@media screen and (max-width: 575px) {
  #img1_9 {
    width: 100%;
    transform: translateX(0);
  }

  #img10,
  #img11,
  #img12 {
    transform: translateX(15%);
  }
}

/* セクションのレイアウトを整える */
.topPage {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 992px) {
  .topPage {
    padding-top: 5.4rem !important;
  }
}

@media screen and (992px <= width < 1200px) {
  .topPage {
    row-gap: 1rem;
  }
}

@media screen and (max-width: 991px) {
  .topPage {
    padding-top: 2.4rem;
  }
}

/* 共通 - セクション内のルール */
.top_visual,
.view-section {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  position: relative;
}

@media screen and (min-width: 992px) {
  .top_visual,
  .view-section {
    display: flex;
    flex-wrap: nowrap;
    min-height: 600px;
    max-height: 800px;
    /* margin-bottom: 56px; */
  }

  .top_visual,
  .view-section:has(.third-area) {
    display: flex;
    flex-direction: row-reverse;
  }

  .view-section:has(.second-area),
  .view-section:has(.fourth-area) {
    display: flex;
    flex-direction: row;
  }
}

@media screen and (992px <= width < 1200px) {
  .top_visual,
  .view-section {
    padding-bottom: 5rem;
  }
}

@media screen and (max-width: 991px) {
  .top_visual,
  .view-section {
    display: flex;
    flex-wrap: nowrap;
    /* min-height: 600px; */
    /* padding-bottom: 2.4rem; */
  }

  .top_visual,
  .view-section:has(.second-area),
  .view-section:has(.third-area),
  .view-section:has(.fourth-area) {
    display: flex;
    flex-direction: column-reverse;
    /* margin-bottom: 1.5rem; */
  }
}

@media screen and (max-width: 575px) {
  .top_visual,
  .view-section {
    display: flex;
    flex-wrap: nowrap;
    min-height: 400px;
  }
}

/*
main .view-section.pc-mb {
  margin-bottom: 224px;
} */

/* 奇数偶数でクラス名を最後に統一しても良し(z-indexに注意) */

/* アニメーション スクロールに対応してsectionを表示する */
.top_anime {
  transform: translateY(3rem);
  opacity: 0;
  transition: all 0.3s ease-in-out 0.3s;
}

.top_anime.fadein {
  transform: translateY(0px);
  opacity: 1;
}

/* テキストエリア_左右アニメーション */
@keyframes fadein-left_intro {
  0% {
    opacity: 0;
    transform: translateX(-100%);
    width: 100%;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    width: 100%;
    filter: blur(0px);
  }
}

@keyframes fadein-right_intro {
  0% {
    opacity: 0;
    /* padding: 48px 0 48px 48px;
    margin-left: 50%; */
    transform: translateX(100%);
    width: 100%;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    /* padding: 48px clamp(10rem, -22.069rem + 30.72vw, 40rem) 48px 48px;
    margin-left: 2%; */
    transform: translateX(0);
    width: 100%;
    filter: blur(0px);
  }
}

.intro_first,
.intro_third {
  border: var(--border-navisma-width) solid var(--border-navisma-color);
  border-left: none;
  border-radius: 0 30px 30px 0;
  background: hsla(0, 0%, 100%, 0.75);
  flex: 1;
  margin-left: calc(50% - 50vw);
  margin-right: 2%;
  height: fit-content;
}

.intro_second,
.intro_fourth {
  border: var(--border-navisma-width) solid var(--border-navisma-color);
  border-right: none;
  border-radius: 30px 0 0 30px;
  background: hsla(0, 0%, 100%, 0.75);
  flex: 1;
  margin-right: calc(50% - 50vw);
  margin-left: 2%;
  height: fit-content;
}

.intro_first {
  z-index: 4;
}

.intro_second {
  z-index: 3;
}

.intro_third {
  z-index: 2;
}

.intro_fourth {
  z-index: 1;
}

@media screen and (min-width: 992px) {
  /* キービジュアルセクション - 文章記述部分 */
  .intro_first {
    /* position: absolute;
    left: 0;
    top: clamp(0.5rem, -4.5rem + 6.67vw, 3.5rem); */
    padding: 48px 48px 48px clamp(10.4rem, -18.034rem + 27.86vw, 37rem);
    animation: fadein-left_intro 2s ease-in-out 0.1s forwards;
    /* animation-timeline: view(block -20% 0%); */
    width: fit-content;
  }

  .intro_first .title-layout,
  .intro_first .intro_area {
    width: calc(
      48dvw - calc(clamp(10.4rem, -18.034rem + 27.86vw, 37rem) + 48px + 2%)
    );
    min-height: 0;
    margin-left: auto;
    /* animation: fadein-left_text 2s ease-in-out 0.1s forwards; */
  }

  /* 機能紹介セクション - 文章記述部分 */
  .intro_second {
    /* position: absolute;
    right: 0; */
    padding: 48px clamp(10rem, -22.069rem + 30.72vw, 40rem) 48px 48px;
    /* animation-timeline: view(block 1% 20%); */
    width: fit-content;
  }

  .fadein .intro_second {
    animation: fadein-right_intro 2s ease-in-out 0.1s forwards;
  }

  .intro_second .title-layout,
  .intro_second .intro_area {
    width: calc(
      48dvw - calc(clamp(10rem, -22.069rem + 30.72vw, 40rem) + 48px + 2%)
    );
    min-height: 0;
    margin-right: auto;
    /* animation: fadein-right_text 2s ease-in-out 0.1s forwards; */
  }

  .intro_third {
    /* position: absolute;
    left: 0; */
    /* 吹き出し：左余白 min 128px max 537.6px 画面幅 viewport:1920-992 */
    padding: 48px 48px 48px clamp(10.4rem, -18.034rem + 27.86vw, 37rem);
    /* animation-timeline: view(block 21% 40%); */
    width: fit-content;
  }

  .fadein .intro_third {
    animation: fadein-left_intro 2s ease-in-out 0.1s forwards;
  }

  .intro_third .title-layout,
  .intro_third .intro_area {
    width: calc(
      48dvw - calc(clamp(10.4rem, -18.034rem + 27.86vw, 37rem) + 48px + 2%)
    );
    min-height: 0;
    margin-left: auto;
    /* animation: fadein-left_text 2s ease-in-out 0.1s forwards; */
  }

  .intro_fourth {
    /* position: absolute;
    right: 0; */
    padding: 48px clamp(10rem, -22.069rem + 30.72vw, 40rem) 48px 48px;
    /* animation-timeline: view(block 41% 60%); */
    width: fit-content;
  }

  .fadein .intro_fourth {
    animation: fadein-right_intro 2s ease-in-out 0.1s forwards;
  }

  .intro_fourth .title-layout,
  .intro_fourth .intro_area {
    width: calc(
      48dvw - calc(clamp(10rem, -22.069rem + 30.72vw, 40rem) + 48px + 2%)
    );
    min-height: 0;
    margin-right: auto;
    /* animation: fadein-right_text 2s ease-in-out 0.1s forwards; */
  }

  .intro_area p {
    padding-bottom: 10px;
  }
}

@media screen and (max-width: 991px) {
  .intro_first,
  .intro_second,
  .intro_third,
  .intro_fourth {
    display: block;
    height: fit-content;
    margin-top: 0;
  }

  .intro_first {
    padding: 26px 20px 20px clamp(2rem, -4.911rem + 19.23vw, 7rem);
    margin-right: clamp(9.5rem, -16.177rem + 55.33vw, 28rem);
    top: 24px;
    animation: fade-in_rspnsv 3s ease-in-out 0.1s forwards;
    bottom: 500px;
  }

  .intro_second {
    padding: 26px clamp(2rem, -4.911rem + 19.23vw, 7rem) 20px 20px;
    margin-left: clamp(9.5rem, -16.177rem + 55.33vw, 28rem);
    animation: fade-in_rspnsv 3s ease-in-out 0.1s forwards;
    bottom: 600px;
  }

  .intro_third {
    padding: 26px 20px 20px clamp(2rem, -4.911rem + 19.23vw, 7rem);
    margin-right: clamp(9.5rem, -16.177rem + 55.33vw, 28rem);
    animation: fade-in_rspnsv 3s ease-in-out 0.1s forwards;
    bottom: 600px;
  }

  .intro_fourth {
    padding: 26px clamp(2rem, -4.911rem + 19.23vw, 7rem) 20px 20px;
    margin-left: clamp(9.5rem, -16.177rem + 55.33vw, 28rem);
    animation: fade-in_rspnsv 3s ease-in-out 0.1s forwards;
    bottom: 600px;
  }

  @keyframes fade-in_rspnsv {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .intro_first .sp-none.tb-on {
    display: inline;
  }

  .title-layout {
    margin: 0 auto 16px auto !important;
    font-size: 2rem;
    text-align: center;
    line-height: 100%;
  }

  @media screen and (min-width: 992px) {
    .title-layout {
      text-align: start;
    }
  }

  @media screen and (max-width: 991px) {
    .title-layout {
      text-align: center;
    }
  }

  .intro_area {
    height: fit-content;
    text-align: start;
  }

  .intro_area p {
    font-size: 1.6rem;
    padding-bottom: 8px;
  }

  .sp-none {
    display: none;
  }

  .intro_area br {
    display: none;
  }
}

@media screen and (max-width: 575px) {
  .intro_first {
    padding: 26px 20px 20px 29px;
    margin-right: 15px;
  }

  .intro_second {
    padding: 26px 29px 20px 20px;
    margin-left: 15px;
  }

  .intro_third {
    padding: 26px 20px 20px 32px;
    margin-right: 15px;
  }

  .intro_fourth {
    padding: 26px 29px 20px 20px;
    margin-left: 15px;
  }
}

/* 紹介文関連 */
.intro_area {
  display: inline-block;
}

.intro_area p {
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: inherit;
  width: 100%;
}

/* 紹介文内にaタグが存在した場合のスタイル */
.intro_area:not(:has(ul)) a {
  display: block;
  width: fit-content;
  min-height: 6.4rem;
  height: fit-content;
  padding: 1.8rem 5.4rem 1.8rem 3rem;
  border: var(--border-navisma-width) solid var(--border-navisma-color);
  border-radius: 3.2rem;
  background-color: var(--bg-primary-color);
  text-decoration: none;
  transition: 0.75s;
  position: relative;
}

.intro_area:not(:has(ul)) a::after {
  position: absolute;
  content: "";
  mask-image: var(--svg-arrow-right-circle);
  mask-repeat: no-repeat;
  mask-size: 100%;
  width: 2.6rem;
  height: 2.6rem;
  background-color: var(--icon-primary-color);
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
}

.intro_area:not(:has(ul)) a span {
  position: relative;
  color: var(--text-primary-color);
  /* padding-right: 4rem; */
  text-wrap: wrap;
}

@media screen and (min-width: 992px) {
  .intro_area:not(:has(ul)) a {
    margin: clamp(1.5rem, 1.1rem + 0.65vw, 1.875rem) 4rem 0 0;
  }
}

@media screen and (max-width: 991px) {
  .intro_area:not(:has(ul)) a {
    margin: 0.4rem auto 0;
  }
}

@media screen and (max-width: 575px) {
  .intro_area:not(:has(ul)) a {
    margin: 4px auto 0;
    min-height: 4.8rem;
    padding: 1rem 3rem;
    border-radius: 2.4rem;
    text-decoration: none;
  }

  .intro_area:not(:has(ul)) a::after {
    width: 2rem;
    height: 2rem;
  }

  .intro_area:not(:has(ul)) a span {
    line-height: 1.8;
    padding-right: 2.4rem;
  }

  .intro_area:not(:has(ul)) a span::after {
    position: absolute;
    right: 0;
  }
}

/* 紹介文にaタグのリストを表示したい場合 */
/* MEMO:アクセシビリティ配慮で複数入れる場合はul > li - aの関係を作成する必要がある */
.intro_area ul {
  display: grid;
  width: 100%;
}

.intro_area li {
  width: 100%;
  height: 100%;
  list-style: none;
}

.intro_area li a {
  display: flex;
  justify-content: center;
  border: none;
  border-radius: 2rem;
  box-shadow: var(--boxshadow-primary-style);
  width: 100%;
  height: 100%;
  padding: 1.6rem;
  text-decoration: none;
}

.intro_area li span {
  display: flex;
  padding-top: 5rem;
  font-size: 1.4rem;
  line-height: 1.2;
  text-align: center;
  align-items: center;
  position: relative;
}

.intro_area li span::before {
  position: absolute;
  content: "";
  mask-image: var(--svg-search);
  mask-repeat: no-repeat;
  mask-size: 100%;
  width: 2em;
  height: 2em;
  top: 25%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: var(--icon-primary-color);
}

@media screen and (min-width: 768px) {
  .intro_area ul {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.4rem;
  }

  .intro_area li a {
    /* display: block;
    width: 100%;
    position: relative;
    border: none;
    border-radius: 3rem;
    min-height: 6rem;
    box-shadow: var(--boxshadow-primary-style);
    padding: 1.5rem 3rem;
    text-decoration: none; */
  }

  .intro_area li span {
    /* display: block;
    width: 100%;
    position: relative;
    padding-right: 2.5em; */
  }

  .intro_area li span::after {
    /* position: absolute;
    content: "";
    mask-image: var(--svg-arrow-right-circle);
    mask-repeat: no-repeat;
    mask-size: 100%;
    width: 1.5em;
    height: 1.5em;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--icon-primary-color); */
  }
}

@media screen and (max-width: 575px) {
  .intro_area ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }
}

/* 紹介文 - タイトル */
.title-layout {
  margin-bottom: 28px !important;
  font-size: clamp(2.2rem, 1.347rem + 1.38vw, 3rem);
  width: 100%;
}

@media screen and (max-width: 575px) {
  .title-layout {
    margin: 0 auto 16px auto !important;
    font-size: 2rem;
    text-align: center;
  }
}

/* 紹介文 - 本文スタイル */
.intro_area {
  font-size: clamp(1.6rem, 1.173rem + 0.39vw, 2rem);
  padding-bottom: 8px;
  line-height: 1.6;
  height: fit-content;
}

/* SVGの描画エリア */

/* 画像のサイズ制御(svg container) */

.visual_container {
  position: relative;
}

@media screen and (min-width: 992px) {
  .visual_container {
    max-width: 1000px;
    aspect-ratio: 7 / 6;
  }
}

@media screen and (576px <= width <= 991px) {
  .visual_container {
    aspect-ratio: 7 / 5;
  }
}

@media screen and (max-width: 575px) {
  .visual_container {
    max-width: 1000px;
    aspect-ratio: 7 / 6;
  }
}

.visual_container svg {
  position: absolute;
  top: 0;
  /* width: 100%;
  height: 100%; */
}

.visual_container svg.first-area,
.visual_container svg.third-area {
  left: 0;
}

.visual_container svg.second-area,
.visual_container svg.fourth-area {
  right: 0;
}

@media screen and (min-width: 992px) {
  .visual_first,
  .visual_second,
  .visual_third,
  .visual_fourth {
    width: 50dvw;
  }
}

@media screen and (max-width: 991px) {
  .visual_first,
  .visual_second,
  .visual_third,
  .visual_fourth {
    width: 100dvw;
    height: fit-content;
  }
}

/* 画像の表示領域(svgタグ)のサイズ制御 */
.first-area,
.second-area,
.third-area,
.fourth-area {
  display: flex;
  position: absolute;
}

@media screen and (min-width: 992px) {
  .first-area,
  .second-area,
  .third-area,
  .fourth-area {
    width: 50dvw;
  }
}

@media screen and (max-width: 991px) {
  .first-area,
  .second-area,
  .third-area,
  .fourth-area {
    /* width: 90dvw; */
    aspect-ratio: 7 / 6;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media screen and (max-width: 575px) {
  .first-area,
  .second-area,
  .third-area,
  .fourth-area {
    width: 100%;
    padding: 0.5rem;
    top: -30%;
  }
}

/* お知らせ */
.title-layout:has(+ .news-area) {
  /* display: flex;
  justify-content: center;
  align-items: center; */
}

.news-area {
  /* padding: 3rem;
  border: 1px solid var(--border-navisma-color);
  border-radius: 0.5rem;
  box-shadow: var(--boxshadow-primary-style); */
}

.news-area {
  margin: 128px auto;
  width: 100%;
  background-color: var(--bg-primary-color);
}

.news-area .title-layout {
  text-align: center;
}

/* MEMO:レスポンシブ対応用 */
.news-area .notice_date div {
  display: flex;
  gap: 5px;
  color: var(--text-notice-color);
  font-size: 1.4rem;
  font-weight: 500;
  align-items: center;
}

@media screen and (max-width: 575px) {
  .news-area {
    padding: 1rem 0.75rem;
    max-width: calc(100dvw - 12px);
    margin: 0 6px;
  }
}

@media screen and (max-width: 400px) {
  .notice_date:has(> div) {
    flex-direction: column;
    align-items: start;
  }
}

.title-layout:has(.news-area) {
  text-align: center;
  width: 100%;
}

/* 関連ページまわり */
.ad-area {
  margin: 128px auto;
  background-color: var(--bg-primary-color);
}

.ad-area .title-layout {
  text-align: center;
  width: 100%;
}

.ad-area .p-card__container {
  justify-content: center;
}

@media screen and (max-width: 991px) {
  .ad-area .p-card__container {
    justify-content: flex-start;
  }
}

.ad-list {
  list-style: none;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 24px;
  padding-left: 0;
}

.ad-list-box {
  width: 100%;
  display: flex;
}

.ad-list li {
  width: 280px;
  height: fit-content;
  border: var(--border-navisma-width) solid var(--border-navisma-color);
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.ad-link {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ad-top-img {
  aspect-ratio: 4 / 3;
  height: 75%;
  width: 100%;
  padding: 0;
}

.ad-top-img img {
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.ad-top-text {
  aspect-ratio: 4 / 1;
  height: 25%;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0.375rem;
}

.ad-list .takahama1,
.ad-list .takahama3 {
  text-align: center;
}

@media screen and (max-width: 991px) {
  .ad-list {
    flex-wrap: wrap;
    gap: 24px;
  }
}

@media screen and (max-width: 575px) {
  .ad-list {
    flex-wrap: wrap;
    justify-content: center;
  }

  .intro_first .sp-none.tb-on {
    display: none;
  }

  .intro_area {
    font-size: 1.6rem;
    padding-bottom: 8px;
    width: 100%;
  }

  .intro_area br {
    display: none;
  }
}

/* お知らせ・関連サイト 共通パーツ 一覧へリンク */
.p-link_textEnd {
  width: 100%;
  text-align: end;
  padding: 2rem 1rem;
}

/* トーテック管理画面 キービジュアル挿入フォームのスタイル */
.p-form__keyVisual-flame {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

.p-form__keyVisual:nth-child(odd) {
  flex: 0 0 auto;
  width: 32.5%;
  max-width: 100%;
}

.p-form__keyVisual:nth-child(even) {
  display: none;
}

/* トーテック管理画面 キービジュアルの配置を示すスタイル  */

.muni_content label:has(+ input[name="file_1_max_length"]),
.muni_content label:has(+ input[name="file_2_max_length"]),
.muni_content label:has(+ input[name="file_3_max_length"]),
.muni_content label:has(+ input[name="file_4_max_length"]),
.muni_content label:has(+ input[name="file_5_max_length"]),
.muni_content label:has(+ input[name="file_6_max_length"]),
.muni_content label:has(+ input[name="file_7_max_length"]),
.muni_content label:has(+ input[name="file_8_max_length"]),
.muni_content label:has(+ input[name="file_9_max_length"]) {
  position: relative;
  padding: 1rem 0 1rem 3em;
}

/*共通部分*/
.muni_content label:has(+ input[name="file_1_max_length"])::before,
.muni_content label:has(+ input[name="file_2_max_length"])::before,
.muni_content label:has(+ input[name="file_3_max_length"])::before,
.muni_content label:has(+ input[name="file_4_max_length"])::before,
.muni_content label:has(+ input[name="file_5_max_length"])::before,
.muni_content label:has(+ input[name="file_6_max_length"])::before,
.muni_content label:has(+ input[name="file_7_max_length"])::before,
.muni_content label:has(+ input[name="file_8_max_length"])::before,
.muni_content label:has(+ input[name="file_9_max_length"])::before {
  position: absolute;
  content: "";
  width: 2em;
  height: 2em;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-color: #333333;
}

.muni_content label:has(+ input[name="file_1_max_length"])::before {
  mask: url(/static/img/svg/mainvisual_top.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
}

.muni_content label:has(+ input[name="file_2_max_length"])::before {
  mask: url(/static/img/svg/mainvisual_semiTop-left.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
}

.muni_content label:has(+ input[name="file_3_max_length"])::before {
  mask: url(/static/img/svg/mainvisual_semiTop-right.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
}

.muni_content label:has(+ input[name="file_4_max_length"])::before {
  mask: url(/static/img/svg/mainvisual_middle-left.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
}

.muni_content label:has(+ input[name="file_5_max_length"])::before {
  mask: url(/static/img/svg/mainvisual_middle-center.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
}

.muni_content label:has(+ input[name="file_6_max_length"])::before {
  mask: url(/static/img/svg/mainvisual_middle-right.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
}

.muni_content label:has(+ input[name="file_7_max_length"])::before {
  mask: url(/static/img/svg/mainvisual_semiBottom-left.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
}

.muni_content label:has(+ input[name="file_8_max_length"])::before {
  mask: url(/static/img/svg/mainvisual_semiBottom-right.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
}

.muni_content label:has(+ input[name="file_9_max_length"])::before {
  mask: url(/static/img/svg/mainvisual_bottom.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
}

/*---- 共通 マニュアル ----*/
/*--- マニュアル リンク一覧画面 ---*/

.p-topic__card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.p-topic__card img {
  width: 100%;
  border-radius: 0.375rem;
  box-shadow: var(--boxshadow-primary-style);
}

.p-topic__cardDetail {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.4rem;
  width: 100%;
}

.p-topic__card h3 {
  font-weight: 600;
}

.p-topic__card p {
  font-weight: 400;
}

.p-topic__card h3,
.p-topic__card p {
  font-size: 1.6rem;
}

.p-topic__card:focus,
.p-topic__card:hover {
  text-decoration: none;
}

/*--- マニュアル本画面 ---*/

.topic_thumbnail {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* サムネイル */
.topic_thumbnail img {
  box-shadow: var(--boxshadow-primary-style);
  aspect-ratio: 16 / 9;
}

@media screen and (mix-width: 992px) {
  .topic_thumbnail img {
    margin: 0 auto;
    width: fit-content;
  }
}

@media screen and (max-width: 991px) {
  .topic_thumbnail img {
    margin: 0;
    width: 100%;
  }
}

.topic_main {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.p-topic__heading {
  width: 100%;
  font-size: 20px;
  font-weight: 600;
  align-self: center;
  background-color: #fff;
  border-radius: 9999px;
  box-shadow: var(--boxshadow-primary-style);
  padding: 1rem 1.6rem;
}

.p-topic__heading02 {
  width: 100%;
  font-size: 1.8rem;
  font-weight: 600;
}

.p-topic__flowFlame .p-topic__heading02 {
  margin-bottom: 1.6rem;
}

.p-topic__heading03 {
  width: 100%;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 0.8rem !important;
}

.topic_main p {
  font-size: 1.6rem;
}

.p-topic__flowFlame {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 1.6rem;
}

.p-topic__flowUnit {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: stretch;
  min-height: 200px;
}

.p-topic__flowUnit:not(:has(.p-topic__flowNumber)) {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: fit-content;
}

.p-topic__flowNumber {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 992px) {
  .p-topic__flowNumber {
    width: 20%;
  }

  /* 最初と最後以外 */
  .p-topic__flowUnit:not(:first-of-type) .p-topic__flowNumber,
  .p-topic__flowUnit:not(:last-of-type) .p-topic__flowNumber {
    clip-path: polygon(
      100% 0,
      100% calc(100% - 3rem),
      50% 100%,
      0 calc(100% - 3rem),
      0 0,
      50% 3rem
    );
  }
  /* 最初 */
  .p-topic__flowUnit:first-of-type .p-topic__flowNumber {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 3rem),
      50% 100%,
      0 calc(100% - 3rem)
    );
  }
  /* 最後 */
  .p-topic__flowUnit:last-of-type .p-topic__flowNumber {
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    clip-path: polygon(0 0, 50% 3rem, 100% 0, 100% 100%, 0 100%);
  }

  /* サブフロー */
  .p-topic__flowUnit:not(:first-of-type) .p-topic__flowNumber.flow-sub,
  .p-topic__flowUnit:not(:last-of-type) .p-topic__flowNumber.flow-sub {
    clip-path: polygon(100% 0, 100% calc(100% - 3rem), 0 100%, 0 3rem);
  }

  /* 最初かつ、サブフロー */
  .p-topic__flowUnit:first-of-type .p-topic__flowNumber.flow-sub {
    clip-path: polygon(100% 0, 100% calc(100% - 3rem), 0 100%, 0 0);
  }

  /* 最後かつ、サブフロー */
  .p-topic__flowUnit:last-of-type .p-topic__flowNumber.flow-sub {
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 3rem);
  }

  /* サブフローが一つ前にあるメインフロー */
  .p-topic__flowUnit:not(:first-of-type) .p-topic__flowNumber.flow-sub__after {
    clip-path: polygon(
      100% 0,
      100% calc(100% - 3rem),
      50% 100%,
      0 calc(100% - 3rem),
      0 3rem
    );
  }

  /* サブフローが一つ後にあるメインフロー */
  .p-topic__flowUnit:not(:last-of-type) .p-topic__flowNumber.flow-sub__before {
    clip-path: polygon(100% 0, 100% calc(100% - 3rem), 0 100%, 0 0, 50% 3rem);
  }
}

@media screen and (max-width: 991px) {
  .p-topic__flowNumber {
    width: 30%;
  }

  /* 最初と最後以外 */
  .p-topic__flowUnit:not(:first-child) .p-topic__flowNumber,
  .p-topic__flowUnit:not(:last-child) .p-topic__flowNumber {
    clip-path: polygon(
      100% 0,
      100% calc(100% - 2rem),
      50% 100%,
      0 calc(100% - 2rem),
      0 0,
      50% 2rem
    );
  }
  /* 最初 */
  .p-topic__flowUnit:first-of-type .p-topic__flowNumber {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 2rem),
      50% 100%,
      0 calc(100% - 2rem)
    );
  }
  /* 最後 */
  .p-topic__flowUnit:last-of-type .p-topic__flowNumber {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    clip-path: polygon(0 0, 50% 2rem, 100% 0, 100% 100%, 0 100%);
  }

  /* サブフロー */
  .p-topic__flowUnit:not(:first-child) .p-topic__flowNumber.flow-sub,
  .p-topic__flowUnit:not(:last-child) .p-topic__flowNumber.flow-sub {
    clip-path: polygon(100% 0, 100% calc(100% - 2rem), 0 100%, 0 2rem);
  }

  /* 最初かつ、サブフロー */
  .p-topic__flowUnit:first-child .p-topic__flowNumber.flow-sub {
    clip-path: polygon(100% 0, 100% calc(100% - 2rem), 0 100%, 0 0);
  }

  /* 最後かつ、サブフロー */
  .p-topic__flowUnit:last-child .p-topic__flowNumber.flow-sub {
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 2rem);
  }

  /* サブフローが一つ前にあるメインフロー */
  .p-topic__flowUnit:not(:first-child) .p-topic__flowNumber.flow-sub__after {
    clip-path: polygon(
      100% 0,
      100% calc(100% - 2rem),
      50% 100%,
      0 calc(100% - 2rem),
      0 2rem
    );
  }

  /* サブフローが一つ後にあるメインフロー */
  .p-topic__flowUnit:not(:last-child) .p-topic__flowNumber.flow-sub__before {
    clip-path: polygon(100% 0, 100% calc(100% - 2rem), 0 100%, 0 0, 50% 2rem);
  }
}

.flow-first {
  background-color: var(--staticbar-first-color);
}

.flow-second {
  background-color: var(--staticbar-second-color);
}

.flow-third {
  background-color: var(--staticbar-third-color);
}

/*-- アクセントスタイル --*/

.flow-accent {
  background-color: var(--staticbar-accent-color);
}

.flow-accent + .p-topic__flowDetail {
  background-color: var(--staticbar-accent-color);
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  border: 1px solid var(--staticbar-accent-color);
  color: #ffffff;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

/* アクセントが最初のユニットにある場合 */
.p-topic__flowUnit:first-of-type .flow-accent {
  border-top-right-radius: 0;
}

/* アクセントが最後のユニットにある場合 */
.p-topic__flowUnit:last-of-type .flow-accent {
  border-bottom-right-radius: 0;
}

/* スプリットスタイル */
.flow-split {
  background-color: var(--staticbar-accent-color);
}

.p-topic__flowUnit:has(.flow-split) .p-topic__flowDetail {
  width: 40%;
  padding: 1.6rem 4rem 1.6rem 1.6rem;
  background-color: var(--staticbar-accent-color);
  color: var(--text-white-color);
  clip-path: polygon(
    0% 0%,
    calc(100% - 3rem) 0%,
    100% 50%,
    calc(100% - 3rem) 100%,
    0% 100%
  );
}
.p-topic__flowUnit:has(.flow-split) .p-topic__flowDetail:last-child {
  background-color: var(--staticbar-deny-color);
  padding: 1.6rem 1.6rem 1.6rem 4rem;
  color: var(--text-white-color);
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  clip-path: polygon(100% 0, 100% 100%, 0% 100%, 3rem 50%, 0% 0%);
}

/* 最後 */
.flow-last {
  background-color: var(--staticbar-last-color);
}

.p-topic__flowNumber span {
  color: #ffffff;
  font-weight: 600;
}

@media screen and (min-width: 992px) {
  .p-topic__flowNumber span {
    font-size: 48px;
  }
}

@media screen and (max-width: 991px) {
  .p-topic__flowNumber span {
    font-size: 36px;
  }
}

.p-topic__flowDetail {
  display: flex;
  width: 80%;
  flex-direction: column;
  gap: 1.6rem;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  margin-bottom: 3rem;
}

@media screen and (min-width: 992px) {
  .p-topic__flowDetail {
    width: 80%;
    margin-bottom: 3rem;
  }
}

@media screen and (max-width: 991px) {
  .p-topic__flowDetail {
    width: 70%;
    margin-bottom: 2rem;
  }
}

.p-topic__flowUnit:last-child .p-topic__flowDetail {
  margin-bottom: 0 !important;
}

.p-topic__flowHeading {
  font-size: 1.6rem;
  font-weight: 600;
}

.p-topic__flowDetail p {
  font-size: 1.6rem;
  line-height: 1.4;
}

.p-topic__flowDetail p .p-button__tertiary {
  padding-right: 0.8rem;
}

.p-topic__flowthumbnail {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-topic__flowthumbnail img {
  border: 1px solid #dee2e6;
  height: auto;
}

/* スクショにキャプションを入れる場合 */
.p-topic__flowthumbnail:has(p) {
  flex-direction: column;
  gap: 0.8rem;
}

.p-topic__flowthumbnail p {
  font-size: 1.4rem;
}

@media screen and (min-width: 992px) {
  .p-topic__flowthumbnail img,
  .p-topic__flowthumbnail p {
    width: 80%;
  }
}

@media screen and (max-width: 991px) {
  .p-topic__flowthumbnail img,
  .p-topic__flowthumbnail p {
    width: 100%;
  }
}

/* スクショがPCとSPで異なる場合、横に並べるクラス（基本的に2枚まで、それ以上出したい場合は画像を作成して1枚だけ載せる対応にする） */
.p-topic__flowthumbnail .p-topic__flowImages {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}

.p-topic__flowImages img {
  height: 200px;
  width: 100%;
  object-fit: contain;
}

/* フローの中で二極化するとき */
.p-topic__flowSplit {
  display: flex;
  flex-direction: row;
  gap: 1.6rem;
}

.p-topic__flowSplit .p-topic__flowDetail {
  flex-grow: 1;
}

.p-topic__flowSplit .p-topic__flowthumbnail img {
  width: 100%;
}

.p-topic__flowVertical {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.p-topic__flowPattern {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.p-topic__flowSubtitle {
  font-weight: 600;
}

.p-topic__flowGrid-flame {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2.4rem;
}

.p-topic__flowGrid-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0.8rem;
}

.p-topic__flowGrid-item .p-topic__flowthumbnail {
  align-items: flex-start;
}

.p-topic__flowGrid-item p {
  width: 100%;
}

/* やることリスト */
.p-topic__todolist {
  padding: 1.6rem 3.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 80%;
  margin: 0 auto;
  border-radius: 0.375rem;
  background-color: #fafafa;
}

.p-topic__todolist li {
  list-style: none;
  padding-left: 3rem;
  padding-bottom: 0.5rem;
  position: relative;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  border-bottom: 1px dotted #333333;
}

.p-topic__todolist li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.p-topic__todolist li::before {
  position: absolute;
  content: "";
  background-color: var(--icon-primary-color);
  height: 1.5em;
  width: 1.5em;
  border-radius: 0.375rem;
  border: #dee2ed solid 1.5px;
  left: 0;
}

.p-topic__todolist li a {
  left: 0;
  position: relative;
  padding-right: 2.4rem;
}

.p-topic__todolist li a::before {
  position: absolute;
  content: "";
  mask-image: var(--svg-check);
  background-color: #ffffff;
  width: 1em;
  height: 1em;
  top: 50%;
  left: -27px;
  transform: translateY(-50%);
}

.p-topic__todolist li a::after {
  position: absolute;
  content: "";
  mask-image: var(--svg-arrow-down-circle-fill);
  background-color: var(--icon-primary-color);
  width: 1em;
  height: 1em;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.p-topic__heading-todo {
  position: relative;
  padding-left: 3rem;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
}

.p-topic__heading-todo::before {
  position: absolute;
  content: "";
  background-color: var(--icon-primary-color);
  height: 1.5em;
  width: 1.5em;
  border-radius: 0.375rem;
  border: #dee2ed solid 1.5px;
  left: 0;
}

.p-topic__heading-todo span {
  left: 0;
  position: relative;
}

.p-topic__heading-todo span::before {
  position: absolute;
  content: "";
  mask-image: var(--svg-check);
  background-color: #ffffff;
  width: 1em;
  height: 1em;
  left: -27px;
  top: 50%;
  transform: translateY(-50%);
}

.p-topic__flowDetail:has(.p-topic__heading-todo) {
  padding-bottom: 1.6rem;
  border-bottom: 1px dotted #333333;
  margin-bottom: 0;
}

/* フローの中にアンカーリンクを入れる */
.p-topic__anchorLink-flame {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.05rem 1.6rem;
  padding-bottom: 3rem;
  padding-left: 0.5rem;
  font-size: 1.6rem;
}

.p-topic__anchorLink-item {
  display: table;
  border: var(--anchorJump-borderwidth) var(--anchorJump-borderstyle)
    var(--staticbar-accent-color);
  border-radius: 0.75rem;
}

.p-topic__anchorLink-item::after {
  width: 5rem;
  height: calc(100% + 1.25rem);
  top: 0;
  right: 0;
  transform: translate(0, 0);
  background-color: var(--staticbar-accent-color);
  clip-path: polygon(
    100% 0,
    100% calc(100% - 1.25rem),
    50% 100%,
    0 calc(100% - 1.25rem),
    0 0
  );
  border: 2px var(--anchorJump-borderstyle) var(--staticbar-accent-color);
  border-top-right-radius: 0.75rem;
}

.p-topic__anchorLink-item > a {
  display: table-cell;
  vertical-align: middle;
  padding: 1.25rem 7rem 1.25rem 2rem;
  text-decoration: none;
  font-weight: 600;
  color: #333333;
}

/* 操作ログ・登録状況　変更内容モーダル */
/* TODO:あとでCSSの位置を変える */
.detail-flame {
  display: grid;
  width: 100%;
  column-gap: 0.4rem;
}

.detail-row {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
  border-bottom: 1px dotted #dee2e6;
}

.detail-row:last-child {
  border-bottom: none;
}

/* 
.detail-row:nth-child(odd) {
  background-color: #eeeeee;
}

.detail-row:nth-child(even) {
  background-color: #ffffff;
} */

.detail-key,
.detail-value {
  padding: 0.4rem 0.8rem;
}

.detail-key {
  text-wrap: nowrap;
  max-width: 40%;
  font-weight: 600;
}

.detail-value {
  text-wrap: wrap;
}

/* --------------- chat --------------- */
/* pc ←→ sp切替クラス */
@media screen and (min-width: 992px) {
  .p-chat__pc {
    display: block;
  }

  .p-chat__sp {
    display: none;
    visibility: hidden;
  }
}

@media screen and (max-width: 991px) {
  .p-chat__pc {
    display: none;
    visibility: hidden;
  }

  .p-chat__sp {
    display: block;
  }
}

/* chat-card */
.p-chat__meta-area {
  width: 100%;
  display: flex;
  /* min-height: 48px; */
  border-radius: 0.75rem;
  border: none;
  box-shadow: var(--boxshadow-primary-style);
  font-size: 1.6rem;
  padding: 1rem 1.6rem;
  gap: 0;
  flex-direction: row;
  background-color: #ffffff;
}

.p-chat__area-icon {
  display: flex;
  align-items: center;
  width: fit-content;
  padding-left: 1.8rem;
}

/* 未読表示 */
.p-chat__meta-area.unread .p-chat__area-icon {
  position: relative;
}

.p-chat__meta-area.unread .p-chat__area-icon::before {
  position: absolute;
  content: "未読";
  mask-image: var(--svg-dot);
  mask-repeat: no-repeat;
  mask-size: 100%;
  width: 5rem;
  height: 5rem;
  left: -2rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--chat-notice-bgcolor);
  color: var(--icon-primary-color);
}

@media screen and (max-width: 991px) {
  .p-chat__meta-area.unread .p-chat__area-icon::before {
    left: -2.7rem;
  }
}

.p-chat__area-detail {
  display: flex;
  flex-direction: row;
  gap: 0;
  flex-grow: 1;
  max-width: 88%;
  justify-content: space-between;
}

.p-chat__area-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 78%;
  padding: 0.4rem 0;
  justify-content: space-between;
}

/* 条件分岐 - ステータスがなかった場合 */
.p-chat__area-info:not(:has(.p-chat__user-status:not(:has(span)))) {
  justify-content: flex-end;
}

.p-chat__area-button {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  width: 20%;
}

.p-chat__icon-flame {
  margin: 0 4rem 0 0.6rem;
  height: 7.2rem;
  width: 7.2rem;
  border-radius: 36px;
  border: 1px solid #dee2e6;
  box-shadow: inset 0 1px #dee2e6;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 991px) {
  .p-chat__meta-area {
    padding: 2rem;
  }

  .p-chat__area-icon {
    padding-left: 1.2rem;
  }

  .p-chat__area-detail {
    flex-direction: column;
  }

  .p-chat__area-info {
    width: 75%;
    justify-content: flex-start;
  }

  .p-chat__area-button {
    width: 75%;
    justify-content: flex-end;
  }

  .p-chat__icon-flame {
    margin: 0 1.6rem 0 0;
  }

  .p-chat__user-detail span {
    font-size: 1.6rem;
  }
}

.p-chat__icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
  padding: 0.25rem;
}

.p-chat__icon img {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 100%;
}

.p-chat__icon img[src*="group-icon.svg"],
.p-chat__icon img[src*="navichan"] {
  filter: var(--icon-primary-color-filter);
}

/* ピン止め */
.p-chat__meta-area.pinned .p-chat__icon {
  position: relative;
}

.p-chat__meta-area.pinned .p-chat__icon::before {
  position: absolute;
  content: "";
  background-color: var(--icon-primary-color);
  border: 2px solid #dee2e6;
  border-radius: 50%;
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  right: -0.3rem;
  bottom: -0.3rem;
}

.p-chat__meta-area.pinned .p-chat__icon::after {
  position: absolute;
  content: "ピン止め";
  mask-image: var(--svg-pin-angle-fill);
  mask-repeat: no-repeat;
  mask-size: 100%;
  background-color: var(--icon-white-color);
  color: var(--text-white-color);
  z-index: 3;
  width: 1.4rem;
  height: 1.4rem;
  right: 0.15rem;
  bottom: 0.15rem;
}

.p-chat__user-status {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  text-wrap: nowrap;
}

.p-chat__user-status span {
  width: fit-content;
  height: fit-content;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0.3rem 1rem;
}

/* 条件分岐 */
.p-chat__area-info:not(:has(.p-chat__user-status)),
.p-chat__area-info:not(:has(.p-chat__user-status > span)) {
  justify-content: center !important;
}

.p-chat__user-detail h3,
.p-chat__user-detail a {
  font-size: 2rem;
}

.p-chat__user-detail span {
  padding-bottom: 0.4rem;
}

.p-chat__user-detail a::before {
  top: 0.25em !important;
}

@media screen and (max-width: 991px) {
  .p-chat__user-detail a::before {
    top: unset !important;
  }
}

.p-chat__user-detail span {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.p-chat__user-detail a {
  width: fit-content;
}

/* グループの表示 */
.p-chat__user-detail h3:has(> span) {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.4rem;
}

.p-chat__user-detail h3:has(> span) span {
  width: fit-content;
}

.p-chat__user-detail h3:has(> span) span:nth-child(2) {
  white-space: nowrap;
  text-overflow: unset;
  overflow: unset;
  padding-left: 1.4rem;
  padding-right: 1.4rem;
  position: relative;
}

.p-chat__user-detail h3:has(> span) span:nth-child(2)::before {
  position: absolute;
  content: "(";
  left: 0;
  color: var(--text-primary-color);
}

.p-chat__user-detail h3:has(> span) span:nth-child(2)::after {
  position: absolute;
  content: ")";
  right: 0;
  color: var(--text-primary-color);
}

.p-chat__flame-button {
  display: flex;
  flex-direction: row;
  column-gap: 0.4rem;
  font-size: 1.6rem;
  align-items: flex-end;
}

@media screen and (max-width: 991px) {
  .p-chat__flame-button {
    column-gap: 0;
    align-items: flex-start;
  }
}

.p-chat__flame-button button {
  width: fit-content;
  border: none;
  background-color: #ffffff;
}

.p-chat__flame-button button span {
  padding-left: 1.8rem;
  text-wrap: nowrap;
}

.chat-pin::before {
  mask-image: var(--svg-pin-angle-fill);
  background-color: var(--icon-primary-color);
  top: 50%;
  transform: translateY(-50%);
}

.chat-pinned::before {
  mask-image: var(--svg-pin-angle-fill);
  background-color: var(--icon-primary-color);
}

.chat-delete::before {
  mask-image: var(--svg-trash-fill);
  background-color: var(--icon-primary-color);
}

/* 一覧 */
.p-chat__list-flame {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 1.5rem 0;
}

ul.p-chat__list-flame {
  padding-left: 0;
}

.p-chat__list-item {
  position: relative;
}

li.p-chat__list-item {
  list-style: none;
}

.p-chat__list-item a {
  z-index: 1010;
}

.p-chat__list-item .p-chat__area-button {
  position: absolute;
  bottom: 1rem;
  right: 1.6rem;
  z-index: 3;
}

/* チャット内 */
.p-chat__flame {
  display: block;
  /* overflow-y: scroll;
  height: calc(100vh - 100px);
  scrollbar-width: none; */
  max-height: calc(100vh - 80px);
}

@media screen and (max-width: 991px) {
  .p-chat__flame {
    /* height: calc(100vh - 322px); */
    overflow-x: hidden;
    overflow-y: hidden;
  }
}

.p-chat__flame time {
  font-size: 1.4rem;
}

.p-chat__flame .p-chat__meta-area {
  height: fit-content;
  top: 0;
  z-index: 1020;
}

/* グループプロフィールリンク */
.p-chat__header {
  position: sticky;
  top: 0;
  z-index: 1020;
}

.p-chat__headInner {
  position: relative;
}

.p-chat__headInner .p-chat__area-button {
  position: absolute;
  bottom: 1rem;
  right: 1.6rem;
  z-index: 1020;
}

/* チャット操作するところ */
.p-chat__form {
  width: 100%;
  border-radius: 38px;
  background-color: #ffffff;
  box-shadow: var(--boxshadow-primary-style);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.6rem 2.4rem;
  /* position: sticky; */
  /* bottom: 0.2rem;
  z-index: 1020;
  margin-bottom: 0.2rem; */
  transition: 0.6s;
}

form:has(.p-chat__form) {
  /* position: relative; */
  bottom: 0.2rem;
  z-index: 1020;
  margin-bottom: 0.2rem;
  /* position: sticky; */
}
/* 
.p-chat__form {
  position: absolute;
  bottom: 0;
} */

@media screen and (max-width: 991px) {
  .p-chat__form {
    width: 100%;
    background-color: #ffffff;
    border-radius: 0;
    box-shadow: unset;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: sticky;
    bottom: 0;
    z-index: 1020;
    padding: 1.6rem 0.2rem;
    transition: 0.6s;
  }
}

/* .p-chat__form-flame {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
} */

.p-chat__form.is-options-open #btnOptionsOpen {
  display: none;
}

.p-chat__form-top {
  display: none;
}

.is-options-open .p-chat__form-top {
  /* position: absolute;
  padding: 1.6rem 2.4rem 0 1.6rem;
  display: flex;
  justify-content: space-between;
  transition: 0.6s;
  width: 100%;
  bottom: 77.6px;
  background-color: #ffffff;
  border-radius: 38px 38px 0 0;
  border-top: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
  border-left: 1px solid #dee2e6; */
  display: flex;
  justify-content: space-between;
  transition: 0.6s;
}

@media screen and (max-width: 767px) {
  .is-options-open .p-chat__form-top {
    padding: 1.6rem 0;
    border-radius: 0;
    border: none;
  }
}

.p-chat__form-topLeft {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

@media screen and (max-width: 991px) {
  .is-options-open .p-chat__form-top {
    flex-direction: row;
  }

  .p-chat__form-topLeft .p-form__flame-checklist {
    gap: 0.8rem;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
  }
}

.p-chat__form-topButton {
  display: flex;
  gap: 0.8rem;
}

.toolBtn {
  font-size: 1.6rem;
  padding: 1rem 1.6rem;
  border-radius: 0.75rem;
  border: 1px solid #dee2e6;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.toolBtn.is-active {
  background-color: var(--chat-btn-primary-bgcolor);
  color: #ffffff;
}

.toolBtn span {
  position: relative;
  display: block flow-root;
  font-size: 1.6rem;
  color: var(--chat-btn-primary-noactive-color);
  width: 3rem;
  height: 100%;
}

.toolBtn span::before {
  position: absolute;
  content: attr(data-pseudo);
  mask-repeat: no-repeat;
  mask-size: cover;
  width: 1.5em;
  height: 1.5em;
  background-color: var(--chat-btn-primary-noactive-bgcolor);
  left: 0.25em;
}

.toolBtn.is-active span::before {
  background-color: #ffffff;
  color: #ffffff;
}

.toolBtn#btnImage span::before {
  mask-image: var(--svg-image-fill);
}

.toolBtn#btnFile span::before {
  mask-image: var(--svg-paperclip);
  transform: rotate(45deg);
}

.toolBtn#btnMsg span::before {
  mask-image: var(--svg-exclamation);
}

.toolBtn#btnMail span::before {
  mask-image: var(--svg-envelope);
}

#imagePanel,
#filePanel {
  display: none;
}

#msgInput {
  display: block;
}

.chatComposer.mode-image #msgInput {
  display: none;
}

.chatComposer.mode-image #imagePanel {
  display: block;
}

.chatComposer.mode-file #msgInput {
  display: none;
}

.chatComposer.mode-file #filePanel {
  display: block;
}

.p-chat__form-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.p-chat__form-text {
  display: flex;
  gap: 0.8rem;
  width: 100%;
}

.p-chat__form-textarea {
  flex-grow: 1;
}

.p-chat__form-textarea input,
.p-chat__form-textarea textarea {
  border-radius: 22.8px;
  border: 1px solid #dee2e6;
  padding: 1rem 1.6rem;
  min-height: 45.6px;
  width: 100%;
}

@media screen and (max-width: 991px) {
  .p-chat__form-textarea input,
  .p-chat__form-textarea textarea {
    border-radius: 15px;
  }

  .p-chat__form-textarea input:focus,
  .p-chat__form-textarea textarea:focus,
  .p-chat__form-textarea input:active,
  .p-chat__form-textaere textarea:active {
    border-radius: 15px;
  }
}

.p-chat__form-textarea textarea {
  resize: horizontal;
  line-height: 1.6em;
  max-height: calc(1.6em * 5);
  overflow-y: auto;
}

@media screen and (max-width: 991px) {
  .p-chat__form-textarea textarea {
    max-height: calc(1.6em * 2);
  }
}

.p-chat__form-textarea input {
  padding: 0.2rem;
}

.p-chat__form-text input::file-selector-button {
  border: none;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  height: 100%;
  padding: 1rem 1.6rem;
}

/* バリデーションメッセージ */
.p-chat__form-textarea input.is-invalid,
.p-chat__form-textarea textarea.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}

.p-chat__form-text button {
  align-self: flex-end;
  height: 45.6px;
  border-radius: 22.8px;
  border: none;
  padding: 1rem 1.6rem;
  font-size: 1.6rem;
  /* width: fit-content; */
  /* height: fit-content; */
  background-color: var(--chat-btn-primary-bgcolor);
  color: #ffffff;
}

@media screen and (max-width: 991px) {
  .p-chat__form-text button {
    aspect-ratio: 1 / 1;
  }
}

/* ファイルを削除ボタン */
.p-chat__form-text button.button__delete {
  background-color: var(--btn-secondary-delete-bgcolor);
  color: var(--btn-secondary-delete-color);
}

@media screen and (max-width: 991px) {
  .p-chat__form-text button {
    padding: 0.8rem;
    text-wrap: nowrap;
    font-size: 1.4rem;
    position: relative;
  }

  .p-chat__form-text button#btnSend {
    font-size: 1.6rem;
    position: relative;
    display: block flow-root;
    width: 45.6px;
    height: 45.6px;
  }

  .p-chat__form-text button#btnSend::before {
    position: absolute;
    content: attr(data-pseudo);
    mask-image: var(--svg-send);
    mask-repeat: no-repeat;
    mask-size: cover;
    width: 1.5em;
    height: 1.5em;
    background-color: #ffffff;
    left: 0.6em;
    top: 0.75em;
  }

  /* モード別 */
  .mode-image .p-chat__form-text button,
  .mode-file .p-chat__form-text button {
    align-self: flex-start;
  }

  .mode-image .p-chat__form-textarea,
  .mode-file .p-chat__form-textarea {
    max-width: 85%;
  }
}

.p-chat__actionBtn,
.p-chat__actionBtn:active {
  align-self: flex-start !important;
  border-radius: 22.8px;
  border: none;
  width: 45.6px;
  height: 45.6px;
  font-size: 1.6rem;
  background-color: var(--chat-btn-primary-bgcolor);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-chat__actionBtn span {
  position: relative;
  display: block flow-root;
  font-size: 1.6rem;
  color: #ffffff;
}

.p-chat__actionBtn span::before {
  position: absolute;
  content: attr(data-pseudo);
  mask-image: var(--svg-plus);
  mask-repeat: no-repeat;
  mask-size: cover;
  width: 2em;
  height: 2em;
  background-color: #ffffff;
  left: -1em;
  top: -1em;
}

.p-chat__actionBtn#btnOptionsClose span::before {
  transform: rotate(45deg);
}
/* 
.p-chat__actionBtn#btnOptionsOpen span::before {
  left: 0;
} */

.p-chat__form-button {
  padding: 1rem 1.6rem;
  border-radius: 9999px;
  border: 1px solid #dee2e6;
  font-size: 1.6rem;
}

#btnImage.p-chat__form-button span::before {
  mask-image: var(--svg-picture);
}

/* チャットのキャプション */
.p-chat__form-caption {
  /* display: none; */
  display: block;
  /* overflow-y: scroll; */
  /* max-height: 60px; */
  /* scrollbar-width: thin; */
  padding: 0 0.4rem;
}

/* .mode-image .p-chat__form-caption li.rule-image {
  display: list-item;
}

.mode-image .p-chat__form-caption li.rule-text,
.mode-image .p-chat__form-caption li.rule-file {
  display: none;
}

.mode-file .p-chat__form-caption li.rule-file {
  display: list-item;
}

.mode-file .p-chat__form-caption li.rule-image,
.mode-file .p-chat__form-caption li.rule-text {
  display: none;
} */

/* .p-chat__form-text:has(textarea:focus) + .p-chat__form-caption {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
} */

.p-chat__detail {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  /* z-index: 1000; */
}

.p-chat__list-area:has(.p-chat__detail) {
  /* max-height: calc(100vh - 100px);
  height: 100%; */
  max-height: calc(100vh - 193px);
  min-height: calc(100vh - 193px);
  display: flex;
  flex-direction: column;
  /* grid-template-rows: auto 1fr; */
  /* margin-top: -100px;
  padding-top: 100px;
  margin-bottom: -77.6px;
  padding-bottom: 77.6px; */
  /* overflow-y: scroll;
  scrollbar-width: none; */
}

@media screen and (max-width: 991px) {
  .p-chat__list-area:has(.p-chat__detail) {
    min-height: calc(100vh - 272px);
  }
}

.p-chat__list-scroll:has(> .p-chat__detail) {
  flex-grow: 1;
  overflow-y: scroll;
  scrollbar-width: none;
  /* min-height: calc(100vh - 276.5px); */
}

.p-chat__date {
  display: flex;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  justify-content: center;
  align-items: center;
}

.p-chat__unread {
  width: 100%;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--icon-primary-color);
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  color: var(--icon-primary-color);
}

.p-chat__msg-flame {
  width: 100%;
  display: flex;
}

.p-chat__msg-flame:has(> .mymessage) {
  justify-content: flex-end;
}

.p-chat__msg-flame:has(> .othermessage) {
  justify-content: flex-start;
}

.p-chat__msg {
  width: 100%;
}

.p-chat__msg-block1 {
  display: flex;
  max-width: 100%;
}

.mymessage .p-chat__msg-block1 {
  justify-content: flex-end;
}

.othermessage .p-chat__msg-block1 {
  justify-content: flex-start;
  gap: 0.4rem;
}

.p-chat__msg-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 25px;
  background-color: #ffffff;
  transform: translateY(2.5rem);
}

.mymessage .p-chat__msg-icon {
  border: 3px solid #e0ffe6;
}

.othermessage .p-chat__msg-icon {
  border: 3px solid #eeeeee;
}

.p-chat__msg-icon img {
  width: 100%;
  height: 100%;
  clip-path: circle(50% at 50% 50%);
}

.p-chat__msg-icon img[src*="svg"] {
  filter: var(--icon-primary-color-filter);
}

.p-chat__msg-block2 {
  display: flex;
  gap: 0.8rem;
}

.mymessage .p-chat__msg-block2 {
  margin-right: 25px;
  flex-direction: row-reverse;
}

.othermessage .p-chat__msg-block2 {
  margin-left: 25px;
  flex-direction: row;
}

@media screen and (max-width: 767px) {
  .mymessage .p-chat__msg-block2 {
    margin-right: 0;
  }
}

.p-chat__msg-text {
  padding: 1.6rem 2.4rem;
  border-radius: 0.75rem;
  max-width: 65%;
  min-width: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary-color);
}

@media screen and (max-width: 991px) {
  .p-chat__msg-text {
    padding: 1.6rem 3rem;
  }
}

/* メッセージオーナー判断 */
.mymessage .p-chat__msg-text {
  background-color: var(--chat-mymessage-bgcolor);
}

.othermessage .p-chat__msg-text {
  background-color: var(--chat-othermessage-bgcolor);
}

.p-chat__msg-text p {
  font-size: 1.6rem;
  letter-spacing: 1px;
  text-wrap: wrap;
}

/* メッセージ削除 */
.msg-delete p {
  font-size: 1.4rem;
}

.othermessage.msg-delete .p-chat__msg-block2 {
  margin-left: 0;
}

/* 画像添付時 */
.p-chat__msg-flame:has(.p-chat__msg-img) {
  object-fit: contain;
}

.p-chat__msg:has(img),
.p-chat__msg-block2:has(img),
.p-chat__msg-text:has(img),
.p-chat__msg-text > .p-chat__msg-img {
  height: 100%;
}

.p-chat__msg-img img {
  height: 20vh;
  width: auto;
}

@media screen and (max-width: 991px) {
  .p-chat__msg-img img {
    height: auto;
    width: 100%;
  }
}

/* ファイル添付時 */
.p-chat__msg-text > .p-chat__msg-file {
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 0.375rem;
  font-size: 1.4rem;
  box-shadow: var(--boxshadow-primary-style);
  width: 100%;
}

/* .p-chat__msg-file:has(.download) {
  position: relative;
} */

.p-chat__msg-text:has(.p-chat__msg-file) {
  max-width: 30%;
}

@media screen and (max-width: 991px) {
  .p-chat__msg-text:has(.p-chat__msg-file) {
    max-width: 80%;
  }
}

/* .p-chat__msg-file:has(.download)::after {
  mask-image: var(--svg-fa-download);
  background-color: #333333;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
} */

.p-chat__msg-text a {
  padding: 0 2.4rem;
}

.p-chat__msg-file a {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-chat__msg-file a::before {
  mask-image: var(--svg-filetype-pdf);
  background-color: #be0000;
  display: inline-block;
  width: 2rem;
  height: 2rem;
}

.p-chat__msg-info {
  display: flex;
  flex-direction: column;
}

.mymessage .p-chat__msg-info {
  justify-content: flex-end;
  align-items: flex-end;
}

.othermessage .p-chat__msg-info {
  justify-content: flex-start;
  align-items: flex-start;
}

.p-chat__msg-info:has(.p-chat__msg-label-flame) {
  justify-content: space-between;
}

.p-chat__msg-text:has(.editing)
  + .p-chat__msg-info:has(.p-chat__msg-label-flame) {
  margin-bottom: 3.1rem;
}

.p-chat__msg-label-flame {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mymessage .p-chat__msg-label-flame {
  align-items: flex-end;
}

.othermessage .p-chat__msg-label-flame {
  align-items: flex-start;
}

.p-chat__msg-label-flame span {
  font-size: 1rem;
  width: fit-content;
  height: fit-content;
  border-radius: 0.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0.3rem 1rem;
  text-wrap: nowrap;
}

.p-chat__msg-label-important {
  background-color: #fbc5c5;
  color: #820202;
}

.p-chat__msg-label-edit {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #999999;
}

.p-chat__msg-button {
  display: flex;
  justify-content: flex-end;
  padding-right: 2.5rem;
  margin-top: 0.8rem;
  margin-bottom: 0.2rem;
  gap: 0.2rem;
}

@media screen and (max-width: 991px) {
  .p-chat__msg-button {
    padding-right: 0.8rem;
    margin-top: 0.4rem;
  }
}

.p-chat__msg-button button {
  font-size: 1.4rem;
  background-color: #ffffff;
  border: none;
}

.p-chat__msg-user {
  display: flex;
  max-width: calc(100% - 5rem);
  gap: 0.4rem;
  transform: translateY(2.5rem);
  align-items: flex-start;
  flex-wrap: nowrap;
}

.p-chat__msg-user p {
  font-size: 1.4rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.p-chat__msg-user span {
  font-size: 1rem;
}

/* --- メッセージ編集時 --- */
/* 編集時の表示切替 */
.p-chat__msg-text.editing .p-chat__msg-article {
  display: none;
}

.p-chat__msg-text .p-chat__msg-editFlame {
  display: none;
}

.p-chat__msg-text.editing + .p-chat__msg-info .p-chat__msg-label-edit {
  display: none;
}

.p-chat__msg-block2:has(.p-chat__msg-text.editing) + .p-chat__msg-button {
  display: none;
}

.p-chat__msg-text:has(.editing) {
  width: 100%;
  padding: 1.6rem 2.4rem 0.8rem;
  margin-bottom: 3.1rem;
}

@media screen and (max-width: 991px) {
  .p-chat__msg-text:has(.editing) {
    min-width: 60%;
    max-width: unset;
    flex-grow: 1;
  }
}

.p-chat__msg-text .editing {
  width: 100%;
}

.p-chat__msg-text .editing form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: flex-end;
}

.p-chat__msg-text.editing .p-chat__msg-editFlame {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
  gap: 0.4rem;
}

.p-chat__msg-editFlame textarea,
.p-chat__msg-editFlame input {
  width: 100%;
}

.p-chat__msg-editFlame textarea {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
}

.p-chat__msg-editFlame input {
  border: 1px solid #dee2e6;
  background-color: #ffffff;
  padding: 1rem;
}

.p-chat__msg-editFlame input::file-selector-button {
  border: none;
}

.p-chat__msg-edit-area {
  width: 100%;
}

.p-chat__msg-edit-buttons {
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
}

.p-chat__msg-edit-buttons button {
  padding: 1rem 1.6rem;
  font-size: 1.4rem;
  border: 1px solid #dee2e6;
  border-radius: 9999px;
}

@media screen and (max-width: 991px) {
  .p-chat__msg-text.editing {
    padding: 0.8rem;
  }

  .p-chat__msg-text.editing .p-chat__msg-editFlame {
    gap: 0.8rem;
  }

  .p-chat__msg-edit-buttons button {
    padding: 0.8rem;
  }
}

.editing .multiple-wrapper {
  background-color: #ffffff;
  padding: 1rem 1.6rem;
  border-radius: 0.75rem;
}

.p-chat__msg-edit-buttons button:first-child {
  background-color: var(--btn-secondary-clear-bgcolor);
  color: #666666;
}

.p-chat__msg-edit-buttons button:last-child {
  background-color: var(--chat-btn-primary-bgcolor);
  border-color: var(--btn-primary-bgcolor);
  color: #ffffff;
}

/* 削除済みメッセージ */
.msg-delete .p-chat__msg-text {
  flex-direction: column;
  gap: 0.4rem;
  min-width: 80%;
  border-radius: 4rem;
  border: 2px dashed #999999;
  background-color: #fefefe;
  color: #333333;
  font-size: 1.4rem;
  font-weight: 600;
  justify-content: center;
}

/* システムメッセージ */
.p-chat__system-msg {
  width: 100%;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1rem 1.6rem;
  font-size: 1.4rem;
  color: #333333;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
  margin: 0 2.5rem;
}

/* チャットが一件も表示されていないとき */
.p-chat__list-area:has(.p-chat__nomessage) {
  z-index: 1010;
  height: calc(100vh - 100px);
}

@media screen and (max-width: 767px) {
  .p-chat__list-area:has(.p-chat__nomessage) {
    height: calc(100vh - 174px);
  }
}

.p-chat__list-scroll:has(> .p-chat__detail > .p-chat__nomessage) {
  height: 100%;
}

.p-chat__detail:has(.p-chat__nomessage) {
  height: 100%;
}

.p-chat__flame:has(.p-chat__nomessage) {
  height: auto;
}

.p-chat__nomessage {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.p-chat__nomessage img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(20%) saturate(20%)
    hue-rotate(329deg) brightness(102%) contrast(89%);
}

@media screen and (min-width: 992px) {
  .p-chat__nomessage img {
    height: 90%;
  }
}

@media screen and (max-width: 991px) {
  .p-chat__nomessage img {
    width: 100%;
  }
}

/* チャット一覧 - 検索メニューまわり */

.switch_disp_buttons.p-chat__search button {
  width: 240px;
}

.switch_disp_buttons.p-chat__search button span {
  padding-left: 0;
}

/* グループプロフィール */
.p-chat__table {
  display: flex;
  flex-direction: column;
}

.p-chat__table-item {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.p-chat__table-heading {
  display: flex;
  align-items: center;
  padding: 1rem 1.6rem;
  font-size: 1.6rem;
  font-weight: 600;
  background-color: #eeeeee;
}

.p-chat__table-item .p-chat__table-heading:first-child {
  justify-content: center;
}

.p-chat__table-item p-chat__table-heading:last-child {
  justify-content: flex-start;
}

.p-chat__table-checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-chat__table-item:has(.p-chat__meta-area) {
  border-radius: 0.75rem;
  border: none;
  box-shadow: var(--boxshadow-primary-style);
  background-color: #ffffff;
}

.p-chat__table-item .p-chat__meta-area {
  border-radius: unset;
  box-shadow: unset;
  background-color: unset;
}

/* チャットグループ作成 */

.p-chat__members-flame {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.p-chat__members-item {
  display: flex;
  flex-direction: row;
  gap: 0.8rem;
  align-items: center;
  padding: 0.5rem 0.8rem;
  font-size: 1.4rem;
  border-radius: 0.5rem;
  background-color: #eaeaea;
}

.p-chat__members-item:has(> span) {
  padding: 0.5rem;
  background-color: unset;
  font-size: 1.6rem;
  font-weight: 400;
}

.p-chat__complete {
  text-align: center;
  font-size: 1.6rem;
  color: var(--text-primary-color);
  margin: 2.4rem 0 3.2rem 0;
}

/* ------ チャットの通知表示 ------ */

/* デザイン1:グローバルナビゲーションに表示 */

.gloNavi-list:has(li:nth-child(9)) {
  justify-content: space-between;
  width: 100%;
}

.gloNavi-item.notice span {
  position: relative;
  padding-right: 2.4rem;
}

.gloNavi-item.notice span::after {
  position: absolute;
  content: "未読あり";
  mask-image: var(--svg-dot);
  mask-size: 100%;
  mask-repeat: no-repeat;
  background-color: var(--chat-notice-bgcolor);
  color: var(--chat-notice-bgcolor);
  width: 4rem;
  height: 4rem;
  top: 50%;
  transform: translateY(-50%);
  right: -1rem;
}

.header_menu_link.unread {
  position: relative;
}

.header_menu_link.unread::after {
  position: absolute;
  content: "未読のチャットあり";
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-white-color);
  background-color: var(--chat-notice-bgcolor);
  padding: 0.5rem 0.8rem;
  border-radius: 9999px;
  top: 50%;
  transform: translateY(-50%);
  right: 2.8rem;
}

/* さらに表示 */
.p-chat__load-more {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
  padding: 0 1.5rem;
}

.p-chat__load-more button {
  border-radius: 9999px;
  padding: 0 1.6rem;
}

.p-chat__load-more button span {
  padding-left: 2.4rem;
  width: fit-content;
}

.p-chat__load-more button span::before {
  mask-image: var(--svg-arrow-up);
  left: 0;
  transform: translateY(-50%);
  top: 50%;
}

@media screen and (min-width: 992px) {
  .p-chat__load-more button {
    width: fit-content;
  }
}

@media screen and (max-width: 991px) {
  .p-chat__load-more button {
    width: 100%;
  }
}

/* 自治体管理画面 - 未読のチャットメッセージ */
.unread-chat-message {
  --msg-unread-bordercolor: var(--badge-important-color);
  --msg-unread-color: var(--badge-important-color);
  --msg-unread-bgcolor: var(--badge-important-bgcolor);

  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--msg-unread-bordercolor);
  padding: 1rem 1.6rem;
  color: var(--msg-unread-color);
  background-color: var(--msg-unread-bgcolor);
}