@charset "UTF-8";

/*-------------------------------------------------------------*/
/* font face Yu Gothic */
@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
  font-weight: 100;
}

@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
  font-weight: 200;
}

@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
  font-weight: 300;
}

@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
  font-weight: 400;
}

@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
  font-weight: 500;
}

@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
  font-weight: 400;
}

@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
  font-weight: bold;
}

/*-------------------------------------------------------------*/
/**
 * 変数
 * NOTE:
**/
:root {
  --site-c-main: #1c356e;
  --site-c-main-hue: #d5dde8;
  --site-c-sub: #a78c5a;
  --site-c-sub-hue: #f8f6f2;
  --site-c-black: #31322e;
  --site-c-gray: #707070;
  --site-c-silvergray: #ccc;
  --site-c-white: #fff;
  --site-c-gray-disabled: #e9e9e9;
  --site-c-gray-ui: #F3F3F3;
  --site-c-darkgray-ui: #d1d1d1;
  --site-c-bluegray-ui: #CCCECE;
  --site-c-blue: #1c356e;
  --site-c-red: #ec5937;
  --site-c-orange: #FF7200;
  --site-c-green: #28FF00;
  --site-bg-c: #fff;
  --site-bg-c-gray-ui: #f7f7f7;
  --site-bg-c-gray-ui-selected: #f6e7f1;
  --site-bg-c-black-ui: #31322e;
  --font-c: #31322e;
  --font-c-link: #1c356e;
  --font-family-jp: 'Noto Sans JP', "yugothic", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  --font-family-en: Roboto, Arial, 'Noto Sans JP', "yugothic", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  --header-height: 120px;
  --mypage-header-height: 120px;
  --mypage-side-width: 260px;
  --site-btn-height: 80px;
  --site-btn-small-height: 40px;

  /* 16px以下にするとiOSにて不具合がおきます。 */
  --site-input-fs: 16px;

  /* inputやselectの高さは必ず以下を使ってください。 */
  --site-input-height: 56px;
  --site-input-height-s: 48px;

  --site-input-gap-col: 8px;
  --site-input-gap-row: 4px;
  --site-input-border-c: #f0f0f0;
  --site-input-radius: 5px;
  --site-container-width: 1360px;
  --site-container-padding: 80px;

  scroll-padding: var(--header-height);
  scroll-behavior: smooth;
}

@media screen and (max-width: 1200.98px) {
  :root {
    --mypage-header-height: 80px;
    --mypage-side-width: 220px;
  }
}

@media screen and (max-width: 959.98px) {
  :root {
    --header-height: 64px;
    --mypage-header-height: 80px;
    --site-btn-height: 48px;
    --site-btn-small-height: 40px;
    --site-input-height: 48px;
    --site-input-height-s: 48px;
    --site-container-padding: 20px;
  }
}

@media screen and (max-width: 767.98px) {
  :root {
    --header-height: 60px;
    --site-btn-height: 56px;
    --site-btn-small-height: 40px;
    --site-input-height: 48px;
    --site-input-height-s: 48px;
    --site-container-padding: 15px;
  }
}

/*-------------------------------------------------------------*/
/**
 * CSSリセット
 * 参照元：http: //meyerweb.com/eric/tools/css/reset/
**/
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* NOTE: ここにpositionを書かないでください */
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit
}

input.btn,
button,
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: inherit;
  font-family: inherit;
}

/* iOS */
[type="submit"],
[type="button"] {
  border-radius: 0;
  border: none;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
}

[type="submit"]::-webkit-search-decoration,
[type="button"]::-webkit-search-decoration {
  display: none;
}

[type="submit"]::focus,
[type="button"]::focus {
  outline-offset: -2px;
}

.select {
  display: inline-block;
  font-size: var(--site-input-fs);
  position: relative;
}

.select.type--full-width {
  display: block;
  flex: auto;
}

.select::after {

  /* NOTE: Font Awesome Icon */
  /*content: '\f107';*/
  /*font-family: "Font Awesome 6 Free";*/
  /*-moz-osx-font-smoothing: grayscale;*/
  /*-webkit-font-smoothing: antialiased;*/
  /*display: var(--fa-display, inline-block);*/
  /*font-style: normal;*/
  /*font-variant: normal;*/
  /*font-weight: 700;*/
  /*line-height: 1;*/
  /*text-rendering: auto;*/

  content: '';
  border-style: solid;
  border-color: var(--site-c-main) transparent transparent transparent;
  border-width: 8px 7px;
  color: var(--site-c-main);
  position: absolute;
  right: 1em;
  top: 50%;
  z-index: 5;
  transform: translate(0, -25%) scale(0.75);
  transform-origin: right center;
}

.select select {
  border-radius: 10px;
  border: 1px solid var(--site-c-main);
  background: #fff;
  /* NOTE: input, textarea, select のfont-sizeは必ず、--site-input-fs変数を用いてください。 */
  font-size: var(--site-input-fs);
  font-family: inherit;
  line-height: calc(var(--site-input-height) - 2px);
  height: var(--site-input-height);
  width: 100%;
  padding: 0 2em 0 1em;
  position: relative;
  z-index: 1;
}

.select select::-ms-expand {
  display: none;
}


/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
  /*transition: 0.6s*/
}

body {
  line-height: 1
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

/**
 * 再定義
**/
html,
body {
  scroll-behavior: smooth;
}

html {
  font-size: 62.5%;
}

body {
  background: var(--site-bg-c);
  color: var(--font-c);
  font-size: 15px;
  font-weight: 400;
  font-family: var(--font-family-jp);
  line-height: 1.5;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body.detail-body {
  background-color: #f3f4f8;
  padding-bottom: 100px;
}

@media (max-width: 767px) {
  body.detail-body {
    padding-bottom: 0;
  }
}

.details-btns.stop-scrolling {
  position: absolute !important;
  bottom: auto !important;
}

body>.wrap {
  padding-top: var(--header-height);
  overflow: hidden;
}

body>.wrap.page-mypage {
  padding-top: var(--mypage-header-height);
}

table {
  letter-spacing: 0;
  empty-cells: show
}

tbody {
  position: unset
}

table tr,
table th,
table td {
  empty-cells: show;
  transition: 0.6s;
  position: unset
}

input,
select,
textarea {
  font-size: 90%;
  background: none;
  transition: 0.6s
}

[type="checkbox"],
[type="radio"] {
  accent-color: var(--site-c-main);
  width: 18px;
  height: 18px;
  margin: 1px 5px 0 0
}

[type="checkbox"]:focus,
[type="radio"]:focus,
[type="checkbox"]:hover,
[type="radio"]:hover {
  /* NOTE: ここにaccent-color以外の記述は不可です */
  accent-color: var(--site-c-main);
}

::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.3)
}

::-moz-placeholder {
  color: rgba(0, 0, 0, 0.3)
}

:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.3)
}

::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.3)
}

::placeholder {
  color: rgba(0, 0, 0, 0.3)
}

p {
  color: inherit;
  line-height: inherit;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

a:hover {
  opacity: 0.75;
}

img {
  border: none;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  /* NOTE: displayは変更不可です */
  /*display: block;*/
  vertical-align: bottom;
  transition: 0.6s;
}

/**
 * font color
**/
.fc__color {
  color: var(--site-c-main)
}

.fc__pink {
  color: #88d9d5;
}

.fc__red {
  color: #CE0D0D;
}

.fc__blue {
  color: #aee5d8;
}

.fw--300 {
  font-weight: 300;
}

.fw--400 {
  font-weight: 400;
}

.fw--500 {
  font-weight: 500;
}

.fw--600 {
  font-weight: 600;
}

.fw--700 {
  font-weight: 700;
}

.fw--800 {
  font-weight: 800;
}

.fw--900 {
  font-weight: 900;
}


/**
 * link color
**/
.c-link {
  color: var(--font-c-link);
}

.c-link.c-link--underline {
  color: var(--font-c-link);
  text-decoration: underline;
  text-decoration-thickness: 0.75px;
}

.c-link.c-link--underline:hover {
  text-decoration: none;
}

/**
 * background color
**/
.bg__color {
  background: #ebf5ff
}

.bg__gray {
  background: #fafafa
}

/**
 * display
 * NOTE:「表示」を強制させるスタイルではありません。「非表示」を強制させるスタイルです。
**/
/** SP以下のみ表示 **/
@media (min-width: 768px) {

  .sp_disp,
  .sp--disp {
    display: none !important;
  }
}

/** pc以上のみ表示 **/
@media screen and (max-width: 767.98px) {

  .pc_disp,
  .pc--disp {
    display: none !important;
  }
}

/**
 * section
**/
section {
  padding: 40px 0;
}

@media screen and (max-width: 959.98px) {
  section {
    padding: 40px 0;
  }
}

@media screen and (max-width: 767.98px) {
  section {
    padding: 15px 0;
  }
}

/**
 * container
**/
.l-container {
  width: 100%;
  max-width: var(--site-container-width);
  margin: 0 auto;
  padding: 0 var(--site-container-padding);
  position: relative;
}

/**
 * display flex
**/
.c-flex {
  display: flex;
  flex-wrap: nowrap;
}

.c-flex--wrap {
  flex-wrap: wrap;
}

.c-flex--between {
  justify-content: space-between;
}

/**
 * text align
**/
.c-text-left {
  text-align: left;
}

.c-text-center {
  text-align: center;
}

.c-text-right {
  text-align: right;
}

/**
 * list
**/
.c-list {}

.c-list--dots {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.75;
  gap: 0.25em;
}

.c-list--dots>li {
  padding: 0 0 0 1em;
  position: relative;
}

.c-list--dots>li::before {
  content: '';
  display: block;
  border-radius: 50%;
  background: var(--site-c-sub);
  width: 1em;
  height: 1em;
  position: absolute;
  left: 0;
  top: calc((1lh - 1em) * 0.5);
  z-index: 1;
  transform: scale(0.8);
  transform-origin: left center;
}

@media screen and (max-width: 767.98px) {
  .c-list--dots {}

  .c-list--dots>li {}
}

.c-list--column {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.75;
  gap: 0.25em;
}


/**
 * subpage-head
**/
.subpage-head {
  padding: 40px 0;
}

.subpage-head .l-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.subpage-head .c-head {
  width: 100%;
  margin-bottom: 0;
}

.subpage-head .c-head__lead,
.subpage-head .c-head__txt {
  font-weight: 500;
  margin: 0;
  opacity: 0.65;
}

.subpage-head *+.c-head__lead {
  margin-top: 40px;
}

.subpage-head *+.c-head__txt {
  margin-top: 1em;
}


/**
 * TITLE
**/
.c-head {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
  margin-bottom: 80px;
  position: relative;
}

*+.c-head {
  margin-top: 80px;
}

.c-head--second {
  margin-top: 80px;
}

.c-head--center {
  align-items: center;
  text-align: center;
  margin: 0 auto 40px
}

.c-head__logo {
  /*box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/
  /*background: #000;*/
  width: 200px;
  margin-bottom: 24px;
  padding: 0;
}

.c-head__logo_bg {
  background: none;
}

.c-head__logo [src*="flow__"] {
  margin-bottom: -24px;
}

@media screen and (max-width: 959.98px) {
  .c-head {
    margin-bottom: 28px;
  }

  *+.c-head {
    margin-top: 56px;
  }

  .c-head--second {
    margin-top: 48px;
  }

  .subpage-head {
    padding: 25px 0;
  }
}

@media screen and (max-width: 767.98px) {
  .c-head {
    margin-bottom: 15px;
  }

  *+.c-head {
    margin-top: 40px;
  }

  .c-head--second {
    margin-top: 40px;
  }

  .subpage-head {
    padding: 20px 0 5px;
  }

  .c-head__logo {
    width: 144px;
    margin-bottom: 16px;
  }

  .c-head__logo [src*="flow__"] {
    margin-bottom: -16px;
  }
}

.c-head__ttl {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.94;
  letter-spacing: normal;
}

.c-head__ttl .c-icon {
  display: none;
}

/*.c-head__ttl::before {
  content: attr(data-small);
  display: block;
  color: var(--font-c);
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05ex;
  text-transform: uppercase;
  margin: 0 0 28px;
}*/
/*
.c-head__ttl::after {
	content: '';
	display: block;
	border-top: solid 2px var(--site-c-main);
	width: 4em;
	margin: 1.5em 0 0;
}
*/
.c-head--center .c-head__ttl {
  margin-left: auto;
  margin-right: auto;
  color: var(--site-c-main);
}

/*
.c-head--center .c-head__ttl::after {
	margin-left: auto;
	margin-right: auto;
}
*/
.c-head__ttl:not([data-small])::before,
.c-head__ttl[data-small=""]::before {}

.c-head__ttl.text--only-jp {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.05ex;
}

.c-head__ttl.text--only-jp::before {
  display: none;
}

.c-head__ttl.text--only-jp::after {
  display: none;
}

.c-head__ttl.text--only-jp:not([data-small])::before,
.c-head__ttl.text--only-jp[data-small=""]::before {
  display: none;
}

@media screen and (max-width: 959.98px) {
  .c-head__ttl {
    font-size: 22px;
    line-height: 22px;
  }

  .c-head__ttl.text--only-jp {
    font-size: 22px;
  }
}

@media screen and (max-width: 767.98px) {
  .c-head__ttl {
    font-size: 18px;
    line-height: 1.75;
  }

  .c-head__ttl.text--only-jp {
    font-size: 18px;
  }
}

.c-head__ttl--link {}

.c-head__ttl--link.btn,
.c-head__ttl--link {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  margin: 0;
}

.c-head__ttl--link>a:hover {
  color: #fff;
  background: var(--site-c-main);
}

@media screen and (max-width: 959.98px) {

  .c-head__ttl--link.btn,
  .c-head__ttl--link {
    width: 180px;
  }
}

@media screen and (max-width: 767.98px) {

  .c-head__ttl--link.btn,
  .c-head__ttl--link {
    width: 96px;
  }

  .c-head__ttl--link a {
    height: 56px;
  }
}

.c-head__lead,
.c-head__txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.05ex;
  opacity: 0.65;
  margin-top: 16px;
}

*+.c-head__lead,
*+.c-head__txt {
  margin-top: 2em;
}

.c-head-txt-box {
  background: #fff;
  border-radius: 10px;
  text-align: center;
  width: 100%;
  max-width: 920px;
  margin: 40px 0 0;
  padding: 30px;
}

.c-head-txt-box__ttl {
  color: var(--site-c-main);
  font-weight: 700;
  margin-bottom: 25px;
}

@media screen and (max-width: 767.98px) {
  .c-head-txt-box {
    border-radius: 5px;
    margin-top: 15px;
    padding: 20px;
  }
}


/**
 * button
**/
.btn {
  display: block;
  /* AdminLTE使用時のbootstrap解除 */
  border-radius: 0;
  /* AdminLTE使用時のbootstrap解除 */
  border: none;
  /* AdminLTE使用時のbootstrap解除 */
  background: transparent;
  /* AdminLTE使用時のbootstrap解除 */
  color: inherit;
  /* AdminLTE使用時のbootstrap解除 */
  font-weight: 500;
  text-align: center;
  max-width: 256px;
  /* NOTE: このセレクタはサイト内共通です。widthは必ずautoに設定し、widthを変更したい場合は別のセレクタを用いてhtmlのクラス名に記述してください。*/
  width: auto;
  height: auto;
  /* AdminLTE使用時のbootstrap解除 */
  margin: 40px auto 0;
  padding: 0;
  /* AdminLTE使用時のbootstrap解除 */
  position: static;
  /* AdminLTE使用時のbootstrap解除 */
}

.btn a,
.btn input,
.btn button,
.btn>span {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  border-radius: 3em;
  border: solid 1px var(--site-c-sub);
  background: var(--site-c-sub);
  color: #fff;
  font-feature-settings: 'palt';
  font-weight: 500;
  text-align: center;
  width: 100%;
  height: var(--site-btn-height);
  gap: 1ex;
  padding-inline: 1.25em;
  position: relative;
}

.btn a::after {
  /* NOTE: 使用しない */
  /* content: ''; */
  display: block;
  border-top: 2px solid;
  border-right: 2px solid;
  width: 8px;
  height: 8px;
  margin-left: 0;
  transform: translate(0, -50%) rotate(45deg);
  position: absolute;
  right: 1em;
  top: 50%;
  pointer-events: none;
}

.btn a:hover,
.btn input:hover,
.btn button:hover,
.btn>span:hover {
  opacity: 0.75;
}

.mypage-head__link-after-ttl.btn.btn--white a {
  height: 45px;
  font-size: 15px;
}

@media screen and (max-width: 959.98px) {
  .btn {
    margin-top: 30px;
  }
}

@media screen and (max-width: 767.98px) {
  .btn {
    max-width: none;
    margin-top: 20px;
  }

  .btn a,
  .btn input,
  .btn button,
  .btn>span {
    /* NOTE: ここにbackgroundやcolor、borderなどの色を指定すると不具合が起きます。指定しないでください。 */
    font-size: 18px;
  }
}

/* ボタンスタイルのlabel（モーダル起動ボタンや、ボタンスタイルのradio, checkboxなどのラッパーとして使います） */
label.btn {
  /* NOTE: ここにcursor以外の一切のスタイルの記述を禁止します */
  cursor: pointer;
}

/* ボタンスタイルのradio, checkbox */
/* NOTE: .btnの基本的なスタイルのセレクタの下に必ず書いてください。（＝この位置から動かさない） */
.btn:has([type="radio"]),
.btn:has([type="checkbox"]) {
  position: relative;
  inset: auto auto auto auto;
}

.btn>[type="radio"],
.btn>[type="checkbox"] {
  position: absolute;
  opacity: 0 !important;
}

.btn>[type="radio"]+span,
.btn>[type="checkbox"]+span {
  opacity: 0.5;
}

.btn>[type="radio"]:checked+span,
.btn>[type="checkbox"]:checked+span {
  opacity: 1;
}

.btn>[type="radio"]+span:hover,
.btn>[type="checkbox"]+span:hover,
.btn>[type="radio"]:checked+span:hover,
.btn>[type="checkbox"]:checked+span:hover {
  opacity: 0.75;
}


.btn--small {
  display: block;
  /* AdminLTE使用時のbootstrap解除 */
  border-radius: 0;
  /* AdminLTE使用時のbootstrap解除 */
  border: none;
  /* AdminLTE使用時のbootstrap解除 */
  background: transparent;
  /* AdminLTE使用時のbootstrap解除 */
  color: inherit;
  /* AdminLTE使用時のbootstrap解除 */
  height: auto;
  /* AdminLTE使用時のbootstrap解除 */
  padding: 0;
  /* AdminLTE使用時のbootstrap解除 */
  position: static;
  /* AdminLTE使用時のbootstrap解除 */
  max-width: 256px;
  width: 100%;
}

.btn--small a,
.btn--small button,
.btn--small input,
.btn--small>span {
  border-radius: 3em;
  border: 1px solid var(--site-c-main);
  background: #fff;
  color: var(--site-c-main);
  font-size: 12px;
  font-weight: 700;
  width: 100%;
  height: var(--site-btn-small-height);
  padding-inline: 1em;
  gap: 1ex;
  position: relative;
}

@media screen and (max-width: 767.98px) {

  .btn--small a,
  .btn--small button,
  .btn--small input,
  .btn--small>span {
    font-size: 10px;
  }
}

.btn--like a,
.btn--like a:hover {
  border: 1px solid #E9F1F4;
  background: #fff;
  color: var(--site-c-main);
  font-weight: 600;
  padding-inline: 3em;
}

.btn--like a::before {
  display: none;
}

.btn--like a::after {
  content: '\f004';
  color: #E1F3F8;
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  font-weight: 700;
  line-height: 1;
  text-rendering: auto;
  border: none;
  width: auto;
  height: auto;
  margin: 0;
  transform: translate(0, -50%);
  position: absolute;
  right: 1em;
  top: 50%;
}

.btn--like a:focus::before,
.btn--like a:hover::before,
.btn--likeoff a::before,
.btn--like a:focus::after,
.btn--like a:hover::after,
.btn--likeoff a::after {
  color: var(--site-c-main-hue);
}

.btn--message a {
  border: 1px solid var(--site-c-main);
  background: #fff;
  color: var(--site-c-main);
}

.btn--message a::before {
  content: "";
  display: inline-block;
  background: url("../images/icon__btn--message.png") center center / 100% no-repeat;
  background-color: transparent;
  width: 15px;
  height: 15px;
  position: relative;
  top: 0;
  right: 5px;
  transition: all 0.2s ease;
}

.btn--message a:focus,
.btn--message a:hover {
  background: #edf9ff;
}

/* button color */

/* button color submit */
.btn--submit a,
.btn--submit input,
.btn--submit button,
.btn--submit>span {
  border: solid 1px #E6E6E6;
  background: #fff;
  color: var(--site-c-main);
}

.btn--submit a:hover,
.btn--submit input:hover,
.btn--submit button:hover,
.btn--submit>span:hover,
.btn--submit a:focus,
.btn--submit input:focus,
.btn--submit button:focus,
.btn--submit>span:focus {
  background: var(--site-c-main);
  color: #fff;
}

/* button color action */
.btn--action a,
.btn--action input,
.btn--action button,
.btn--action>span {
  border: solid 1px var(--site-c-sub);
  background: var(--site-c-sub);
  color: #fff;
}

.btn--action a:hover,
.btn--action input:hover,
.btn--action button:hover,
.btn--action>span:hover,
.btn--action a:focus,
.btn--action input:focus,
.btn--action button:focus,
.btn--action>span:focus {
  border: solid 1px var(--site-c-sub);
  background: var(--site-c-sub);
  color: #fff;
}

/* button color back */
.btn--back a,
.btn--back input,
.btn--back button,
.btn--back>span {
  border: 1px solid var(--site-c-main);
  background: #fff;
  color: var(--site-c-main);
  /* NOTE: 矢印アイコンがあるため、padding-inlineが必須です */
  padding-inline: 1.5em;
}

.btn--back a:hover,
.btn--back input:hover,
.btn--back button:hover,
.btn--back>span:hover,
.btn--back a:focus,
.btn--back input:focus,
.btn--back button:focus,
.btn--back>span:focus {
  border: 1px solid var(--site-c-main);
  background: #fff;
  color: var(--site-c-main);
}

.btn--back a:hover,
.btn--back input:hover,
.btn--back button:hover,
.btn--back>span:hover {
  border: 1px solid var(--site-c-main);
  background: #edf9ff;
  color: var(--site-c-main);
}

.btn--back a::after,
.btn--back button::after,
.btn--back>span::after {
  content: '';
  display: block;
  border-top: 1px solid;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid;
  width: 1ex;
  height: 1ex;
  margin: 0;
  position: absolute;
  inset: 50% auto auto 1em;
  top: 50%;
  transform: translate(0, -50%) rotate(-45deg);
  pointer-events: none;
}


/* button color plain */
.btn--plain {}

.btn--plain a,
.btn--plain input,
.btn--plain button,
.btn--plain>span {
  border: solid 1px var(--site-c-main);
  background: #fff;
  color: var(--site-c-main);
}

.btn--plain a:focus,
.btn--plain input:focus,
.btn--plain button:focus,
.btn--plain>span:focus,
.btn--plain a:hover,
.btn--plain input:hover,
.btn--plain button:hover,
.btn--plain>span:hover {
  border: solid 1px var(--site-c-main);
  background: #fff;
  color: var(--site-c-main);
}

/* button color fill */
.btn--fill {}

.btn--fill a,
.btn--fill input,
.btn--fill button,
.btn--fill>span {
  border: solid 1px var(--site-c-main);
  background: var(--site-c-main);
  color: #fff;
}

.btn--fill a:focus,
.btn--fill input:focus,
.btn--fill button:focus,
.btn--fill>span:focus,
.btn--fill a:hover,
.btn--fill input:hover,
.btn--fill button:hover,
.btn--fill>span:hover {
  border: solid 1px var(--site-c-main);
  background: var(--site-c-main);
  color: #fff;
}

/* button color gray-ui */
.btn--gray-ui a,
.btn--gray-ui input,
.btn--gray-ui button,
.btn--gray-ui>span {
  border: solid 1px var(--site-c-gray-ui);
  background: var(--site-c-gray-ui);
  color: var(--font-c);
}

.btn--gray-ui a:focus,
.btn--gray-ui input:focus,
.btn--gray-ui button:focus,
.btn--gray-ui>span:focus,
.btn--gray-ui a:hover,
.btn--gray-ui input:hover,
.btn--gray-ui button:hover,
.btn--gray-ui>span:hover {
  border: solid 1px var(--site-c-gray-ui);
  background: var(--site-c-gray-ui);
  color: var(--font-c);
}

/* button color white */
.btn--white a,
.btn--white input,
.btn--white button,
.btn--white>span {
  border-color: var(--site-c-darkgray-ui);
  background: #fff;
  color: var(--font-c);
}

.btn--white a:hover,
.btn--white input:hover,
.btn--white button:hover,
.btn--white>span:hover,
.btn--white a:focus,
.btn--white input:focus,
.btn--white button:focus,
.btn--white>span:focus {
  border-color: var(--site-c-darkgray-ui);
  background: #fff;
  color: var(--font-c);
}

/* button color sns line */
.btn--sns-line a,
.btn--sns-line input,
.btn--sns-line button,
.btn--sns-line>span {
  border-radius: 3em;
  border-color: #56C35D;
  background: #56C35D;
  color: #fff;
  padding-inline: 1.5em;
}

.btn--sns-line>*::before {
  content: '';
  display: block;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22line%22%20data-name%3D%22line%20icon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2233.951%22%20height%3D%2232.349%22%20viewBox%3D%220%200%2033.951%2032.349%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_14856%22%20data-name%3D%22%E3%83%91%E3%82%B9%2014856%22%20d%3D%22M65.613%2C29.776C65.613%2C22.18%2C58%2C16%2C48.638%2C16S31.662%2C22.18%2C31.662%2C29.776c0%2C6.81%2C6.04%2C12.513%2C14.2%2C13.591.553.119%2C1.306.364%2C1.5.837a3.5%2C3.5%2C0%2C0%2C1%2C.055%2C1.534s-.2%2C1.2-.243%2C1.454c-.074.429-.341%2C1.678%2C1.471.915s9.776-5.756%2C13.338-9.855h0a12.262%2C12.262%2C0%2C0%2C0%2C3.639-8.476%22%20transform%3D%22translate(-31.662%20-16)%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_14857%22%20data-name%3D%22%E3%83%91%E3%82%B9%2014857%22%20d%3D%22M60.932%2C34.583h-4.77a.324.324%2C0%2C0%2C1-.324-.324v0h0v-7.4a.324.324%2C0%2C0%2C1%2C.324-.324h4.77a.325.325%2C0%2C0%2C1%2C.324.324v1.2a.325.325%2C0%2C0%2C1-.324.324H57.691v1.25h3.241a.325.325%2C0%2C0%2C1%2C.324.324v1.2a.325.325%2C0%2C0%2C1-.324.325H57.691v1.25h3.241a.325.325%2C0%2C0%2C1%2C.324.324v1.2a.325.325%2C0%2C0%2C1-.324.324%22%20transform%3D%22translate(-32.628%20-16.421)%22%20fill%3D%22%2356c35d%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_14858%22%20data-name%3D%22%E3%83%91%E3%82%B9%2014858%22%20d%3D%22M42.556%2C34.583a.325.325%2C0%2C0%2C0%2C.324-.324v-1.2a.325.325%2C0%2C0%2C0-.324-.324H39.315V26.85a.325.325%2C0%2C0%2C0-.324-.324h-1.2a.324.324%2C0%2C0%2C0-.324.324v7.4h0v0a.324.324%2C0%2C0%2C0%2C.324.324h4.77Z%22%20transform%3D%22translate(-31.894%20-16.421)%22%20fill%3D%22%2356c35d%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_14859%22%20data-name%3D%22%E3%83%91%E3%82%B9%2014859%22%20d%3D%22M45.7%2C26.526h-1.2a.325.325%2C0%2C0%2C0-.324.324v7.408a.325.325%2C0%2C0%2C0%2C.324.324h1.2a.325.325%2C0%2C0%2C0%2C.324-.324V26.85a.325.325%2C0%2C0%2C0-.324-.324%22%20transform%3D%22translate(-32.162%20-16.421)%22%20fill%3D%22%2356c35d%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_14860%22%20data-name%3D%22%E3%83%91%E3%82%B9%2014860%22%20d%3D%22M54.017%2C26.526h-1.2a.325.325%2C0%2C0%2C0-.324.324v4.4L49.1%2C26.673c-.008-.012-.017-.023-.026-.034l0%2C0a.128.128%2C0%2C0%2C0-.019-.02l-.006-.006-.018-.015-.009-.007L49%2C26.578l-.01-.006-.018-.01-.01-.006-.019-.008-.011%2C0-.019-.007-.012%2C0-.02%2C0-.013%2C0-.017%2C0H47.627a.324.324%2C0%2C0%2C0-.324.324v7.408a.324.324%2C0%2C0%2C0%2C.324.324h1.2a.324.324%2C0%2C0%2C0%2C.324-.324v-4.4l3.394%2C4.584a.337.337%2C0%2C0%2C0%2C.084.082l0%2C0%2C.02.012.01.006.015.007.016.008.011%2C0%2C.022.007h0a.3.3%2C0%2C0%2C0%2C.084.012h1.2a.325.325%2C0%2C0%2C0%2C.324-.324V26.85a.325.325%2C0%2C0%2C0-.324-.324%22%20transform%3D%22translate(-32.287%20-16.421)%22%20fill%3D%22%2356c35d%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 1em;
  height: 1em;
  transform: scale(1.5);
}

.btn--sns-line>*>span {
  margin-left: 0.75em;
}

.btn--sns-line a:hover,
.btn--sns-line input:hover,
.btn--sns-line button:hover,
.btn--sns-line>span:hover,
.btn--sns-line a:focus,
.btn--sns-line input:focus,
.btn--sns-line button:focus,
.btn--sns-line>span:focus {
  border-radius: 3em;
  border-color: #56C35D;
  background: #56C35D;
  color: #fff;
}




/* button style */

.btn--tall a,
.btn--tall input,
.btn--tall button,
.btn--tall>span {
  height: 80px;
}

.btn--radius-s a,
.btn--radius-s input,
.btn--radius-s button,
.btn--radius-s>span {
  border-radius: 5px;
}

.btn--link a,
.btn--link input,
.btn--link button,
.btn--link>span {
  border-radius: 0;
  border-color: transparent;
  background: transparent;
  color: var(--font-c);
  font-weight: 400;
  width: auto;
  padding-inline: 2em;
}

.btn--link a:hover,
.btn--link input:hover,
.btn--link button:hover,
.btn--link>span:hover,
.btn--link a:focus,
.btn--link input:focus,
.btn--link button:focus,
.btn--link>span:focus {
  border-radius: 0;
  border-color: transparent;
  background: transparent;
  color: var(--font-c);
}


/* button before, after text */
.btn-over-txt {
  text-align: center;
  width: 100%;
  margin: 20px auto 30px;
  font-size: 13px;
}

.btn-over-txt a {
  color: var(--site-c-main);
}

.btn-over-txt a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 767.98px) {
  .btn-over-txt {
    margin: 10px auto 15px;
  }
}

.btn-under-txt {
  text-align: center;
  width: 100%;
  margin-top: 35px;
  padding-top: 35px;
  position: relative;
}

.btn-under-txt::before {
  content: '';
  display: block;
  background-position: 0 0;
  background-size: 4px 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.4) 1px, transparent 1px);
  background-repeat: repeat-x;
  height: 1px;
  position: absolute;
  inset: 0 0 auto 0;
}

.btn-under-txt a {
  color: var(--site-c-sub);
}

.btn-under-txt a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 767.98px) {
  .btn-under-txt {
    margin-top: 24px;
    padding-top: 24px;
  }
}



/**
 * 横並びボタン
 * NOTE: フォーム以外で使ってください。　→　トップページ、一覧、静的ページなど（form系は.formset関連と併用して.formset__btn>.btnを使ってください。）
**/
.box-buttons {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.box-buttons .btn {
  width: 49%;
  max-width: none;
}

.box-buttons .btn--small {
  width: auto;
  margin: 10px 5px 5px 0;
  display: block;
}

.box-buttons .btn a:hover {
  color: #fff;
  background: var(--site-c-main);
}


.box-readmore-buttons {
  margin-top: 24px;
}

.box-readmore-buttons a {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  color: var(--site-c-sub);
  font-feature-settings: 'palt';
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  max-width: 300px;
  width: 100%;
  height: var(--site-btn-height);
  margin: 0 auto;
  padding-inline: 1em;
  position: relative;
  border-radius: 40px;
  border: solid 1px var(--site-c-sub);
  background-color: #fff;
}

.box-readmore-buttons a:after {
  content: '';
  display: block;
  border-top: 1.5px solid var(--site-c-sub);
  border-right: 1.5px solid var(--site-c-sub);
  width: 10px;
  height: 10px;
  margin-top: -0.355em;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: rotate(45deg);
}

.box-readmore-buttons.freelance a {
  color: var(--site-c-main);
  border: solid 1px var(--site-c-main);
}

.box-readmore-buttons.freelance a:after {
  border-top: 1.5px solid var(--site-c-main);
  border-right: 1.5px solid var(--site-c-main);
}

@media screen and (max-width: 767.98px) {
  .box-readmore-buttons a {
    font-size: 14px;
  }
}

/**
 * link
**/
.link {
  color: var(--site-c-main);
}

.link.link--blank::after {
  content: '';
  display: inline-block;
  background-image: url("/common/images/icon-blank.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 1em;
  height: 1em;
  margin: 0 0 0 1ex;
  vertical-align: baseline;
  transform: translate(0, 16.666%);
}

/* アイコン
--------------------------------- */
.c-icon {
  display: flex;
  align-items: center;
  gap: 5px;
}

.c-icon.center {
  justify-content: center;
}

.c-icon::before {
  width: 15px;
  height: 15px;
  content: '';
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left 50% top 0%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* TODO: アイコン画像はSVGに随時変更していく */
.icon-area::before {
  background-image: url(/common/images/icon-area.svg);
}

.icon-area-w::before {
  background-image: url(/common/images/icon-area-w.svg);
}

.icon-book::before {
  background-image: url(/common/images/icon-book.png);
}

.icon-edit-b::before {
  background-image: url(/common/images/icon-edit-b.svg);
}

.icon-search--white::before {
  width: 15px;
  height: 15px;
  background-image: url(/common/images/icon-search--white.png);
}

.icon-heart::before {
  width: 20px;
  height: 18px;
  background-image: url(/common/images/icon-heart.svg);
}

.icon-fork::before {
  width: 18.89px;
  height: 18.13px;
  background-image: url(/common/images/icon-fork.svg);
}

.icon-fork-w::before {
  width: 18.89px;
  height: 18.13px;
  background-image: url(/common/images/icon-fork-w.svg);
}

.icon-yen::before {
  width: 12.25px;
  height: 16.48px;
  background-image: url(/common/images/icon-yen.png);
}

.icon-light::before {
  width: 16.5px;
  height: 22px;
  background-image: url(/common/images/icon-light.svg);
}

.icon-flag::before {
  width: 16px;
  height: 19.43px;
  background-image: url(/common/images/icon-flag.png);
}

.icon-book::before {
  width: 19.26px;
  height: 15.61px;
  background-image: url(/common/images/icon-book.png);
}

.icon-fukidashi02::before {
  width: 20px;
  height: 19px;
  background-image: url(/common/images/icon-fukidashi02.png);
}

.icon-fukidashi::before {
  width: 20.01px;
  height: 18.02px;
  background-image: url(/common/images/icon-fukidashi.png);
}

.icon-bell::before {
  width: 17.79px;
  height: 22px;
  background-image: url(/common/images/icon-bell.svg);
}

.icon-bell-w::before {
  width: 17.79px;
  height: 22px;
  background-image: url(/common/images/icon-bell-w.svg);
}

.icon-employment::before {
  width: 15.27px;
  height: 15.27px;
  background-image: url(/common/images/icon-employment.png);
}

.icon-time::before {
  width: 15.27px;
  height: 15.27px;
  background-image: url(/common/images/icon-time.png);
}

.icon-overtime::before {
  width: 15.27px;
  height: 15.27px;
  background-image: url(/common/images/icon-overtime.png);
}

.icon-bonus::before {
  width: 16.99px;
  height: 12.36px;
  background-image: url(/common/images/icon-bonus.png);
}

.icon-calendar::before {
  width: 15.27px;
  height: 16.97px;
  background-image: url(/common/images/icon-calendar.png);
}

.icon-boshu::before {
  width: 14.4px;
  height: 18px;
  background-image: url(/common/images/icon-boshu2.png);
}

.icon-company--white::before {
  width: 16px;
  height: 18px;
  background-image: url(/common/images/icon-company--white.png);
}


/**
 * swipe
**/
@media screen and (max-width: 767.98px) {
  .swipe {
    width: auto;
    padding: 10px;
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    overflow: auto
  }
}




/**
 * box style
**/
.c-box {
  border-radius: 10px;
  background: transparent;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 40px 40px;
}

*+.c-box {
  margin-top: 40px;
}

.c-box--white {
  background: #fff;
  color: var(--font-c);
}

@media screen and (max-width: 1400.98px) {
  .c-box {}
}

@media screen and (max-width: 959.98px) {
  .c-box {}
}

@media screen and (max-width: 767.98px) {
  .c-box {}
}

.c-box__header {}

.c-box__body {}

.c-box__footer {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 40px 0 0;
  gap: 20px;
}

.c-box__footer .btn {
  max-width: 200px;
  width: 100%;
  margin: 0;
}

.c-box__notes {
  font-size: 13px;
  font-weight: 400;
}



/**
 * form formset
**/
.formset {
  max-width: 695px;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .formset {}
}

@media screen and (max-width: 767.98px) {
  .formset {}
}

.formset__h2 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  width: 100%;
  gap: 1em;
}

.formset__h2>span {
  color: var(--site-c-main);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
}

.formset__h2>small {
  color: var(--site-c-main);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.25;
}

*+.formset__h2 {
  margin-top: 40px;
}

.formset__h2+* {
  margin-top: 20px;
}

@media screen and (max-width: 767.98px) {
  .formset__h2 {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1ex;
  }
}

.formset__lead {
  width: 100%;
}

.formset__item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  border-top: 1px solid #E6E6E6;
  border-bottom: 1px solid #E6E6E6;
  width: 100%;
}

.formset__item+.formset__item {
  border-top: none;
}

.formset__item.type--column {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
}

.formset__item+.formset__item.type--column {
  margin-top: 20px;
}

@media screen and (max-width: 767.98px) {
  .formset__item {
    flex-flow: column nowrap;
    align-items: stretch;
  }

  .page-mypage .formset__item {
    flex-flow: row nowrap;
  }

  .page-mypage .formset__item.type--column,
  .formset__item.type--column {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
  }
}

.formset__ttl {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  background: var(--site-bg-c);
  font-weight: 700;
  width: 320px;
  padding: 1em 0 1em 1em;
  gap: 0;
  font-size: 14px;
}

.formset__item.type--column .formset__ttl {
  width: auto;
  padding: 0 0 1em;
}

/* NOTE: .formset__ttlでは、タイトルの文字列をラップする labelタグが必須です */
.formset__ttl>label {}

@media screen and (max-width: 959.98px) {
  .formset__ttl {
    width: 200px;
  }
}

@media screen and (max-width: 767.98px) {
  .formset__ttl {
    width: auto;
    padding: 10px 0 0 0;
  }

  .page-mypage .formset__ttl {
    width: 105px;
    padding: 10px 8px;
    font-size: 12px;
    flex-flow: unset;
  }

  .page-mypage .formset__item.type--column .formset__ttl,
  .formset__item.type--column .formset__ttl {
    width: auto;
    padding: 0 0 1em;
  }
}

.formset__input {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  width: 100%;
  padding: 1em 1em;
  gap: var(--site-input-gap-row) var(--site-input-gap-col);
}

.formset__input:only-child {
  width: 100%;
}

.formset__item.type--column .formset__input {
  width: auto;
  padding: 0;
}

.formset__input--2col {
  flex-flow: nowrap;
}

.formset__input--area {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: flex-start;
}

.list_vertical ul li {
  width: 100%;
}

@media screen and (max-width: 767.98px) {
  .formset__input {
    width: auto;
    padding: 10px 0;
  }

  .page-mypage .formset__input {
    font-size: 12px;
    width: calc(100% - 105px);
    padding: 10px 0 10px 10px;
  }

  .formset__item.type--column .formset__input {
    width: auto;
    padding: 0;
  }
}


/* 入力部品をラップするもの（flex-wrapをwrapさせる場合） */
.formset__input:has(ul),
.formset__input:has(p.formset__notes) {
  flex-flow: row wrap;
}

@media screen and (min-width: 768px) {

  /* NOTE: スマホ限定なし、もしくはただの.item--flex-breakの場合 */
  .formset__input:has(.item--flex-break:not(.sp--disp)) {
    flex-flow: row wrap;
  }

  /**
   * NOTE:
   * ただし、.item--flex-break.pc--dispと.item--flex-break.sp--dispが
   * .formset__inputに混在の場合には常にwrapします
  **/
}

@media screen and (max-width: 767.98px) {

  /* NOTE: PC限定なし、もしくはただの.item--flex-breakの場合 */
  .formset__input:has(.item--flex-break:not(.pc--disp)) {
    flex-flow: row wrap;
  }

  /**
   * NOTE:
   * ただし、.item--flex-break.pc--dispと.item--flex-break.sp--dispが
   * .formset__inputに混在の場合には常にwrapします
  **/
}



.formset__must {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--site-c-main);
  font-weight: 700;
  font-size: 15px;
  height: 20px;
}

.formset__ttl .formset__must {
  margin-left: 2px;
}

.formset__ttl .formset__optional {
  color: #333;
  font-weight: 400;
  font-size: 12px;
  margin-left: 6px;
  display: inline;
}

.input-prefix {
  font-size: 16px;
  font-weight: 600;
  margin-right: 4px;
  vertical-align: middle;
}

.mypage-head__lead {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
  margin-bottom: 0;
  margin-left: 8px;
}

.error-01 {
  color: #d9534f;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  padding: 12px 16px;
  background-color: #fdf0ef;
  border: 1px solid #f5c6c4;
  border-radius: 4px;
}

.formset__item.type--column .formset__must {
  margin-inline: auto 0;
}

.formset__input .formset__must {
  margin: 0;
}

.formset__input *+.formset__must {
  margin-left: 1ex;
}

/* image */
.formset__input img {
  border-radius: 5px;
  width: 180px;
  height: 180px;
  margin-bottom: 10px;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (max-width: 767.98px) {
  .formset__input img {
    width: 120px;
    height: 120px;
  }
}


/* list */
.formset__input ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  gap: 10px;
}

.formset__input ul.style--column {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
  gap: 10px;
}

.formset__input li {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin: 0;
}

.formset__input ul label {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1ex;
}

.formset__input ul label [type="radio"],
.formset__input ul label [type="checkbox"] {
  margin: 0;
}

.formset__list {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

.formset__list.formset__list--col {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

.formset__input .formset__list li {
  display: block;
  margin: 0;
}

/* input tag */
.formset__input .input_select,
.formset__input .input-select,
.formset__input [type="text"],
.formset__input [type="number"],
.formset__input [type="tel"],
.formset__input [type="email"],
.formset__input .input-password,
.formset__input [type="password"],
.formset__input [type="url"],
.formset__input .input-time,
.formset__input [type="time"],
.formset__input [type="date"],
.formset__input [type="month"],
.formset__input textarea {
  border-radius: 5px;
  border: 1px solid var(--site-c-darkgray-ui);
  background: #fff;
  /* NOTE: input, textarea, select のfont-sizeは必ず、--site-input-fs変数を用いてください。 */
  font-size: var(--site-input-fs);
  max-width: 500px;
  width: 100%;
  /* NOTE: input, textarea, select のheightは必ず、--site-input-height変数を用いてください。 */
  height: var(--site-input-height);
  /* NOTE: paddingは必ず相対値を用いてください。 */
  padding: 0 1em;
}

.formset__input .input_select,
.formset__input .input-select {
  padding: 0;
}

.formset__input .input_select select,
.formset__input .input-select select {
  border-radius: 0;
  border: none;
  background: transparent;
  font-size: inherit;
  padding: 0 2em 0 1em;
}

.formset__input .input-time,
.formset__input [type="time"],
.formset__input [type="date"],
.formset__input [type="month"],
.formset__input [type="number"],
.formset__input .input_select,
.formset__input .input-select {
  width: auto;
}

@media screen and (max-width: 767.98px) {

  .formset__input .input-time,
  .formset__input [type="time"],
  .formset__input [type="date"],
  .formset__input [type="month"],
  .formset__input [type="number"],
  .formset__input .input_select,
  .formset__input .input-select {
    /* TODO: 以下、暫定処置。今後、個別にhtmlへクラス名の付与などで調整が必要になる */
    max-width: calc(100vw - 104px - var(--site-container-padding)*2 - 10px*2 - 3em);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}

/* ラッパー付きパスワード */
.formset__input .input-password:has([type="text"]),
.formset__input .input-password:has([type="password"]) {
  padding: 0;
  position: relative;
  overflow: hidden;
}

.formset__input .input-password>[type="text"],
.formset__input .input-password>[type="password"] {
  border-radius: inherit;
  border: none;
  background: transparent;
  font-size: inherit;
  max-width: none;
  width: 100%;
  height: 100%;
  padding: 0 2em 0 1em;
  margin: 0;
  position: relative;
  z-index: 1;
}

.formset__input .input-password>[type="button"] {
  color: var(--site-c-silvergray);
  position: absolute;
  top: 50%;
  right: 1em;
  z-index: 2;
  transform: translate(0, -50%);
}

.formset__input .input-password>[type="button"]::before {
  content: '';
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  background-image: url("/common/images/icon-eye-open.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 1em;
  height: 1em;
}

.formset__input .input-password.is--show>[type="button"]::before {
  background-image: url("/common/images/icon-eye-close.svg");
}

.formset__input textarea {
  max-width: none;
  height: auto;
  min-height: 4em;
  padding-block: 1em;
}

.formset__input .input_select.type--full-width,
.formset__input .input-select.type--full-width,
.formset__input [type="text"].type--full-width,
.formset__input [type="number"].type--full-width,
.formset__input [type="tel"].type--full-width,
.formset__input [type="email"].type--full-width,
.formset__input .input-password.type--full-width,
.formset__input [type="password"].type--full-width,
.formset__input [type="url"].type--full-width,
.formset__input .input-time.type--full-width,
.formset__input [type="time"].type--full-width,
.formset__input [type="date"].type--full-width,
.formset__input [type="month"].type--full-width,
.formset__input textarea.type--full-width {
  max-width: none;
}


/* button */
.formset__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px;
  gap: 16px;
}

*+.formset__btn {
  margin-top: 40px;
}

.formset__btn>.btn {
  max-width: 176px;
  width: 100%;
  margin: 0;
}


/* ボタン後方の注釈 */
.formset__notes-after-btn {
  text-align: center;
  margin-top: 20px;
  font-size: smaller;
  opacity: 0.65;
}


/* ボタン選択リスト（アンケート画面など） */
.formset__input .formset__buttons-column,
.formset__buttons-column {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 16px;
  flex: 1 auto;
}

*+.formset__buttons-column {
  margin-top: 16px;
}

.formset__buttons-column>li {
  display: block;
}

.formset-medium .formset__buttons-column .btn,
.formset-compact .formset__buttons-column .btn,
.formset__buttons-column .btn {
  max-width: none;
  margin: 0;
}


/* formset その他のタグ */

/* dl */
/* NOTE: 2colレイアウト */
.formset__dl {
  display: grid;
  grid-template-columns: minmax(20px, auto) 2fr;
  width: 100%;
  gap: 0.5em 1em;
}

*+.formset__dl {
  margin-top: 12px;
}

@media screen and (max-width: 767.98px) {
  .formset__dl {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 0.5em;
  }
}

.formset__dl>dt {
  color: var(--font_c);
  font-weight: 700;
  font-feature-settings: 'palt';
  align-self: center;
}

@media screen and (max-width: 767.98px) {
  .formset__dl>dt {
    align-self: stretch;
  }

  .formset__dl>dd+dt {
    margin-top: 0.5em;
  }
}

.formset__dl>dd {
  align-self: center;
}

@media screen and (max-width: 767.98px) {
  .formset__dl>dd {
    align-self: stretch;
  }
}

.formset__dl>dd ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  gap: 1ex 2ex;
}

.formset__dl>dt small {
  display: block;
  color: var(--font_c);
  font-weight: 400;
  font-size: 12px;
  line-height: 2;
  opacity: 0.5;
}



/* files */
.formset__files {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  counter-reset: count-files;
}

@media screen and (max-width: 767.98px) {
  .formset__files {
    grid-template-columns: 1fr;
  }
}

.formset__files>li {
  display: block;
  padding: 0 0 0 1.75em;
  position: relative;
  counter-increment: count-files;
}

.formset__files>li::before {
  content: counter(count-files);
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: solid 0.75px var(--font-c);
  color: var(--font-c);
  width: 1.25em;
  height: 1.25em;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* type file */

.formset__file-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  gap: var(--site-input-gap-col);
}

.formset__input [type="file"] {
  border-radius: var(--site-input-radius);
  background: rgba(0, 0, 0, 0.04);
  color: var(--site-c-gray);
  min-width: 280px;
  margin: 4px 0;
  padding: 6px 10px 6px 6px;
}

.formset__input [type="file"]::file-selector-button {
  border-radius: var(--site-input-radius);
  border: 1px solid var(--site-c-lightgray);
  background: #fff;
  color: var(--site-c-black);
  font-size: 16px;
  width: auto;
  height: var(--site-input-height);
  margin: 0 8px 0 0;
  padding: 0 0.5em;
}

.formset__file-delete {
  display: block;
  margin: 4px 0;
}

.txt-delete {}

[type="radio"]+.txt-delete,
[type="checkbox"]+.txt-delete {
  display: inline-block;
  transform: translate(0, -3px);
}

.check-delete {
  margin-left: 1em;
}

/* 郵便番号 */
.formset__input .input-zip {
  max-width: 14ex;
}

/* break */
.item--flex-break {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .item--flex-break.sp--disp+* {
    margin-left: var(--site-input-gap-col);
  }
}

@media screen and (max-width: 767.98px) {
  .item--flex-break.pc--disp+* {
    margin-left: var(--site-input-gap-col);
  }
}


/* 単位 */
.item--unit {
  white-space: nowrap;
}

.formset__calc-total+.item--unit,
.input-select+.item--unit,
.formset__input [type="text"]+.item--unit,
.formset__input [type="email"]+.item--unit,
.formset__input [type="tel"]+.item--unit,
.formset__input [type="password"]+.item--unit,
.formset__input [type="url"]+.item--unit,
.formset__input [type="date"]+.item--unit,
.formset__input [type="datetime-local"]+.item--unit,
.formset__input .input-time+.item--unit,
.formset__input [type="time"]+.item--unit,
.formset__input [type="month"]+.item--unit,
.formset__input [type="week"]+.item--unit,
.formset__input [type="search"]+.item--unit,
.formset__input [type="number"]+.item--unit {
  /* NOTE: margin-left以外を記述すると不具合が出ます */
  margin-left: var(--site-input-gap-col);
}

/* セパレータ（～、＋などの記号） */
.item--sep {
  white-space: nowrap;
}

.formset__calc-total+.item--sep,
.input-select+.item--sep,
.formset__input [type="text"]+.item--sep,
.formset__input [type="email"]+.item--sep,
.formset__input [type="tel"]+.item--sep,
.formset__input [type="password"]+.item--sep,
.formset__input [type="url"]+.item--sep,
.formset__input [type="date"]+.item--sep,
.formset__input [type="datetime-local"]+.item--sep,
.formset__input .input-time+.item--sep,
.formset__input [type="time"]+.item--sep,
.formset__input [type="month"]+.item--sep,
.formset__input [type="week"]+.item--sep,
.formset__input [type="search"]+.item--sep,
.formset__input [type="number"]+.item--sep {
  /* NOTE: margin-left以外を記述すると不具合が出ます */
  margin-left: var(--site-input-gap-col);
}

.item--sep+.formset__calc-total,
.item--sep+.input-select,
.formset__input .item--sep+[type="text"],
.formset__input .item--sep+[type="email"],
.formset__input .item--sep+[type="tel"],
.formset__input .item--sep+[type="password"],
.formset__input .item--sep+[type="url"],
.formset__input .item--sep+[type="date"],
.formset__input .item--sep+[type="datetime-local"],
.formset__input .item--sep+.input-time,
.formset__input .item--sep+[type="time"],
.formset__input .item--sep+[type="month"],
.formset__input .item--sep+[type="week"],
.formset__input .item--sep+[type="search"],
.formset__input .item--sep+[type="number"] {
  /* NOTE: margin-left以外を記述すると不具合が出ます */
  margin-left: var(--site-input-gap-col);
}


/* ちょっとしたラベル */
.formset__input .item--label {
  display: inline-block;
  font-size: inherit;
  min-width: 64px;
}

.item--label+.formset__calc-total,
.item--label+.input-select,
.formset__input .item--label+[type="text"],
.formset__input .item--label+[type="email"],
.formset__input .item--label+[type="tel"],
.formset__input .item--label+[type="password"],
.formset__input .item--label+[type="url"],
.formset__input .item--label+[type="date"],
.formset__input .item--label+[type="datetime-local"],
.formset__input .item--label+.input-time,
.formset__input .item--label+[type="time"],
.formset__input .item--label+[type="month"],
.formset__input .item--label+[type="week"],
.formset__input .item--label+[type="search"],
.formset__input .item--label+[type="number"] {
  /* NOTE: margin-left以外を記述すると不具合が出ます */
  margin-left: var(--site-input-gap-col);
}

*+.item--label {
  margin-left: var(--site-input-gap-col);
}

@media (min-width: 768px) {

  /* 改行後 */
  .item--flex-break:not(.sp--disp)+.item--label {
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  .formset__input .item--label {
    min-width: 64px;
  }

  .formset__input .item--label+[type="date"] {
    width: calc(100% - 80px);
  }

  /* 改行後 */
  .item--flex-break:not(.pc--disp)+.item--label {
    margin-left: 0;
  }
}


/* 合計金額の表示領域 */
.formset__calc-total {
  display: inline-block;
  border-bottom: solid 1px;
  font-size: 20px;
  font-weight: 700;
  font-feature-settings: 'palt';
  letter-spacing: 0.05ex;
  line-height: 1;
  text-align: right;
  min-width: var(--formset-ttl-width);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 0 4px;
}

.formset__calc-total.item--tight {
  display: inline-block;
  min-width: 0;
  margin: 4px 0 0;
  padding: 0 0 4px 1ex;
}

@media (max-width: 767.98px) {
  .formset__calc-total.item--tight {
    /*margin-left: auto;*/
  }
}



/* 注釈 */
.formset__notes {
  color: var(--site-c-gray);
  font-size: 14px;
  font-weight: 400;
  font-feature-settings: 'palt';
  letter-spacing: 0.05ex;
  width: auto;
}

p.formset__notes {
  width: 100%;
}

.formset__ttl .formset__notes {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-feature-settings: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  width: 100%;
  cursor: inherit;
}

.formset__calc-total+.formset__notes,
.input-select+.formset__notes,
.formset__input [type="text"]+.formset__notes,
.formset__input [type="email"]+.formset__notes,
.formset__input [type="tel"]+.formset__notes,
.formset__input [type="password"]+.formset__notes,
.formset__input [type="url"]+.formset__notes,
.formset__input [type="date"]+.formset__notes,
.formset__input [type="datetime-local"]+.formset__notes,
.formset__input .input-time+.formset__notes,
.formset__input [type="time"]+.formset__notes,
.formset__input [type="month"]+.formset__notes,
.formset__input [type="week"]+.formset__notes,
.formset__input [type="search"]+.formset__notes,
.formset__input [type="number"]+.formset__notes {
  /* NOTE: margin-left以外を記述すると不具合が出ます */
  margin-left: var(--site-input-gap-col);
}

.formset__calc-total+p.formset__notes,
.input-select+p.formset__notes,
.formset__input [type]+p.formset__notes {
  /* NOTE: margin-left以外を記述すると不具合が出ます */
  margin-left: 0;
}

@media (max-width: 767.98px) {
  .formset__notes {
    font-size: 12px;
  }

  .formset__ttl .formset__notes {
    width: auto;
  }
}


/* 規約 */
.formset__terms {
  border-radius: var(--site-input-radius);
  border: 1px solid var(--site-c-gray-ui);
  background: var(--site-c-gray-ui);
  font-size: 13px;
  font-feature-settings: 'palt';
  line-height: 2;
  max-width: 768px;
  width: 100%;
  height: 200px;
  margin: 4px 0 0;
  padding: 1em;
  overflow-x: hidden;
  overflow-y: auto;
}

.formset__terms.formset__terms--no-scroll {
  height: auto;
  overflow: visible;
}

*+.formset__terms {
  margin-top: 8px;
}

.formset__terms__ttl {
  text-align: center;
  margin: 0 0 8px;
}

.formset__terms__ttl i {
  margin-right: 0.75ex;
}

@media (max-width: 767.98px) {
  .formset__terms {
    font-size: 10px;
  }
}

.formset__terms>p {
  line-height: inherit;
}

.formset__terms>*+p {
  margin-top: 0.5em;
}


/* トグルボタン */
.formset__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0 0;
}

.formset__toggle-label {
  font-size: 14px;
  font-weight: inherit;
  margin: 0;
  padding: 0 1em 0 0;
}

.formset__toggle-button.btn,
.formset__toggle-button {
  max-width: none;
  width: 64px;
  margin: 0;
}

@media (max-width: 767.98px) {
  .formset__toggle-label {
    font-size: 12px;
  }
}





/**
 * form tableset
**/
.tableset {
  width: 100%;
  background: #fff
}

@media screen and (min-width: 768px) {
  .tableset {
    margin-bottom: 30px;
    padding: 40px;
    border: 1px solid #D6D6D6;
    border-radius: 5px
  }
}

.tableset__list {
  width: 100%;
  display: table;
  text-align: left;
}

*+.tableset__list {
  border-top: 1px solid #D6D6D6;
}

.tableset__ttl {
  width: 320px;
  display: table-cell;
  vertical-align: middle;
  padding: 20px 40px;
  font-weight: 700
}

.tableset__must {
  height: 20px;
  padding: 0 8px;
  color: #fff;
  font-size: 10px;
  background: #ec5937;
  border-radius: 5px;
  float: right;
  display: flex;
  align-items: center;
  justify-content: center
}

.tableset__txt {
  display: table-cell;
  word-break: break-all;
  padding: 20px
}

.tableset__txt img {
  width: 180px;
  height: 180px;
  margin-bottom: 10px;
  -o-object-fit: cover;
  object-fit: cover;
  font-family: 'object-fit: cover;';
  border-radius: 5px
}

.tableset__txt li {
  display: inline-flex;
  margin: 0 10px 10px 0;
}

.tableset__txt .input_select,
.tableset__txt .input-select,
.tableset__txt [type="text"],
.tableset__txt [type="number"],
.tableset__txt [type="tel"],
.tableset__txt [type="email"],
.tableset__txt .input-password,
.tableset__txt [type="password"],
.tableset__txt [type="url"],
.tableset__txt .input-time,
.tableset__txt [type="time"],
.tableset__txt [type="date"],
.tableset__txt [type="month"],
.tableset__txt textarea {
  border-radius: 5px;
  border: 1px solid var(--site-c-darkgray-ui);
  background: #fff;
  /* NOTE: input, textarea, select のfont-sizeは必ず、--site-input-fs変数を用いてください。 */
  font-size: var(--site-input-fs);
  max-width: 500px;
  width: 100%;
  /* NOTE: input, textarea, select のheightは必ず、--site-input-height変数を用いてください。 */
  height: var(--site-input-height);
  /* NOTE: paddingは必ず相対値を用いてください。 */
  padding: 0 1em;
}

.tableset__txt .input_select,
.tableset__txt .input-select {
  padding: 0;
}

.tableset__txt .input_select select,
.tableset__txt .input-select select {
  border-radius: 0;
  border: none;
  background: transparent;
  font-size: inherit;
  padding: 0 2em 0 1em;
}

.tableset__txt .input-time,
.tableset__txt [type="time"],
.tableset__txt [type="date"],
.tableset__txt [type="month"],
.tableset__txt [type="number"],
.tableset__txt .input_select,
.tableset__txt .input-select {
  width: auto;
}

.tableset__txt textarea {
  max-width: none;
  height: auto;
  min-height: 4em;
  padding-block: 1em;
}

.tableset__txt .input_select.type--full-width,
.tableset__txt .input-select.type--full-width,
.tableset__txt [type="text"].type--full-width,
.tableset__txt [type="number"].type--full-width,
.tableset__txt [type="tel"].type--full-width,
.tableset__txt [type="email"].type--full-width,
.tableset__txt .input-password.type--full-width,
.tableset__txt [type="password"].type--full-width,
.tableset__txt [type="url"].type--full-width,
.tableset__txt [type="time"].type--full-width,
.tableset__txt [type="date"].type--full-width,
.tableset__txt [type="month"].type--full-width,
.tableset__txt textarea.type--full-width {
  max-width: none;
}

.tableset__btn {
  margin-left: auto;
  margin-right: auto
}

@media screen and (max-width: 959.98px) {
  .tableset__ttl {
    width: 210px
  }

  .tableset__ttl {
    padding-top: 20px !important;
  }
}

@media screen and (max-width: 767.98px) {

  .tableset__ttl,
  .tableset__txt {
    width: 100%;
    display: block;
    padding: 0 0 20px
  }

  .tableset__txt img {
    width: 120px;
    height: 120px
  }
}

/**
 * form error
**/

/* error for jquery.validate.js */
/* NOTE: CDN https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.js */

/* NOTE: 通常（初回サブミット後のみの実行は利用しない場合） */
/*.form_support_wrap > div > div > .jquery-validate--error,
.formset__input .jquery-validate--error,
.formset__input-select .jquery-validate--error,
.formset__input .jquery-validate--error,
.tableset__txt .jquery-validate--error,
.jquery-validate--error {
  border: 1px solid #c00 !important;
  background: #eed1d1 !important;
}
.form_support_wrap > div > div > .jquery-validate--error:focus,
.formset__input .jquery-validate--error:focus,
.formset__input-select .jquery-validate--error:focus,
.formset__input .jquery-validate--error:focus,
.tableset__txt .jquery-validate--error:focus,
.jquery-validate--error:focus {
  outline-color: #c00 !important;
}
.form_support_wrap > div > div .select:has(.jquery-validate--error),
.formset__input .select:has(.jquery-validate--error),
.formset__input-select .select:has(.jquery-validate--error),
.formset__input .select:has(.jquery-validate--error),
.tableset__txt .select:has(.jquery-validate--error),
.select:has(.jquery-validate--error) {
  border: 1px solid #c00 !important;
  background: #eed1d1 !important;
}
.form_support_wrap > div > div .select .jquery-validate--error:not(span),
.formset__input .select .jquery-validate--error:not(span),
.formset__input-select .select .jquery-validate--error:not(span),
.formset__input .select .jquery-validate--error:not(span),
.tableset__txt .select .jquery-validate--error:not(span),
.select .jquery-validate--error:not(span) {
  border: none !important;
  background: transparent !important;
}
.form_support_wrap > div > div .select .jquery-validate--error:not(span):focus,
.formset__input .select .jquery-validate--error:not(span):focus,
.formset__input-select .select .jquery-validate--error:not(span):focus,
.formset__input .select .jquery-validate--error:not(span):focus,
.tableset__txt .select .jquery-validate--error:not(span):focus,
.jquery-validate--error:not(span):focus {
  outline-color: transparent !important;
}
*/


/* NOTE: 初回サブミット後のみ実行する場合 */
/* .select 以外 */
.p-after-first-validate .form_support_wrap>div>div .jquery-validate--error:not(span),
/* PBASEのフォーム向け */
.p-after-first-validate .formset__input .jquery-validate--error:not(span),
.p-after-first-validate .formset__input-select .jquery-validate--error:not(span),
.p-after-first-validate .formset__input .jquery-validate--error:not(span),
.p-after-first-validate .tableset__txt .jquery-validate--error:not(span),
.p-after-first-validate .jquery-validate--error:not(span) {
  border: 1px solid #c00 !important;
  background: #eed1d1 !important;
}

.p-after-first-validate .form_support_wrap>div>div .jquery-validate--error:not(span):focus,
/* PBASEのフォーム向け */
.p-after-first-validate .formset__input .jquery-validate--error:not(span):focus,
.p-after-first-validate .formset__input-select .jquery-validate--error:not(span):focus,
.p-after-first-validate .formset__input .jquery-validate--error:not(span):focus,
.p-after-first-validate .tableset__txt .jquery-validate--error:not(span):focus,
.p-after-first-validate .jquery-validate--error:not(span):focus {
  outline-color: #c00 !important;
}

/* .select の場合 */
.p-after-first-validate .form_support_wrap>div>div .select:has(.jquery-validate--error),
/* PBASEのフォーム向け */
.p-after-first-validate .formset__input .select:has(.jquery-validate--error),
.p-after-first-validate .formset__input-select .select:has(.jquery-validate--error),
.p-after-first-validate .formset__input .select:has(.jquery-validate--error),
.p-after-first-validate .tableset__txt .select:has(.jquery-validate--error),
.p-after-first-validate .select:has(.jquery-validate--error) {
  border: 1px solid #c00 !important;
  background: #eed1d1 !important;
}

.p-after-first-validate .form_support_wrap>div>div .select .jquery-validate--error:not(span),
/* PBASEのフォーム向け */
.p-after-first-validate .formset__input .select .jquery-validate--error:not(span),
.p-after-first-validate .formset__input-select .select .jquery-validate--error:not(span),
.p-after-first-validate .formset__input .select .jquery-validate--error:not(span),
.p-after-first-validate .tableset__txt .select .jquery-validate--error:not(span),
.p-after-first-validate .select .jquery-validate--error:not(span) {
  border: none !important;
  background: transparent !important;
}

.p-after-first-validate .form_support_wrap>div>div .select .jquery-validate--error:not(span):focus,
/* PBASEのフォーム向け */
.p-after-first-validate .formset__input .select .jquery-validate--error:not(span):focus,
.p-after-first-validate .formset__input-select .select .jquery-validate--error:not(span):focus,
.p-after-first-validate .formset__input .select .jquery-validate--error:not(span):focus,
.p-after-first-validate .tableset__txt .select .jquery-validate--error:not(span):focus,
.p-after-first-validate .jquery-validate--error:not(span):focus {
  outline-color: transparent !important;
}

.form_support_wrap>div>div>span.jquery-validate--error,
/* PBASEのフォーム向け */
.tableset__txt span.jquery-validate--error,
.formset__input span.jquery-validate--error,
span.jquery-validate--error {
  display: block;
  border: none !important;
  background: transparent !important;
  color: #c00 !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: left;
  padding: 6px 0;
}

/* errorのラッパー */
.item--error-wrapper {
  display: inline-block;
  align-self: stretch;
  font-size: 13px;
  text-align: left;
  position: relative;
}

.item--error-wrapper~*:not(.item--error-wrapper) {
  margin-top: 17px;
}

.item--error-wrapper+*:not(.item--error-wrapper) {
  margin-left: calc(var(--site-input-gap-col) * -1);
}

.formset__input ul .item--error-wrapper+label:not(.item--error-wrapper) {
  margin-left: 0;
}

.formset__input--2col .item--error-wrapper+*:not(.item--error-wrapper) {
  /*margin-left: calc( var(--site-input-gap-col) * -1 );*/
}

.item--error-wrapper .jquery-validate--error {
  white-space: nowrap;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transform: translate(0, 0);
  /* NOTE: 横方向、縦方向の微調整はtranslateで */
}

.form_support_wrap>div>div>.item--error-wrapper span.jquery-validate--error,
/* PBASEのフォーム向け */
.tableset__txt .item--error-wrapper span.jquery-validate--error,
.formset__input .item--error-wrapper span.jquery-validate--error,
.item--error-wrapper span.jquery-validate--error {
  line-height: 1.25;
  text-align: inherit;
  padding: 0;
}

ul>.item--error-wrapper {
  display: block;
  width: 100%;
}

ul>.item--error-wrapper .jquery-validate--error {
  width: 100% !important;
}

ul>.item--error-wrapper~* {
  color: #c00 !important;
}

@media screen and (max-width: 767.98px) {
  .item--error-wrapper {
    font-size: 10px;
    text-align: right;
  }

  .item--error-wrapper~*:not(.item--error-wrapper) {
    margin-top: 14px;
  }
}




/**
 * エフェクト
**/
/* fade in */
/* .effect-fade:not(.effect-fade-in-no-slide) {
	opacity: 0;
	transform: translate(0, 135px);
	transition: all 1000ms;
}
.effect-fade-2:not(.effect-fade-in-no-slide) {transform: translate(0, 135px)}
.effect-fade-3:not(.effect-fade-in-no-slide) {transform: translate(0, 135px)}
.effect-fade-4:not(.effect-fade-in-no-slide) {transform: translate(0, 180px)}
.effect-fade-5:not(.effect-fade-in-no-slide) {transform: translate(0, 225px)}
.effect-fade-6:not(.effect-fade-in-no-slide) {transform: translate(0, 270px)}
.fade-t:not(.effect-fade-in-no-slide) {transform: translate(0, -135px)}
.fade-r:not(.effect-fade-in-no-slide) {transform: translate(135px, 0)}
.fade-l:not(.effect-fade-in-no-slide) {transform: translate(-135px, 0)} */
/* .effect-fade.effect-scroll:not(.effect-fade-in-no-slide) {
	opacity: 1;
	transform: translate(0, 0);
} */
/* .effect-fade.effect-fade-in-bottom:not(.effect-fade-in-no-slide) {
	opacity: 0;
	transform: translate(0, 135px);
	transition:
		opacity 1000ms ease-out,
		transform 1000ms ease-out;
} */
/* .effect-fade.effect-scroll.effect-fade-in-bottom:not(.effect-fade-in-no-slide) {
	opacity: 1;
	transform: translate(0, 0);
} */
/* .effect-fade.effect-fade-in-no-slide {
	opacity: 0;
	transition: opacity 1000ms ease-out;
} */
/* .effect-fade.effect-scroll.effect-fade-in-no-slide {
	opacity: 1;
} */
.popup_mcontact {
  top: 0 !important;
  left: 0 !important;
}

#popup_mcontact iframe {
  width: 100vw;
  height: 100vw;
}



/*------------------------------------------------------------------
 vendor, javascript
------------------------------------------------------------------ */
/* mbase アコーディオン
--------------------------------- */
[data-acc-head][data-acc-head][data-acc-head]+* {
  display: none;
}

/* mbase アコーディオン（検索一覧専用）
--------------------------------- */
/* NOTE: @media screen and (max-width: 959.98px)のブレークポイントの数値をJS側（common.js）と合わせる必要があります。 */
@media screen and (max-width: 959.98px) {
  [data-search-acc-head][data-search-acc-head][data-search-acc-head]+* {}

  [data-search-acc-body][data-search-acc-body][data-search-acc-body] {
    display: none;
  }
}

/* 忍者ツールズ
--------------------------------- */
@media screen and (max-width: 767.98px) {

  .ninja_onebutton_output_overlay,
  .ninja_onebutton_output_overlay.show {
    display: table !important;
    /* NOTE: .showがbootstrapとコンフリクトしているため、!importantが必要です。 */
    width: 100%;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
  }
}

/* NOTE: twitterをXに変更 */
.ninja_onebutton_output_overlay .twitter,
.ninja_onebutton_output_responsive .twitter,
.st-wrapper .ninja_onebutton_output_overlay .twitter,
.st-wrapper .ninja_onebutton_output_responsive .twitter,
.ninja_onebutton_output_overlay .twitter,
.ninja_onebutton_output_responsive .twitter {
  /* default style */
  /*background-color: #55acee;*/
  /*color: #ffffff;*/
  background-color: #444 !important;
  color: rgba(0, 0, 0, 0) !important;
}

.st-wrapper .ninja_onebutton_output_overlay [class*='onebtn_overlay'].twitter::before,
.st-wrapper .ninja_onebutton_output_responsive [class*='onebtn_responsive_'].twitter::before,
.ninja_onebutton_output_overlay [class*='onebtn_overlay'].twitter::before,
.ninja_onebutton_output_responsive [class*='onebtn_responsive_'].twitter::before {
  /* default style */
  /*content: "\e606";*/
  /*font-family: 'omatome_icomoon', sans-serif;*/
  /*vertical-align: middle;*/
  /* X logo mark svg */
  /* NOTE:
    URLデコードなので直接文言変更でSVGを編集出来ます。
    「fill%3D%22white」というキーワードを探して色を変更してください。
    「white」の部分に色をCSSの記法で指定できます。
    例えば#333などは、%23333です。「%23」が「#」
  */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%201200%201227%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M714.163%20519.284L1160.89%200H1055.03L667.137%20450.887L357.328%200H0L468.492%20681.821L0%201226.37H105.866L515.491%20750.218L842.672%201226.37H1200L714.137%20519.284H714.163ZM569.165%20687.828L521.697%20619.934L144.011%2079.6944H306.615L611.412%20515.685L658.88%20583.579L1055.08%201150.3H892.476L569.165%20687.854V687.828Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: contain;
  color: rgba(0, 0, 0, 0);
  /* NOTE: 元のアイコンを非表示 */
}




/**
 * その他のスタイル
**/

[class*="mlist"] {
  border-radius: 5px;
  border: solid 1px #ccc;
  padding: 1rem 1rem 0;
  margin: .5rem 0;
}