@charset "utf-8";
/* +++++++++++++++++++++++++++++++++++++++++++++++++++
法人画面用CSS
+++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*
 * Default設定変更
 * 
 */

/* <input type="number">のスピンボタンを非表示にする */
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
} 
input[type="number"] { 
    -moz-appearance:textfield; 
}

label.disabled {
	color: var(--gray);
}

/* ---------------------------------------------------
 * 共通スタイル設定
 * class:
 --------------------------------------------------- */
/*
 * コンテナ余白調節
 */
.cont-mb6p {
	margin-bottom: 6% !important;
} 

.cont-my4p {
	margin-top: 4% !important;
	margin-bottom: 4% !important;
}
.cont-mx3p {
	margin-left: 3% !important;
	margin-right: 3% !important;
}
.cont-mt4p {
	margin-top: 4% !important;
}
.cont-mb4p {
	margin-bottom: 4% !important;
}
.cont-mb3p {
	margin-bottom: 3% !important;
}

.cont-p4p {
	padding: 4% !important;
}
.cont-py4p {
	padding-top: 4% !important;
	padding-bottom: 4% !important;
}
.cont-pt4p {
	padding-top: 4% !important;
}
.cont-pb4p {
	padding-bottom: 4% !important;
}
.cont-p3p {
	padding: 3% !important;
}
.cont-py2px3p {
	padding: 2% 3% !important;
}


/*
 * カードスタイル
 */
.spcard-bd-sm {
	max-width: 100%;
	width: 600px;
	min-height: 340px;
	border-radius: 10px;
	border: 3px solid var(--indigo);
	background-color: var(--white);
}


/*
 * ページタイトル
 */
.ttl-page-box, .ttl-page-box2 {
	/*background: var(--indigo) url("../img/app/bg_pagettl.svg") no-repeat left top;*/
	background-image: url("../img/app/bg_pagettl.svg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	text-align: center;
	padding: 20px 20px 10px;
	min-height: 110px;
}
.ttl-page-box {
	background-color: var(--indigo);
}
.ttl-page-box2 {
	background-color: var(--white);
	min-height: 140px;
}
.ttl-page {
	color: var(--blue-light);
	text-shadow: 2px 2px 3px var(--indigo);
}
.ttl-page2 {
	color: var(--indigo);
}
.ttl-page-sub, .ttl-page-sub2 {	/* 法人会員 */
	font-size: 1.1rem;
	color: var(--indigo);
	background-color: var(--white);
	vertical-align: middle;
}
.ttl-page-sub {
	background-color: var(--white);
}
.ttl-page-sub2 {
	background-color: var(--light);
}

/*
 * セクションタイトル
 */
.ttl-section-2 {
	color: var(--white);
	background-color: var(--indigo);
	padding: 8px 15px;
}
.ttl-section-2::before {
	padding-right: 10px;
}

.ttl-section-3, .news-content h3 {
	color: var(--blue);
	text-indent: -25px;
	margin-left: 25px;
}
.ttl-section-3::before, .news-content h3::before {
	content: '';
	display: inline-block;
	width: 15px;
	margin-right: 10px;
	border-top: 1px solid var(--blue);
	vertical-align: middle;
}
.ttl-section-4, .news-content h4 {
	background-color: var(--indigo);
	color: var(--white);
	display: inline-block;
	padding: 5px 15px;
	font-size: 1rem;
}

/*
 * タイトルカスタムサイズ
 */
.ttl-size-18 {
	font-size: 1.8rem;
}

/*
 * 赤下線
 */
.txt-line-danger {
	border-bottom: 3px solid var(--red);
}

/* 罫線 */
.hr-basic {
    border-width: 1px;
	border-color: var(--gray);
	margin: 0;
}

/*
 * エラーメッセージ
 */
.error-box {
	border: 2px solid var(--red);
	background-color: var(--white);
	border-radius: 8px;
	padding: 10px 15px 5px;
}
.error-box2 {
	border: 2px solid var(--red);
	background-color: var(--yellow-lemon);
	padding: 15px 15px 10px;
}
.error {
	color: var(--red);
	line-height: 1.3;
	font-size: .9rem;
}

/*
 * フラッシュメッセージ
 */
.flash-box {
	background-color: var(--blue-light);
	border-radius: 8px;
	padding: 10px 15px 5px;
}
.flash-box p {
	font-size: .9rem;
}


/*
 * ぱんくず
 * Bootstrapのclass:breadcrumbに>追加設定
 */
.breadcrumb li::after {
	content: '>';
	margin-left: 5px;
	margin-right: 5px;
}
.breadcrumb li:last-of-type::after {
	display: none;
}

/*
 * ページTOP
 */
.page-top {
	position: fixed;
  	right: 30px;
  	bottom: 30px;
	width: 64px;
	height: 64px;
	background-color: var(--white);
	cursor: pointer;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;	
}
.page-top:hover {
	opacity: .8;
}
.page-top small {
	color: var(--indigo);
	margin-top: 2px;
}
.page-top img {
	width: 30px;
	height: auto;
}
/* AI チャットボット（IZANAI）を出す画面では、右下の吹き出しと重ならないよう左下へ寄せる（redmine #17939） */
.page-top.page-top--left {
	right: auto;
	left: 30px;
}

/*
 * 注釈
 */
.notes-box {
	background-color: var(--white);
}

/*
 * 画像
 */
 /* 入会金・年会費無料画像 */
.img-free {
	width: 95px;
	height: auto;
}

/*
 * アイコン
 */
.ico-image {
	font-size: 1.4rem;
	line-height: 1;
	color: var(--gray);
	cursor: pointer;
}
.ico-image.disabled {
	color: var(--gray-light1);
	cursor: auto;
}

/*
 * ステータスアイコン
 */
.ico-status-basic, .ico-status-danger, .ico-status-success, .ico-status-secondary {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 5px;
	border-radius: 50%;
}
.ico-status-basic {	/* 青丸 */
	background-color: var(--blue);
}
.ico-status-danger {	/* 赤丸 */
	background-color: var(--red);
}
.ico-status-success {	/* 緑丸 */
	background-color: var(--green);
}
.ico-status-secondary {	/* グレー */
	background-color: var(--gray);
}

/*
 * テーブル
 */
 /* テーブルスタイル */
.inq-table {
	width: 100%;
	min-width: 900px;
}

/*
 * フォーム状態確認
 * class:form-status～
 * 現在位置liに class:form-status-current 付与／未処理liに class:form-status-notenter 付与
 */
.form-status li {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
.form-status li::after {
	content: '';
	display: inline-block;
	border-top: 1px solid var(--gray);
	width: 80px;
	height: 1px;
	margin-top: 10px;
	margin-left: -5px;
	margin-right: -5px;
}
.form-status li:last-of-type::after {
	display: none;
	padding: 0;
}
.form-status-current span, .form-status-notenter span {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border-style: solid;
	border-width: 4px;
}
.form-status-current span {
	background-color: var(--white);
	border-color: var(--indigo);
}
.form-status-notenter span {
	background-color: var(--gray);
	border-color: var(--gray);
}
.form-status p {
	font-size: .9rem;
	font-weight: 600;
}
.form-status-current p {
	color: var(--indigo);
}
.form-status-notenter p {
	color: var(--gray);
}

/*
 * フォーム関連
 */
/* inputフォームサイズ */
.form-size-s {
	width: 100%;
	max-width: 120px;
	min-width: 120px;
}
.form-size-sm {
	width: 100%;
	max-width: 200px;
	min-width: 200px;
}
.form-size-m {
	width: 100%;
	max-width: 240px;
	min-width: 240px;
}
.form-size-md {
	width: 100%;
	max-width: 300px;
	min-width: 300px;
}
.form-size-l {
	width: 100%;
	max-width: 400px;
	/*min-width: 400px;*/
}
.form-size-lg {
	width: 100%;
	max-width: 500px;
	/*min-width: 500px;*/
}

/* ボタンサイズ */
/*.btn-size-sm {
	width: 500px;
	max-width: 100% !important;
}*/

/* ラベル */
.form-label {
	font-weight: 600;
}
.form-label.disabled {
	color: var(--gray);
}

/* 必須アイコン */
.form-required {
	background-color: var(--red);
	padding: 0 5px 2px;
	color: var(--white);
	font-size: .75rem;
	border-radius: 2px;
	vertical-align: middle;
	font-weight: 400;
}

/*
 * input内アイコン設定
 */
 .form-inputico-left, .form-inputico-right {
 	z-index: 4;
	position: absolute;
	height: 38px;
 }
.form-inputico-left {
	left: 10px;
	top: 6px;
}
.form-inputico-right {
	right: 0;
	top: 0;
}
.form-inputico-right .btn {
	border-radius: 0 0.25rem 0.25rem 0;
}
.form-input-style1 {
	border-radius: 0.25rem !important;
}
.form-input-style2 {
	padding-left: 30px;
	border-radius: 0.25rem !important;
}

/* 二段階認証 */
.form-input-twoaut {
	width: 60px;
	height: 60px;
	margin-left: 5px;
	margin-right: 5px;
}


/*
 * スイッチラジオボタン
 */
/* ボタン表示エリア */
.form-switch-btn {
	height: 46px;
	display: flex;
}
.form-switch-btn input[type="radio"] {
	display: none;
}
/* ラジオボタンラベル（標準） */
.form-switch-btn label {
	display: block;
	padding-top: 6px;
	text-align: center;
	cursor: pointer;
	border: 1px solid var(--gray-light1);
}
/* 左側ラベル */
.form-switch-btn .form-switch-right + label {
	border-radius: 4px 0 0 4px;
	background-color: var(--gray-light2);
	border-right: 1px solid var(--gray-light1);
	transition: all 0.2s 0s ease;
}
/* 中央ラベル */
.form-switch-btn .form-switch-center + label {
	background-color: var(--gray-light2);
	border-left: none;
	transition: all 0.2s 0s ease;
}
/* 右側ラベル */
.form-switch-btn .form-switch-left + label {
	border-radius: 0 4px 4px 0;
	background-color: var(--gray-light2);
	border-left: none;
	transition: all 0.2s 0s ease;
}
/* ラベルchecked */
.form-switch-btn :checked +label {
	background-color: var(--blue);
	color: var(--white);
	border-color: var(--blue);
	transition: all 0.2s 0s ease;
}

/*
 * 搭乗券画像登録
 */
.form-uploader-box {
	/*max-width: 980px;*/
}
.form-uploader-box {
	border: 5px dashed var(--gray-light1);
	background-color: var(--white);
	min-height: 300px;
}
.form-uploader-upbox {
	width: 100%;
	
}
.form-uploader-imgbox {
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.form-uploader-imgbox img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 80vh;
}
.form-uploader-img {
	font-size: 5rem;
}

/* 完了画面画像 */
.form-img-complet {
	width: 100%;
	max-width: 260px;
	height: auto;
}

/* 数量カウンター */
.form-ico-minus, .form-ico-plus {
	border-radius: 50%;
	border: 1px solid #434343;
	color: #434343;
	font-size: 1rem;
	font-weight: 600;
	width: 24px;
	height: 24px;
	line-height: 1;
	padding: 0 0 2px 0;
	margin: 0;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
}
.form-ico-minus {
	background-color: #94DDFE;
}
.form-ico-plus {
	background-color: #FFF000;
	
}
.inactive, .form-ico-minus:disabled, .form-ico-plus:disabled {
	background-color: #DBE2E9;
	cursor: default;
}

/* リフレッシュボタン */
.form-btn-refresh {
	background: none;
	border: none;
	font-size: 1.3rem;
}

/* 回転ボタン */
.form-btn-rotate-rt, .form-btn-rotate-lf {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	cursor: pointer;
}

.form-btn-rotate-rt {
	background-image: url("../img/app/ico_rotate_rt.svg");
}
.form-btn-rotate-lf {
	background-image: url("../img/app/ico_rotate_lf.svg");
}

/* 各ズームボタン */
.zoom-btn-group {
	position:absolute;
	right:0;
	top:-26px;
	display:inline-flex
}
.btn-indigo {
  color: #fff;
  background-color: var(--indigo);
}
.btn-zoom {
	height: 26px;
	border-radius:0.25rem;
}
.zoom-btn-txt {
	border:1px solid var(--indigo);
	color: var(--indigo)
}
.zoom-btn-group .btn:hover {
  color: #fff;
  text-decoration: none;
}

/* pdfプレビューボタン */
.btn-pdf-preview {
	font-weight: 600;
	padding-left: 60px;
	padding-right: 60px;
	line-height: 1.25rem
}
.btn-pdf-preview:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}
.pdf-preview-fs {
	font-size: 0.8rem;
}

/*********************** ▼▼▼デバイス対応 1200px未満▼▼▼ ***********************/
@media screen and (max-width: 1199.98px) {
	/*
	 * タイトルカスタムサイズ
	 */
	.ttl-size-18 {
		font-size: 1.5rem;
	}
}


/*********************** ▼▼▼デバイス対応 992px未満▼▼▼ ***********************/
@media screen and (max-width: 991.98px) {
	/*
	 * ページタイトル
	 */
	.ttl-page-box {
		padding: 15px 15px 5px;
		min-height: 80px;
	}
	.ttl-page-box2 {
		padding: 15px 15px 5px;
		min-height: auto;
	}
	.ttl-page-sub {	/* 法人会員 */
		font-size: .9rem;
	}
	/*
	 * フォーム状態確認
	 */
	.form-status {
		margin-bottom: 0;
	}
}

/*********************** ▼▼▼デバイス対応 768px未満▼▼▼ ***********************/
@media screen and (max-width: 767.98px) {
	/*
	 * ページタイトル
	 */
	.ttl-page-box {
		min-height: 50px;
	}

	/*
	 * タイトルカスタムサイズ
	 */
	.ttl-size-18 {
		font-size: 1.3rem;
	}
	
	/*
	 * ページTOP
	 */
	.page-top {
		right: 15px;
		bottom: 10px;
	}
	.page-top.page-top--left {
		right: auto;
		left: 15px;
	}

	/* 二段階認証 */
	.form-input-twoaut {
		width: 45px;
		height: 45px;
		margin-left: 2px;
		margin-right: 2px;
	}
}

/*********************** ▼▼▼デバイス対応 576px未満▼▼▼ ***********************/
@media screen and (max-width: 575.98px) {
	/*
	 * テーブル
	 */
	 /* テーブルスタイル */
	.inq-table {
		min-width: 600px;
	}

	/* 二段階認証 */
	.form-input-twoaut {
		width: 40px;
		height: 40px;
		/*margin-left: 1px;
		margin-right: 1px;*/
	}
}


/* ---------------------------------------------------
 * Header設定
 * class:head～
 --------------------------------------------------- */
/* ヘッダ */
.head {
	padding: 10px 20px;
	background-color: var(--white);
	box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.03);
	z-index: 3;
}
/* ロゴ */
.head-logo {
	/*margin-bottom: 1rem;*/
}
.head-logo img {
	width: 195px;
	height: auto;
}
/*
 * Gメニュー
 */
.head-menu li {
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
}
/* 会員証 */
.head-menu-mecard {
	/*color: var(--indigo);*/
	text-decoration: none !important;
	font-size: .75rem;
	text-align: center;
	vertical-align: middle;
}
.head-menu-mecard img {
	width: 28px;
	height: auto;
}


/* ユーザー名 */
.head-user {
	width: 140px;
	font-size: .85rem;
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
	vertical-align: middle;
	line-height: 1;
	
}
.head-user i {
	font-size: 1.2rem;
	vertical-align: middle;
	margin-right: 3px;
	padding-bottom: 5px;
}

/*********************** ▼▼▼デバイス対応 576px未満▼▼▼ ***********************/
@media screen and (max-width: 575.98px) {
	/* ヘッダ */
	.head {
		padding: 10px;
	}
	/* ロゴ */
	.head-logo {
		width: 100%;
		margin-bottom: .5rem;
	}
	/*
	 * Gメニュー
	 */
	 .head-nav {
		width: 100%;
		text-align: center;
	 }
}


/* ---------------------------------------------------
 * Sub Footer設定
 * class:subfoot～
 --------------------------------------------------- */ 
.subfoot-list li {
 	vertical-align: top;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 20px;
}
 
/*
 * サブフッタメニューボタン
 */
.subfoot-btn {
	width: 110px;
	height: 110px;
	background-color: var(--white);
	border: 2px solid var(--indigo);
	border-radius: 4px;
	display: flex;
	flex-flow: column;
	align-items: center;
	padding: 10px;
	color: var(--indigo);
	font-size: .9rem;
	line-height: 1.2;
	transition: all .4s;
}
.subfoot-btn:hover {
	text-decoration: none;
	background-color: var(--blue);
	color: var(--white);
}
.subfoot-btn i {
	font-size: 1.5rem;
	height: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
}

/*********************** ▼▼▼デバイス対応 768px未満▼▼▼ ***********************/
@media screen and (max-width: 767.98px) {
	.subfoot-list li {
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 10px;
	}
	/*
	 * サブフッタメニューボタン
	 */
	.subfoot-btn {
		width: 100px;
		height: 100px;
	}
	.subfoot-btn i {
		height: 40px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}


/* ---------------------------------------------------
 * Footer設定
 * class:foot～
 --------------------------------------------------- */
/*
 * フッタメニュー
 */
.foot-menu li a {
	color: var(--black);
}
/*
 * フッタ
 */
.foot-box {
	background-color: var(--gray-dark);
	padding: 15px 2% 10px;
}

/* ロゴ */
.foot-logo img {
	width: 195px;
	height: auto;
}

/* ---------------------------------------------------
 * 会員証
 * class:mem-
 --------------------------------------------------- */
.mem-card {
	max-width: 100%;
	width: 350px;
	height: auto;
}


/* ---------------------------------------------------
 * 搭乗券登録一覧
 * class:passlist-
 --------------------------------------------------- */
/* 搭乗券ステータス絞り込みチェック */
.passlist-check {
	display: none;
}
.passlist-check-btn {
	border-radius: 25px;
	padding: 5px 20px 6px 25px;
	color: var(--black);
	background-color: var(--white);
	border: 1px solid var(--gray-light2);
	min-width: 120px;
	text-align: center;
	transition: all 0.2s;
	cursor: pointer;
}
.passlist-check-ico {
	content: '';
	position: absolute;
	top: 14px;
	left: 15px;
	width: 12px;
	height: 7px;
	border-left: 3px solid var(--white);
	border-bottom: 3px solid var(--white);
	transform: rotate(-45deg);
	
	display: none;
}
.passlist-check:checked ~ .passlist-check-ico {
    display: block;
}

.passlist-check:checked ~ .passlist-check-btn {
	color: var(--white);	 
	background-color: var(--blue);
	border-color: var(--blue);
}

/* 搭乗券登録詳細テーブル */
.passlist-tb th {
	font-weight: 500;
	width: 15%;
}
.passlist-tb th, .passlist-tb td {
	padding: 8px 15px;
}
.passlist-td1 {
	width: 40%;
}
.passlist-td2 {
	width: 45%;
}
.passlist-tb-img {
	max-width: 100%;
	max-height: 100%;
}

/* 搭乗券登録全件表示ボタン */
.passlist-link-all {
	border: none;
	background-color: transparent;
	color: var(--blue);
}
.passlist-link-all:hover {
	text-decoration: underline;
	color: var(--indigo);
}


/*********************** ▼▼▼デバイス対応 992px未満▼▼▼ ***********************/
@media screen and (max-width: 991.98px) {
	/* 搭乗券登録詳細テーブル */
	.passlist-tb tr {
		display: flex;
		flex-wrap: wrap;
	}
	.passlist-tb th, .passlist-tb td {
		padding: 4px 10px;
	}
	.passlist-tb th {
		width: 28%;
		display: inline-block;
		order: 2;
	}
	.passlist-td1 {
		width: 70%;
		display: inline-block;
		order: 3;
	}
	.passlist-td2 {
		width: 100%;
		display: inline-block;
		order: 1;
	}
}

/*********************** ▼▼▼デバイス対応 576px未満▼▼▼ ***********************/
@media screen and (max-width: 575.98px) {
	/* 絞り込みボタン */
	.passlist-check-btn {
		min-width: auto;
	}
}



/* ---------------------------------------------------
 * 特典
 * class: bene～
 --------------------------------------------------- */
 /* 特典タイトル */
.bene-ttl {
	width: calc(100% - 88px);
}
.bene-ttl.bene-ttl-detail {
	width: calc(100% - 181px);
}
 /* 特典No.アイコン */
.bene-numico {
	width: 80px;
	height: 80px;
	background-color: var(--indigo);
	border-radius: 50%;
	color: var(--white);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

/* キャンペーン期間 */
.bene-term {
	background-color: var(--light);
	border-radius: 20px;
	padding: 0 20px;
}
.bene-term dt, .bene-term dd {
	margin: 8px 0;
}

/* サムネイル */
.bene-tmb img, .bene-tmb-noimg img {
	width: 300px;
	max-width: 100%;
	height: 225px;
	object-fit: cover;
	object-position: 50% 50%;
}
.bene-tmb-noimg img {
	border: 1px solid var(--gray-light1);
}


/* 搭乗券テーブル */
.bene-bdpass-wrap {
	padding: 2% 2% 1% 3%;
}
.bene-bdpass-size1 {
	max-width: 100%;
	width: 700px;
}
.bene-bdpass-size2 {
	max-width: 100%;
	width: 500px;
}
.bene-bdpass-box {
	height: 200px;
	overflow: auto;
	padding-right: 20px;
}
.bene-bdpass-inbox {
	/*overflow: auto;*/
}
.bene-bdpass-tb {
	min-width: 320px;
}
.bene-bdpass-tb th, .bene-bdpass-tb td {
	padding: 3px 15px;
}
.bene-bdpass-tb .select-corporation-member-no {
	padding-right: 2.2rem;
}

/* 応募残数 */
.bene-numappli-box {
	padding: 3px 30px;
}
.bene-numappli-box dt, .bene-numappli-box dd {
	font-weight: 500;
}


/*********************** ▼▼▼デバイス対応 768px未満▼▼▼ ***********************/
@media screen and (max-width: 767.98px) {
	 /* 特典No.アイコン */
	.bene-numico {
		width: 60px;
		height: 60px;
		font-size: .9rem;
	}
	/* キャンペーン期間 */
	.bene-term {
		border-radius: 30px;
	}
	.bene-term dt {
		margin-bottom: 0;
	}
	.bene-term dd {
		margin-top: 0;
	}
	
	/* 搭乗券テーブル */
	.bene-bdpass-tb th, .bene-bdpass-tb td {
		padding: 3px 5px;
	}
}


/* ---------------------------------------------------
 * 搭乗券選択モーダル
 * class: bdpass-modal～
 --------------------------------------------------- */
.bdpass-modal-wrap {
	height: 300px;
	overflow: auto;
}
.bdpass-modal-box {
	padding-left: 0;
	margin-right: 20px;
}
.bdpass-modal-box li {
	list-style: none;
}
.bdpass-modal-itemhead {
	background-color: var(--gray-dark);
}
.bdpass-modal-itemhead p {
 	display: inline-block;
	color: #fff;
	padding: 6px 10px;
	margin-bottom: 0;
}
.bdpass-modal-item2, .bdpass-modal-item3, .bdpass-modal-item4, .bdpass-modal-item5 {
	min-width: 100px;
}
.bdpass-modal-item2 {
	width: 23%;
}
.bdpass-modal-item2.bdpass-modal-item2-corporation-name {
	width: 53%;
}
.bdpass-modal-item3 {
	width: 18%;
}
.bdpass-modal-item4 {
	width: 30%;
}
.bdpass-modal-item5.bdpass-modal-item5-registered_at {
	padding-left: 1.2rem;
}
.bdpass-modal-list {
	border: 1px solid var(--gray-light1);
	border-radius: 3px;
	
}
.bdpass-modal-list label, .bdpass-modal-list p {
	display: inline-block;
	padding: 6px 10px;
	margin-bottom: 0;
}
.bdpass-modal-list .custom-control-label::before, .bdpass-modal-list .custom-control-label::after {
	margin: 6px 10px;
	
}
.bdpass-modal-foot {
	padding: 0.75rem;
	margin: 1.5rem;
}


/*********************** ▼▼▼デバイス対応 768px未満▼▼▼ ***********************/
@media screen and (max-width: 767.98px) {
	.bdpass-modal-itemhead p {
		display: block;
	}
	.bdpass-modal-list label, .bdpass-modal-list p {
		display: block;
	}
	.bdpass-modal-item5.bdpass-modal-item5-registered_at {
		padding-left: 10px;
	}
}


/* ---------------------------------------------------
 * TOP
 * class:top～
 --------------------------------------------------- */
/* キャッチ */
.top-catch-bg {
 	background: url("../img/app/bg_top_img.png") no-repeat center top;
	background-image: url("../img/app/bg_top_mount.svg"),url("../img/app/bg_top_img.png");
	background-repeat: no-repeat;
	background-position: left bottom -1px,center top;
	background-size: 40%, cover;
	position: relative;
	min-height: 65vh;
}
.top-catch-read {
	min-height: 35vh;
}
/* キャッチコピー */
.top-catch-ttl {
	font-size: 2.8rem;
	line-height: 1.5;
	letter-spacing: .5rem;
	text-shadow: 1px 0 8px var(--indigo);
}
.top-catch-free {
	position: absolute;
	left: 50px;
	top: 50px;
}
.top-catch-entry {
 	max-width: 600px;
	min-height: 180px;
	position: relative;
}
.top-catch-imgbox {	/* きときと君 */
 	position: absolute;
	right: -15%;
	top: -1%;
	display: inline-block;
}
.top-catch-imgbox figcaption {
 	margin-top: -20px;
	margin-right: -30px;
}
.top-catch-balloon {
	animation: bound 2s ease infinite; 
}

@keyframes bound {
  0% {
    transform: translateY(0); }

  25% {
    transform: translateY(-10px); }

  50% {
    transform: translateY(0); }
	  75% {
    transform: translateY(-10px); }
  100% {
    transform: translateY(0); }
}

/* 新規入会申し込み誘導 */
.top-entry-bg {
 	border: 2px solid var(--orange);
	background-color: var(--yellow-lemon);
}

/*********************** ▼▼▼デバイス対応 1200px未満▼▼▼ ***********************/
@media screen and (max-width: 1199.98px) {
	/* キャッチコピー */
	.top-catch-ttl {
		font-size: 2.2rem;
	}
}

/*********************** ▼▼▼デバイス対応 992px未満▼▼▼ ***********************/
@media screen and (max-width: 991.98px) {
	/* キャッチコピー */
	.top-catch-ttl {
		font-size: 2rem;
	}
	/* キャッチ */
	.top-catch-bg {	
		min-height: auto;
	}
	.top-catch-read {
		min-height: auto;
	}
	.top-catch-entry {
		margin-top: 100px;
		width: auto;
	}
	.top-catch-imgbox {	/* きときと君 */
		position: relative;
		left: 0;
		top: 0;
		margin-top: -130px;
	}
	.top-catch-imgbox img {
		width: 140px;
		height: 140px;
	}
	.top-catch-imgbox figcaption {
 		color: var(--white);
	}
}

/*********************** ▼▼▼デバイス対応 768px未満▼▼▼ ***********************/
@media screen and (max-width: 767.98px) {
	/* キャッチコピー */
	.top-catch-ttl {
		font-size: 1.6rem;
		letter-spacing: .3rem;
	}
	/* キャッチ */
	.top-catch-bg {
		background-size: 60%, cover;
	}
	.top-catch-free {
		left: 20px;
		top: 20px;
	}
}

/*********************** ▼▼▼デバイス対応 576px未満▼▼▼ ***********************/
@media screen and (max-width: 575.98px) {
	/* キャッチコピー */
	.top-catch-ttl {
		font-size: 1.4rem;
	}
	/* キャッチ */
	.top-catch-bg {
		background-size: 80%, cover;
	}
	.top-catch-free {
		position: inherit;
		text-align: left;
	}
	.top-catch-entry {
		margin-top: 30px;
	}
}


 /* ---------------------------------------------------
 * お知らせ
 * class:news～
 --------------------------------------------------- */
.news-top-read-box {
	width: 100%;
	vertical-align: top;
}
.news-top-date {
	width: 120px;
}
.news-top-read {
	width: calc(100% - 160px); 
}
.news-top-read2 {
	width: 100%; 
}

.news-list-read {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.news-list-read a {
	color: var(--black);
}
.news-content img {	/* お知らせ詳細の本文の画像（WordPress の投稿）を本文の幅に収める。redmine #19549 */
	max-width: 100%;
	height: auto;
}

/*
 * もっと見る表示・非表示設定
 */
.newslist_morebox {	/* もっと見るボタンボックス */
	width: 100%;
	position: fixed;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	z-index: 2;
}
.newslist_content::before {	/* コンテンツをグラデーションで隠す擬似要素 */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 120px;
    transition: 1s;
    background: linear-gradient(
         to bottom,
         transparent 0%,rgba(255,255,255,0.7) 10%,
         #ffffff 100%
    );
}
.hide::before {
	display: none;
}
body.noscroll {	/* 画面縦幅固定 */
      position: fixed;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom:0px;
}


/*********************** ▼▼▼デバイス対応 768px未満▼▼▼ ***********************/
@media screen and (max-width: 767.98px) {
	.news-top-read {
	width: 100%;
	}
}
 


/* ▼▼▼これ以下必要なもののみ記述▼▼▼ */
/*
 * inputのフォントサイズをカスタマイズします。
 * クラス名の2桁が大きさです。
 * 例) *-15 → 1.5rem
 * 例) *-30 → 3.0rem
 */
.input-group-lg > input.form-control {
    font-size: 1.5rem;
}
.input-group-xlarge > input.form-control {
    font-size: 1.5rem;
}

.input-group-xxlarge > input.form-control {
    font-size: 2.0rem;
}

.input-group-xxxlarge > input.form-control {
    font-size: 2.5rem;
}

.input-group-xxxxlarge > input.form-control {
    font-size: 3.0rem;
}

.input-group-xxxxxlarge > input.form-control {
    font-size: 3.5rem;
}

/*
 * パスワード再設定の認証コードの認証中のポップアップ
 */
.popup-window {
    display: none;
    position: absolute;
    background:rgba(0,128,0,0.3);
    width: 85%;
    height: 500px;
    top: 100px;
    margin: 13px;
}

/*
 * パスワード再設定の認証コードの認証中のポップアップの認証中の文字列
 */
.popup-window > h1 {
    position: fixed;
    top: 50%;
    left: 47%;
    margin-left: -60px;
    margin-top: -40px;
}

/* Ajaxローディング用のCSS */
#overlay { 
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
    height:100%;
    animation: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: #ffffff72;
}
#overlay > .loading {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
}
#overlay > .loading > .spinner {
    width: 80px;
    height: 80px;
    border: 8px #ddd solid;
    border-top: 8px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
    100% { 
        transform: rotate(360deg); 
    }
}


/*********************** ▼▼▼デバイス対応 1200px未満▼▼▼ ***********************/
@media screen and (max-width: 1199.98px) {
}

/*********************** ▼▼▼デバイス対応 992px未満▼▼▼ ***********************/
@media screen and (max-width: 991.98px) {
}

/*********************** ▼▼▼デバイス対応 768px未満▼▼▼ ***********************/
@media screen and (max-width: 767.98px) {
}

/*********************** ▼▼▼デバイス対応 576px未満▼▼▼ ***********************/
@media screen and (max-width: 575.98px) {
}

/* カーソルをポインターにする場合に使用 */
.cursor-pointer {
    cursor: pointer;
    user-select: none;
}