@charset "UTF-8";
/********************************************************************************
 *
 * マイキープラットフォーム 共通CSS
 *
 ********************************************************************************/
:root {
  --theme-color: #352c00;
  --navheader-height-md: 8.0rem;
  --navheader-height-sm: 5.0rem;
}
/********************************************************************************
 * 基本設定
 ********************************************************************************/
html, body {
  width: 100%;
}
html {
  font-size: 62.5%; /* 1rem=10px */
}
body {
  min-width: 320px;
  margin: 0 auto;
  font-size: 1.6rem;
  color: #222222;
}
/********************************************************************************
 * フォント
 ********************************************************************************/
body {
  font-family: sans-serif;
}
/* Android */
body.device-sp-android {
  /* デフォルトフォント */
  --dummy: ;
}
/* iOS */
body.device-sp-ios {
  font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, sans-serif;
}
/* PC */
body.device-pc {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif !important;
}
/********************************************************************************
 * 画面構成
 ********************************************************************************/
/* 変数 */
body {
  --navheader-height: var(--navheader-height-md);
}
@media (max-width : 768px) {
  body {
    --navheader-height: var(--navheader-height-sm);
  }
}
/* ナビゲーションヘッダー */
.navbar {
  background: #ffffff;
}
.navbar.fixed-top {
  height: var(--navheader-height);
  padding: 1rem 3%;
  z-index: 1040;
}
/* コンテナエリア */
.container, .container-fluid {
  display: flex;
  flex-wrap: nowrap;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0;
}
/* コンテナエリア：ナビゲーションヘッダー固定時の上マージン */
.navbar.fixed-top ~ .container {
  margin-top: var(--navheader-height);
}
/* メインエリア */
.main {
  flex: 1;
  margin: 0 auto;
  margin-bottom: 20rem;  /* .footer.fixed-bottom の高さ＋α */
  padding: 0 1.6rem;
}
/* メインエリアヘッダー */
.main > .header {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto 0 auto;
  padding: 1rem 0;
  background-color: #fff;
  opacity: 0.95;
}
.header.fixed-top {
  position: sticky;
  top: var(--navheader-height);
}
/* サブヘッダー */
.main > .sub-header {
  padding: 0;
}
/* ナビゲーションフッター */
.navbar.fixed-bottom {
  z-index: 1040;
  padding: 0;
}
/* IE11対応 */
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  *::-ms-backdrop, .navbar.fixed-top {
    height: 8.0rem;
  }
  *::-ms-backdrop, .container {
    margin-top: 15.0rem !important;
  }
  *::-ms-backdrop, .header.fixed-top {
    position: fixed;
    top: 8.0rem;
  }
  #btnMenu {
    position: fixed;
    top: 1.0rem;
  }
}
/********************************************************************************
 * 汎用クラス
 ********************************************************************************/
/* clear, clearfix */
.clear {
  clear: both;
}
.clearfix:after {
  display: block;
  clear: both;
  content: "";
}
/* 表示･非表示 */
.visible {
  display: inline-block;
}
.article.visible {
  display: block;
}
.hidden, .hide {
  display: none;
}
/* display */
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
/* 非表示項目 */
.hidden, .hide {
  display: none;
}
a.disabled {
  display: inline-block; /* IE対応 */
  opacity: 0.5;
  text-decoration: none !important;
  cursor: default;
  pointer-events: none; /* リンク無効 */
}
/* float */
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
.break-all {
  word-break: break-all;
}
/********************************************************************************
 * 共通要素
 ********************************************************************************/
/* サイトタイトル */
.navbar .title {
  color: #352c00;
  font-weight: bold;
  font-size: 2.0rem;
  line-height: 100%;
}
/* ページタイトル */
.main > .header .title {
  margin: 0;
  padding: 1.0rem 0;
}
.main > .header h1.title {
  font-weight: bold;
  font-size: 2rem;
  line-height: 3.6rem;
}
.main > .header h2.title {
  font-weight: bold;
  font-size: 1.9rem;
}
/* ナビゲーションスキップ */
#lnkNavSkip {
  display: block;
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: #ffffff;
  text-align: center;
}
/* TOPボタン */
#btn-top {
  display: none;  /* 初期非表示 */
  opacity: 0.6;
  position: fixed;
  right: 1.0rem;
  bottom: 7.0rem;
  z-index: 1090;  /* サイドバーより上 */
  width: 5.0rem;
  height: 5.0rem;
  border-radius: 50%;
  background: #000000;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
}
#btn-top::before {
  display: block;
  width: 2.0rem;
  height: 2.0rem;
  margin: 0.2rem auto -0.2rem auto;
  background: url(../images/icon-arrow-simple-top-white.png) no-repeat;
  background-position: left bottom;
  background-size: contain;
  content: "";
}
/* ＜ボタン */
.btn-back {
  display: inline-block;
  position: absolute;
  top: 16px;
  left: 20px;
  width: 30px;
  height: 19px;
  background: url(../images/common/icon_arrow_back.svg) no-repeat;
  background-size: contain;
}
/* ヘルプ */
.nav-link {
  padding: initial;
}
.help-menu {
  font-size: 1.6rem;
  min-width: 25rem;
  line-height: 5rem;
  text-align: center;
}
.help-menu > .cancel {
  font-size: 1.6rem;
}
#navbarDropdown {
  font-size: 1.7rem;
}
/********************************************************************************
 * スクリーンロック・スピナー
 ********************************************************************************/
/* スクリーンロック */
#screenLock {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #ffffff;
  animation-name: fadeout-blur;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
@keyframes fadeout-blur {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.9;
  }
}
/* スピナー */
.spinner-border {
  width: 3rem;
  height: 3rem;
  color: #352c00;
}
/* スピナーiOS16対策 */
.spinner-border {
  -webkit-animation: spinner-border-ios16 .75s linear infinite !important;
  animation: spinner-border-ios16 .75s linear infinite !important;
}
@-webkit-keyframes spinner-border-ios16 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner-border-ios16 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/********************************************************************************
 * プログレストラッカー
 ********************************************************************************/
.progress-tracker {
  display: block;
  width: 100%;
  counter-reset: progress_tracker_counter;
}
.progress-tracker ol {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  padding: 0;
}
.progress-tracker ol li {
  flex-grow: 1;
  list-style-type: none;
  position: relative;
  margin: 0 4px;
  padding-bottom: 4px;
  font-size: 1.1rem;
  text-align: center;
}
.progress-tracker ol li::after {
  display: block;
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #f5f5f5;
  content: "";
}
.progress-tracker ol li.active::after {
  background: #00277d;
}
.progress-tracker ol li.actived::after {
  background: #bdbdbd;
}
.progress-tracker-hidden-text {
  font-size: 0px;
}
/********************************************************************************
 * メッセージエリア
 ********************************************************************************/
/* メッセージエリアグループ */
.alert-group {
  clear: both; /* 右上ボタンの回り込みをメッセージ領域で解除させる */
  max-height: none;
  margin: 0.4rem 0;
  padding: 0 0.4rem;
  font-size: 1.8rem;
  text-align: left;
}
/* メッセージエリア */
.alert {
  position: relative;
  max-width: 1024px;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
  padding-left: 3.7rem;
  padding-left: 40px;
  overflow: hidden;
  border: 1px solid #cecece;
  border-radius: 0.5rem;
  border-radius: 10px 10px 10px 10px;
  font-weight: bold;
  font-size: 1.6rem;
  white-space: pre-wrap;
}
.alert.text-center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0.75rem;
}
.alert-danger:before, .alert-danger > dl > dt:before {
  background: url(../images/alert-danger.png) no-repeat;
}
.alert-warning:before, .alert-warning > dl > dt:before {
  background: url(../images/alert-warning.png) no-repeat;
}
.alert-info:before, .alert-info > dl > dt:before {
  background: url(../images/alert-info.png) no-repeat;
}
.alert-success:before, .alert-success > dl > dt:before {
  background-image: url(../images/alert-success.png);
}
.alert-annotation:before, .alert-annotation > dl > dt:before {
  background-image: url(../images/alert-annotation.png);
}
.alert:before, .alert > dl > dt:before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0.8rem;
  width: 22px;
  height: 100%;
  margin-right: 0.8rem;
  background-position: center;
  background-size: 22px;
  background-repeat: no-repeat;
  content: "";
  content: "";
  -moz-background-size: contain;
}
.alert.text-center:before {
  display: inline-block;
  flex: 0 0 2.3rem;
  position: relative;
  margin-right: 1.2rem;
}
/********************************************************************************
 * メニュー
 ********************************************************************************/
/* メニューアイコン */
.menu-icon {
  padding: 22px 14px;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: transparent;
  border: transparent;
}
.navicon {
  display: block;
  position: relative;
  width: 26px;
  height: 3px;
  background: #352c00;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  left: 1.0rem;
  top: 0.3rem;
}
.navicon:before, .navicon:after {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #352c00;
  content: "";
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
.navicon:before {
  top: 9px;
}
.navicon:after {
  bottom: 9px;
}
.lblMenu {
  position: relative;
  font-size: 1.1rem;
  bottom: -10px;
}
/* フルスクリーンメニュー */
.fullscreen .modal-dialog {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0 0 0 0;
  padding: 0;
}
.fullscreen .modal-content {
  height: 100%;
  min-height: 100%;
  overflow: auto;
  border-radius: 0;
  background: #f5f5f5;
  border: initial;
}
.modal-header {
  padding: 1rem 3%;
  border-bottom: 0px;
}
.modal-header .close {
  margin: 0;
  padding: 1rem 2.4rem;
}
.close {
  opacity: 1;
  font-weight: 500;
  font-size: 3.8rem;
}
.menu-section {
  max-width: 1024px;
  margin: auto;
}
.menu-section ul, li {
  padding: 0;
}
.menu-section span {
  margin-left: 2rem;
  font-size: 1.3rem;
}
.menu-section ul {
  list-style-type: none;
  margin-bottom: 2.6rem;
}
.menu-section .contents {
  padding: 0;
  border-radius: 10px;
  background: #ffffff;
}
.menu-section .contents li {
  position: relative;
  margin-left: 2rem;
  border-bottom: 1px solid #f5f5f5;
  font-size: 1.6rem;
  line-height: 5rem;
}
.menu-section .contents li:last-child {
  border-bottom: 0px;
}
.menu-section h2.modal-title {
  padding-left: 8px;
}
.menu-section .contents .arrow::after {
  position: absolute;
  top: 0;
  right: 2rem;
  bottom: 0;
  transform: rotate(45deg);
  width: 0.6em;   /* arrow size */
  height: 0.6em;  /* arrow size */
  margin: auto;
  border-top: 1px solid #808080;  /* thickness, color */
  border-right: 1px solid #808080;
  vertical-align: middle;
  content: "";
  -webkit-transform: rotate(45deg);
}
.menu-section .contents a {
  display: block;
  width: 100%;
  color: #000000;
  text-decoration: none;
}
/* マイキーID */
.mykeyId-area {
  padding: 3.2rem;
  text-align: center;
  margin-bottom: 2.6rem;
}
.mykeyId-area h3 {
  font-size: 1.2rem;
}
.mykeyId-area #lblMykeyId {
  font-weight: 600;
  font-size: 2.2rem;
}
.mykeyId-area #imgCopy {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-left: 10px;
  border: 0;
  background: url(../images/common/icon_copy.svg) no-repeat;
  background-size: contain;
  content: "";
  box-shadow: initial;
}
.mykeyId-area #copyMessageBox {
  display: none;
  opacity: 1;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1060;
  height: 5rem;
  width: 20rem;
  margin: auto;
  overflow: hidden;
}
.mykeyId-area #copyMessageBox > div {
  padding: 10px;
  box-sizing: border-box;
  background: rgba(0,0,0,0.7);
  color: #ffffff;
  text-align: center;
}
.mykeyId-area .lblCaution {
  display: block;
  margin-top: 0.8rem;
  color: #8e8e93;
  font-size: 1.1rem;
}
/* ログアウト */
.logout {
  margin: 5rem;
}
.copyright {
  color: #747474;
  font-size: 0.9rem;
}
#menuUseMynumberCard {
  line-height: initial;
  padding: 13px 0;
}
#modalMenu {
  padding-right: 0 !important;
}
.hidden-scrollbar-y {
  overflow-y: hidden !important;
}
/********************************************************************************
 * フッターメニュー
 ********************************************************************************/
.tab-group {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  list-style: none;
  width: 100%;
  margin-bottom: 0;
  padding: 0 1.6rem;
  border-top: 1px solid #cccccc;
}
.tab-group > li {
  flex-grow: 1;
  padding: 0;
}
.tab-group .btn {
  width: 95%;
  margin: 0 auto;
  padding: 1rem 0 0;
  border: none;
  border-radius: 0;
  color: #999999;
  font-size: 1.1rem;
}
.tab-group .btn::before {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto 0.6rem;
  content: "";
}
.tab-group #btnFooterHome::before {
  background: url(../images/common/home.svg) no-repeat;
}
.tab-group #btnFooterMenu::before {
  background: url(../images/bootstrap/menu.svg) no-repeat;
}
.tab-group #btnFooterHome.active:not(.menu-active) {
  color: #2161DC;
}
.tab-group #btnFooterHome.active:not(.menu-active)::before {
  background: url(../images/common/home_active.svg) no-repeat;
}
.tab-group #btnFooterMenu.active {
  color: #2161DC;
}
.tab-group #btnFooterMenu.active::before {
  background: url(../images/common/menu_active.svg) no-repeat;
}
/* フッターメニュー */
@media ( min-width : 769px) {
  .footer-menu {
    display: none;
  }
}
@media ( max-width : 768px) {
  .footer-menu {
    width: 100%;
    height: 6.2rem;
  }
  .fullscreen {
    bottom: 6.2rem;
    height: initial;
  }
  .modal-backdrop {
    bottom: 6.2rem;
    height: initial;
  }
}
.footer-menu .btn:focus {
  box-shadow: initial !important;
}
/********************************************************************************
 * コンテナエリア
 ********************************************************************************/
.container > .main > .articles > .article {
  max-width: 1024px;
  margin: 0;
  padding: 1.0rem 0rem 3.0rem;
}
.container.w-100 {
  width: 100% !important;
  max-width: none;
}
.container.w-75 {
  width: auto !important;
  max-width: 1024px;
}
.container.w-50 {
  width: auto !important;
  max-width: 683px;
}
.container.w-25 {
  width: auto !important;
  max-width: 341px;
}
.main > .row, .main > .articles > .row {
  margin: 0;
}
.articles.w-75, .articles.w-50, .articles.w-25 {
  margin-right: auto;
  margin-left: auto;
}
@media ( max-width : 768px) {
  .articles.w-75, .articles.w-50, .articles.w-25 {
    width: auto !important;
  }
}
/********************************************************************************
 * コンテナフッターエリア
 ********************************************************************************/
.footer {
  display: flex;
  clear: both;
  max-width: 1024px;
  margin-right: auto;
  margin-left: auto;
  padding: 1.4rem 0 0;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  width: 100%; /* IE対応 */
}
.footer > * {
  margin-right: auto;
  margin-left: auto;
}
.footer.fixed-bottom {
  padding-bottom: 2rem;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  opacity: 1;
}
.footer.row {
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
}
.footer a.btn-sm {
  line-height: 4rem;
}
.footer.row-reverse-none {
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
}
/********************************************************************************
 * メイン記事エリア
 ********************************************************************************/
.article .title {
  font-weight: bold;
  font-size: 1.8rem;
  vertical-align: bottom;
}
.article .contents > h3.title {
  display: block;
  font-weight: bold;
}
.article > .contents.row {
  margin: 0;
}
/* 子記事 */
.article .article {
  position: relative;
  display: block;
  padding: 20px 15px 8.0rem 15px; /* footer分底上げ */
  background: #fff;
  border: 3px solid #eaeaea;
  border-radius: 10px;
  margin-bottom: 8px;
}
/* 説明文言 */
p.introduction-message {
  display: block;
  margin-left: auto;
  text-align: left;
  margin-right: auto;
  padding: 0;
  font-size: 1.6rem;
  color: #747474;
  margin-bottom: 3rem;
}
p.terms {
  padding: 1.6rem;
  background: #fafafa;
  border-radius: 1.1rem;
}
div.terms {
  padding: 1.6rem;
  background: #fafafa;
  border-radius: 1.1rem;
}
/* 説明文言中のURLを折り返して表示 */
p.terms a {
  word-break: break-all;
}
/********************************************************************************
 * フォーム
 ********************************************************************************/
.form-groups {
  vertical-align: baseline;
}
.form-group {
  position: relative;
  width: 100%;
  margin: 0 auto 0.6rem auto;
  padding: 1.2rem 0;
}
.col-form-label {
  font-size: 1.5rem;
}
.col-form-value {
  font-size: 1.8rem;
}
.col-form-label, .col-form-value {
  vertical-align: top;
  padding: 0.5rem 0rem;
}
.form-control {
  display: inline-block;
  font-size: 1.6rem;
  border: 1px solid #352C00;
  border-radius: 0.6rem;
  padding: 1.4rem;
  padding-right: 4.5rem;
  height: auto;
  width: auto;
  border-radius: 6px;
  width: 100%;
}
textarea.form-control {
  padding-right: 1.4rem;
}
.error .form-control {
  border-color: #EB0000 !important;
}
.form-control:disabled {
  border-color: #aaa;
}
/* サイズ小 */
.form-sm .form-control {
  font-size: 1.6rem;
}
.form-check {
  width: 100%;
  margin: 0.8rem 0.8rem 0.8rem 0;
  padding: 0;
  text-align: left;
}
.form-check > .form-check-input {
  /* キーボード操作可能とするために非表示ではなく隠す */
  opacity: 0;
  position: absolute;
  filter: alpha(opacity = 0);
  -moz-opacity: 0;
  -webkit-appearance: none;
  appearance: none;
}
.form-check-label {
  cursor: pointer;
}
.form-check > .form-check-label {
  display: block;
  position: relative;
  padding: 10px 14px 10px 3.6rem;
  border-radius: 1.1rem;
  border: 1.6px solid #bdbdbd;
  background: #ffffff;
}
.form-check-input:checked + .form-check-label {
  background: #fff3b8 !important;
  border: 1.6px solid #ffb800 !important;
}
.form-check-input:focus + .form-check-label {
  /* フォーカス時デザイン */
  border: 1.6px solid #424242;
}
.form-check > .form-check-label:empty {
  display: inline-block;
  border: 2px solid transparent;
  background: none;
}
/* disabledチェック */
.form-check-input:disabled + .form-check-label {
  border: 1.6px solid #bdbdbd;
  background: #eeeeee;
  cursor: default;
}
.form-check-input:checked + .form-check-label {
  color: #222222;
}
.form-check-input:not(:checked) + .form-check-label {
  color: #000000;
}
/* オートコンプリートで背景色を変更しない */
.form-control:-internal-autofill-selected {
  transition: background-color 5000s ease-in-out 0s !important;
}
/********************************************************************************
 * 横並びフォーム
 ********************************************************************************/
.form-groups-horizon {
  width: 100%;
}
.form-groups-horizon .form-group {
  display: flex;
  margin-bottom: 4px;
  position:relative;
}
/********************************************************************************
 * 表示用フォーム
 ********************************************************************************/
.form-group-view {
  border-bottom: 1px solid #dddddd;
}
.form-group-view .col-form-label {
  padding: 5px 0px;
  background-color: #ffffff;
  color: #747474;
  font-size: 1.2rem;
}
.form-group-view .col-form-value {
  padding: 0.4rem 0.8rem;
}
/********************************************************************************
 * 最小ラベルフォーム
 ********************************************************************************/
.form-group-min-label {
  border-bottom: 0;
}
.form-group-min-label > .col-form-label {
  display: inline-block;
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  z-index: 999;
  width: auto;
  padding: 0 0.9rem;
  border-radius: 0.8rem;
  background-color: #ffffff;
  color: #352c00;
  font-size: 1.2rem;
}
.error.form-group-min-label > .col-form-label {
  color: #EB0000;
}
@media ( max-width : 768px) {
  .form-group-min-label > .col-form-label {
    top: 0rem;
  }
}
/********************************************************************************
 * チェックボックスエリア(選択用)
 ********************************************************************************/
.checkbox-area-select {
  padding: 0;
  font-size: 1.4rem;
}
.checkbox-area-select .form-check-label {
  padding: 2rem;
  padding-left: 6rem;
  border-radius: 1.2rem;
  vertical-align: middle;
}
.checkbox-area-select .form-check-label .title {
  font-size: 1.9rem;
}
.checkbox-area-select .form-check-label .btn-link {
  color: #858585;
}
.checkbox-area-select .form-check-label b {
  font-size: 1.5rem;
}
.checkbox-area-select .form-check-input + .form-check-label::before {
  display: inline-block;
  position: absolute;
  top: calc(50% - 1.2rem);
  left: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  background: url(../images/common/check_off.svg) no-repeat;
  background-size: contain;
  content: "";
}
.checkbox-area-select .form-check-input:checked + .form-check-label::before {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  background: url(../images/common/check_on.svg) no-repeat;
  background-size: contain;
  content: "";
}
.checkbox-area-select .form-check-input:disabled + .form-check-label::before {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  background: url(../images/common/check_off_disabled.svg) no-repeat;
  background-size: contain;
  content: "";
}
.checkbox-area-select .form-check-input:disabled:checked + .form-check-label::before {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  background: url(../images/common/check_on_disabled.svg) no-repeat;
  background-size: contain;
  content: "";
}
.checkbox-area-select .form-check-input + .form-check-label::after {
  content: none;
}
/********************************************************************************
 * ボタン
 ********************************************************************************/
.btn {
  width: 85%;
  max-width: 300px;
  margin: 1.0rem auto;
  padding: 1.6rem 0rem;
  border-radius: 20rem;
  font-weight: 600;
  font-size: 1.6rem;
  white-space: nowrap;
  cursor: pointer;
  white-space: break-spaces;
}
.btn:disabled {
  cursor: not-allowed; /* 禁止カーソル */
}
/* プライマリ(通常時) */
.btn-primary {
  border: 1.6px solid #352c00;
  background: #352c00;
  color: #ffffff;
}
/* プライマリ(フォーカス時) */
.btn-primary:focus {
  border: 2px solid #ffd300;
  background: #352c00;
  color: #ffffff;
  box-shadow: none !important;
}
/* プライマリ(ホバー時) */
.btn-primary:hover {
  border: 1.6px solid #222222;
  background: #222222;
  color: #ffffff;
}
/* プライマリ(アクティブ時) */
.btn-primary:active {
  border: 1.6px solid #222222 !important;
  background: #222222 !important;
  color: #ffffff !important;
}
/* プライマリ(非活性時) */
.btn-primary.disabled, .btn-primary:disabled {
  border: 1px solid #a1a1a1;
  background: #bebebe;
  color: #ffffff;
}
/* セカンダリ(通常時) */
.btn-secondary {
  border-color: #352c00 !important;
  border: 1.6px solid #352c00;
  background: #ffffff;
  color: #352C00 !important;
}
/* セカンダリ(フォーカス時) */
.btn-secondary:focus {
  border-color: #352c00 !important;
  border: 1.6px solid #352c00;
  background: #ffffff;
  color: #352C00 !important;
  box-shadow: 0px 0px 0px 2px #ffd300 !important;
}
/* セカンダリ(ホバー時) */
.btn-secondary:hover {
  border-color: #352c00 !important;
  border: 1.6px solid #352c00;
  background: #fffbe4 !important;
  color: #352C00 !important;
}
/* セカンダリ(アクティブ時) */
.btn-secondary:active {
  border-color: #352c00 !important;
  border: 1.6px solid #352c00;
  background: #fffbe4 !important;
  color: #352C00 !important;
}
/* セカンダリ(非活性時) */
.btn-secondary.disabled, .btn-secondary:disabled {
  border-color: #a1a1a1 !important;
  border: 1.6px solid #a1a1a1;
  background: #bebebe !important;
  color: #ffffff !important;
}
.btn-xs {
  margin: 0 auto;
  padding: 0.2rem 1.0rem;
  border-radius: 1.2rem;
  font-weight: normal;
  font-size: 1.1rem;
}
.btn-sm {
  padding: 0.8rem 3rem;
  border-radius: 1.8rem;
  font-size: 1.3rem;
}
.btn-lg {
  padding: 20px 80px;
  border-radius: 10px;
  font-size: 1.6rem;
}
.btn.pull-right {
  width: auto;
}
/* 詳細ボタン */
.btn-detail {
  border-color: #007aff;
  color: #007aff;
}
/* 丸ボタン */
.btn-circle-icon {
  line-height: 2.0rem;
  width: 2.0rem;
  height: 2.0rem;
  margin: 2px 2px 2px 10px;
  padding: 0;
  background: url(../images/circle_question_mark_icon.svg) no-repeat;
}
/* ボタン内文字改行制御 */
.btn-text-control {
  display: inline-block;
}
/* ボタン内文字改行制御 - IE対応 */
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .btn-text-control-ie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}
/********************************************************************************
 * 入力クリアボタン
 ********************************************************************************/
 .btnClear {
  visibility: hidden;
  position: absolute;
  /* inputのpadding考慮 */
  top: 2.3rem;
  right: 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  background: url(../images/common/icon_erase.svg) no-repeat;
  background-size: contain;
  background-position-x: right;
  background-position-y: center;
}
/* IEのクリアボタン非表示 */
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  input::-ms-clear {
    visibility:hidden;
  }
}
/********************************************************************************
 * リンク
 ********************************************************************************/
.link {
  cursor: pointer;
}
a.link-image, a.link-image:hover {
  display: inline-block;
  text-decoration: none;
}
a.link-image.disabled {
  opacity: 0.3;
}
/********************************************************************************
 * テキスト
 ********************************************************************************/
span.text-break {
  display: inline-block; /* IE用 */
}
.col-form-value span.text-break {
  display: block; /* IE用 */
  text-align: inherit; /* スマホ時Center用 */
}
/* 改行 - pre表示 */
.text-pre {
  white-space: pre;
}
/* 改行 - pre表示、自動改行あり */
.text-pre-wrap {
  white-space: pre-wrap !important;
}
/* 改行 - 自動改行あり */
.text-wrap {
  white-space: wrap;
}
/* 改行 - 自動改行なし */
.text-nowrap {
  white-space: nowrap;
}
/* 装飾 - 太字 */
.text-strong, .strong {
  font-weight: bold;
}
/* 装飾 - 取り消し線 */
.text-strike {
  text-decoration: line-through;
}
/* 装飾 - 下線 */
.text-underline {
  text-decoration: underline;
}
/* 種類別 - 説明 */
.text-description {
  margin: 8px 0;
  font-size: 92%;
  white-space: normal;
}
.text-description.w-75 {
  max-width: 768px;
  margin: 0 auto;
}
/* 種類別 - 注釈 */
.text-annotation {
  color: #4b4b4b;
  font-size: 1.1rem;
}
.text-annotation > a {
  color: #007bff;
}
/* 種類別 - 注意事項 */
.text-attention {
  color: red;
  margin: 0;
}
/* 配置 - ぶら下げインデント */
.text-hanging-indent {
  padding-left: 1.0em;
  text-indent: -1.0em;
}
/* 文字サイズ - 大 */
.text-lg {
  font-size: 108% !important;
}
/* 文字サイズ - 小 */
.text-sm {
  font-size: 92% !important;
}
/* 文字サイズ - 極小 */
.text-xs {
  font-size: 82% !important;
}
/* 文字サイズ - 最小 */
.text-xss {
  font-size: 1.2rem !important;
}
/* サブテキスト */
.text-sub {
  color: #616161 !important;
}
/********************************************************************************
 * 種類別
 ********************************************************************************/
/* 英数字、数字 */
.type-string, .type-string-num {
  white-space: normal;
  text-align: left;
  ime-mode: inactive; /* IEでのみ有効 */
}
/* 日本語 */
.type-string-jp {
  white-space: normal;
  text-align: left;
  ime-mode: active; /* IEでのみ有効 */
}
/* 数値 */
.type-number {
  white-space: nowrap;
  text-align: right;
  ime-mode: inactive; /* IEでのみ有効 */
}
/* 日付 */
.type-date {
  white-space: nowrap;
  ime-mode: inactive; /* IEでのみ有効 */
}
/* 単位項目 */
.type-unit {
  white-space: nowrap;
  font-size: 88%;
}
.type-unit:not(.input-group-text ) {
  margin: 0 0.1rem;
}
/* 小計、合計 */
.type-subtotal>th, .type-total>th {
  text-align: right;
}
tr.type-subtotal>* {
  border-bottom: 2px solid #d3d7db;
}
.type-total th, .type-total td {
  font-weight: bold;
}
@media ( max-width : 768px) {
  input.type-number, select.type-number, input.type-date, select.type-date {
    width: 100% !important;
    flex: 1 1 auto !important; /* input-group内用 */
  }
  .input-group {
    width: 100%;
  }
}
/* プレースホルダ */
.form-control::-webkit-input-placeholder {
  color: #ccc;
  font-size: 90%;
}
.form-control:-ms-input-placeholder {
  color: #ccc;
}
/* Chromeでスピンボタン、クリアボタン非表示 */
input::-webkit-inner-spin-button, input::-webkit-clear-button {
  -webkit-appearance: none;
}
/* エラー項目 */
input[type="checkbox"].error, input[type="radio"].error {
  box-shadow: 0 0 1px 2px #FF8888 !important
}
/* リードオンリー */
.form-control[readonly] {
  background: transparent;
  border: none;
}
/* 入力グループ */
.input-group {
  flex-wrap: nowrap;
  display: -ms-inline-flexbox; /* 中身依存の幅にしたいのでinline-flexとする */
  display: inline-flex; /* 中身依存の幅にしたいのでinline-flexとする */
  width: auto;
}
@media ( max-width : 768px) {
  .form-group {
    padding: 0.3rem 0;
  }
}
/********************************************************************************
 * 入力項目フォーカス時
 ********************************************************************************/
.form-control:focus {
  background-color: initial;
  border-color: initial;
  outline: auto;
  box-shadow: initial;
}
[type="button"]:focus {
  box-shadow: 0 0 0 0.2rem #000;
}
[type="button"]:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.2rem #000;
}
.link:focus, .btn:focus {
  box-shadow: 0 0 0 0.2rem #000;
}
/********************************************************************************
 * お知らせ情報
 ********************************************************************************/
.article-information .article>.title {
  font-weight: normal;
  font-size: 1.4rem;
  color: #666666;
}
.article-information .article p {
  word-break: break-all;
  white-space: pre-wrap;
}
/********************************************************************************
 * 内訳表示
 ********************************************************************************/
div.breakdown-open, div.breakdown-close {
  cursor: pointer;
}
.breakdown-text, div.breakdown-open::after, div.breakdown-close::after {
  color: #0000de; /* リンク色 */
}
.breakdown-text, div.breakdown-open::after, div.breakdown-close::after, input.breakdown-open ~ label::after, input.breakdown-close ~ label::after {
  display: inline-block;
  margin-left: 5px;
  font-size: 75%;
  vertical-align: baseline;
}
/********************************************************************************
 * プルダウン
 ********************************************************************************/
select.input-item-pulldown {
  -webkit-appearance: none;
  appearance: none;
  background-image: url(../images/pulldown-arrow.png);
  background-size: 15px 10px;
  background-position: right 15px center;
  background-repeat: no-repeat;
}
/* IE11プルダウン矢印非表示対応 */
select.input-item-pulldown::-ms-expand {
  display: none;
}
/********************************************************************************
 * レスポンシブ対応
 ********************************************************************************/
/* 最大幅制限 */
@media ( max-width : 768px) {
  .container, .container .article-search, .container .footer {
    max-width: 768px;
  }
  .container, .container-fluid {
    width: 100% !important;
    margin: 0 0; /* ナビゲーションバーの高さも含む */
  }
  .container.w-75, .container.w-50, .container.w-25 {
    max-width: none;
  }
}
/* 画面幅用(大) */
@media ( min-width : 769px) {
  .visible-sm {
    display: none;
  }
}
/* 画面幅用(小) */
@media ( max-width : 768px) {
  .visible-sm {
    display: inline-block;
  }
  .visible-sm.block {
    display: block;
  }
  .hidden-sm {
    display: none;
  }
  .hidden-sm.disabled {
    display: none;
  }
}
/********************************************************************************
 * スイートアラート
 ********************************************************************************/
.swal2-modal {
  margin: auto 2.4rem !important;
  padding: 4.0rem 5.6rem;
  border-radius: 1.2rem;
}
.swal2-header {
  align-items: initial !important;
}
.swal2-title {
  margin-bottom: 1.6rem;
  font-size: 2.6rem;
}
.swal2-content {
  margin-bottom: 3.2rem;
  font-size: 1.6rem;
  text-align: left;
  white-space: pre-wrap;
}
.swal2-actions {
  display: contents;
}
.swal2-actions button {
  min-width: 120px;
  border-radius: 2.8rem !important;
  font-size: 1.6rem !important;
}
.swal2-styled.swal2-confirm {
  border: 0;
  background-color: #352c00;
  color: #ffffff;
}
.swal2-styled.swal2-cancel {
  border: 1px solid #352c00 !important;
  background-color: #ffffff;
  color: #352c00;
}
.swal2-styled {
  margin: 0.8rem 0 0rem;
  padding: 1.6rem 0.4rem;
}
.swal2-show {
  animation: none;
  -webkit-animation: none;
}
@media ( min-width : 769px) {
  .swal2-modal {
    width: 50%;
    max-width: 500px;
  }
}
@media ( max-width : 768px) {
  .swal2-modal {
    padding: 1.6rem;
  }
  .swal2-title {
    font-size: 2.0rem;
  }
  .swal2-content {
    margin-bottom: 1.6rem;
  }
  .swal2-actions {
    margin: 2.4rem 0 0 0;
  }
}
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
  overflow: auto;
}
/********************************************************************************
 * アクセシビリティ対策
 ********************************************************************************/
#navbarDropdown {
  color: #0071EB !important;
}