@charset "UTF-8";

.container--extend {
	padding-right: 20px;
	padding-left: 20px;
	position: relative;
}

.container--extend2 {
	padding-right: 0;
	padding-left: 0;
	position: relative;
}

.container--extend2 .topHeadArea {
	margin-left: 20px;
	margin-right: 20px;
}

.btn--extend {
	border-radius: 100px;
	font-size: var(--font-size-main);
	margin-top: 15px;
	padding: 6px 20px;
}

/* button-primary */
.btn-primary.btn--extend,
.btn-primary.btn--extend:active {
	background: #000;
	border-color: #000;
}

.btn-primary.btn--extend.disabled,
.btn-primary.btn--extend:disabled {
	background: #999;
	border-color: #999;
	opacity: 1;
}

/* button-secondary */
.btn-secondary.btn--extend,
.btn-secondary.btn--extend:active {
	background: #ff3b30;
	border-color: #ff3b30;
}

.btn-secondary.btn--extend.disabled,
.btn-secondary.btn--extend:disabled {
	background: #ffb0ac;
	border-color: #ffb0ac;
	opacity: 1;
}

/* button-outline-primary */
.btn-outline-primary.btn--extend,
.btn-outline-primary.btn--extend:active {
	color: var(--text-color-primary);
	background: #fff;
	border-color: #000;
}

.btn-outline-primary.btn--extend.disabled,
.btn-outline-primary.btn--extend:disabled {
	background: #ddd;
	border-color: #ccc;
	color: #999;
	opacity: 1;
}

/* button-outline-secondary */
.btn-outline-secondary.btn--extend,
.btn-outline-secondary.btn--extend:active {
	color: #ff3b30;
	background: #fff;
	border-color: #ff3b30;
}

.btn-outline-secondary.btn--extend.disabled,
.btn-outline-secondary.btn--extend:disabled {
	border-color: #ffb0ac;
	color: #ffb0ac;
	opacity: 1; 
}

.vh-100--extend {
	height: auto !important;
	min-height: 100vh;
	min-height: 100dvh; /* 100vhではスマホ実機で問題あり */
}

/*
.form-control--extend.is-valid {
	background-image: none;
	padding-right: 12px;
}
*/

.nav--extend.nav-tabs {
	border-bottom: solid 1px #d6d6d6;
}

.nav--extend.nav-tabs .nav-link {
	text-align: center;
	border-radius: 0;
	font-size: var(--font-size-m);
}

.nav--extend.nav-tabs .nav-link {
	color: var(--text-color-secondary);
	border-width: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav--extend.nav-tabs .nav-link.active {
	color: var(--text-color-primary);
	background-color: transparent;
	border-width: 0 0 3px 0;
	border-image: linear-gradient(to right, #89f7fe, #66a6ff) 1;
}

.tab-content--extend {
	padding: 20px 20px 0 20px;
}

.tab-content--extend .areaTimeLine {
	padding-top: 0 !important;
}

.mordal-content--extend {
	width: 80%;
	min-width: 200px;
	max-width: 300px;
	border-radius: 14px;
}

.mordal-content--extend img {
	width: 160px;
	margin: 0 0 10px 0;
}

.mordal-content--extend .btn--extend {
	background: transparent;
	border: 0;
	color: #007aff;
	padding: 0 10px;
	border-radius: 0;
}

/*メッセージは1または2段落想定、2段落の場合は1段落目が文字サイズ通常*/
/*メッセージがうまく振り分けられるならそれぞれにクラスを指定する*/
/*
.mordal-content--extend .modal-body p:last-child {
	font-size: var(--font-size-ss);
}

.mordal-content--extend .modal-body p:nth-child(n + 2) {
	margin-top: 6px;
}
*/

.modal-backdrop.show {
	opacity: 0.6;
}

.card--extend {
	border-radius: 16px;
	background: #f2f2f2;
	border: 0;
	/* min-height: 96px; */
	color: var(--text-color-secondary);
	margin-bottom: 15px;
}

.card--extend .card-title {
	font-size: var(--font-size-main);
	font-weight: 700;
	color: var(--text-color-primary);
	margin-bottom: 0
}

.card--extend .card-text {
	font-size: var(--font-size-sss);
	margin: 8px 0;
}

.card--extend .card-text:last-child {
	margin: 8px 0 0 0;
}

.card--extend .cardDetail {
	border-top: solid 1px #d6d6d6;
	font-size: var(--font-size-sss);
	padding: 4px 0 0 0;
	margin: 8px 0 0 0;
}

.card--extend .cardDetail dt {
	font-weight: 400;
	white-space: nowrap;
	margin-right: 5px;
}

.card--extend .cardDetail dt::after {
	content: '：';
}

.card--extend .cardDetail dd {
	color: var(--text-color-primary);
}

.card--extend .mediaThumb {
	border-radius: 8px;
	margin-right: 10px;
}

.card--extend .cardFoot {
	margin-top: 15px;
}

.card--extend .cardFoot > * {
	display: flex;
	align-items: center;
}

.card--extend .cardFoot .commentCount {
	background: #fff;
	padding: 8px 16px;
	border-radius: 20px;
	width: fit-content;
	margin-left: 8px;
}

.card--extend .commentCount span {
	color: var(--text-color-primary);
}

.card--extend .contentThumb {
	border-radius: 16px;
}

.card-body--extend h1 {
	font-size: var(--font-size-main);
	color: var(--text-color-primary);
	font-weight: 700;
	margin: 10px 0 0 0;
}

.card--extend .card-text2 {
	font-size: var(--font-size-m);
	padding: 0;
	margin: 10px 0 0 0;
	color: var(--text-color-primary);
}

.card--extend .card-textEvent,
.textEvent {
	font-size: var(--font-size-ss);
	padding: 0;
	margin: 10px 0 0 0;
	color: var(--text-color-primary);
}

.card--extend .card-textEvent span:first-child,
.textEvent span:first-child {
	font-weight: 700;
}

.card-body--extend {
	padding: 8px;
}

.card-body--extend .substance {
	padding: 30px 5px 5px 5px;
}

.areaCareer .card-body--extend {
	padding: 18px;
}

.select-pulldown--extend {
	border-radius: 20px;
	border: solid 1px #000;
	font-size: var(--font-size-m);
	color: var(--text-color-primary);
}

.modal-dialog--extend .modal-content {
	border-radius: 14px;
}

.modal-dialog--extend .container {
	/* min-height: calc(100vh - 80px); */
}

.row-extend>* {
	margin-top: 0;
	margin-bottom: 4px;
}

/* input-month,input-date,input-timeの幅調整 */
.input-month.w-100,
.input-date.w-100,
.input-time.w-100 {
	width: 100% !important;
}

/* フォーム部品調整 */
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
	box-shadow: none !important;
}

.form-check-input.is-valid {
	border-color: var(--bs-border-color);
}

/* checkbox変更 */
.form-check-input {
	width: 18px;
	height: 18px;
	border-color: #aaa
}

.form-check-input:disabled {
	opacity: 0.3;
}

/* textarea */
.textarea-ex {
	white-space: break-spaces;
}