@charset "UTF-8";
/* Index
------------------------------------------
== reset =================
Basic
Form

== layout ================
Margin
Padding
Layout
Text
Link

== common ================
Wrapper
Header
Gnavi
MiddleArea
leftNavi
Main
rightNavi
Footer
popup

== module ================
Image:Icon
Head
Contents
List
Navigation
Box
Table
Flow

== Overwrite =============
Overwrite

== Print =================
Print
------------------------------------------ */
/*===================================================================
	reset
===================================================================*/
/* Basic
------------------------------------------ */
html {
  overflow-y: scroll;
}

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

body, div, p,
h1, h2, h3, h4, h5, h6,
pre, blockquote, table, th, td,
dl, dt, dd, ul, ol, li,
form, textarea,
address {
  margin: 0;
  padding: 0;
}

p {
  word-wrap: break-word;
  word-break: break-all;
} /* For Japanese */
* html h1, * html h2, * html h3, * html h4, * html h5, * html h6 {
  height: 1%;
}

img {
  border: none;
}

table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit;
}

caption, th, td {
  text-align: left;
}

a[name] {
  color: #000;
}

a[name]:hover {
  color: #000;
  text-decoration: none !important;
  outline: 0 !important;
}

a img {
  color: #000;
}

fieldset {
  border: 0;
}

input, textarea, select {
  font-family: inherit;
  font-size: 1em;
}

input {
  vertical-align: -3px;
}

select {
  vertical-align: middle;
}

ul li {
  list-style-type: none;
}

li li {
  font-size: inherit;
}

em {
  font-weight: bold;
  font-style: normal;
}

address {
  font-style: normal;
}

label {
  cursor: pointer;
}

.navskip,
.hide {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  font-size: 0;
}

hr {
  display: none;
  border: 0;
  height: 0;
  visibility: hidden;
}

h1, h2, h3, h4, h5, h6,
form, textarea,
pre, blockquote, table, th, td {
  font-size: 100%;
}

p, li, dt, dd, pre, legend {
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, dt {
  font-weight: bold;
}

/* フォーカス時のハイライト削除
--------------------------------- */
:focus {
  outline: 0;
}

/* Form
------------------------------------------ */
/* IME : For Windows IE */
.imeA {
  ime-mode: active;
}

.imeD {
  ime-mode: disabled;
}

/* password */
input[type=password] {
  height: 1.2em;
  font-family: arial;
  ime-mode: disabled;
}

/* button */
input[type=submit],
input[type=reset],
input[type=button],
input[type=image] {
  cursor: pointer;
}

/* file */
input[type=file] {
  height: 20px;
}

/*===================================================================
	clearfix
===================================================================*/
/* ------ clearfix ------ */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  position: relative;
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/* End hide from IE-mac */
/* ------ clear ------ */
.clearboth {
  clear: both;
}

br.clear {
  margin: 0;
  padding: 0;
  clear: both;
  line-height: 0;
  font-size: 0;
}

/*===================================================================
	layout
===================================================================*/
/* Margin
------------------------------------------ */
/* ------ margin-top ------ */
.mt0 {
  margin-top: 0 !important;
}

.mt3 {
  margin-top: 3px !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mt8 {
  margin-top: 8px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt35 {
  margin-top: 35px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt50 {
  margin-top: 50px !important;
}

/* ------ margin-right ------ */
.mr0 {
  margin-right: 0 !important;
}

.mr5 {
  margin-right: 5px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mr15 {
  margin-right: 15px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mr25 {
  margin-right: 25px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mr50 {
  margin-right: 30px !important;
}

/* ------ margin-bottom ------ */
.mb0 {
  margin-bottom: 0 !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

/* ------ margin-left ------ */
.ml0 {
  margin-left: 0 !important;
}

.ml5 {
  margin-left: 5px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.ml15 {
  margin-left: 15px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml25 {
  margin-left: 25px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.ml35 {
  margin-left: 35px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.ml45 {
  margin-left: 45px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.ml60 {
  margin-left: 60px !important;
}

.ml70 {
  margin-left: 70px !important;
}

.ml75 {
  margin-left: 75px !important;
}

.ml80 {
  margin-left: 80px !important;
}

.ml83 {
  margin-left: 83px !important;
}

.ml90 {
  margin-left: 90px !important;
}

.ml95 {
  margin-left: 95px !important;
}

.ml110 {
  margin-left: 110px !important;
}

.ml120 {
  margin-left: 120px !important;
}

.ml145 {
  margin-left: 145px !important;
}

.ml160 {
  margin-left: 160px !important;
}

.ml170 {
  margin-left: 170px !important;
}

.ml180 {
  margin-left: 180px !important;
}

.ml_10 {
  margin-left: -10px !important;
}

.ml_15 {
  margin-left: -15px !important;
}

.ml_20 {
  margin-left: -20px !important;
}

.ml_50 {
  margin-left: -50px !important;
}

/* padding-top
------------------------------------------ */
.pt0 {
  padding-top: 0 !important;
}

.pt5 {
  padding-top: 5px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pt15 {
  padding-top: 15px !important;
}

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

.pt25 {
  padding-top: 25px !important;
}

.pt30 {
  padding-top: 30px !important;
}

/* padding-right
------------------------------------------ */
.pr0 {
  padding-right: 0 !important;
}

.pr5 {
  padding-right: 5px !important;
}

.pr10 {
  padding-right: 10px !important;
}

.pr15 {
  padding-right: 15px !important;
}

.pr20 {
  padding-right: 20px !important;
}

.pr25 {
  padding-right: 25px !important;
}

.pr30 {
  padding-right: 30px !important;
}

.pr40 {
  padding-right: 40px !important;
}

/* padding-bottom
------------------------------------------ */
.pb0 {
  padding-bottom: 0 !important;
}

.pb5 {
  padding-bottom: 5px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.pb15 {
  padding-bottom: 15px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.pb25 {
  padding-bottom: 25px !important;
}

/* padding-left
------------------------------------------ */
.pl0 {
  padding-left: 0 !important;
}

.pl5 {
  padding-left: 5px !important;
}

.pl10 {
  padding-left: 10px !important;
}

.pl15 {
  padding-left: 15px !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pl25 {
  padding-left: 25px !important;
}

.pl30 {
  padding-left: 30px !important;
}

.pl40 {
  padding-left: 40px !important;
}

/* font-weight
------------------------------------------ */
.fwB {
  font-weight: bold !important;
}

.fwN {
  font-weight: normal !important;
}

/* font size
------------------------------------------ */
.fsS {
  font-size: 78%;
  line-height: 1.3;
}

.fsM {
  font-size: 85%;
}

.fsL {
  font-size: 114%;
}

.fsXL {
  font-size: 128%;
}

/* font color
------------------------------------------ */
.fcR {
  color: #e60000 !important;
}

/* font decoration
------------------------------------------ */
.fdU {
  text-decoration: underline;
}

/* indent
------------------------------------------ */
.indent1 {
  padding-left: 1em;
  text-indent: -1em;
}

.indent2 {
  padding-left: 0.5em;
  text-indent: -0.5em;
}

.indent3 {
  padding-left: 2.2em;
  text-indent: -2.2em;
}

/* letter-spacing
------------------------------------------ */
.ls1 {
  letter-spacing: 1px;
}

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

.taC {
  text-align: center;
}

.taR {
  text-align: right;
}

/* vertical-align
------------------------------------------ */
.vaT {
  vertical-align: top !important;
}

.vaM {
  vertical-align: middle !important;
}

.vaB {
  vertical-align: bottom !important;
}

/* float
------------------------------------------ */
.flL {
  float: left;
}

.flR {
  float: right;
}

/* border
------------------------------------------ */
.lineS {
  border-top: solid 1px #CCCCCC;
  padding-top: 10px;
}

/* overflow
------------------------------------------ */
.ofH {
  overflow: hidden;
}

/* inline block
------------------------------------------ */
.iBlk {
  display: -moz-inline-box;
  display: inline-block;
}

/* nowrap
------------------------------------------ */
.nwrp {
  white-space: nowrap;
}

/* sup
------------------------------------------ */
body sup {
  font-size: 100%;
}

html > body sup {
  font-size: 100%;
}

html:not(:target) sup {
  font-size: 85%;
}

/* Link
------------------------------------------ */
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover,
a:active {
  text-decoration: none;
}

/* width
------------------------------------------ */
.w120 {
  width: 120px !important;
}

.w180 {
  width: 180px !important;
}

.w240 {
  width: 240px !important;
}

.w280 {
  width: 280px !important;
}

.w340 {
  width: 340px !important;
}

.w350 {
  width: 350px !important;
}

.w400 {
  width: 400px !important;
}

.w410 {
  width: 410px !important;
}

.w470 {
  width: 470px !important;
}

/*===================================================================
	common
===================================================================*/
/* Wrapper
------------------------------------------ */
#wrapper {
  margin: 0;
  padding: 0;
}

/* Header
------------------------------------------ */
#headerLink {
  position: relative;
  float: right;
  width: 637px;
  height: 57px !important;
}

/* MiddleArea
------------------------------------------ */
/* breadcrumbs */
/* leftNavi
------------------------------------------ */
/* Main
------------------------------------------ */
/* rightNavi
------------------------------------------ */
/* Footer
------------------------------------------ */
/* popup
------------------------------------------ */
/*#popup Wrapper */
/* Header */
/*===================================================================
	module
===================================================================*/
/* Image:Icon（リンク）
------------------------------------------ */
/* iLink01 */
/* iBack01（戻る型ナビゲーション） */
/* iBack02（戻る型ナビゲーション 第7階層以降） */
/* iNote01 */
/* iPdfImg01 */
/* Head (見出し)
------------------------------------------ */
/* headMainMod01 */
/* headMod01 */
/* headMod02 */
/* headMod03 */
/* headImg01 */
/* Contents
------------------------------------------ */
/* section01 */
/* clm2Mod01 */
/* clm2Mod02 */
/* clm3Mod01 */
/* clm3Mod02 */
/* List（リスト）
------------------------------------------ */
/* listOl01【未使用】 */
/* listKome01（注意文言［参照元がなし］） */
/* listLink01（ピックアップ＆お知らせ） */
/* listLinkR01 */
/* listBtn01（リンク［強調したテキストリンク2］） */
/* listDot01（通常） */
/* listDot02（強調） */
/* indexNav（インデックスエリア ナビゲーション）
------------------------------------------ */
/* indexNav */
/* IndexBox（インデックス型ナビゲーション）
------------------------------------------ */
/* indexBox01 */
/* Tab（タブ型ナビゲーション）
------------------------------------------ */
/* tabMod01 */
/* tabMod02 */
/* tabBox01 */
/* PagingBox（巡回型ナビゲーション）
------------------------------------------ */
/* pagingBox01 */
/* Button（ボタン）
------------------------------------------ */
/* btnArea01 */
/* btnArea02 */
/* btnMod01 */
/* NavRel（関連ページへのリンク）
------------------------------------------ */
/* navRel01 */
/* Box
------------------------------------------ */
/* noteBox01（注意文言［強調 背景色あり］） */
/* inquiryBox02（問い合わせ） */
/* btnBox01（ボタン［申込み・取引系ボタン下部掲載］） */
/* infoBox01（ピックアップ） */
/* pointBox01（ポイント） */
/* promotionBox01（プロモーション） */
/* Table
------------------------------------------ */
/* tblMod01 単表 */
.tblMod01 {
  width: 100%;
  border-top: 2px solid #9F954A;
  border-left: 1px solid #c5c5c5;
  border-collapse: collapse;
}

.tblMod01 th,
.tblMod01 td {
  border-right: 1px solid #c5c5c5;
  border-bottom: 1px solid #c5c5c5;
  line-height: 1.5;
  vertical-align: top;
}

.tblMod01 th {
  padding: 10px;
  background: #EBE8D4;
}

.tblMod01 td {
  padding: 10px;
}

.tblMod01 tr.beigeLine {
  background: #F9F8F2;
}

/* tblMod02 複表 */
.tblMod02 {
  width: 100%;
  border-top: 2px solid #9F954A;
  border-left: 1px solid #c5c5c5;
  border-collapse: collapse;
}

.tblMod02 th,
.tblMod02 td {
  border-right: 1px solid #c5c5c5;
  border-bottom: 1px solid #c5c5c5;
  line-height: 1.5;
  vertical-align: top;
}

.tblMod02 thead th {
  padding: 10px;
  background: #EBE8D4;
  text-align: center;
}

.tblMod02 tbody th {
  padding: 10px;
  background: #F9F8F2;
}

.tblMod02 tbody td {
  padding: 10px;
}

.tblMod02 tbody tr.beigeLine {
  background: #F9F8F2;
}

/* tblMod03 一覧表 */
.tblMod03 {
  width: 100%;
  border-top: 2px solid #9F954A;
  border-left: 1px solid #c5c5c5;
  border-collapse: collapse;
}

.tblMod03 th,
.tblMod03 td {
  border-right: 1px solid #c5c5c5;
  border-bottom: 1px solid #c5c5c5;
  line-height: 1.5;
}

.tblMod03 thead th {
  padding: 10px;
  background: #EBE8D4;
  text-align: center;
}

.tblMod03 tbody td {
  padding: 10px;
}

.tblMod03 tbody tr.beigeLine {
  background: #F9F8F2;
}

/* tblLo01 */
.tblLo01 {
  margin-bottom: -2px;
}

.tblLo01 th,
.tblLo01 td {
  vertical-align: top;
}

.tblLo01 th {
  padding: 0 1em 2px 0;
  font-weight: normal;
  white-space: nowrap;
}

.tblLo01 td {
  padding: 0 0 2px 0;
}

/* tblP */
.tblP5 thead th,
.tblP5 tbody th,
.tblP5 tbody td {
  padding: 5px;
}

/* tblW */
.tblW75 {
  width: 75% !important;
}

.tblW50 {
  width: 50% !important;
}

/*===================================================================
	Overwrite
===================================================================*/
/*===================================================================
	Print
===================================================================*/
/* All */
html {
  overflow: visible;
}

/* BreakPoint
--------------------------------- */
/* MediaQqueries mixin
--------------------------------- */
/* Vendor prefix
--------------------------------- */
/* animation mixin
--------------------------------- */
/* opacity mixin
--------------------------------- */
/* flexbox mixin
--------------------------------- */
/* font size
--------------------------------- */
/* variable
--------------------------------- */
html {
  scroll-behavior: smooth;
}

:root {
  --sideNaviHeight: 0;
  --footerHeight: 0;
}

body {
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", YuGothic, "游ゴシック", Meiryo, "MS PGothic", sans-serif;
  line-height: 1.5;
  font-size: 13px;
  word-wrap: break-word;
  -webkit-text-size-adjust: none;
  font-feature-settings: "palt" 1;
  background: rgb(250, 250, 250);
  position: relative;
}

a {
  color: rgb(29, 43, 89);
}

img,
svg {
  width: 100%;
  height: 100%;
  box-shadow: #000 0 0 0;
  vertical-align: bottom;
  object-fit: cover;
  object-position: 50% 50%;
}

img,
x:-moz-any-link,
x:default {
  box-shadow: #000 0 0 0;
}

p {
  word-break: normal;
  word-wrap: break-word;
  line-break: strict;
}

* {
  min-height: 0%;
}

#svgSymbol {
  width: 0;
  height: 0;
  visibility: hidden;
  display: none;
}

br.pc {
  display: inline;
}
@media only screen and (max-width: 896px) {
  br.pc {
    display: none;
  }
}
@media only screen and (max-width: 800px) {
  br.pc {
    display: inline;
  }
}
@media only screen and (max-width: 736px) {
  br.pc {
    display: none;
  }
}
br.sp {
  display: none;
}
@media only screen and (max-width: 896px) {
  br.sp {
    display: inline;
  }
}
@media only screen and (max-width: 800px) {
  br.sp {
    display: none;
  }
}
@media only screen and (max-width: 736px) {
  br.sp {
    display: inline;
  }
}

/* wrapper common
--------------------------------- */
#wrapper {
  width: 100%;
  max-width: 1200px;
  height: auto;
  min-height: var(--sideNaviHeight, 0);
  margin: 0 auto;
  padding: 60px 0 100px 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 896px) {
  #wrapper {
    min-height: calc(100vh - var(--footerHeight, 0));
    padding-top: 95px;
  }
  #wrapper.top {
    padding-top: 177px;
  }
  #wrapper.default {
    padding-top: 81px;
  }
}
#wrapper.default {
  min-height: calc(100vh - var(--footerHeight, 0));
}

/* header
--------------------------------- */
#header {
  width: 100%;
  height: 60px;
  margin: 0 auto;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9900;
  background: rgb(255, 255, 255);
  border-bottom: rgb(216, 216, 216) 1px solid;
  transform-origin: 50% 0%;
  transform: translate(0, 0);
  transition: transform 0.2s linear 0s;
}
@media only screen and (max-width: 896px) {
  #header {
    height: auto;
    background: rgb(29, 43, 89);
    border-width: 2px;
    transform: translate(0, -81px);
  }
}
#header.top {
  transform: translate(0, 0);
}
@media only screen and (max-width: 896px) {
  #header.top {
    transform: translate(0, 0);
  }
}
#header.default {
  transform: translate(0, 0);
}
@media only screen and (max-width: 896px) {
  #header.default {
    border-bottom: none;
    transform: translate(0, 0);
  }
}
#header.default .inner {
  justify-content: center;
}
#header.inactive {
  transform: translate(0, 0);
}
@media only screen and (max-width: 896px) {
  #header.inactive {
    transform: translate(0, -124px);
    transition: transform 0.2s linear 0s;
  }
}
@media only screen and (max-width: 896px) {
  #header.inactive.top {
    transform: translate(0, -124px);
  }
}
#header .inner {
  width: 100%;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0 30px;
  position: relative;
}
@media only screen and (max-width: 1126px) {
  #header .inner {
    padding: 0 20px;
  }
}
@media only screen and (max-width: 896px) {
  #header .inner {
    padding: 24px 0 0 0;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0 0;
  }
}
#header #sideNaviBtn {
  width: 30px;
  height: 22px;
  position: relative;
  bottom: auto;
  right: auto;
  overflow: hidden;
  cursor: pointer;
}
@media only screen and (max-width: 896px) {
  #header #sideNaviBtn {
    position: absolute;
    bottom: 16px;
    right: 20px;
  }
}
#header #sideNaviBtn.active > span:first-of-type {
  transform: translate(-100%, 0);
  transition: transform 0s cubic-bezier(0, 0.84, 0.6, 1.01) 0.5s;
}
#header #sideNaviBtn.active > span:first-of-type span {
  transform: scale(0, 1);
}
#header #sideNaviBtn.active > span:first-of-type span:nth-of-type(1) {
  transition: transform 0.3s cubic-bezier(0, 0.84, 0.6, 1.01) 0s;
}
#header #sideNaviBtn.active > span:first-of-type span:nth-of-type(2) {
  transition: transform 0.3s cubic-bezier(0, 0.84, 0.6, 1.01) 0.1s;
}
#header #sideNaviBtn.active > span:first-of-type span:nth-of-type(3) {
  transition: transform 0.3s cubic-bezier(0, 0.84, 0.6, 1.01) 0.2s;
}
#header #sideNaviBtn.active > span:last-of-type {
  transform: translate(0, 0);
  transition: transform 0s cubic-bezier(0, 0.84, 0.6, 1.01) 0s;
}
#header #sideNaviBtn.active > span:last-of-type span:nth-of-type(1) {
  left: 0;
  transition: left 0.3s cubic-bezier(0, 0.84, 0.6, 1.01) 0.3s;
}
@media only screen and (max-width: 896px) {
  #header #sideNaviBtn.active > span:last-of-type span:nth-of-type(1) {
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg) scale(1, 1);
    transition: transform 0.3s cubic-bezier(0, 0.84, 0.6, 1.01) 0.4s;
  }
}
#header #sideNaviBtn.active > span:last-of-type span:nth-of-type(2) {
  left: calc(100% - 17px);
  transition: left 0.3s cubic-bezier(0, 0.84, 0.6, 1.01) 0.3s;
}
@media only screen and (max-width: 896px) {
  #header #sideNaviBtn.active > span:last-of-type span:nth-of-type(2) {
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg) scale(1, 1);
    transition: transform 0.3s cubic-bezier(0, 0.84, 0.6, 1.01) 0.3s;
  }
}
#header #sideNaviBtn > span {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#header #sideNaviBtn > span:first-of-type {
  transform: translate(0, 0);
  transition: transform 0.3s cubic-bezier(0, 0.84, 0.6, 1.01) 0.4s;
}
#header #sideNaviBtn > span:first-of-type span {
  width: 100%;
  height: 2px;
  display: block;
  position: absolute;
  left: 0;
  background: rgb(29, 43, 89);
  transform-origin: 100% 50%;
  transform: scale(1, 1);
  transition: transform 0s linear 0s;
}
#header #sideNaviBtn > span:first-of-type span:nth-of-type(1) {
  top: 2px;
}
#header #sideNaviBtn > span:first-of-type span:nth-of-type(2) {
  top: 10px;
}
#header #sideNaviBtn > span:first-of-type span:nth-of-type(3) {
  bottom: 2px;
}
#header #sideNaviBtn > span:last-of-type {
  transform: translate(100%, 0);
  transition: transform 0.3s cubic-bezier(0, 0.84, 0.6, 1.01) 0.2s;
  overflow: hidden;
}
#header #sideNaviBtn > span:last-of-type span:nth-of-type(1) {
  width: calc(100% - 1px);
  height: 2px;
  display: block;
  position: absolute;
  top: 50%;
  left: -100%;
  background: rgb(29, 43, 89);
  transform: translate(0, -50%);
  transition: left 0s cubic-bezier(0, 0.84, 0.6, 1.01) 0.5s;
}
@media only screen and (max-width: 896px) {
  #header #sideNaviBtn > span:last-of-type span:nth-of-type(1) {
    width: 30px;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg) scale(0, 1);
    transition: transform 0.3s cubic-bezier(0, 0.84, 0.6, 1.01) 0s;
  }
}
#header #sideNaviBtn > span:last-of-type span:nth-of-type(2) {
  width: 12px;
  height: 12px;
  border-top: rgb(29, 43, 89) 2px solid;
  border-right: rgb(29, 43, 89) 2px solid;
  position: absolute;
  top: 50%;
  left: calc(-100% - 17px);
  background: none;
  transform: translate(0, -50%) rotate(45deg) skew(-3deg, -3deg);
  transition: left 0s cubic-bezier(0, 0.84, 0.6, 1.01) 0.5s;
}
@media only screen and (max-width: 896px) {
  #header #sideNaviBtn > span:last-of-type span:nth-of-type(2) {
    width: 30px;
    height: 2px;
    border: none;
    left: 50%;
    background: rgb(29, 43, 89);
    transform: translate(-50%, -50%) rotate(45deg) scale(0, 1);
    transition: transform 0.3s cubic-bezier(0, 0.84, 0.6, 1.01) 0s;
  }
}
#header #logo {
  width: 90px;
  height: 34px;
  margin: 0;
}
#header #logo.tvlogo {
  width: 110px;
}
@media only screen and (max-width: 896px) {
  #header #logo {
    margin-bottom: 24px;
  }
}
#header #logo a {
  width: 100%;
  height: 100%;
  display: block;
}
#header #logo img:first-of-type {
  display: block;
}
@media only screen and (max-width: 896px) {
  #header #logo img:first-of-type {
    display: none;
  }
}
#header #logo img:last-of-type {
  display: none;
}
@media only screen and (max-width: 896px) {
  #header #logo img:last-of-type {
    display: block;
  }
}
#header #globalNavi {
  width: auto;
  height: 100%;
}
@media only screen and (max-width: 896px) {
  #header #globalNavi {
    width: 100%;
    height: 42px;
  }
}
#header #globalNavi ul {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
#header #globalNavi ul li {
  width: auto;
  height: 100%;
  position: relative;
}
@media only screen and (max-width: 896px) {
  #header #globalNavi ul li {
    width: 33.3333333333%;
  }
}
#header #globalNavi ul li:first-of-type {
  display: none;
}
@media only screen and (max-width: 896px) {
  #header #globalNavi ul li:first-of-type {
    display: block;
  }
}
#header #globalNavi ul li.active::before {
  transform: scale(1, 1);
}
#header #globalNavi ul li::before {
  content: "";
  width: 100%;
  height: 1px;
  background: rgb(29, 43, 89);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  transform-origin: 50% 0%;
  transform: scale(0, 1);
  transition: transform 0.1s linear 0s;
}
@media only screen and (max-width: 896px) {
  #header #globalNavi ul li::before {
    height: 2px;
    bottom: 2px;
    background: rgb(255, 255, 255);
  }
}
#header #globalNavi ul li a {
  height: 100%;
  padding: 0 20px;
  display: block;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  #header #globalNavi ul li a {
    padding: 0 15px;
  }
}
@media only screen and (max-width: 960px) {
  #header #globalNavi ul li a {
    padding: 0 10px;
  }
}
@media only screen and (max-width: 896px) {
  #header #globalNavi ul li a {
    font-size: 77%;
    color: rgb(255, 255, 255);
  }
}
#header #globalNavi ul li:hover::before {
  transform: scale(1, 1);
  transition: transform 0.2s cubic-bezier(0.56, 0, 0.62, 0.99) 0s;
}
#header .user {
  height: 100%;
  margin: 0 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
@media only screen and (max-width: 896px) {
  #header .user {
    display: none;
  }
}
#header .user .userIcon {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
#header .user .userName {
  width: auto;
  max-width: 220px;
  margin-right: 40px;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  position: relative;
}
@media only screen and (max-width: 960px) {
  #header .user .userName {
    margin-right: 20px;
  }
}
#header .user .userName::before {
  content: "";
  width: 1px;
  height: 15px;
  background: rgb(216, 216, 216);
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translate(0, -50%);
}
@media only screen and (max-width: 960px) {
  #header .user .userName::before {
    right: -10px;
  }
}
#header .user .userName span {
  width: 100%;
  display: block;
}
#header .user .userName span:first-of-type {
  color: rgb(165, 165, 165);
}
#header .user .userName span:last-of-type {
  color: rgb(95, 95, 95);
}
#header .user .registrationBtn a {
  display: block;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0 5px;
}
#header .user .registrationBtn a span {
  display: block;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#header .user .registrationBtn a span:first-of-type {
  width: 25px;
  height: 25px;
  transform: translate(0, 1px);
}
#header .pageTitle {
  width: 100%;
  height: auto;
  padding: 14px 15px 17px 15px;
  display: none;
  box-sizing: border-box;
  background: rgb(255, 255, 255);
}
@media only screen and (max-width: 896px) {
  #header .pageTitle {
    display: block;
  }
}
#header .pageTitle h2 {
  width: 100%;
  font-size: 93%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
#header .pageTitle h2 span,
#header .pageTitle h2 a {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  display: block;
}

/* sideNavi
--------------------------------- */
#sideNavi {
  width: 100%;
  max-width: 220px;
  height: calc(100vh - var(--footerHeight, 0));
  padding: 110px 0 10px 0;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: calc(50% - 600px);
  z-index: 8000;
  overflow: hidden;
  transform-origin: 0% 50%;
  transform: translate(0, 0);
  transition: width 0.1s linear 0s;
}
@media only screen and (max-width: 1200px) {
  #sideNavi {
    left: 0;
  }
}
@media only screen and (max-width: 896px) {
  #sideNavi {
    max-width: 100%;
    height: 100%;
    padding: 125px 5px 60px 5px;
    background: rgb(255, 255, 255);
    z-index: 9000;
    transform-origin: 100% 50%;
    transform: translate(100%, 0);
    transition: transform 0.3s cubic-bezier(0.11, 0.83, 0.23, 0.95) 0s;
  }
  #sideNavi.top {
    padding-top: 207px;
  }
}
#sideNavi.inactive {
  padding-top: 110px;
}
@media only screen and (max-width: 896px) {
  #sideNavi.inactive {
    padding-top: 82px;
  }
}
#sideNavi.active {
  width: 0;
  transition: width 0.3s linear 0s;
}
@media only screen and (max-width: 896px) {
  #sideNavi.active {
    width: 100%;
    transform: translate(0, 0);
    transition: transform 0.3s cubic-bezier(0.11, 0.83, 0.23, 0.95) 0s;
  }
}
#sideNavi.active .inner {
  transform: translate(-100%, 0);
  transition: transform 0.3s cubic-bezier(0.11, 0.83, 0.23, 0.95) 0s;
}
@media only screen and (max-width: 896px) {
  #sideNavi.active .inner {
    transform: translate(0, 0);
  }
}
#sideNavi .inner {
  width: 100%;
  max-width: 220px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px 0 20px;
  box-sizing: border-box;
  transform-origin: 0% 50%;
  transform: translate(0, 0);
  transition: transform 0.5s cubic-bezier(0.11, 0.83, 0.23, 0.95) 0s;
}
@media only screen and (max-width: 896px) {
  #sideNavi .inner {
    max-width: 100%;
    padding: 0 10px 0 10px;
  }
}
#sideNavi .inner .ps__rail-y {
  opacity: 0.9 !important;
}
#sideNavi .inner .ps__thumb-y {
  background: rgb(200, 200, 200);
}
#sideNavi .user {
  width: 100%;
  height: auto;
  margin: 0 0 30px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  display: none;
}
@media only screen and (max-width: 896px) {
  #sideNavi .user {
    display: flex;
  }
}
@media only screen and (max-width: 480px) {
  #sideNavi .user {
    justify-content: flex-start;
  }
}
#sideNavi .user .userIcon {
  width: 25px;
  height: 25px;
  margin: 0 10px 0 0;
}
@media only screen and (max-width: 480px) {
  #sideNavi .user .userIcon {
    margin: 0 10px 0 5px;
  }
}
#sideNavi .user .userName {
  width: auto;
  max-width: 220px;
  margin-right: 40px;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  position: relative;
}
@media only screen and (max-width: 960px) {
  #sideNavi .user .userName {
    margin-right: 20px;
  }
}
@media only screen and (max-width: 480px) {
  #sideNavi .user .userName {
    width: 100%;
    max-width: calc(100% - 25px - 10px - 5px);
    margin-right: 0;
  }
}
#sideNavi .user .userName::before {
  content: "";
  width: 1px;
  height: 15px;
  display: block;
  background: rgb(216, 216, 216);
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translate(0, -50%);
}
@media only screen and (max-width: 960px) {
  #sideNavi .user .userName::before {
    right: -10px;
  }
}
@media only screen and (max-width: 480px) {
  #sideNavi .user .userName::before {
    display: none;
  }
}
#sideNavi .user .userName span {
  width: 100%;
  display: block;
}
#sideNavi .user .userName span:first-of-type {
  color: rgb(165, 165, 165);
}
#sideNavi .user .userName span:last-of-type {
  color: rgb(95, 95, 95);
}
#sideNavi .user .registrationBtn {
  width: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@media only screen and (max-width: 480px) {
  #sideNavi .user .registrationBtn {
    width: 100%;
    margin-top: 10px;
    padding-right: 5px;
  }
}
#sideNavi .user .registrationBtn a {
  width: auto;
  display: block;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0 5px;
}
@media only screen and (max-width: 480px) {
  #sideNavi .user .registrationBtn a {
    justify-content: flex-end;
  }
}
#sideNavi .user .registrationBtn a span {
  display: block;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#sideNavi .user .registrationBtn a span:first-of-type {
  width: 25px;
  height: 25px;
  transform: translate(0, 1px);
}
#sideNavi section {
  width: 100%;
  max-width: 180px;
  margin: 0 auto 30px;
}
@media only screen and (max-width: 896px) {
  #sideNavi section {
    max-width: 100%;
  }
}
#sideNavi section:last-of-type {
  margin-bottom: 30px;
}
@media only screen and (max-width: 896px) {
  #sideNavi section:last-of-type {
    margin-bottom: 0;
  }
}
#sideNavi section h2 {
  width: 100%;
  padding-bottom: 5px;
  border-bottom: rgb(216, 216, 216) 1px solid;
}
@media only screen and (max-width: 896px) {
  #sideNavi section h2 {
    padding-bottom: 4px;
    border-width: 2px;
  }
}
#sideNavi section h2 a {
  width: 100%;
  padding-right: 19px;
  display: block;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0 5px;
  position: relative;
}
@media only screen and (max-width: 896px) {
  #sideNavi section h2 a {
    padding-right: 26px;
    font-size: 108%;
    gap: 0 10px;
  }
}
#sideNavi section h2 a::before {
  content: "";
  width: 4px;
  height: 4px;
  border-top: rgb(29, 43, 89) 1px solid;
  border-right: rgb(29, 43, 89) 1px solid;
  position: absolute;
  top: 50%;
  right: 0;
  transform: rotate(45deg) translate(-6px, 4px);
}
@media only screen and (max-width: 896px) {
  #sideNavi section h2 a::before {
    width: 8px;
    height: 8px;
    transform: rotate(45deg) translate(-12px, 6px);
  }
}
#sideNavi section h2 span {
  width: 25px;
  height: 25px;
}
@media only screen and (max-width: 896px) {
  #sideNavi section h2 span {
    width: 35px;
    height: 35px;
  }
}
#sideNavi section > ul {
  width: 100%;
  padding: 20px 0 0 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px 0;
}
@media only screen and (max-width: 896px) {
  #sideNavi section > ul {
    padding-left: 35px;
    gap: 20px 0;
  }
}
#sideNavi section > ul > li {
  width: 100%;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#sideNavi section > ul > li.active > a {
  font-weight: 700;
  color: rgb(29, 43, 89);
}
#sideNavi section > ul > li a {
  padding: 0;
  display: block;
  box-sizing: border-box;
  color: rgb(95, 95, 95);
  border: none;
}
@media only screen and (max-width: 896px) {
  #sideNavi section > ul > li a {
    padding: 0 10px 10px 10px;
    border-bottom: rgb(216, 216, 216) 1px solid;
  }
}
#sideNavi section > ul > li a:hover {
  text-decoration: underline;
}
@media only screen and (max-width: 896px) {
  #sideNavi section > ul > li a:hover {
    text-decoration: none;
  }
}
#sideNavi section > ul > li ul {
  width: 100%;
  padding: 10px 0 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px 0;
}
@media only screen and (max-width: 896px) {
  #sideNavi section > ul > li ul {
    padding-top: 20px;
    gap: 20px 0;
  }
}
#sideNavi section > ul > li ul li {
  width: 100%;
}
#sideNavi section > ul > li ul li.active > a {
  font-weight: 700;
  color: rgb(29, 43, 89);
}
#sideNavi section > ul > li ul li a {
  padding: 0 0 0 16px;
  position: relative;
}
@media only screen and (max-width: 896px) {
  #sideNavi section > ul > li ul li a {
    padding: 0 10px 10px 26px;
  }
}
#sideNavi section > ul > li ul li a::before {
  content: "";
  width: 6px;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  background: rgb(95, 95, 95);
}
@media only screen and (max-width: 896px) {
  #sideNavi section > ul > li ul li a::before {
    left: 10px;
  }
}

#footer {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 9000;
  background: rgb(29, 43, 89);
}
@media only screen and (max-width: 896px) {
  #footer {
    z-index: 8000;
  }
}
#footer #logo {
  width: 140px;
  margin: 0;
}
@media only screen and (max-width: 896px) {
  #footer #logo {
    display: none;
  }
}
#footer #logo a {
  width: 100%;
  height: 100%;
  display: block;
}
#footer .inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 50px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 896px) {
  #footer .inner {
    padding: 30px 15px;
  }
}
@media only screen and (max-width: 800px) {
  #footer .inner {
    padding: 30px 20px;
  }
}
@media only screen and (max-width: 736px) {
  #footer .inner {
    padding: 30px 15px;
  }
}
#footer .guide_pc {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: top;
}
@media only screen and (max-width: 896px) {
  #footer .guide_pc {
    display: none;
  }
}
#footer .guide_pc .guide_subject {
  margin-right: 20px;
}
#footer .guide_pc h2 {
  width: auto;
  box-sizing: border-box;
  font-size: 100%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  border-left: rgb(90, 101, 134) 2px solid;
  border-bottom: none;
  color: rgb(255, 255, 255);
  padding: 0 0 0 20px;
  margin-bottom: 10px;
}
#footer .guide_pc ul {
  width: auto;
  margin: 0;
  justify-content: space-between;
  align-items: center;
  gap: 0 0;
}
#footer .guide_pc ul li {
  width: auto;
  margin-top: 10px;
  box-sizing: border-box;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  border-bottom: none;
}
#footer .guide_pc ul li a {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  display: block;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
}
#footer .guide_pc ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  display: none;
  border-top: rgb(255, 255, 255) 1px solid;
  border-right: rgb(255, 255, 255) 1px solid;
  position: absolute;
  top: 50%;
  right: 0;
  transform-origin: 100% 0%;
  transform: translate(-10px, -50%) rotate(45deg);
}
#footer .guide_sp {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: top;
}
@media only screen and (max-width: 896px) {
  #footer .guide_sp {
    display: flex;
    width: 100%;
    margin-bottom: 30px;
    border: none;
    flex-direction: column;
    gap: 20px 0;
  }
}
#footer .guide_sp .guide_subject {
  margin-right: 20px;
}
@media only screen and (max-width: 896px) {
  #footer .guide_sp .guide_subject {
    margin-right: 0;
  }
}
#footer .guide_sp summary {
  width: 100%;
  box-sizing: border-box;
  font-size: 100%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  border-left: none;
  border-bottom: rgb(90, 101, 134) 2px solid;
  color: rgb(255, 255, 255);
  padding: 0 0 10px 0;
  margin-bottom: 10px;
  position: relative;
  list-style: none; /* デフォルトの三角形アイコンを消します */
  cursor: pointer; /* ポインターを指さしマークに変更 */
}
#footer .guide_sp summary::-webkit-details-marker {
  display: none; /* Safariで表示されるデフォルトの三角形アイコンを消します */
}
#footer .guide_sp summary::after {
  position: absolute;
  width: 10px;
  height: 10px;
  top: calc(50% - 10px);
  right: 10px;
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  box-sizing: border-box;
  content: "";
  transform: rotate(45deg);
  transition: top 0.4s ease-out, transform 0.4s ease-out;
}
#footer .guide_sp details[open] summary::after {
  top: calc(50% - 5px);
  transform: rotate(-135deg);
}
#footer .guide_sp ul {
  width: auto;
  margin: 0;
  justify-content: space-between;
  align-items: center;
  gap: 0 0;
}
@media only screen and (max-width: 896px) {
  #footer .guide_sp ul {
    width: 100%;
    border: none;
    gap: 20px 0;
  }
}
#footer .guide_sp ul li {
  width: auto;
  margin-top: 10px;
  box-sizing: border-box;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  border-bottom: none;
}
@media only screen and (max-width: 896px) {
  #footer .guide_sp ul li {
    width: 100%;
    font-size: 93%;
    border-left: none;
    border-bottom: rgb(90, 101, 134) 1px solid;
  }
}
#footer .guide_sp ul li a {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  display: block;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
}
@media only screen and (max-width: 896px) {
  #footer .guide_sp ul li a {
    padding: 0 20px 10px 10px;
  }
}
#footer .guide_sp ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  display: none;
  border-top: rgb(255, 255, 255) 1px solid;
  border-right: rgb(255, 255, 255) 1px solid;
  position: absolute;
  top: 50%;
  right: 0;
  transform-origin: 100% 0%;
  transform: translate(-10px, -50%) rotate(45deg);
}
@media only screen and (max-width: 896px) {
  #footer .guide_sp ul li a::before {
    display: block;
  }
}
#footer .logout {
  width: auto;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 10px 0;
}
@media only screen and (max-width: 896px) {
  #footer .logout {
    width: 100%;
    padding: 0 10px;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 0;
  }
}
#footer .logout .companyLogo {
  display: none;
}
@media only screen and (max-width: 896px) {
  #footer .logout .companyLogo {
    display: block;
  }
}
#footer .logout a {
  width: 89px;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(255, 255, 255);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 5px;
}
#footer .logout a span {
  width: 20px;
  height: 20px;
}
#footer small {
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(255, 255, 255);
  order: 0;
}
@media only screen and (max-width: 896px) {
  #footer small {
    order: -1;
  }
}
#footer.default .inner {
  justify-content: center;
  align-items: center;
}

#wrapper #main .content h2 {
  margin-bottom: 10px;
}
#wrapper #main .content .aiNextBtn {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
  font-size: 139%;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-weight: 700;
}
#wrapper #main .content#newJobList {
  max-width: calc(100% - 360px - 40px);
}
@media only screen and (max-width: 1126px) {
  #wrapper #main .content#newJobList {
    max-width: calc(100% - 360px - 30px);
  }
}
@media only screen and (max-width: 1100px) {
  #wrapper #main .content#newJobList {
    max-width: 100%;
  }
}
#wrapper #main .content#jobList {
  max-width: 360px;
}
@media only screen and (max-width: 1100px) {
  #wrapper #main .content#jobList {
    max-width: 100%;
  }
}
#wrapper #main .content#jobList ul.list > li .companyInformation {
  padding: 0 10px 0 10px;
}
#wrapper #main .content#jobList ul.list > li .companyInformation .detail {
  max-width: calc(100% - 75px - 10px);
}
@media only screen and (max-width: 896px) {
  #wrapper #main .content#jobList ul.list > li .companyInformation .detail {
    max-width: 100%;
  }
}
#wrapper #main .content#jobList ul.list > li .companyInformation .logo {
  width: 30px;
  height: 30px;
  margin-right: 20px;
  background: url(../img/image_company00.webp);
  background-size: cover;
  position: relative;
}
@media only screen and (max-width: 1100px) {
  #wrapper #main .content#jobList ul.list > li .companyInformation .logo {
    width: 50px;
    height: 50px;
    margin-right: 30px;
  }
}
@media only screen and (max-width: 896px) {
  #wrapper #main .content#jobList ul.list > li .companyInformation .logo {
    margin-right: 20px;
  }
}
@media only screen and (max-width: 800px) {
  #wrapper #main .content#jobList ul.list > li .companyInformation .logo {
    margin-right: 30px;
  }
}
@media only screen and (max-width: 736px) {
  #wrapper #main .content#jobList ul.list > li .companyInformation .logo {
    margin-right: 20px;
  }
}
#wrapper #main .content#jobList ul.list > li .companyInformation .information {
  max-width: calc(100% - 30px - 20px);
}
@media only screen and (max-width: 1100px) {
  #wrapper #main .content#jobList ul.list > li .companyInformation .information {
    max-width: calc(100% - 50px - 30px);
  }
}
@media only screen and (max-width: 896px) {
  #wrapper #main .content#jobList ul.list > li .companyInformation .information {
    max-width: calc(100% - 50px - 20px);
  }
}
@media only screen and (max-width: 800px) {
  #wrapper #main .content#jobList ul.list > li .companyInformation .information {
    max-width: calc(100% - 50px - 30px);
  }
}
@media only screen and (max-width: 736px) {
  #wrapper #main .content#jobList ul.list > li .companyInformation .information {
    max-width: calc(100% - 50px - 20px);
  }
}
#wrapper #main .content#jobList ul.list > li .companyInformation .information > h3 {
  margin-bottom: 0;
}
#wrapper #main .content#aiJobList {
  max-width: 100%;
  margin-top: 20px;
  padding-top: 20px;
  border-top: rgb(216, 216, 216) 1px solid;
}
@media only screen and (max-width: 1100px) {
  #wrapper #main .content#aiJobList {
    max-width: 100%;
    margin-top: 0;
    padding-top: 20px;
  }
}
#wrapper #main .content#aiJobList > span {
  color: rgb(58, 75, 176);
  font-size: 93%;
}
#wrapper #main .content#aiJobList .btn {
  width: 100%;
  padding: 7px 20px;
  box-sizing: border-box;
  display: block;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
}
#wrapper #main .content#aiJobList .btnSet {
  width: 100%;
  max-width: 100%;
  margin: 10px auto 10px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
}
@media only screen and (max-width: 896px) {
  #wrapper #main .content#aiJobList .btnSet {
    flex-direction: column;
    gap: 5px 0;
  }
}
@media only screen and (max-width: 800px) {
  #wrapper #main .content#aiJobList .btnSet {
    flex-direction: column;
    gap: 5px 0;
  }
}
@media only screen and (max-width: 736px) {
  #wrapper #main .content#aiJobList .btnSet {
    flex-direction: column;
    gap: 5px 0;
  }
}
#wrapper #main .content#aiJobList .btnSet .btn {
  max-width: 250px;
}
@media only screen and (max-width: 375px) {
  #wrapper #main .content#aiJobList .btnSet .btn {
    width: calc((100% - 5px) / 2);
    padding: 7px 10px;
  }
}
#wrapper #main .content#aiJobList .btnSet span {
  color: rgb(90, 101, 134);
  background: rgb(232, 233, 238);
}
#wrapper #main .content#aiJobList ul.list > li .companyInformation {
  padding: 0 10px 0 10px;
}
#wrapper #main .content#aiJobList ul.list > li .companyInformation .detail {
  max-width: calc(100% - 75px - 10px);
}
@media only screen and (max-width: 896px) {
  #wrapper #main .content#aiJobList ul.list > li .companyInformation .detail {
    max-width: 100%;
  }
}
#wrapper #main .content#aiJobList ul.list > li .companyInformation .logo {
  width: 30px;
  height: 30px;
  margin-right: 20px;
  background: url(../img/image_company00.webp);
  background-size: cover;
  position: relative;
}
@media only screen and (max-width: 1100px) {
  #wrapper #main .content#aiJobList ul.list > li .companyInformation .logo {
    width: 50px;
    height: 50px;
    margin-right: 30px;
  }
}
@media only screen and (max-width: 896px) {
  #wrapper #main .content#aiJobList ul.list > li .companyInformation .logo {
    margin-right: 20px;
  }
}
@media only screen and (max-width: 800px) {
  #wrapper #main .content#aiJobList ul.list > li .companyInformation .logo {
    margin-right: 30px;
  }
}
@media only screen and (max-width: 736px) {
  #wrapper #main .content#aiJobList ul.list > li .companyInformation .logo {
    margin-right: 20px;
  }
}
#wrapper #main .content#aiJobList ul.list > li .companyInformation .information {
  max-width: calc(100% - 30px - 20px);
}
@media only screen and (max-width: 1100px) {
  #wrapper #main .content#aiJobList ul.list > li .companyInformation .information {
    max-width: calc(100% - 50px - 30px);
  }
}
@media only screen and (max-width: 896px) {
  #wrapper #main .content#aiJobList ul.list > li .companyInformation .information {
    max-width: calc(100% - 50px - 20px);
  }
}
@media only screen and (max-width: 800px) {
  #wrapper #main .content#aiJobList ul.list > li .companyInformation .information {
    max-width: calc(100% - 50px - 30px);
  }
}
@media only screen and (max-width: 736px) {
  #wrapper #main .content#aiJobList ul.list > li .companyInformation .information {
    max-width: calc(100% - 50px - 20px);
  }
}
#wrapper #main .content#aiJobList ul.list > li .companyInformation .information > h3 {
  margin-bottom: 0;
}
#wrapper #main .content#matchingJobList {
  max-width: 100%;
  margin-top: 20px;
  padding-top: 20px;
  border-top: rgb(216, 216, 216) 1px solid;
}
@media only screen and (max-width: 1100px) {
  #wrapper #main .content#matchingJobList {
    max-width: 100%;
    margin-top: 0;
    padding-top: 20px;
  }
}

/* main
--------------------------------- */
#main {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 50px 0 270px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  transition: padding 0.5s cubic-bezier(0.11, 0.83, 0.23, 0.95) 0s;
}
@media only screen and (max-width: 1126px) {
  #main {
    padding: 50px 30px 0 250px;
  }
}
@media only screen and (max-width: 896px) {
  #main {
    padding: 30px 15px 0 15px;
  }
}
#main.wide {
  padding-left: 50px;
  transition: padding 0.3s cubic-bezier(0.11, 0.83, 0.23, 0.95) 0s;
}
@media only screen and (max-width: 1126px) {
  #main.wide {
    padding-left: 30px;
  }
}
@media only screen and (max-width: 896px) {
  #main.wide {
    padding-left: 15px;
  }
}
#main #consultant {
  width: 100%;
  max-width: calc(100% - 294px - 20px);
  margin: 0 0 60px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0 10px;
}
@media only screen and (max-width: 896px) {
  #main #consultant {
    max-width: 100%;
    margin-bottom: 30px;
  }
}
#main #consultant.bubble {
  width: 470px;
  max-width: calc(100% - 284px - 20px);
  margin: 0 0 60px 0;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 17px;
}
@media only screen and (max-width: 896px) {
  #main #consultant.bubble {
    width: 100%;
    max-width: 100%;
    margin-bottom: 30px;
  }
}
#main #consultant .icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: url(../img/image_consultant_none01.webp);
  background-size: cover;
}
#main #consultant .information {
  width: calc(100% - 60px - 10px);
  max-width: 275px;
}
#main #consultant .information span {
  display: block;
}
#main #consultant .information span.title {
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
}
#main #consultant .information span.name, #main #consultant .information span.contactTitle {
  margin-bottom: 5px;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
#main #consultant .information span.phone {
  margin-bottom: 1px;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#main #consultant .information span.phone a {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0 5px;
}
#main #consultant .information span.phone a::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/icon_phone01.svg);
}
#main #consultant .information span.email {
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#main #consultant .information span.email a {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0 5px;
}
#main #consultant .information span.email a::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/icon_email01.svg);
}
#main #consultant .comment {
  width: auto;
  max-width: calc(100% - 60px - 17px);
  padding: 10px 20px;
  box-sizing: border-box;
  border-radius: 6px;
  border: rgb(216, 216, 216) 1px solid;
  background: rgb(255, 255, 255);
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
  position: relative;
}
#main #consultant .comment::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 12px 6px 0;
  border-color: transparent rgb(216, 216, 216) transparent transparent;
  position: absolute;
  top: 14px;
  left: -12px;
}
#main #consultant .comment::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 11px 5px 0;
  border-color: transparent rgb(255, 255, 255) transparent transparent;
  position: absolute;
  top: 15px;
  left: -10px;
}
#main .jobResume {
  width: 100%;
  margin: 0 0 20px 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 0 10px;
}
@media only screen and (max-width: 896px) {
  #main .jobResume {
    flex-direction: column;
    max-width: 100%;
    margin-bottom: 30px;
    gap: 10px 0;
  }
}
#main .jobResume a,
#main .jobResume .btn {
  width: auto;
  height: 100%;
  padding: 15px 20px;
  display: block;
  box-sizing: border-box;
  border: rgb(29, 43, 89) 1px solid;
  background: rgb(255, 255, 255);
  display: flex;
  flex-wrap: no-wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0 20px;
  cursor: pointer;
  transition: background 0.2s linear 0s;
}
@media only screen and (max-width: 896px) {
  #main .jobResume a,
  #main .jobResume .btn {
    width: 70%;
    justify-content: center;
  }
}
#main .jobResume a span,
#main .jobResume .btn span {
  width: auto;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  transition: color 0.2s linear 0s;
}
#main .jobResume a span > span,
#main .jobResume .btn span > span {
  display: block;
  font-size: 12px;
  font-weight: 400;
}
#main .jobResume a span.icon,
#main .jobResume .btn span.icon {
  width: 14px;
  height: 14px;
  position: relative;
}
#main .jobResume a span.icon::before,
#main .jobResume .btn span.icon::before {
  content: "";
  width: 10px;
  height: 10px;
  background: rgb(29, 43, 89);
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 100% 100%;
  transform: scale(1, 1);
  transition: transform 0.2s linear 0s, background 0.2s linear 0s;
}
#main .jobResume a span.icon::after,
#main .jobResume .btn span.icon::after {
  content: "";
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-right: rgb(29, 43, 89) 2px solid;
  border-bottom: rgb(29, 43, 89) 2px solid;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: border 0.2s linear 0s;
}
#main .jobResume a:hover,
#main .jobResume .btn:hover {
  background: rgb(29, 43, 89);
  transition: background 0.5s linear 0s;
}
#main .jobResume a:hover span,
#main .jobResume .btn:hover span {
  color: rgb(255, 255, 255);
  transition: color 0.5s linear 0s;
}
#main .jobResume a:hover span.icon::before,
#main .jobResume .btn:hover span.icon::before {
  background: rgb(255, 255, 255);
  transform: scale(1.1, 1.1);
  transition: transform 0.2s linear 0.3s, background 0.5s linear 0s;
}
#main .jobResume a:hover span.icon::after,
#main .jobResume .btn:hover span.icon::after {
  border-color: rgb(255, 255, 255);
  transition: border 0.5s linear 0s;
}
#main .phoneAccess {
  width: 100%;
  max-width: 284px;
  margin: 0;
}
@media only screen and (max-width: 896px) {
  #main .phoneAccess {
    max-width: 345px;
    margin: 0 auto 100px;
  }
}
@media only screen and (max-width: 800px) {
  #main .phoneAccess {
    max-width: 490px;
  }
}
@media only screen and (max-width: 736px) {
  #main .phoneAccess {
    max-width: 345px;
  }
}
#main .phoneAccess.consultant {
  max-width: 294px;
}
@media only screen and (max-width: 896px) {
  #main .phoneAccess.consultant {
    max-width: 345px;
    margin: 0 auto 40px;
  }
}
@media only screen and (max-width: 800px) {
  #main .phoneAccess.consultant {
    max-width: 490px;
  }
}
@media only screen and (max-width: 736px) {
  #main .phoneAccess.consultant {
    max-width: 345px;
  }
}
#main .phoneAccess.contact {
  max-width: 194px;
}
@media only screen and (max-width: 896px) {
  #main .phoneAccess.contact {
    max-width: 345px;
    margin: 0 auto 40px;
  }
}
@media only screen and (max-width: 800px) {
  #main .phoneAccess.contact {
    max-width: 490px;
  }
}
@media only screen and (max-width: 736px) {
  #main .phoneAccess.contact {
    max-width: 345px;
  }
}
@media only screen and (max-width: 896px) {
  #main .phoneAccess.contact.jobDetails {
    margin-bottom: 100px;
  }
}
#main .phoneAccess a,
#main .phoneAccess .btn {
  width: 100%;
  height: 100%;
  padding: 15px 20px;
  display: block;
  box-sizing: border-box;
  border: rgb(29, 43, 89) 1px solid;
  background: rgb(255, 255, 255);
  display: flex;
  flex-wrap: no-wrap;
  justify-content: center;
  align-items: center;
  gap: 0 20px;
  cursor: pointer;
  transition: background 0.2s linear 0s;
}
#main .phoneAccess a span,
#main .phoneAccess .btn span {
  width: auto;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  transition: color 0.2s linear 0s;
}
#main .phoneAccess a span > span,
#main .phoneAccess .btn span > span {
  display: block;
  font-size: 12px;
  font-weight: 400;
}
#main .phoneAccess a span.icon,
#main .phoneAccess .btn span.icon {
  width: 14px;
  height: 14px;
  position: relative;
}
#main .phoneAccess a span.icon::before,
#main .phoneAccess .btn span.icon::before {
  content: "";
  width: 10px;
  height: 10px;
  background: rgb(29, 43, 89);
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 100% 100%;
  transform: scale(1, 1);
  transition: transform 0.2s linear 0s, background 0.2s linear 0s;
}
#main .phoneAccess a span.icon::after,
#main .phoneAccess .btn span.icon::after {
  content: "";
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-right: rgb(29, 43, 89) 2px solid;
  border-bottom: rgb(29, 43, 89) 2px solid;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: border 0.2s linear 0s;
}
#main .phoneAccess a:hover,
#main .phoneAccess .btn:hover {
  background: rgb(29, 43, 89);
  transition: background 0.5s linear 0s;
}
#main .phoneAccess a:hover span,
#main .phoneAccess .btn:hover span {
  color: rgb(255, 255, 255);
  transition: color 0.5s linear 0s;
}
#main .phoneAccess a:hover span.icon::before,
#main .phoneAccess .btn:hover span.icon::before {
  background: rgb(255, 255, 255);
  transform: scale(1.1, 1.1);
  transition: transform 0.2s linear 0.3s, background 0.5s linear 0s;
}
#main .phoneAccess a:hover span.icon::after,
#main .phoneAccess .btn:hover span.icon::after {
  border-color: rgb(255, 255, 255);
  transition: border 0.5s linear 0s;
}
#main .content {
  width: 100%;
  margin: 0;
}
@media only screen and (max-width: 1100px) {
  #main .content {
    margin-bottom: 60px;
  }
}
#main .content:last-of-type {
  margin-bottom: 0;
}
#main .content h2 {
  width: 100%;
  margin: 0 auto 20px;
  font-size: 108%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 10px;
}
#main .content h2 span {
  padding: 0 0 0 20px;
  box-sizing: border-box;
  position: relative;
}
#main .content h2 span::before {
  content: "";
  width: 10px;
  height: 1px;
  background: rgb(29, 43, 89);
  position: absolute;
  top: 11px;
  left: 0;
}
#main .content .btn {
  width: 100%;
  padding: 7px 20px;
  box-sizing: border-box;
  display: block;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: rgb(255, 255, 255);
  background: rgb(29, 43, 89);
}
#main .content ul.list {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 30px 0;
}
#main .content ul.list > li {
  width: 100%;
  padding: 20px 20px 30px 20px;
  box-sizing: border-box;
  border: rgb(216, 216, 216) 1px solid;
  border-left: rgb(29, 43, 89) 2px solid;
  background: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px 0;
}
@media only screen and (max-width: 896px) {
  #main .content ul.list > li {
    padding: 20px 10px 30px 10px;
  }
}
@media only screen and (max-width: 800px) {
  #main .content ul.list > li {
    padding: 20px 20px 30px 20px;
  }
}
@media only screen and (max-width: 736px) {
  #main .content ul.list > li {
    padding: 20px 10px 30px 10px;
  }
}
#main .content ul.list > li.decline {
  background: rgb(240, 240, 240);
}
#main .content ul.list > li.complete {
  background: rgb(240, 240, 240);
}
#main .content ul.list > li.none {
  padding-bottom: 20px;
}
@media only screen and (max-width: 896px) {
  #main .content ul.list > li.none {
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 800px) {
  #main .content ul.list > li.none {
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 736px) {
  #main .content ul.list > li.none {
    padding-bottom: 20px;
  }
}
#main .content ul.list > li .companyInformation {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
@media only screen and (max-width: 896px) {
  #main .content ul.list > li .companyInformation {
    padding: 0 10px 0 10px;
  }
}
@media only screen and (max-width: 800px) {
  #main .content ul.list > li .companyInformation {
    padding: 0 0 0 10px;
  }
}
@media only screen and (max-width: 736px) {
  #main .content ul.list > li .companyInformation {
    padding: 0 10px 0 10px;
  }
}
#main .content ul.list > li .companyInformation .date {
  width: 100%;
  max-width: 140px;
  margin: 0 0 0 auto;
  display: block;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: right;
  color: rgb(165, 165, 165);
}
@media only screen and (max-width: 896px) {
  #main .content ul.list > li .companyInformation .date {
    max-width: 100%;
    margin-top: 10px;
  }
}
#main .content ul.list > li .companyInformation .detailBtn {
  width: 100%;
  max-width: 75px;
  margin: 0 0 0 auto;
  padding-right: 15px;
  display: block;
  box-sizing: border-box;
  font-size: 108%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: right;
  position: relative;
}
@media only screen and (max-width: 896px) {
  #main .content ul.list > li .companyInformation .detailBtn {
    max-width: 100%;
    margin-top: 10px;
  }
}
#main .content ul.list > li .companyInformation .detailBtn::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: rgb(29, 43, 89) 1px solid;
  border-right: rgb(29, 43, 89) 1px solid;
  position: absolute;
  top: 50%;
  right: 0;
  transform-origin: 100% 0%;
  transform: translate(0, calc(-50% + 5px)) rotate(45deg);
}
#main .content ul.list > li .detail {
  width: 100%;
  max-width: calc(100% - 140px - 10px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
@media only screen and (max-width: 896px) {
  #main .content ul.list > li .detail {
    max-width: 100%;
  }
}
#main .content ul.list > li .detail .status {
  width: 100%;
  margin: 0 0 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px 10px;
}
#main .content ul.list > li .detail .status span {
  padding: 5px 20px;
  box-sizing: border-box;
  font-size: 108%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  border: rgb(216, 216, 216) 1px solid;
  background: rgb(250, 250, 250);
}
@media only screen and (max-width: 896px) {
  #main .content ul.list > li .detail .status span {
    font-size: 93%;
  }
}
@media only screen and (max-width: 800px) {
  #main .content ul.list > li .detail .status span {
    font-size: 108%;
  }
}
@media only screen and (max-width: 736px) {
  #main .content ul.list > li .detail .status span {
    font-size: 93%;
  }
}
#main .content ul.list > li .detail .status span.action {
  color: rgb(255, 255, 255);
  background: rgb(90, 160, 170);
  border-color: rgb(90, 160, 170);
}
#main .content ul.list > li .detail .logo {
  width: 50px;
  height: 50px;
  margin-right: 30px;
  background: url(../img/image_company00.webp);
  background-size: cover;
  position: relative;
}
@media only screen and (max-width: 896px) {
  #main .content ul.list > li .detail .logo {
    margin-right: 20px;
  }
}
@media only screen and (max-width: 800px) {
  #main .content ul.list > li .detail .logo {
    margin-right: 30px;
  }
}
@media only screen and (max-width: 736px) {
  #main .content ul.list > li .detail .logo {
    margin-right: 20px;
  }
}
#main .content ul.list > li .detail .logo span {
  width: 100%;
  height: 100%;
  display: block;
  background: rgb(255, 255, 255);
}
#main .content ul.list > li .detail .information {
  width: 100%;
  max-width: calc(100% - 50px - 30px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px 0;
}
@media only screen and (max-width: 896px) {
  #main .content ul.list > li .detail .information {
    max-width: calc(100% - 50px - 20px);
  }
}
@media only screen and (max-width: 800px) {
  #main .content ul.list > li .detail .information {
    max-width: calc(100% - 50px - 30px);
  }
}
@media only screen and (max-width: 736px) {
  #main .content ul.list > li .detail .information {
    max-width: calc(100% - 50px - 20px);
  }
}
#main .content ul.list > li .detail .information > h3 {
  width: 100%;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
#main .content ul.list > li .detail .information > h3 span {
  width: 100%;
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
}
#main .content ul.list > li .detail .information dl {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px 10px;
}
#main .content ul.list > li .detail .information dl dt {
  width: auto;
  padding: 4px 10px;
  box-sizing: border-box;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  background: rgb(232, 233, 238);
}
#main .content ul.list > li .detail .information dl dd {
  width: auto;
  padding-top: 2px;
  font-size: 93%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
#main .content ul.list > li .consultantInformation {
  width: 100%;
  margin: 0 auto;
  padding: 20px 10px 0 10px;
  box-sizing: border-box;
  border-top: rgb(216, 216, 216) 1px solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 20px;
}
@media only screen and (max-width: 375px) {
  #main .content ul.list > li .consultantInformation {
    padding: 20px 5px 0 10px;
  }
}
#main .content ul.list > li .consultantInformation .icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: url(../img/image_consultant_none01.webp);
  background-size: cover;
}
#main .content ul.list > li .consultantInformation .comment {
  width: 100%;
  max-width: calc(100% - 40px - 20px);
}
#main .content ul.list > li .consultantInformation .comment h3 {
  width: 100%;
  margin: 0 auto 5px;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
}
#main .content ul.list > li .consultantInformation .comment p {
  width: 100%;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
#main .content ul.list > li .btnSet {
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  padding: 0 10px 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0 10px;
}
@media only screen and (max-width: 896px) {
  #main .content ul.list > li .btnSet {
    gap: 0 5px;
  }
}
@media only screen and (max-width: 800px) {
  #main .content ul.list > li .btnSet {
    gap: 0 10px;
  }
}
@media only screen and (max-width: 736px) {
  #main .content ul.list > li .btnSet {
    gap: 0 5px;
  }
}
#main .content ul.list > li .btnSet .btn {
  max-width: 140px;
}
@media only screen and (max-width: 375px) {
  #main .content ul.list > li .btnSet .btn {
    width: calc((100% - 5px) / 2);
    max-width: 150px;
    padding: 7px 10px;
  }
}
#main .content ul.list > li .btnSet span {
  color: rgb(90, 101, 134);
  background: rgb(232, 233, 238);
  cursor: pointer;
}
#main .content ul.list > li .btnSet span.declineCancelBtn {
  max-width: 170px;
  font-weight: 700;
  color: rgb(29, 43, 89);
  background: rgb(255, 255, 255);
}
#main .content ul.list > li .schedule {
  width: 100%;
  margin: 0 auto;
  padding: 20px 0 0 0;
  box-sizing: border-box;
  border-top: rgb(216, 216, 216) 1px solid;
}
#main .content ul.list > li .schedule h3 {
  width: 100%;
  margin: 0 auto 20px;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
#main .content ul.list > li .schedule h3 span {
  display: block;
}
#main .content ul.list > li .schedule h3 span:first-of-type {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
#main .content ul.list > li .schedule h3 span:last-of-type {
  width: 100%;
  max-width: calc(100% - 25px - 10px);
  padding-top: 3px;
  font-size: 93%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
}
#main .content ul.list > li .schedule dl {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px 20px;
}
#main .content ul.list > li .schedule dl dt {
  width: 100%;
  max-width: 70px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
  border-right: rgb(216, 216, 216) 1px solid;
}
#main .content ul.list > li .schedule dl dd {
  width: 100%;
  max-width: calc(100% - 70px - 20px);
  font-size: 93%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
#main .content ul.list > li .schedule dl dd a {
  width: auto;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  text-decoration: underline;
}
#main .content ul.list > li p.message {
  width: 100%;
  margin: 0 auto 0;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
}
#main .content ul.list.introducing > li .detail .logo {
  width: 70px;
  height: 70px;
}
@media only screen and (max-width: 896px) {
  #main .content ul.list.introducing > li .detail .logo {
    width: 50px;
    height: 50px;
  }
}
@media only screen and (max-width: 800px) {
  #main .content ul.list.introducing > li .detail .logo {
    width: 70px;
    height: 70px;
  }
}
@media only screen and (max-width: 736px) {
  #main .content ul.list.introducing > li .detail .logo {
    width: 50px;
    height: 50px;
  }
}
#main .content ul.list.introducing > li .detail .information {
  max-width: calc(100% - 70px - 30px);
}
@media only screen and (max-width: 896px) {
  #main .content ul.list.introducing > li .detail .information {
    max-width: calc(100% - 50px - 20px);
  }
}
@media only screen and (max-width: 800px) {
  #main .content ul.list.introducing > li .detail .information {
    max-width: calc(100% - 70px - 30px);
  }
}
@media only screen and (max-width: 736px) {
  #main .content ul.list.introducing > li .detail .information {
    max-width: calc(100% - 50px - 20px);
  }
}
#main .content ul.list.selectionStatus > li .detail {
  max-width: calc(100% - 75px - 10px);
}
@media only screen and (max-width: 896px) {
  #main .content ul.list.selectionStatus > li .detail {
    max-width: 100%;
  }
}
#main .content ul.list.selectionStatus > li .schedule {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}
#main .content ul.list.selectionStatus > li .schedule dl {
  width: 100%;
  max-width: calc(100% - 184px - 30px);
  padding: 0 0 0 35px;
}
@media only screen and (max-width: 896px) {
  #main .content ul.list.selectionStatus > li .schedule dl {
    max-width: 100%;
    padding: 0 10px;
  }
}
#main .content ul.list.selectionStatus > li .schedule .scheduleBtn {
  width: 100%;
  max-width: 184px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@media only screen and (max-width: 896px) {
  #main .content ul.list.selectionStatus > li .schedule .scheduleBtn {
    max-width: 325px;
    margin: 20px auto 0;
    padding: 0 10px;
  }
}
#main .content ul.list.selectionStatus > li .schedule .scheduleBtn a {
  width: 100%;
  padding: 12px 20px;
  display: block;
  box-sizing: border-box;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: rgb(255, 255, 255);
  background: rgb(29, 43, 89);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
}
#main .content ul.list.selectionStatus > li .schedule .scheduleBtn a span {
  width: 14px;
  height: 14px;
  position: relative;
}
#main .content ul.list.selectionStatus > li .schedule .scheduleBtn a span::before {
  content: "";
  width: 10px;
  height: 10px;
  background: rgb(255, 255, 255);
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 100% 100%;
  transform: scale(1, 1);
  transition: transform 0.2s linear 0s;
}
#main .content ul.list.selectionStatus > li .schedule .scheduleBtn a span::after {
  content: "";
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-right: rgb(255, 255, 255) 2px solid;
  border-bottom: rgb(255, 255, 255) 2px solid;
  position: absolute;
  top: 2px;
  left: 2px;
}
#main .content ul.list.selectionStatus > li .schedule .scheduleBtn a:hover span::before {
  transform: scale(1.1, 1.1);
}
#main .content .nextBtn {
  width: 100%;
  max-width: 120px;
  margin: 30px 0 0 auto;
  box-sizing: border-box;
  border: rgb(216, 216, 216) 1px solid;
  background: rgb(255, 255, 255);
}
#main .content .nextBtn a {
  width: 100%;
  padding: 8px 20px;
  display: block;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: rgb(29, 43, 89);
}
#main .content .settingArea {
  width: 100%;
  padding: 30px 20px;
  box-sizing: border-box;
  border: rgb(216, 216, 216) 1px solid;
  background: rgb(255, 255, 255);
}
@media only screen and (max-width: 896px) {
  #main .content .settingArea {
    padding: 30px 10px;
  }
}
@media only screen and (max-width: 800px) {
  #main .content .settingArea {
    padding: 30px 20px;
  }
}
@media only screen and (max-width: 736px) {
  #main .content .settingArea {
    padding: 30px 10px;
  }
}

/* main default
--------------------------------- */
#wrapper.default #main {
  padding: 50px 50px 0 50px;
}
@media only screen and (max-width: 1126px) {
  #wrapper.default #main {
    padding: 50px 30px 0 20px;
  }
}
@media only screen and (max-width: 896px) {
  #wrapper.default #main {
    padding: 30px 15px 0 15px;
  }
}

/* flatpickr
--------------------------------- */
.flatpickrArea {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
}
.flatpickrArea .flatpickr-input {
  width: 93% !important;
}
.flatpickrArea #fpClearDate {
  margin: auto;
  padding: 7.5px;
  width: 27px;
  margin: 0 0 0 3px;
  font-size: 124%;
  font-weight: 700;
  color: rgb(95, 95, 95);
  cursor: pointer;
}

@media only screen and (max-width: 414px) {
  .flatpickr-calendar {
    left: 30px !important;
  }
}

/* 日曜日：赤 */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7n+1),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n+1) {
  color: rgb(235, 131, 147);
}

/* 土曜日：青 */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
  color: rgb(90, 160, 170);
}

/* カレンダーの年と月が表示されているところ */
.flatpickr-current-month {
  display: flex !important;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  padding: 0;
}

/* > */
.flatpickr-months .flatpickr-next-month {
  padding: 0 10px 10px 10px;
}

/* < */
.flatpickr-months .flatpickr-prev-month {
  padding: 0 10px 10px 10px;
}

/* 今日の日付の部分 */
.flatpickr-day.today {
  background: #f9f7f7;
  border-radius: 5px;
  border: none;
}

/* クリックして選択した日付の部分 */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: rgb(235, 131, 147) !important;
  border-radius: 5px;
  font-weight: bold;
  color: #fff !important;
  border: 1px solid rgb(235, 131, 147) !important;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  background: #b1cae6;
  border-radius: 5px;
}

/* login
--------------------------------- */
#main.login {
  max-width: 890px;
}
#main.login .content {
  max-width: calc(100% - 220px - 50px);
}
@media only screen and (max-width: 896px) {
  #main.login .content {
    max-width: 100%;
  }
}
#main.login .content form {
  width: 100%;
}
#main.login .content form dl {
  width: 100%;
  margin: 0 auto -30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}
@media only screen and (max-width: 640px) {
  #main.login .content form dl {
    margin-bottom: -20px;
  }
}
#main.login .content form dl dt {
  width: 100%;
  max-width: 100px;
  margin-bottom: 30px;
  padding: 9px 10px 0 10px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
}
@media only screen and (max-width: 640px) {
  #main.login .content form dl dt {
    max-width: 100%;
    margin-bottom: 5px;
    padding: 0 10px 0 10px;
    border: none;
  }
}
#main.login .content form dl dd {
  width: 100%;
  max-width: calc(100% - 100px);
  margin-bottom: 30px;
  padding: 0 10px 0 0;
  box-sizing: border-box;
}
@media only screen and (max-width: 640px) {
  #main.login .content form dl dd {
    max-width: 100%;
    margin-bottom: 30px;
    padding: 0 10px 0 10px;
  }
}
#main.login .content form dl dd input[type=text], #main.login .content form dl dd input[type=password], #main.login .content form dl dd button, #main.login .content form dl dd textarea, #main.login .content form dl dd select {
  border: none;
  border-radius: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#main.login .content form dl dd input[type=text], #main.login .content form dl dd input[type=password] {
  width: 100%;
  max-height: 200px;
  min-height: 38px;
  padding: 9px 10px;
  box-sizing: border-box;
  background: rgb(250, 250, 250);
  border: rgb(216, 216, 216) 1px solid;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
}
#main.login .content form dl dd input[type=text].error, #main.login .content form dl dd input[type=password].error {
  border-color: rgb(235, 131, 147);
}
#main.login .content form dl dd label.error {
  width: 100%;
  margin: 5px auto 0;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(235, 131, 147);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 7px;
}
#main.login .content form dl dd label.error::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 2px;
  display: block;
  background: url(../img/icon_error01.svg);
  background-size: cover;
}
#main.login .content form button[type=submit] {
  border: none;
}
#main.login .content form .btn {
  width: 100%;
  max-width: 150px;
  margin: 30px auto 20px;
  padding: 7px 20px;
  box-sizing: border-box;
  display: block;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
}
#main.login .content .forgot {
  width: 100%;
  margin: 0 auto 20px;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: right;
}
#main.login .content .forgot a {
  padding-right: 12px;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  text-decoration: none;
}
@media only screen and (max-width: 896px) {
  #main.login .content .forgot a {
    max-width: 100%;
    margin-top: 10px;
  }
}
#main.login .content .forgot a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: rgb(29, 43, 89) 1px solid;
  border-right: rgb(29, 43, 89) 1px solid;
  position: absolute;
  top: 50%;
  right: 0;
  transform-origin: 100% 0%;
  transform: translate(0, calc(-50% + 3px)) rotate(45deg);
}
#main.login .content .forgot a:hover {
  text-decoration: underline;
}
#main.login .content .terms {
  width: 100%;
  padding: 20px 10px 0 10px;
  box-sizing: border-box;
  border-top: rgb(216, 216, 216) 1px solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px 0;
}
#main.login .content .terms li {
  width: 100%;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: right;
}
#main.login .content .terms li a {
  padding-right: 12px;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  text-decoration: none;
}
@media only screen and (max-width: 896px) {
  #main.login .content .terms li a {
    max-width: 100%;
    margin-top: 10px;
  }
}
#main.login .content .terms li a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: rgb(29, 43, 89) 1px solid;
  border-right: rgb(29, 43, 89) 1px solid;
  position: absolute;
  top: 50%;
  right: 0;
  transform-origin: 100% 0%;
  transform: translate(0, calc(-50% + 3px)) rotate(45deg);
}
#main.login .content .terms li a:hover {
  text-decoration: underline;
}
#main.login #externalAccount {
  max-width: 220px;
}
@media only screen and (max-width: 896px) {
  #main.login #externalAccount {
    max-width: 100%;
  }
}
#main.login #externalAccount ul {
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px 0;
}
#main.login #externalAccount ul li {
  width: 100%;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
  border: rgb(216, 216, 216) 1px solid;
  background: rgb(255, 255, 255);
}
#main.login #externalAccount ul li a {
  width: 100%;
  display: block;
}
#main.login #externalAccount ul li a > span {
  width: 100%;
  padding: 7px 20px;
  display: block;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 5px;
}
#main.login #externalAccount ul li a > span span {
  width: 20px;
  height: 20px;
  display: block;
}

/* registration
--------------------------------- */
#main.init {
  max-width: 980px;
}
#main.init h2 {
  display: block !important;
}
#main .content.registration h2 {
  display: block;
}
@media only screen and (max-width: 896px) {
  #main .content.registration h2 {
    display: none;
  }
}
#main .content.registration h3 {
  width: 100%;
  margin: 50px auto 30px;
  padding: 0 10px 10px 10px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  border-bottom: rgb(216, 216, 216) 1px solid;
}
#main .content.registration h3:first-child {
  margin: 0 auto 20px;
}
#main .content.registration .settingArea {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
#main .content.registration .settingArea section {
  width: 100%;
  margin-bottom: 60px;
}
#main .content.registration .settingArea section:last-of-type {
  margin-bottom: 0;
}
#main .content.registration .settingArea section .registnationSubTitle {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: rgb(216, 216, 216) 1px solid;
  margin: 0 auto 30px;
}
#main .content.registration .settingArea section .registnationSubTitle h3 {
  margin: 0;
  padding: 0 10px 10px 10px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  border-bottom: none;
}
#main .content.registration .settingArea section .registnationSubTitle .editBtn {
  max-width: 180px;
  margin-bottom: 8px;
  font-size: 12px;
}
#main .content.registration .settingArea section .accordionTitle {
  position: relative;
}
#main .content.registration .settingArea section .accordionTitle::after {
  border-right: solid 2px rgb(29, 43, 89);
  border-top: solid 2px rgb(29, 43, 89);
  content: "";
  display: block;
  height: 6px;
  width: 6px;
  position: absolute;
  left: 100px;
  top: 14%;
  transform: rotate(135deg);
  transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
}
#main .content.registration .settingArea section .accordionTitle.open::after {
  top: 25%;
  transform: rotate(-45deg);
}
#main .content.registration .settingArea section .accordionItem {
  display: none;
}
#main .content.registration .settingArea section dl {
  width: 100%;
  margin: 0 auto -30px;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}
@media only screen and (max-width: 896px) {
  #main .content.registration .settingArea section dl {
    padding: 0 10px;
  }
}
@media only screen and (max-width: 800px) {
  #main .content.registration .settingArea section dl {
    padding: 0 20px;
  }
}
@media only screen and (max-width: 736px) {
  #main .content.registration .settingArea section dl {
    padding: 0 10px;
  }
}
@media only screen and (max-width: 640px) {
  #main .content.registration .settingArea section dl {
    margin-bottom: -20px;
  }
}
#main .content.registration .settingArea section dl dt {
  width: 100%;
  max-width: 130px;
  margin-bottom: 30px;
  padding: 0 20px 20px 20px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
  border-bottom: rgb(216, 216, 216) 1px solid;
}
@media only screen and (max-width: 640px) {
  #main .content.registration .settingArea section dl dt {
    max-width: 100%;
    margin-bottom: 5px;
    padding: 0 5px 0 5px;
    border: none;
  }
}
#main .content.registration .settingArea section dl dd {
  width: 100%;
  max-width: calc(100% - 130px);
  margin-bottom: 30px;
  padding: 0 20px 20px 10px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
  border-bottom: rgb(216, 216, 216) 1px solid;
}
@media only screen and (max-width: 640px) {
  #main .content.registration .settingArea section dl dd {
    max-width: 100%;
    margin-bottom: 20px;
    padding: 0 5px 20px 5px;
  }
}
#main .content.registration .settingArea section dl dd a {
  max-width: 128px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
}
#main .content.registration .settingArea #registrationForm,
#main .content.registration .settingArea #businessOutsourcingAgreementForm,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm {
  width: 100%;
}
#main .content.registration .settingArea #registrationForm .requiredIcon,
#main .content.registration .settingArea #registrationForm .variableRequiredIcon,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .requiredIcon,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .variableRequiredIcon,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .requiredIcon,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .variableRequiredIcon {
  color: rgb(235, 131, 147);
  font-size: 108%;
  font-weight: 700;
  padding: 1px;
}
#main .content.registration .settingArea #registrationForm .explanationArea,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .explanationArea,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .explanationArea {
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
  background-color: rgba(58, 75, 176, 0.1);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin: 0 0 30px 0;
}
#main .content.registration .settingArea #registrationForm .explanationArea:nth-child(2),
#main .content.registration .settingArea #businessOutsourcingAgreementForm .explanationArea:nth-child(2),
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .explanationArea:nth-child(2) {
  margin: 30px 0;
}
@media only screen and (max-width: 896px) {
  #main .content.registration .settingArea #registrationForm .explanationArea,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm .explanationArea,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .explanationArea {
    padding: 40px 20px;
  }
}
#main .content.registration .settingArea #registrationForm .explanationArea p,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .explanationArea p,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .explanationArea p {
  font-size: 108%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
  margin-bottom: 16px;
}
@media only screen and (max-width: 896px) {
  #main .content.registration .settingArea #registrationForm .explanationArea p,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm .explanationArea p,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .explanationArea p {
    font-size: 93%;
  }
}
#main .content.registration .settingArea #registrationForm .explanationArea label,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .explanationArea label,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .explanationArea label {
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-size: 93%;
  color: rgb(165, 165, 165);
}
#main .content.registration .settingArea #registrationForm .explanationArea .radioArea,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .explanationArea .radioArea,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .explanationArea .radioArea {
  padding-top: 9px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 20px;
}
#main .content.registration .settingArea #registrationForm .explanationArea .radioArea label,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .explanationArea .radioArea label,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .explanationArea .radioArea label {
  width: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 10px;
  color: inherit;
  font-size: 108%;
}
#main .content.registration .settingArea #registrationForm .explanationArea span.error,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .explanationArea span.error,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .explanationArea span.error {
  width: 100%;
  padding: 0;
  display: block;
  box-sizing: border-box;
}
#main .content.registration .settingArea #registrationForm .explanationArea label.error,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .explanationArea label.error,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .explanationArea label.error {
  width: 100%;
  margin: 5px auto 0;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(235, 131, 147);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0 7px;
}
#main .content.registration .settingArea #registrationForm .explanationArea label.error::before,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .explanationArea label.error::before,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .explanationArea label.error::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 2px;
  display: block;
  background: url(../img/icon_error01.svg);
  background-size: cover;
}
#main .content.registration .settingArea #registrationForm .explanationArea .detailDispBtn,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .explanationArea .detailDispBtn,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .explanationArea .detailDispBtn {
  width: 155px;
  position: relative;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  cursor: pointer;
}
#main .content.registration .settingArea #registrationForm .explanationArea .detailDispBtn::after,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .explanationArea .detailDispBtn::after,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .explanationArea .detailDispBtn::after {
  border-right: solid 2px rgb(29, 43, 89);
  border-top: solid 2px rgb(29, 43, 89);
  content: "";
  display: block;
  height: 8px;
  width: 8px;
  position: absolute;
  left: 140px;
  top: 15%;
  transform: rotate(135deg);
  transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
}
#main .content.registration .settingArea #registrationForm .explanationArea .detailDispBtn.open::after,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .explanationArea .detailDispBtn.open::after,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .explanationArea .detailDispBtn.open::after {
  top: 35%;
  transform: rotate(-45deg);
}
#main .content.registration .settingArea #registrationForm .infoAccordionItem,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .infoAccordionItem,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .infoAccordionItem {
  display: none;
  margin: 0 0 30px 0;
}
#main .content.registration .settingArea #registrationForm .detailInfoAccordionItem,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .detailInfoAccordionItem,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .detailInfoAccordionItem {
  display: none;
  margin: 0 0 60px 0;
}
#main .content.registration .settingArea #registrationForm dl,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl {
  width: 100%;
  margin: 0 auto -30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}
@media only screen and (max-width: 640px) {
  #main .content.registration .settingArea #registrationForm dl,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm dl,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl {
    margin-bottom: -20px;
  }
}
#main .content.registration .settingArea #registrationForm dl dt,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dt,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dt {
  width: 100%;
  max-width: 130px;
  margin-bottom: 30px;
  padding: 9px 10px 0 10px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
}
@media only screen and (max-width: 640px) {
  #main .content.registration .settingArea #registrationForm dl dt,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm dl dt,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dt {
    max-width: 100%;
    margin-bottom: 5px;
    padding: 0 10px 0 10px;
    border: none;
  }
}
#main .content.registration .settingArea #registrationForm dl dd,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd {
  width: 100%;
  max-width: calc(100% - 130px);
  margin-bottom: 30px;
  padding: 0 10px 0 0;
  box-sizing: border-box;
}
@media only screen and (max-width: 640px) {
  #main .content.registration .settingArea #registrationForm dl dd,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd {
    max-width: 100%;
    margin-bottom: 30px;
    padding: 0 10px 0 10px;
  }
}
#main .content.registration .settingArea #registrationForm dl dd .includeUnit,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .includeUnit,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .includeUnit {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  box-sizing: border-box;
}
#main .content.registration .settingArea #registrationForm dl dd .includeUnit .unit,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .includeUnit .unit,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .includeUnit .unit {
  width: 40px;
  padding: 0 0 4px 10px;
}
#main .content.registration .settingArea #registrationForm dl dd input[type=text],
#main .content.registration .settingArea #registrationForm dl dd input[type=email],
#main .content.registration .settingArea #registrationForm dl dd input[type=date],
#main .content.registration .settingArea #registrationForm dl dd button,
#main .content.registration .settingArea #registrationForm dl dd textarea,
#main .content.registration .settingArea #registrationForm dl dd select,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=text],
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=email],
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=date],
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd button,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd textarea,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd select,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=text],
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=email],
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=date],
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd button,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd textarea,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd select {
  border: none;
  border-radius: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#main .content.registration .settingArea #registrationForm dl dd input[type=text],
#main .content.registration .settingArea #registrationForm dl dd input[type=tel],
#main .content.registration .settingArea #registrationForm dl dd input[type=email],
#main .content.registration .settingArea #registrationForm dl dd input[type=month],
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=text],
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=tel],
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=email],
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=month],
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=text],
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=tel],
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=email],
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=month] {
  width: 100%;
  max-width: 460px;
  max-height: 200px;
  padding: 9px 10px;
  box-sizing: border-box;
  background: rgb(250, 250, 250);
  border: rgb(216, 216, 216) 1px solid;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  border-radius: 0%;
}
#main .content.registration .settingArea #registrationForm dl dd input[type=text]#tel,
#main .content.registration .settingArea #registrationForm dl dd input[type=tel]#tel,
#main .content.registration .settingArea #registrationForm dl dd input[type=email]#tel,
#main .content.registration .settingArea #registrationForm dl dd input[type=month]#tel,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=text]#tel,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=tel]#tel,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=email]#tel,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=month]#tel,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=text]#tel,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=tel]#tel,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=email]#tel,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=month]#tel {
  max-width: 160px;
}
#main .content.registration .settingArea #registrationForm dl dd input[type=text].error,
#main .content.registration .settingArea #registrationForm dl dd input[type=tel].error,
#main .content.registration .settingArea #registrationForm dl dd input[type=email].error,
#main .content.registration .settingArea #registrationForm dl dd input[type=month].error,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=text].error,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=tel].error,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=email].error,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=month].error,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=text].error,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=tel].error,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=email].error,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=month].error {
  border-color: rgb(235, 131, 147);
}
#main .content.registration .settingArea #registrationForm dl dd input[type=date],
#main .content.registration .settingArea #registrationForm dl dd input[type=month],
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=date],
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=month],
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=date],
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=month] {
  width: 100%;
  max-width: 150px;
  max-height: 200px;
  padding: 9px 10px;
  box-sizing: border-box;
  background: rgb(250, 250, 250);
  border: rgb(216, 216, 216) 1px solid;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
}
#main .content.registration .settingArea #registrationForm dl dd input[type=date]#tel,
#main .content.registration .settingArea #registrationForm dl dd input[type=month]#tel,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=date]#tel,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=month]#tel,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=date]#tel,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=month]#tel {
  max-width: 160px;
}
#main .content.registration .settingArea #registrationForm dl dd input[type=date].error,
#main .content.registration .settingArea #registrationForm dl dd input[type=month].error,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=date].error,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd input[type=month].error,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=date].error,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd input[type=month].error {
  border-color: rgb(235, 131, 147);
}
#main .content.registration .settingArea #registrationForm dl dd .selectWrapper,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .selectWrapper,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .selectWrapper {
  width: auto;
  max-width: 100%;
  display: inline-block;
  position: relative;
  background: rgba(0, 0, 0, 0.1);
}
#main .content.registration .settingArea #registrationForm dl dd .selectWrapper::before,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .selectWrapper::before,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .selectWrapper::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: rgb(29, 43, 89) transparent transparent transparent;
  position: absolute;
  top: 16px;
  right: 10px;
  z-index: 100;
}
#main .content.registration .settingArea #registrationForm dl dd select,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd select,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd select {
  width: auto;
  max-width: 100%;
  padding: 9px 40px 9px 10px;
  box-sizing: border-box;
  background: rgb(250, 250, 250);
  border: rgb(216, 216, 216) 1px solid;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  position: relative;
}
@media only screen and (max-width: 375px) {
  #main .content.registration .settingArea #registrationForm dl dd select,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd select,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd select {
    max-width: 100%;
    min-width: auto;
  }
}
#main .content.registration .settingArea #registrationForm dl dd select[name=activity-status],
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd select[name=activity-status],
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd select[name=activity-status] {
  max-width: 300px;
  min-width: 300px;
}
@media only screen and (max-width: 375px) {
  #main .content.registration .settingArea #registrationForm dl dd select[name=activity-status],
  #main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd select[name=activity-status],
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd select[name=activity-status] {
    max-width: 100%;
    min-width: auto;
  }
}
#main .content.registration .settingArea #registrationForm dl dd textarea,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd textarea,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd textarea {
  width: auto;
  min-width: 300px;
  max-width: 100%;
  height: 38px;
  min-height: 38px;
  max-height: 200px;
  padding: 9px 20px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  background: rgb(250, 250, 250);
  border: rgb(216, 216, 216) 1px solid;
}
@media only screen and (max-width: 375px) {
  #main .content.registration .settingArea #registrationForm dl dd textarea,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd textarea,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd textarea {
    max-width: 100%;
    min-width: auto;
  }
}
#main .content.registration .settingArea #registrationForm dl dd textarea.error,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd textarea.error,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd textarea.error {
  border-color: rgb(235, 131, 147);
}
#main .content.registration .settingArea #registrationForm dl dd.inclination, #main .content.registration .settingArea #registrationForm dl dd.check, #main .content.registration .settingArea #registrationForm dl dd.radio,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd.inclination,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd.check,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd.radio,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd.inclination,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd.check,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd.radio {
  padding-top: 9px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 20px;
}
@media only screen and (max-width: 640px) {
  #main .content.registration .settingArea #registrationForm dl dd.inclination, #main .content.registration .settingArea #registrationForm dl dd.check, #main .content.registration .settingArea #registrationForm dl dd.radio,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd.inclination,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd.check,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd.radio,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd.inclination,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd.check,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd.radio {
    padding-top: 0;
  }
}
#main .content.registration .settingArea #registrationForm dl dd.inclination label, #main .content.registration .settingArea #registrationForm dl dd.check label, #main .content.registration .settingArea #registrationForm dl dd.radio label,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd.inclination label,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd.check label,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd.radio label,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd.inclination label,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd.check label,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd.radio label {
  width: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 10px;
}
#main .content.registration .settingArea #registrationForm dl dd span.error,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd span.error,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd span.error {
  width: 100%;
  padding: 0;
  display: block;
  box-sizing: border-box;
}
#main .content.registration .settingArea #registrationForm dl dd label.error,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd label.error,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd label.error {
  width: 100%;
  margin: 5px auto 0;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(235, 131, 147);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 7px;
}
#main .content.registration .settingArea #registrationForm dl dd label.error::before,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd label.error::before,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd label.error::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 2px;
  display: block;
  background: url(../img/icon_error01.svg);
  background-size: cover;
}
#main .content.registration .settingArea #registrationForm dl dd label.amount-error,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd label.amount-error,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd label.amount-error {
  width: 100%;
  margin: 5px auto 0;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(235, 131, 147);
  display: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 7px;
}
#main .content.registration .settingArea #registrationForm dl dd label.amount-error::before,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd label.amount-error::before,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd label.amount-error::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 2px;
  display: block;
  background: url(../img/icon_error01.svg);
  background-size: cover;
}
#main .content.registration .settingArea #registrationForm dl dd .selectedRegionArea,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .selectedRegionArea,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .selectedRegionArea {
  margin-bottom: 10px;
  padding-top: 9px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 20px;
}
@media only screen and (max-width: 640px) {
  #main .content.registration .settingArea #registrationForm dl dd .selectedRegionArea,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .selectedRegionArea,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .selectedRegionArea {
    padding-top: 10px;
  }
}
#main .content.registration .settingArea #registrationForm dl dd .selectedRegionArea label,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .selectedRegionArea label,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .selectedRegionArea label {
  width: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 10px;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: rgb(232, 233, 238);
  position: relative;
  margin-bottom: 20px;
}
#main .content.registration .settingArea #registrationForm dl dd .selectedRegionArea label:has(input:checked),
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .selectedRegionArea label:has(input:checked),
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .selectedRegionArea label:has(input:checked) {
  background-color: rgb(90, 160, 170);
  color: #ffffff;
  font-weight: 700;
}
#main .content.registration .settingArea #registrationForm dl dd .selectedRegionArea label input[type=checkbox],
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .selectedRegionArea label input[type=checkbox],
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .selectedRegionArea label input[type=checkbox] {
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
}
#main .content.registration .settingArea #registrationForm dl dd .selectedRegionArea .regionCheckClear,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .selectedRegionArea .regionCheckClear,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .selectedRegionArea .regionCheckClear {
  position: absolute;
  top: -12px;
  right: -14px;
  margin: auto;
  padding: 1px 4px;
  border-radius: 50%;
  font-size: 108%;
  font-weight: 700;
  color: rgb(95, 95, 95);
  background: rgb(250, 250, 250);
  cursor: pointer;
}
#main .content.registration .settingArea #registrationForm dl dd .regionSelectBtn,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .regionSelectBtn,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .regionSelectBtn {
  max-width: 70px;
  font-size: 93%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
  color: rgb(255, 255, 255);
  background: rgb(29, 43, 89);
}
#main .content.registration .settingArea #registrationForm dl dd .skillCheckArea,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .skillCheckArea,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .skillCheckArea {
  margin-bottom: 10px;
  padding-top: 9px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 20px;
}
@media only screen and (max-width: 640px) {
  #main .content.registration .settingArea #registrationForm dl dd .skillCheckArea,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .skillCheckArea,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .skillCheckArea {
    padding-top: 10px;
  }
}
#main .content.registration .settingArea #registrationForm dl dd .skillCheckArea label,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .skillCheckArea label,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .skillCheckArea label {
  width: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 10px;
  padding: 8px 16px 8px 8px;
  border-radius: 4px;
  background-color: rgb(232, 233, 238);
  position: relative;
  margin-bottom: 20px;
}
#main .content.registration .settingArea #registrationForm dl dd .skillCheckArea label:has(input:checked),
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .skillCheckArea label:has(input:checked),
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .skillCheckArea label:has(input:checked) {
  background-color: rgb(90, 160, 170);
  color: #ffffff;
  font-weight: 700;
}
#main .content.registration .settingArea #registrationForm dl dd .skillCheckArea label input[type=checkbox],
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .skillCheckArea label input[type=checkbox],
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .skillCheckArea label input[type=checkbox] {
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  width: 10px;
  height: 10px;
  vertical-align: -5px;
}
#main .content.registration .settingArea #registrationForm dl dd .skillCheckArea label input[type=checkbox]:before,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .skillCheckArea label input[type=checkbox]:before,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .skillCheckArea label input[type=checkbox]:before {
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(50deg);
  width: 4px;
  height: 8px;
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  content: "";
}
#main .content.registration .settingArea #registrationForm dl dd .skillCheckArea label .skillCheckClear,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .skillCheckArea label .skillCheckClear,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .skillCheckArea label .skillCheckClear {
  position: absolute;
  top: -12px;
  right: -14px;
  margin: auto;
  padding: 1px 4px;
  border-radius: 50%;
  font-size: 108%;
  font-weight: 700;
  color: rgb(95, 95, 95);
  background: rgb(250, 250, 250);
  cursor: pointer;
}
#main .content.registration .settingArea #registrationForm dl dd .addSkillArea,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .addSkillArea,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .addSkillArea {
  width: 100%;
  max-width: calc(100% - 60px);
  padding: 0 10px 0 0;
  box-sizing: border-box;
  position: relative;
}
#main .content.registration .settingArea #registrationForm dl dd .addSkillArea .addSkillBtn,
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd .addSkillArea .addSkillBtn,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd .addSkillArea .addSkillBtn {
  position: absolute;
  top: 2px;
  width: 60px;
  padding: 8px 16px;
  margin-left: 6px;
  box-sizing: border-box;
  display: inline-block;
  font-size: 93%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
  color: rgb(255, 255, 255);
  background: rgb(29, 43, 89);
}
#main .content.registration .settingArea #registrationForm .btn,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .btn,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .btn {
  width: 100%;
  padding: 7px 20px;
  box-sizing: border-box;
  display: block;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
}
#main .content.registration .settingArea #registrationForm .btnSet,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .btnSet,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .btnSet {
  width: 100%;
  max-width: 100%;
  margin: 60px auto 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
}
@media only screen and (max-width: 896px) {
  #main .content.registration .settingArea #registrationForm .btnSet,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm .btnSet,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .btnSet {
    gap: 0 5px;
  }
}
@media only screen and (max-width: 800px) {
  #main .content.registration .settingArea #registrationForm .btnSet,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm .btnSet,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .btnSet {
    gap: 0 10px;
  }
}
@media only screen and (max-width: 736px) {
  #main .content.registration .settingArea #registrationForm .btnSet,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm .btnSet,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .btnSet {
    gap: 0 5px;
  }
}
#main .content.registration .settingArea #registrationForm .btnSet button[type=submit],
#main .content.registration .settingArea #businessOutsourcingAgreementForm .btnSet button[type=submit],
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .btnSet button[type=submit] {
  border: none;
}
#main .content.registration .settingArea #registrationForm .btnSet .btn,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .btnSet .btn,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .btnSet .btn {
  max-width: 150px;
}
@media only screen and (max-width: 375px) {
  #main .content.registration .settingArea #registrationForm .btnSet .btn,
  #main .content.registration .settingArea #businessOutsourcingAgreementForm .btnSet .btn,
  #main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .btnSet .btn {
    width: calc((100% - 5px) / 2);
    padding: 7px 10px;
  }
}
#main .content.registration .settingArea #registrationForm .btnSet span,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .btnSet span,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .btnSet span {
  color: rgb(90, 101, 134);
  background: rgb(232, 233, 238);
}
#main .content.registration .settingArea #registrationForm .btnSet .submitBtn,
#main .content.registration .settingArea #businessOutsourcingAgreementForm .btnSet .submitBtn,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm .btnSet .submitBtn {
  color: rgb(255, 255, 255);
  background: rgb(29, 43, 89);
}
#main .content.registration .settingArea #businessOutsourcingAgreementForm dl dd textarea,
#main .content.registration .settingArea #initBusinessOutsourcingAgreementForm dl dd textarea {
  min-height: 80px;
}

/* password
--------------------------------- */
#main.password .content h2 {
  display: block;
}
@media only screen and (max-width: 896px) {
  #main.password .content h2 {
    display: none;
  }
}
#main.password .content .settingArea {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
#main.password .content .settingArea form {
  width: 100%;
}
#main.password .content .settingArea form dl {
  width: 100%;
  margin: 0 auto -30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}
@media only screen and (max-width: 640px) {
  #main.password .content .settingArea form dl {
    margin-bottom: -30px;
  }
}
#main.password .content .settingArea form dl dt {
  width: 100%;
  max-width: 210px;
  margin-bottom: 30px;
  padding: 9px 10px 0 10px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
}
@media only screen and (max-width: 640px) {
  #main.password .content .settingArea form dl dt {
    max-width: 100%;
    margin-bottom: 5px;
    padding: 0 10px 0 10px;
    border: none;
  }
}
#main.password .content .settingArea form dl dd {
  width: 100%;
  max-width: calc(100% - 210px);
  margin-bottom: 30px;
  padding: 0 10px 0 0;
  box-sizing: border-box;
}
@media only screen and (max-width: 640px) {
  #main.password .content .settingArea form dl dd {
    max-width: 100%;
    margin-bottom: 30px;
    padding: 0 10px 0 10px;
  }
}
#main.password .content .settingArea form dl dd input[type=text], #main.password .content .settingArea form dl dd input[type=password], #main.password .content .settingArea form dl dd button, #main.password .content .settingArea form dl dd textarea, #main.password .content .settingArea form dl dd select {
  border: none;
  border-radius: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#main.password .content .settingArea form dl dd input[type=text], #main.password .content .settingArea form dl dd input[type=password] {
  width: 100%;
  max-width: 360px;
  max-height: 200px;
  min-height: 38px;
  padding: 9px 10px;
  box-sizing: border-box;
  background: rgb(250, 250, 250);
  border: rgb(216, 216, 216) 1px solid;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
}
@media only screen and (max-width: 896px) {
  #main.password .content .settingArea form dl dd input[type=text], #main.password .content .settingArea form dl dd input[type=password] {
    max-width: 460px;
  }
}
#main.password .content .settingArea form dl dd input[type=text]#tel, #main.password .content .settingArea form dl dd input[type=password]#tel {
  max-width: 160px;
}
#main.password .content .settingArea form dl dd input[type=text].error, #main.password .content .settingArea form dl dd input[type=password].error {
  border-color: rgb(235, 131, 147);
}
#main.password .content .settingArea form dl dd label.error {
  width: 100%;
  margin: 5px auto 0;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(235, 131, 147);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 7px;
}
#main.password .content .settingArea form dl dd label.error::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 2px;
  display: block;
  background: url(../img/icon_error01.svg);
  background-size: cover;
}
#main.password .content .settingArea form button[type=submit] {
  border: none;
}
#main.password .content .settingArea form .btn {
  width: 100%;
  max-width: 150px;
  margin: 30px auto 0;
  padding: 7px 20px;
  box-sizing: border-box;
  display: block;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
}
#main.password.complete {
  max-width: 820px;
}
@media only screen and (max-width: 896px) {
  #main.password.complete .content .settingArea {
    padding: 30px;
  }
}
@media only screen and (max-width: 800px) {
  #main.password.complete .content .settingArea {
    padding: 30px 20px;
  }
}
@media only screen and (max-width: 736px) {
  #main.password.complete .content .settingArea {
    padding: 30px;
  }
}
#main.password.complete .content .settingArea h2 {
  width: 100%;
  margin: 0 auto;
  display: block;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  text-align: center;
}
#main.password.complete .content .settingArea p {
  width: 100%;
  margin: 10px auto 0;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
  text-align: center;
}
#main.password.complete .content .settingArea .btn {
  max-width: 150px;
  margin: 30px auto 0;
}
#main.password.reset {
  max-width: 720px;
}
#main.password.reset h2 {
  display: block;
}
@media only screen and (max-width: 896px) {
  #main.password.reset h2 {
    display: block;
  }
}
#main.password.reset .content .settingArea .caution {
  width: 100%;
  margin: 10px auto 0;
  display: block;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
  text-align: center;
}

/* procedure
--------------------------------- */
#main.procedure .content h2 {
  display: block;
}
@media only screen and (max-width: 896px) {
  #main.procedure .content h2 {
    display: none;
  }
}
#main.procedure .content .settingArea {
  padding: 30px;
  text-align: left;
}
@media only screen and (max-width: 896px) {
  #main.procedure .content .settingArea {
    text-align: center;
  }
}
@media only screen and (max-width: 800px) {
  #main.procedure .content .settingArea {
    text-align: left;
  }
}
@media only screen and (max-width: 736px) {
  #main.procedure .content .settingArea {
    text-align: center;
  }
}
#main.procedure .content .settingArea p {
  width: 100%;
  margin: 0 auto 10px;
  display: block;
  box-sizing: border-box;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
}
#main.procedure .content .settingArea a {
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  text-decoration: underline;
}

/* detail
--------------------------------- */
#main .content.jobDetails .pageNavi {
  width: 100%;
  margin: 0 auto 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0 20px;
}
@media only screen and (max-width: 896px) {
  #main .content.jobDetails .pageNavi {
    justify-content: space-between;
    gap: 0 20px;
  }
}
#main .content.jobDetails .pageNavi:last-of-type {
  margin: 20px auto 0;
}
#main .content.jobDetails .pageNavi a {
  width: auto;
  box-sizing: border-box;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  position: relative;
}
@media only screen and (max-width: 896px) {
  #main .content.jobDetails .pageNavi a {
    font-size: 93%;
  }
}
#main .content.jobDetails .pageNavi a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: rgb(29, 43, 89) 1px solid;
  position: absolute;
  top: 50%;
}
#main .content.jobDetails .pageNavi a:first-of-type {
  padding: 0 0 0 18px;
}
@media only screen and (max-width: 896px) {
  #main .content.jobDetails .pageNavi a:first-of-type {
    padding-left: 24px;
  }
}
#main .content.jobDetails .pageNavi a:first-of-type::before {
  left: 4px;
  border-left: rgb(29, 43, 89) 1px solid;
  transform-origin: 0% 0%;
  transform: translate(0, calc(-50% + 4px)) rotate(-45deg);
}
@media only screen and (max-width: 896px) {
  #main .content.jobDetails .pageNavi a:first-of-type::before {
    left: 11px;
  }
}
#main .content.jobDetails .pageNavi a:last-of-type {
  padding: 0 18px 0 0;
}
@media only screen and (max-width: 896px) {
  #main .content.jobDetails .pageNavi a:last-of-type {
    padding-right: 24px;
  }
}
#main .content.jobDetails .pageNavi a:last-of-type::before {
  border-right: rgb(29, 43, 89) 1px solid;
  right: 4px;
  transform-origin: 100% 0%;
  transform: translate(0, calc(-50% + 4px)) rotate(45deg);
}
@media only screen and (max-width: 896px) {
  #main .content.jobDetails .pageNavi a:last-of-type::before {
    right: 11px;
  }
}
#main .content.jobDetails .pageNavi a:last-of-type::after {
  content: "";
  width: 1px;
  height: 10px;
  display: block;
  background: rgb(216, 216, 216);
  position: absolute;
  top: calc(50% + 1px);
  left: -11px;
  transform: translate(0, -50%);
}
@media only screen and (max-width: 896px) {
  #main .content.jobDetails .pageNavi a:last-of-type::after {
    display: none;
  }
}
#main .content.jobDetails .btnSet {
  width: 100%;
  max-width: 490px;
  margin: 60px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px 10px;
}
@media only screen and (max-width: 896px) {
  #main .content.jobDetails .btnSet {
    max-width: 345px;
  }
}
@media only screen and (max-width: 800px) {
  #main .content.jobDetails .btnSet {
    max-width: 490px;
  }
}
@media only screen and (max-width: 736px) {
  #main .content.jobDetails .btnSet {
    max-width: 345px;
  }
}
#main .content.jobDetails .btnSet .phoneAccess {
  max-width: 100%;
}
@media only screen and (max-width: 896px) {
  #main .content.jobDetails .btnSet .phoneAccess {
    margin: 0;
  }
}
#main .content.jobDetails .btnSet .btn {
  max-width: calc(50% - 5px);
  padding: 18px 20px;
  font-size: 124%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#main .content.jobDetails .btnSet > span {
  color: rgb(90, 101, 134);
  background: rgb(232, 233, 238);
  cursor: pointer;
}
#main .content.jobDetails .btnSet .declineBtn {
  color: rgb(255, 255, 255);
  background: rgb(29, 43, 89);
}
#main .content.jobDetails .detailArea {
  width: 100%;
  margin: 0 auto 20px;
  padding: 30px 20px 60px;
  box-sizing: border-box;
  border: rgb(216, 216, 216) 1px solid;
  background: rgb(255, 255, 255);
}
@media only screen and (max-width: 896px) {
  #main .content.jobDetails .detailArea {
    padding: 30px 10px 60px;
  }
}
@media only screen and (max-width: 800px) {
  #main .content.jobDetails .detailArea {
    padding: 30px 20px 60px;
  }
}
@media only screen and (max-width: 736px) {
  #main .content.jobDetails .detailArea {
    padding: 30px 10px 60px;
  }
}
#main .content.jobDetails .detailArea .jobIdArea {
  width: 100%;
  margin: 0 0 10px 10px;
  box-sizing: border-box;
  font-size: 108%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
#main .content.jobDetails .detailArea .companyInformation {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 50px;
  padding: 0 20px 50px;
  box-sizing: border-box;
  border-bottom: rgb(216, 216, 216) 1px solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
@media only screen and (max-width: 896px) {
  #main .content.jobDetails .detailArea .companyInformation {
    padding: 0 10px 50px;
  }
}
@media only screen and (max-width: 800px) {
  #main .content.jobDetails .detailArea .companyInformation {
    padding: 0 20px 50px;
  }
}
@media only screen and (max-width: 736px) {
  #main .content.jobDetails .detailArea .companyInformation {
    padding: 0 10px 50px;
  }
}
#main .content.jobDetails .detailArea .companyInformation .date {
  width: 100%;
  max-width: 140px;
  margin: 0 0 0 auto;
  display: block;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: right;
  color: rgb(165, 165, 165);
}
@media only screen and (max-width: 736px) {
  #main .content.jobDetails .detailArea .companyInformation .date {
    max-width: 100%;
    margin: 0 auto 30px;
  }
}
#main .content.jobDetails .detailArea .companyInformation .detail {
  width: 100%;
  max-width: calc(100% - 140px - 10px);
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
@media only screen and (max-width: 736px) {
  #main .content.jobDetails .detailArea .companyInformation .detail {
    max-width: 100%;
    margin-bottom: 20px;
    flex-direction: column;
    align-items: center;
  }
}
#main .content.jobDetails .detailArea .companyInformation .detail .logo {
  width: 50px;
  height: 50px;
  margin: 0 30px 0 0;
  background: url(../img/image_company00.webp);
  background-size: cover;
  position: relative;
}
@media only screen and (max-width: 736px) {
  #main .content.jobDetails .detailArea .companyInformation .detail .logo {
    margin: 0 0 30px 0;
  }
}
#main .content.jobDetails .detailArea .companyInformation .detail .logo span {
  width: 100%;
  height: 100%;
  display: block;
  background: rgb(255, 255, 255);
}
#main .content.jobDetails .detailArea .companyInformation .detail h2 {
  width: 100%;
  max-width: calc(100% - 50px - 30px);
  margin: 0;
  font-size: 124%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
@media only screen and (max-width: 736px) {
  #main .content.jobDetails .detailArea .companyInformation .detail h2 {
    max-width: 100%;
  }
}
#main .content.jobDetails .detailArea .companyInformation .detail h2 span {
  width: 100%;
  padding: 0;
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
}
#main .content.jobDetails .detailArea .companyInformation .detail h2 span:before {
  display: none;
}
#main .content.jobDetails .detailArea .companyInformation p.jobTitle {
  width: 100%;
  margin: 0 auto 50px;
  padding: 0 0 0 80px;
  box-sizing: border-box;
  font-size: 108%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
@media only screen and (max-width: 736px) {
  #main .content.jobDetails .detailArea .companyInformation p.jobTitle {
    padding: 0;
  }
}
#main .content.jobDetails .detailArea .companyInformation .tagCloud {
  width: 100%;
  margin: 0 auto 50px;
  padding: 0 0 0 80px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px 10px;
}
@media only screen and (max-width: 736px) {
  #main .content.jobDetails .detailArea .companyInformation .tagCloud {
    padding: 0;
  }
}
#main .content.jobDetails .detailArea .companyInformation .tagCloud li {
  padding: 5px 20px;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  border: rgb(216, 216, 216) 1px solid;
  background: rgb(250, 250, 250);
}
#main .content.jobDetails .detailArea .companyInformation dl {
  width: 100%;
  max-width: 700px;
  margin: 0;
  padding: 0 0 0 80px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px 40px;
}
@media only screen and (max-width: 1100px) {
  #main .content.jobDetails .detailArea .companyInformation dl {
    max-width: 400px;
  }
}
@media only screen and (max-width: 736px) {
  #main .content.jobDetails .detailArea .companyInformation dl {
    max-width: 100%;
    padding: 0;
  }
}
#main .content.jobDetails .detailArea .companyInformation dl dt {
  width: 100%;
  max-width: 54px;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
  position: relative;
}
#main .content.jobDetails .detailArea .companyInformation dl dt::before {
  content: "";
  width: 1px;
  height: 18px;
  background: rgb(216, 216, 216);
  position: absolute;
  top: 0;
  right: -20px;
}
#main .content.jobDetails .detailArea .companyInformation dl dd {
  width: 100%;
  max-width: 190px;
  font-size: 93%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px 10px;
}
@media only screen and (max-width: 736px) {
  #main .content.jobDetails .detailArea .companyInformation dl dd {
    max-width: calc(100% - 54px - 40px);
  }
}
#main .content.jobDetails .detailArea .companyInformation dl dd span {
  padding: 3px 10px 4px 10px;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  background: rgb(232, 233, 238);
}
#main .content.jobDetails .detailArea .informationList {
  width: 100%;
  margin: 0 auto 90px;
}
#main .content.jobDetails .detailArea .informationList:last-of-type {
  margin-bottom: 0;
}
#main .content.jobDetails .detailArea .informationList h3 {
  width: 100%;
  margin: 0 auto 50px;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  display: flex;
  flex-wrap: no-wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
@media only screen and (max-width: 736px) {
  #main .content.jobDetails .detailArea .informationList h3 {
    padding: 0 10px;
  }
}
#main .content.jobDetails .detailArea .informationList h3 span {
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
#main .content.jobDetails .detailArea .informationList .explanation {
  width: 100%;
  margin: 0 auto 50px;
  padding: 0 40px 0 50px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
@media only screen and (max-width: 736px) {
  #main .content.jobDetails .detailArea .informationList .explanation {
    padding: 0 10px;
  }
}
#main .content.jobDetails .detailArea .informationList dl {
  width: 100%;
  padding: 0 40px 0 40px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 20px 0;
}
@media only screen and (max-width: 736px) {
  #main .content.jobDetails .detailArea .informationList dl {
    padding: 0 10px;
  }
}
#main .content.jobDetails .detailArea .informationList dl dt {
  width: 100%;
  max-width: 150px;
  margin-bottom: 0;
  padding: 0 40px 20px 20px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  border-bottom: rgb(216, 216, 216) 1px solid;
  position: relative;
}
@media only screen and (max-width: 640px) {
  #main .content.jobDetails .detailArea .informationList dl dt {
    max-width: 100%;
    margin-bottom: -20px;
    padding: 0 10px 10px 5px;
    border: none;
  }
}
#main .content.jobDetails .detailArea .informationList dl dt::before {
  content: "";
  width: 1px;
  height: 18px;
  display: block;
  background: rgb(216, 216, 216);
  position: absolute;
  top: 0;
  right: 20px;
}
@media only screen and (max-width: 640px) {
  #main .content.jobDetails .detailArea .informationList dl dt::before {
    display: none;
  }
}
#main .content.jobDetails .detailArea .informationList dl dd {
  width: 100%;
  max-width: calc(100% - 150px);
  padding: 0 20px 20px 0;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
  border-bottom: rgb(216, 216, 216) 1px solid;
}
@media only screen and (max-width: 640px) {
  #main .content.jobDetails .detailArea .informationList dl dd {
    max-width: 100%;
    padding: 0 10px 20px 20px;
  }
}
#main .content.jobDetails .detailArea .informationList dl dd a {
  text-decoration: underline;
}
#main .content.jobDetails .detailArea .informationList dl dd a:hover {
  text-decoration: none;
}

/* terms 共通
--------------------------------- */
#main.terms {
  max-width: 980px;
  /* policy
  --------------------------------- */
}
#main.terms .content {
  max-width: 100%;
}
#main.terms .content h2 {
  justify-content: center;
}
#main.terms .content .settingArea {
  padding: 30px 30px 60px 30px;
}
@media only screen and (max-width: 896px) {
  #main.terms .content .settingArea {
    padding: 30px 20px 60px 20px;
  }
}
@media only screen and (max-width: 800px) {
  #main.terms .content .settingArea {
    padding: 30px 30px 60px 30px;
  }
}
@media only screen and (max-width: 736px) {
  #main.terms .content .settingArea {
    padding: 30px 20px 60px 20px;
  }
}
#main.terms .content .settingArea p {
  width: 100%;
  display: inline-block;
  margin-bottom: 10px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
#main.terms .content .settingArea p span {
  font-weight: 700;
}
#main.terms .content .settingArea p a {
  font-weight: 700;
  color: rgb(29, 43, 89);
  text-decoration: underline;
}
#main.terms .content .settingArea > ol {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 30px 0;
}
#main.terms .content .settingArea > ol li {
  width: 100%;
  list-style-position: inside;
}
#main.terms .content .settingArea > ol li h3 {
  width: auto;
  margin: 0 auto 5px;
  display: inline-block;
  font-size: 93%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
}
#main.terms .content .settingArea > ol li > p {
  padding: 0 20px;
}
#main.terms .content .settingArea > ol li ol {
  width: 100%;
  padding: 0 0 0 20px;
  box-sizing: border-box;
  color: rgb(95, 95, 95);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px 0;
}
#main.terms .content .settingArea > ol li ol li {
  width: 100%;
  padding: 0 0 0 1.5em;
  box-sizing: border-box;
  list-style-type: lower-alpha;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-indent: -1.3em;
}
#main.terms .content .settingArea > ol li ol li h4 {
  width: auto;
  margin: 0 auto;
  display: inline;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#main.terms .content .settingArea > ol li ol li a {
  font-weight: 400;
  color: rgb(29, 43, 89);
  text-decoration: underline;
}
#main.terms.policy .content .settingArea {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 90px 0;
}
#main.terms.policy .content .settingArea > section {
  width: 100%;
}
#main.terms.policy .content .settingArea > section h1 {
  text-align: center;
  margin-bottom: 30px;
}
#main.terms.policy .content .settingArea > section h4 {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
}
#main.terms.policy .content .settingArea > section .inner {
  width: 100%;
  padding: 0 35px;
  box-sizing: border-box;
}
@media only screen and (max-width: 896px) {
  #main.terms.policy .content .settingArea > section .inner {
    padding: 0;
  }
}
#main.terms.policy .content .settingArea > section .inner .representative {
  margin: 10px 0 20px 0;
}
#main.terms.policy .content .settingArea > section .inner .representative p {
  text-align: right;
  margin: 0;
}
#main.terms.policy .content .settingArea > section .inner .contents {
  margin-bottom: 20px;
}
#main.terms.policy .content .settingArea > section .inner .contents.first {
  margin-bottom: 20px;
}
#main.terms.policy .content .settingArea > section .inner .contents .contentsInner {
  margin-left: 13px;
}
@media only screen and (max-width: 896px) {
  #main.terms.policy .content .settingArea > section .inner .contents .contentsInner {
    margin-left: 5px;
  }
}
#main.terms.policy .content .settingArea > section .inner .contents .contentsInner p {
  font-size: 12px;
}
#main.terms.policy .content .settingArea > section .inner .contents .contentsInner .subhead {
  margin-bottom: 10px;
}
#main.terms.policy .content .settingArea > section .inner .contents .contentsInner .innerList {
  margin: 10px 0 10px 13px;
}
#main.terms.policy .content .settingArea > section dl {
  width: 100%;
}
#main.terms.policy .content .settingArea > section dl dt {
  width: 100%;
  padding: 0 0 0 1em;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
  text-indent: -1em;
}
#main.terms.policy .content .settingArea > section dl dt:first-of-type {
  margin-bottom: 0;
}
@media only screen and (max-width: 640px) {
  #main.terms.policy .content .settingArea > section dl dt {
    padding: 0 0 0 0.6em;
  }
}
#main.terms.policy .content .settingArea > section dl dd {
  width: 100%;
  padding: 0 0 0 1em;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
@media only screen and (max-width: 640px) {
  #main.terms.policy .content .settingArea > section dl dd {
    padding: 0 0 0 0.6em;
  }
}
#main.terms.policy .content .settingArea > section ul.forSocialLogin {
  margin-bottom: 10px;
}
#main.terms.policy .content .settingArea > section ul.noDl li {
  text-indent: -1.5em;
}
#main.terms.policy .content .settingArea > section ul li {
  width: 100%;
  padding: 0 0 0 1em;
  box-sizing: border-box;
  list-style-position: inside;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
  text-indent: -0.8em;
}
#main.terms.policy .content .settingArea > section.btnArea {
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  padding: 0 10px 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
}
#main.terms.policy .content .settingArea > section.btnArea .checkConsent {
  text-align: center;
  margin: 20px 0 20px 0;
  width: auto;
  color: rgb(95, 95, 95);
  font-size: 100%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#main.terms.policy .content .settingArea > section.btnArea .checkConsent input[type=checkbox] {
  transform: scale(1.2);
}
#main.terms.policy .content .settingArea > section.btnArea .checkConsent input[type=checkbox]:hover {
  cursor: pointer;
}
#main.terms.policy .content .settingArea > section.btnArea .btn {
  margin-bottom: 15px;
  background: rgb(232, 233, 238);
  color: rgb(90, 101, 134);
}
#main.terms.policy .content .settingArea > section.btnArea .btn:hover {
  cursor: pointer;
}
#main.terms.policy .content .settingArea > section.btnArea .btn.non-consent {
  background: #ffffff;
}
#main.terms.policy .content .settingArea table {
  width: 100%;
}
#main.terms.policy .content .settingArea table thead {
  width: 100%;
  box-sizing: border-box;
  border-bottom: rgb(216, 216, 216) 1px solid;
}
#main.terms.policy .content .settingArea table thead tr {
  width: 100%;
  font-size: 77%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
}
#main.terms.policy .content .settingArea table thead tr th {
  padding: 0 20px 10px 20px;
  box-sizing: border-box;
  position: relative;
}
@media only screen and (max-width: 896px) {
  #main.terms.policy .content .settingArea table thead tr th {
    padding: 0 10px 10px 10px;
  }
}
#main.terms.policy .content .settingArea table thead tr th:nth-of-type(1) {
  width: 220px;
}
@media only screen and (max-width: 736px) {
  #main.terms.policy .content .settingArea table thead tr th:nth-of-type(1) {
    width: 31%;
  }
}
#main.terms.policy .content .settingArea table thead tr th:nth-of-type(3) {
  width: 150px;
}
@media only screen and (max-width: 736px) {
  #main.terms.policy .content .settingArea table thead tr th:nth-of-type(3) {
    width: 24%;
  }
}
#main.terms.policy .content .settingArea table thead tr th:nth-of-type(3)::before {
  display: none;
}
#main.terms.policy .content .settingArea table thead tr th::before {
  content: "";
  width: 1px;
  height: calc(100% - 10px);
  background: rgb(216, 216, 216);
  position: absolute;
  top: 0;
  right: 0;
}
#main.terms.policy .content .settingArea table tbody {
  width: 100%;
}
#main.terms.policy .content .settingArea table tbody tr {
  width: 100%;
  box-sizing: border-box;
  font-size: 85%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
  border-bottom: rgb(216, 216, 216) 1px solid;
}
#main.terms.policy .content .settingArea table tbody tr:last-of-type {
  border: none;
}
#main.terms.policy .content .settingArea table tbody tr td {
  width: auto;
  padding: 50px;
  box-sizing: border-box;
  position: relative;
}
@media only screen and (max-width: 896px) {
  #main.terms.policy .content .settingArea table tbody tr td {
    padding: 20px 10px;
  }
}
#main.terms.policy .content .settingArea table tbody tr td:first-of-type {
  width: 240px;
}
@media only screen and (max-width: 640px) {
  #main.terms.policy .content .settingArea table tbody tr td:first-of-type {
    width: 90px;
  }
  #main.terms.policy .content .settingArea table tbody tr td:first-of-type br {
    display: none;
  }
}
#main.terms.policy .content .settingArea table tbody tr td:first-of-type::before {
  content: "";
  width: 1px;
  height: calc(100% - 40px);
  background: rgb(216, 216, 216);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}
#main.terms.policy .content .settingArea table tbody tr td a {
  font-weight: 700;
  color: rgb(29, 43, 89);
  text-decoration: underline;
}

/* notFound
--------------------------------- */
#main.notFound {
  max-width: 980px;
}
#main.notFound .content {
  max-width: 100%;
}
#main.notFound .content h2 {
  width: 100%;
  margin: 0 auto 30px;
  font-size: 108%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0 10px;
}
#main.notFound .content h2 span {
  width: 100%;
  display: block;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}
@media only screen and (max-width: 896px) {
  #main.notFound .content h2 span {
    font-size: 28px;
  }
}
@media only screen and (max-width: 800px) {
  #main.notFound .content h2 span {
    font-size: 42px;
  }
}
@media only screen and (max-width: 736px) {
  #main.notFound .content h2 span {
    font-size: 28px;
  }
}
#main.notFound .content h2 span::before {
  display: none;
}
#main.notFound .content .topBtn {
  width: 90px;
  margin: 0 auto;
  padding: 0 0 0 14px;
  display: block;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  text-align: right;
  position: relative;
}
#main.notFound .content .topBtn::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: rgb(29, 43, 89) 1px solid;
  border-left: rgb(29, 43, 89) 1px solid;
  position: absolute;
  top: 50%;
  left: 3px;
  transform: rotate(-45deg) translate(0, -50%);
}

/* modal
--------------------------------- */
#modal {
  width: 100%;
  height: 100vh;
  background: rgba(95, 95, 95, 0.9);
  position: fixed;
  top: 0px;
  left: -100vw;
  z-index: 10000;
  opacity: 0;
  filter: alpha(opacity=0);
  transition: left 0.01s linear 0.3s, opacity 0.3s linear 0s;
}
#modal.active {
  opacity: 1;
  filter: alpha(opacity=100);
  left: 0vw;
  transition: left 0.01s linear 0s, opacity 0.3s linear 0.1s;
}
#modal .dialog {
  width: 720px;
  max-width: calc(100% - 30px);
  height: 570px;
  max-height: calc(100% - 120px);
  display: none;
  box-sizing: border-box;
  padding: 20px 20px 30px 20px;
  border: rgb(216, 216, 216) 1px solid;
  background: rgb(255, 255, 255);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  overflow: hidden;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: alpha(opacity=0);
}
@media only screen and (max-width: 896px) {
  #modal .dialog {
    padding: 20px 10px 30px 10px;
  }
}
@media only screen and (max-width: 800px) {
  #modal .dialog {
    padding: 20px 20px 30px 20px;
  }
}
@media only screen and (max-width: 736px) {
  #modal .dialog {
    padding: 20px 10px 30px 10px;
  }
}
#modal .dialog.active {
  display: block;
  opacity: 1;
  filter: alpha(opacity=100);
  transition: opacity 0.5s linear 0.4s;
}
#modal .dialog .detail {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 20px;
  padding: 0 10px 20px 10px;
  box-sizing: border-box;
  border-bottom: rgb(216, 216, 216) 1px solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
@media only screen and (max-width: 896px) {
  #modal .dialog .detail {
    max-width: 100%;
  }
}
#modal .dialog .detail .logo {
  width: 30px;
  height: 30px;
  margin-right: 20px;
  background: url(../img/image_company00.webp);
  background-size: cover;
  position: relative;
}
@media only screen and (max-width: 896px) {
  #modal .dialog .detail .logo {
    margin-right: 20px;
  }
}
@media only screen and (max-width: 800px) {
  #modal .dialog .detail .logo {
    margin-right: 30px;
  }
}
@media only screen and (max-width: 736px) {
  #modal .dialog .detail .logo {
    margin-right: 20px;
  }
}
#modal .dialog .detail .logo span {
  width: 100%;
  height: 100%;
  display: block;
  background: rgb(255, 255, 255);
}
#modal .dialog .detail .information {
  width: 100%;
  max-width: calc(100% - 30px - 20px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
@media only screen and (max-width: 896px) {
  #modal .dialog .detail .information {
    max-width: calc(100% - 50px - 20px);
  }
}
@media only screen and (max-width: 800px) {
  #modal .dialog .detail .information {
    max-width: calc(100% - 30px - 20px);
  }
}
@media only screen and (max-width: 736px) {
  #modal .dialog .detail .information {
    max-width: calc(100% - 50px - 20px);
  }
}
#modal .dialog .detail .information > h3 {
  width: 100%;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
#modal .dialog .detail .information > h3 span {
  width: 100%;
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
}
#modal .dialog .declineChecklist {
  width: 100%;
  height: 100%;
  max-height: calc(100% - 70px - 20px);
  padding: 0 10px 0px 10px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
#modal .dialog .declineChecklist h4 {
  width: 100%;
  margin: 0 auto 10px;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
}
@media only screen and (max-width: 896px) {
  #modal .dialog .declineChecklist h4 {
    font-size: 93%;
  }
}
@media only screen and (max-width: 800px) {
  #modal .dialog .declineChecklist h4 {
    font-size: 108%;
  }
}
@media only screen and (max-width: 736px) {
  #modal .dialog .declineChecklist h4 {
    font-size: 93%;
  }
}
#modal .dialog .declineChecklist > p {
  width: 100%;
  margin: 0 auto 30px;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
}
@media only screen and (max-width: 896px) {
  #modal .dialog .declineChecklist > p {
    font-size: 77%;
  }
}
@media only screen and (max-width: 800px) {
  #modal .dialog .declineChecklist > p {
    font-size: 93%;
  }
}
@media only screen and (max-width: 736px) {
  #modal .dialog .declineChecklist > p {
    font-size: 77%;
  }
}
#modal .dialog .declineChecklist form {
  width: 100%;
  box-sizing: border-box;
}
#modal .dialog .declineChecklist form ul {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px 0;
}
@media only screen and (max-width: 896px) {
  #modal .dialog .declineChecklist form ul {
    padding: 0;
  }
}
@media only screen and (max-width: 800px) {
  #modal .dialog .declineChecklist form ul {
    padding: 0 20px;
  }
}
@media only screen and (max-width: 736px) {
  #modal .dialog .declineChecklist form ul {
    padding: 0;
  }
}
#modal .dialog .declineChecklist form ul li {
  width: auto;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
#modal .dialog .declineChecklist form ul li label {
  width: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 10px;
}
#modal .dialog .declineChecklist form label.error {
  width: 100%;
  margin: 5px auto 0;
  padding: 0 20px 0 25px;
  display: block;
  box-sizing: border-box;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(235, 131, 147);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 7px;
}
@media only screen and (max-width: 896px) {
  #modal .dialog .declineChecklist form label.error {
    padding: 0 0 0 5px;
  }
}
@media only screen and (max-width: 800px) {
  #modal .dialog .declineChecklist form label.error {
    padding: 0 20px 0 25px;
  }
}
@media only screen and (max-width: 736px) {
  #modal .dialog .declineChecklist form label.error {
    padding: 0 0 0 5px;
  }
}
#modal .dialog .declineChecklist form label.error::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 2px;
  display: block;
  background: url(../img/icon_error01.svg);
  background-size: cover;
}
#modal .dialog .declineChecklist form .text {
  width: 100%;
  margin: 20px auto 30px;
  padding: 0 20px;
  box-sizing: border-box;
}
@media only screen and (max-width: 896px) {
  #modal .dialog .declineChecklist form .text {
    padding: 0;
  }
}
@media only screen and (max-width: 800px) {
  #modal .dialog .declineChecklist form .text {
    padding: 0 20px;
  }
}
@media only screen and (max-width: 736px) {
  #modal .dialog .declineChecklist form .text {
    padding: 0;
  }
}
#modal .dialog .declineChecklist form .text textarea {
  width: 100%;
  max-width: 100%;
  height: 72px;
  max-height: 200px;
  padding: 9px 20px;
  box-sizing: border-box;
  background: rgb(250, 250, 250);
  border: rgb(216, 216, 216) 1px solid;
}
#modal .dialog .declineChecklist form .text textarea:-ms-input-placeholder {
  color: rgb(165, 165, 165);
  opacity: 1;
  filter: alpha(opacity=100);
}
#modal .dialog .declineChecklist form .text textarea::-webkit-input-placeholder {
  color: rgb(165, 165, 165);
  opacity: 1;
  filter: alpha(opacity=100);
}
#modal .dialog .declineChecklist form .text textarea::-moz-placeholder {
  color: rgb(165, 165, 165);
  opacity: 1;
  filter: alpha(opacity=100);
}
#modal .dialog .declineChecklist form .text label.error {
  padding: 0 20px 0 0;
}
#modal .dialog .declineChecklist form .btn {
  width: 100%;
  padding: 7px 20px;
  box-sizing: border-box;
  display: inline-block;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
}
#modal .dialog .declineChecklist form .btnSet {
  width: 100%;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0 10px;
}
@media only screen and (max-width: 896px) {
  #modal .dialog .declineChecklist form .btnSet {
    gap: 0 5px;
  }
}
@media only screen and (max-width: 800px) {
  #modal .dialog .declineChecklist form .btnSet {
    gap: 0 10px;
  }
}
@media only screen and (max-width: 736px) {
  #modal .dialog .declineChecklist form .btnSet {
    gap: 0 5px;
  }
}
#modal .dialog .declineChecklist form .btnSet button[type=submit] {
  border: none;
}
#modal .dialog .declineChecklist form .btnSet .btn {
  max-width: 140px;
}
@media only screen and (max-width: 375px) {
  #modal .dialog .declineChecklist form .btnSet .btn {
    width: calc((100% - 5px) / 2);
    max-width: 150px;
    padding: 7px 10px;
  }
}
#modal .dialog .declineChecklist form .btnSet span {
  color: rgb(90, 101, 134);
  background: rgb(232, 233, 238);
}
#modal .dialog .declineChecklist form .btnSet .declineBtn {
  color: rgb(255, 255, 255);
  background: rgb(29, 43, 89);
}
#modal .dialog .declineChecklist .ps__rail-y {
  opacity: 0.9 !important;
}
#modal .dialog .declineChecklist .ps__thumb-y {
  background: rgb(200, 200, 200);
}
#modal .contactDialog {
  width: 720px;
  max-width: calc(100% - 30px);
  height: auto;
  max-height: calc(100% - 120px);
  display: none;
  box-sizing: border-box;
  padding: 20px 20px 30px 20px;
  border: rgb(216, 216, 216) 1px solid;
  background: rgb(255, 255, 255);
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: alpha(opacity=0);
}
@media only screen and (max-width: 896px) {
  #modal .contactDialog {
    padding: 20px 10px 30px 10px;
  }
}
@media only screen and (max-width: 800px) {
  #modal .contactDialog {
    padding: 20px 20px 30px 20px;
  }
}
@media only screen and (max-width: 736px) {
  #modal .contactDialog {
    padding: 20px 10px 30px 10px;
  }
}
#modal .contactDialog.active {
  display: block;
  opacity: 1;
  filter: alpha(opacity=100);
  transition: opacity 0.5s linear 0.4s;
}
#modal .contactDialog .message {
  width: 100%;
  margin: 0 auto 30px;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  text-align: center;
}
@media only screen and (max-width: 896px) {
  #modal .contactDialog .message {
    font-size: 93%;
  }
}
@media only screen and (max-width: 800px) {
  #modal .contactDialog .message {
    font-size: 108%;
  }
}
@media only screen and (max-width: 736px) {
  #modal .contactDialog .message {
    font-size: 93%;
  }
}
#modal .contactDialog .btnSet {
  width: 100%;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
}
@media only screen and (max-width: 896px) {
  #modal .contactDialog .btnSet {
    gap: 0 5px;
  }
}
@media only screen and (max-width: 800px) {
  #modal .contactDialog .btnSet {
    gap: 0 10px;
  }
}
@media only screen and (max-width: 736px) {
  #modal .contactDialog .btnSet {
    gap: 0 5px;
  }
}
#modal .contactDialog .btnSet .btn {
  width: 100%;
  max-width: 140px;
  padding: 7px 20px;
  box-sizing: border-box;
  display: inline-block;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
}
@media only screen and (max-width: 375px) {
  #modal .contactDialog .btnSet .btn {
    width: calc((100% - 5px) / 2);
    max-width: 150px;
    padding: 7px 10px;
  }
}
#modal .contactDialog .btnSet .returnBtn {
  color: rgb(90, 101, 134);
  background: rgb(232, 233, 238);
}
#modal .contactDialog .btnSet .sendBtn {
  color: rgb(255, 255, 255);
  background: rgb(29, 43, 89);
}
#modal .regionDialog {
  width: 720px;
  max-width: calc(100% - 30px);
  height: 570px;
  max-height: calc(100% - 120px);
  display: none;
  box-sizing: border-box;
  padding: 10px 20px 30px 20px;
  border: rgb(216, 216, 216) 1px solid;
  background: rgb(255, 255, 255);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  overflow: hidden;
  transform: translate(-50%, -50%);
  /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
  /*Google Chrome、Safariへの対応*/
  opacity: 0;
  filter: alpha(opacity=0);
}
#modal .regionDialog::-webkit-scrollbar {
  display: none;
}
@media only screen and (max-width: 896px) {
  #modal .regionDialog {
    padding: 10px 10px 30px 10px;
  }
}
@media only screen and (max-width: 800px) {
  #modal .regionDialog {
    padding: 10px 20px 30px 20px;
  }
}
@media only screen and (max-width: 736px) {
  #modal .regionDialog {
    padding: 10px 10px 30px 10px;
  }
}
#modal .regionDialog.active {
  display: block;
  overflow-y: scroll;
  opacity: 1;
  filter: alpha(opacity=100);
  transition: opacity 0.5s linear 0.4s;
}
#modal .regionDialog .regionListTitle {
  padding-bottom: 10px;
}
#modal .regionDialog div dl {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}
#modal .regionDialog div dl dt {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
}
@media only screen and (max-width: 640px) {
  #modal .regionDialog div dl dt {
    max-width: 100%;
    margin-bottom: 5px;
    padding: 0 10px 0 10px;
    border: none;
  }
}
#modal .regionDialog div dl dd {
  width: 100%;
  max-width: 12.5%;
  margin: 0 5px;
  box-sizing: border-box;
  text-align: center;
}
@media only screen and (max-width: 640px) {
  #modal .regionDialog div dl dd {
    max-width: 16.6666666667%;
  }
}
@media only screen and (max-width: 480px) {
  #modal .regionDialog div dl dd {
    max-width: 20%;
  }
}
#modal .regionDialog div dl dd label {
  width: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 5px;
  border-radius: 4px;
  background-color: rgb(232, 233, 238);
  position: relative;
  margin-bottom: 10px;
}
#modal .regionDialog div dl dd label:has(input:checked) {
  background-color: rgb(90, 160, 170);
  color: #ffffff;
  font-weight: 700;
}
#modal .regionDialog div dl dd label input[type=checkbox] {
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
}
#modal .regionDialog .btnSet {
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
}
@media only screen and (max-width: 896px) {
  #modal .regionDialog .btnSet {
    gap: 0 5px;
  }
}
@media only screen and (max-width: 800px) {
  #modal .regionDialog .btnSet {
    gap: 0 10px;
  }
}
@media only screen and (max-width: 736px) {
  #modal .regionDialog .btnSet {
    gap: 0 5px;
  }
}
#modal .regionDialog .btnSet .btn {
  width: 100%;
  max-width: 140px;
  padding: 7px 20px;
  box-sizing: border-box;
  display: inline-block;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
}
@media only screen and (max-width: 375px) {
  #modal .regionDialog .btnSet .btn {
    width: calc((100% - 5px) / 2);
    max-width: 150px;
    padding: 7px 10px;
  }
}
#modal .regionDialog .btnSet .closeBtn {
  color: rgb(90, 101, 134);
  background: rgb(232, 233, 238);
}

/* inquiry
--------------------------------- */
#main.inquiry {
  max-width: 890px;
}
#main.inquiry h3 {
  width: 100%;
  margin: 0 auto 15px;
  padding: 0 10px 10px 10px;
  box-sizing: border-box;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  border-bottom: rgb(216, 216, 216) 1px solid;
  display: flex;
}
#main.inquiry h3 span {
  display: block;
  width: 22px;
  height: 22px;
  margin-right: 6px;
}
#main.inquiry p {
  width: 100%;
  margin: 0 auto 10px;
  padding: 0 10px 10px 10px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
#main.inquiry .content.inquiry h2 {
  display: block;
}
#main.inquiry .content.inquiry .settingArea {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
#main.inquiry .content.inquiry .settingArea:first-of-type {
  margin-bottom: 20px;
}
#main.inquiry .content.inquiry .settingArea .faqArea {
  width: 100%;
}
#main.inquiry .content.inquiry .settingArea .faqArea dl dt {
  cursor: pointer;
  width: 100%;
  margin-bottom: 15px;
  padding: 9px 10px 0 10px;
  font-weight: 400;
  color: rgb(29, 43, 89);
  display: flex;
}
#main.inquiry .content.inquiry .settingArea .faqArea dl dt:hover {
  font-weight: 700;
}
#main.inquiry .content.inquiry .settingArea .faqArea dl dt .toggle_btn {
  transform: translateY(-50%);
  transition: 0.4s;
  display: block;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  line-height: 1.9;
}
#main.inquiry .content.inquiry .settingArea .faqArea dl dt.toggle_selected {
  font-weight: 700;
}
#main.inquiry .content.inquiry .settingArea .faqArea dl dt.toggle_selected .toggle_btn {
  transform: rotate(180deg);
  transform-origin: 50% 90%;
  transition: 0.4s;
}
#main.inquiry .content.inquiry .settingArea .faqArea dl dd {
  display: none;
  margin-bottom: 30px;
  padding: 0 20px 20px 10px;
  box-sizing: border-box;
  color: rgb(95, 95, 95);
  border-bottom: rgb(216, 216, 216) 1px solid;
  font-size: 93%;
}
#main.inquiry .content.inquiry .settingArea .faqArea dl dd:last-of-type {
  border: none;
  margin-bottom: 0;
}
#main.inquiry .content.inquiry .settingArea .faqArea dl dd p {
  display: inline-block;
  margin-left: 0.1em;
  font-size: 100%;
}
#main.inquiry .content.inquiry .settingArea .faqArea dl dd a {
  border-bottom: rgb(90, 101, 134) solid 1px;
}
#main.inquiry .content.inquiry .settingArea .faqArea dl dd a:hover {
  border: none;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm {
  width: 100%;
  height: auto;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl {
  width: 100%;
  margin: 0 auto -30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dt {
  width: 100%;
  max-width: 130px;
  margin-bottom: 30px;
  padding: 9px 10px 0 10px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
}
@media only screen and (max-width: 640px) {
  #main.inquiry .content.inquiry .settingArea #inquiryForm dl dt {
    max-width: 100%;
    margin-bottom: 5px;
    padding: 0 10px 0 10px;
    border: none;
  }
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd {
  width: 100%;
  max-width: calc(100% - 130px);
  margin-bottom: 30px;
  padding: 0 10px 0 0;
  box-sizing: border-box;
}
@media only screen and (max-width: 640px) {
  #main.inquiry .content.inquiry .settingArea #inquiryForm dl dd {
    max-width: 100%;
    margin-bottom: 30px;
    padding: 0 10px 0 10px;
  }
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd input[type=text],
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd input[type=email],
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd button,
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd textarea,
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd select {
  border: none;
  border-radius: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd input[type=text],
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd input[type=email] {
  width: 100%;
  max-width: 460px;
  max-height: 200px;
  padding: 9px 10px;
  box-sizing: border-box;
  background: rgb(250, 250, 250);
  border: rgb(216, 216, 216) 1px solid;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd input[type=text].error,
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd input[type=email].error {
  border-color: rgb(235, 131, 147);
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd .selectWrapper {
  width: auto;
  max-width: 100%;
  display: inline-block;
  position: relative;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd .selectWrapper::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: rgb(29, 43, 89) transparent transparent transparent;
  position: absolute;
  top: 16px;
  right: 10px;
  z-index: 100;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd select {
  width: auto;
  max-width: 100%;
  padding: 9px 40px 9px 10px;
  box-sizing: border-box;
  background: rgb(250, 250, 250);
  border: rgb(216, 216, 216) 1px solid;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  position: relative;
}
@media only screen and (max-width: 375px) {
  #main.inquiry .content.inquiry .settingArea #inquiryForm dl dd select {
    max-width: 100%;
    min-width: auto;
  }
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd select.error {
  border-color: rgb(235, 131, 147);
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd select[name=activity-status] {
  max-width: 300px;
  min-width: 300px;
}
@media only screen and (max-width: 375px) {
  #main.inquiry .content.inquiry .settingArea #inquiryForm dl dd select[name=activity-status] {
    max-width: 100%;
    min-width: auto;
  }
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd .inquiryTypeWithdrawCaution {
  color: rgb(235, 131, 147);
  display: none;
  width: 100%;
  margin: 5px auto 0;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd textarea {
  width: 100%;
  max-width: 460px;
  height: 100px;
  min-height: 38px;
  max-height: 200px;
  padding: 9px 10px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  background: rgb(250, 250, 250);
  border: rgb(216, 216, 216) 1px solid;
}
@media only screen and (max-width: 375px) {
  #main.inquiry .content.inquiry .settingArea #inquiryForm dl dd textarea {
    max-width: 100%;
    min-width: auto;
  }
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd textarea.error {
  border-color: rgb(235, 131, 147);
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd span.error {
  width: 100%;
  padding: 0;
  display: block;
  box-sizing: border-box;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd label.error {
  width: 100%;
  margin: 5px auto 0;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(235, 131, 147);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 7px;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm dl dd label.error::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 2px;
  display: block;
  background: url(../img/icon_error01.svg);
  background-size: cover;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm .inquiryFormRecaptcha {
  margin-top: 20px;
  margin-top: 20px;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm .inquiryFormRecaptcha .inquiryRecaptchaCheckError {
  width: 100%;
  margin: 5px auto 0;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(235, 131, 147);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 7px;
  display: none;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm .inquiryFormRecaptcha .inquiryRecaptchaCheckError::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 2px;
  display: block;
  background: url(../img/icon_error01.svg);
  background-size: cover;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm .checkPrivacyArea {
  text-align: center;
  margin-top: 20px;
  width: auto;
  color: rgb(95, 95, 95);
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm .checkPrivacyArea input[type=checkbox] {
  transform: scale(1.2);
}
#main.inquiry .content.inquiry .settingArea #inquiryForm .checkPrivacyArea input[type=checkbox]:hover {
  cursor: pointer;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm .checkPrivacyArea a {
  border-bottom: rgb(90, 101, 134) solid 1px;
  margin-left: 5px;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm .checkPrivacyArea a:hover {
  border: none;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm .btnSet {
  width: 100%;
  max-width: 100%;
  margin: 30px auto 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
}
@media only screen and (max-width: 896px) {
  #main.inquiry .content.inquiry .settingArea #inquiryForm .btnSet {
    gap: 0 5px;
  }
}
@media only screen and (max-width: 800px) {
  #main.inquiry .content.inquiry .settingArea #inquiryForm .btnSet {
    gap: 0 10px;
  }
}
@media only screen and (max-width: 736px) {
  #main.inquiry .content.inquiry .settingArea #inquiryForm .btnSet {
    gap: 0 5px;
  }
}
#main.inquiry .content.inquiry .settingArea #inquiryForm .btnSet button[type=submit] {
  border: none;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm .btnSet .btn {
  max-width: 150px;
}
@media only screen and (max-width: 375px) {
  #main.inquiry .content.inquiry .settingArea #inquiryForm .btnSet .btn {
    width: calc((100% - 5px) / 2);
    padding: 7px 10px;
  }
}
#main.inquiry .content.inquiry .settingArea #inquiryForm .btnSet .btn:hover {
  cursor: pointer;
}
#main.inquiry .content.inquiry .settingArea #inquiryForm .btnSet .submitBtn {
  color: rgb(255, 255, 255);
  background: rgb(29, 43, 89);
}
#main.inquiry .content.inquiryComp .settingArea h2 {
  width: 100%;
  margin: 0 auto;
  display: block;
  font-weight: 700;
  text-align: center;
}
#main.inquiry .content.inquiryComp .settingArea p {
  text-align: center;
  margin: 10px 0 0 0;
  padding: 0;
}
#main.inquiry .content.inquiryComp .settingArea .btn {
  max-width: 150px;
  margin: 30px auto 0;
}

/* withdraw
--------------------------------- */
#main.withdraw {
  max-width: 890px;
}
#main.withdraw h3 {
  width: 100%;
  margin: 0 auto 30px;
  padding: 0 10px 10px 10px;
  box-sizing: border-box;
  font-size: 108%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  border-bottom: rgb(216, 216, 216) 1px solid;
  display: flex;
}
#main.withdraw h3 span {
  display: block;
  width: 22px;
  height: 22px;
  margin-right: 6px;
}
#main.withdraw p {
  width: 100%;
  margin: 0 auto 10px;
  padding: 0 10px 10px 10px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(95, 95, 95);
}
#main.withdraw .content.withdraw h2 {
  display: block;
}
#main.withdraw .content.withdraw .settingArea {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm {
  width: 100%;
  height: auto;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl {
  width: 100%;
  margin: 0 auto -30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}
@media only screen and (max-width: 640px) {
  #main.withdraw .content.withdraw .settingArea #withdrawForm dl {
    margin-bottom: -20px;
  }
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dt {
  width: 100%;
  max-width: 130px;
  margin-bottom: 30px;
  padding: 9px 10px 0 10px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(165, 165, 165);
}
@media only screen and (max-width: 640px) {
  #main.withdraw .content.withdraw .settingArea #withdrawForm dl dt {
    max-width: 100%;
    margin-bottom: 5px;
    padding: 0 10px 0 10px;
    border: none;
  }
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd {
  width: 100%;
  max-width: calc(100% - 130px);
  margin-bottom: 30px;
  padding: 0 10px 0 0;
  box-sizing: border-box;
}
@media only screen and (max-width: 640px) {
  #main.withdraw .content.withdraw .settingArea #withdrawForm dl dd {
    max-width: 100%;
    margin-bottom: 30px;
    padding: 0 10px 0 10px;
  }
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd input[type=text],
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd input[type=email],
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd button,
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd textarea,
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd select {
  border: none;
  border-radius: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd input[type=text],
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd input[type=email] {
  width: 100%;
  max-width: 460px;
  max-height: 200px;
  padding: 9px 10px;
  box-sizing: border-box;
  background: rgb(250, 250, 250);
  border: rgb(216, 216, 216) 1px solid;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd input[type=text].error,
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd input[type=email].error {
  border-color: rgb(235, 131, 147);
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd .selectWrapper {
  width: auto;
  max-width: 100%;
  display: inline-block;
  position: relative;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd .selectWrapper::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: rgb(29, 43, 89) transparent transparent transparent;
  position: absolute;
  top: 16px;
  right: 10px;
  z-index: 100;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd select {
  width: auto;
  max-width: 100%;
  padding: 9px 40px 9px 10px;
  box-sizing: border-box;
  background: rgb(250, 250, 250);
  border: rgb(216, 216, 216) 1px solid;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  position: relative;
}
@media only screen and (max-width: 375px) {
  #main.withdraw .content.withdraw .settingArea #withdrawForm dl dd select {
    max-width: 100%;
    min-width: auto;
  }
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd select.error {
  border-color: rgb(235, 131, 147);
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd select[name=activity-status] {
  max-width: 300px;
  min-width: 300px;
}
@media only screen and (max-width: 375px) {
  #main.withdraw .content.withdraw .settingArea #withdrawForm dl dd select[name=activity-status] {
    max-width: 100%;
    min-width: auto;
  }
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd #withdrawList {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px 0;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd .withdrawReasonCheckError {
  width: 100%;
  margin: 5px auto 0;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(235, 131, 147);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 7px;
  display: none;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd .withdrawReasonCheckError::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 2px;
  display: block;
  background: url(../img/icon_error01.svg);
  background-size: cover;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd .withdrawText {
  margin-top: 10px;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd .withdrawText textarea {
  width: 100%;
  max-width: 460px;
  height: 100px;
  min-height: 38px;
  max-height: 200px;
  padding: 9px 10px;
  box-sizing: border-box;
  font-size: 93%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(29, 43, 89);
  background: rgb(250, 250, 250);
  border: rgb(216, 216, 216) 1px solid;
}
@media only screen and (max-width: 375px) {
  #main.withdraw .content.withdraw .settingArea #withdrawForm dl dd .withdrawText textarea {
    max-width: 100%;
    min-width: auto;
  }
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd .withdrawText textarea.error {
  border-color: rgb(235, 131, 147);
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd span.error {
  width: 100%;
  padding: 0;
  display: block;
  box-sizing: border-box;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd label.error {
  width: 100%;
  margin: 5px auto 0;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(235, 131, 147);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 7px;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm dl dd label.error::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 2px;
  display: block;
  background: url(../img/icon_error01.svg);
  background-size: cover;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm .withdrawCaution {
  display: none;
  margin-top: 40px;
  text-align: center;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm .withdrawCaution p {
  color: rgb(235, 131, 147);
  font-size: 100%;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm .withdrawFormRecaptcha {
  margin-top: 20px;
  margin-top: 20px;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm .withdrawFormRecaptcha .withdrawRecaptchaCheckError {
  width: 100%;
  margin: 5px auto 0;
  font-size: 77%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgb(235, 131, 147);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 7px;
  display: none;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm .withdrawFormRecaptcha .withdrawRecaptchaCheckError::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 2px;
  display: block;
  background: url(../img/icon_error01.svg);
  background-size: cover;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm .btnSet {
  width: 100%;
  max-width: 100%;
  margin: 30px auto 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
}
@media only screen and (max-width: 896px) {
  #main.withdraw .content.withdraw .settingArea #withdrawForm .btnSet {
    gap: 0 5px;
  }
}
@media only screen and (max-width: 800px) {
  #main.withdraw .content.withdraw .settingArea #withdrawForm .btnSet {
    gap: 0 10px;
  }
}
@media only screen and (max-width: 736px) {
  #main.withdraw .content.withdraw .settingArea #withdrawForm .btnSet {
    gap: 0 5px;
  }
}
#main.withdraw .content.withdraw .settingArea #withdrawForm .btnSet button[type=submit] {
  border: none;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm .btnSet .btn {
  max-width: 150px;
}
@media only screen and (max-width: 375px) {
  #main.withdraw .content.withdraw .settingArea #withdrawForm .btnSet .btn {
    width: calc((100% - 5px) / 2);
    padding: 7px 10px;
  }
}
#main.withdraw .content.withdraw .settingArea #withdrawForm .btnSet .btn:hover {
  cursor: pointer;
}
#main.withdraw .content.withdraw .settingArea #withdrawForm .btnSet .submitBtn {
  color: rgb(255, 255, 255);
  background: rgb(29, 43, 89);
}
#main.withdraw .content.withdrawComp .settingArea h2 {
  width: 100%;
  margin: 0 auto;
  display: block;
  font-weight: 700;
  text-align: center;
}
#main.withdraw .content.withdrawComp .settingArea p {
  text-align: center;
  margin: 10px 0 0 0;
  padding: 0;
}/*# sourceMappingURL=style.css.map */