@charset "UTF-8";

/*
.userTop
スプラッシュ
*/

.userTop {
	/* background: #eeeeee; */
	/* color: var(--text-color-tertiary); */
	padding: 0 40px;
}

.userTop a {
	color: initial;
	text-decoration: initial;
}

.userTop h1 {
	font-size: 2.5rem;
	padding-top: 50vh;
	margin-bottom: 30px;
	color: var(--text-color-tertiary);
}

.userTop p {
	font-size: var(--font-size-m);
	color: var(--text-color-tertiary);
}

/*
.userLogin
ログイン
*/
.userLogin h1 {
	font-size: 2.5rem;
	padding-top: 85px;
	margin-bottom: 35px;
	color: var(--text-color-tertiary);
}

/*
テンプレート用
*/
.template {
	display: none !important; /* 完全に非表示にして領域も確保しない */
    visibility: hidden;       /* 追加で視覚的な影響を完全に排除 */
    position: absolute;       /* レイアウトフローから外す */
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
}

/* TODO:以下はページ特有のスタイルでないため、当CSSから移動する */

.areaMessage {
	font-size: var(--font-size-main);
	min-height: 60px;
	text-align: center;
	margin-top: 24px;
	white-space: pre-wrap !important;
}

.boxAgreement {
	margin-bottom: 25px;
	font-size: var(--font-size-ss);
}

.boxAgreement .boxTitle {
	font-size: var(--font-size-main);
	font-weight: 700;
	margin-bottom: 4px;
}

.boxAgreement > div {
	border-radius: 20px;
	background: #f2f2f2;
	padding: 16px 8px;
}

.boxAgreement .overflow-auto {
	height: 160px;
	background: #f2f2f2;
}

.boxAgreement .areaKiyaku,
.boxAgreement .areaPrivacyPolicy {
	min-height: 170px;
}

/* 規約・プライバシーポリシーは新規登録画面と個別画面でスタイル共有（em指定） */
.areaKiyaku h1,
.areaPrivacyPolicy h1 {
	font-size: 1.15em;
	font-weight: 700;
	margin-bottom: 0;
	margin-top: 0.8em;
	white-space: pre-wrap !important;
}

.areaKiyaku h2,
.areaPrivacyPolicy h2 {
	font-size: 1.1em;
	font-weight: 700;
	margin-bottom: 0;
	margin-top: 0.7em;
	white-space: pre-wrap !important;
}

.areaKiyaku h3,
.areaPrivacyPolicy h3 {
	font-size: 1.05em;
	font-weight: 700;
	margin-bottom: 0;
	margin-top: 0.6em;
	white-space: pre-wrap !important;
}

.areaKiyaku h4,
.areaPrivacyPolicy h4 {
	font-size: 1em;
	font-weight: 700;
	margin-bottom: 0;
	margin-top: 0.5em;
	white-space: pre-wrap !important;
}

.areaKiyaku p,
.areaPrivacyPolicy p {
	font-size: 1em;
	font-weight: 400;
	margin-bottom: 0;
	margin-top: 0.5em;
	white-space: pre-wrap !important;
}

.areaKiyaku :first-child,
.areaPrivacyPolicy :first-child {
	margin-top: 0;
}

/* ラベルとフォームコントロールが対に存在するエリア */
.areaLabelForm label {
	font-size: var(--font-size-m);
	color: var(--text-color-secondary);
	margin-bottom: 4px;
}

.areaLabelForm .form-check-input + label { /* フォームのlabelは除外 */
    color: var(--text-color-primary);
    font-size: var(--font-size-m);
}

.areaLabelForm p.outputTxt {
	font-size: var(--font-size-main);
	border-bottom: solid 1px #dddddd;
}

.areaLabelForm div.inputTxt {
	margin-top: 0.2rem;
	margin-bottom: 1rem;
}

.areaLabelForm .message {
	font-size: var(--font-size-m);
}

.areaInfo {
	font-size: var(--font-size-m);
	text-align: center;
}

.areaInfo img {
	width: 240px;
	margin-bottom: 20px;
}

.majorHeading {
	font-size: 2rem;
	margin-bottom:20px;
}

.areaMyphoto {
	margin-bottom: 15px;
	text-align: center;
}

.areaMyphoto img,
.areaMyphoto .noImage {
	width: 100px;
	height: 100px;
	border: solid 2px #fff;
	border-radius: 50%;
	box-shadow: 0px 0px 20px 2px #00000033;
}

.areaMyphoto img {
	background: #eee;
}

.areaMyphoto .noImage {
	background: url('../../portal/img/noimage.jpg');
	font-size: 3rem;
	line-height: 5.5rem;
	color: var(--text-color-secondary);
}

.areaFollower {
	font-size: var(--font-size-ss);
	text-align: center;
	margin: 0;
}

.areaFollower .followerIcon img {
	margin-left: -8px;
	background: #eee;
	border-radius: 50%;
	border: solid 2px #fff;
	box-sizing: border-box;
	height: 24px;
	width: 24px;
}

.areaFollower .followerIcon img:first-child {
	margin-left: 0;
}

.introduction {
	font-size: var(--font-size-s);
	margin: 12px 20px 0 20px;
}

.myphotoPreview {
	max-width: 300px;
}

.myphotoPreview img {
	width: 100%;
	border: solid 2px #f2f2f2;
	border-radius: 50%;
}

.areaMyphotoEdit {
	width: 146px;
	margin-left: auto;
	margin-right: auto;
}

.areaMyphotoEdit img {
	width: 100%;
	border: solid 2px #fff;
	border-radius: 73px;
	box-shadow: 0px 0px 20px 2px #00000033;
	background: #eee;
}

.areaMyphotoEdit .editAlt {
	position: absolute;
	top: 0;
	right: 0;
}

.userInfo, .reqInfo {
	min-height: 60px;
	border-bottom: solid 1px #d6d6d6;
}

.userInfo img, .reqInfo img {
	width: 32px;
	height: 32px;
	border: solid 2px #fff;
	border-radius: 50%;
	/*box-shadow: 0px 0px 20px 2px #00000033;*/
	background: #eee;
}

.userInfo .userName, .reqInfo .reqName {
	font-size: var(--font-size-m);
	font-weight: 700;
}

.userInfo .btn, .reqInfo .btn {
	width: 96px;
	min-width: 96px;
	font-size: var(--font-size-m);
}

.userInfo svg, .reqInfo svg {
	flex-shrink: 0;
}

.userInfo .userUpdateDate, .reqInfo .reqUpdateDate {
	flex-shrink: 0;
	font-weight: 400;
	color: var(--text-color-secondary);
	font-size: var(--font-size-sss);
}

.areaCareer:nth-child(n + 2) {
	margin-top: 20px;
}

.areaCareer h1 {
	font-size: 1.15rem;
	margin-bottom: 0;
}

.areaTimeLine {
	padding-top: 20px;
}

.settingsList h1 {
	font-size: var(--font-size-m);
	font-weight: 400;
	color: var(--text-color-secondary);
}

.settingsList dt {
	font-weight: 400;
}

.settingsList ul,
.settingsList dl,
.cmnCtgrList ul,
.areaFaq {
	margin: 0;
	padding: 0;
	border-top: solid 1px #ddd;
}

.settingsList li,
.settingsList dl > div,
.cmnCtgrList li,
.areaFaq .faqTitle {
	padding: 18px 0;
	border-bottom: solid 1px #ddd;
}

.settingsList,
.cmnCtgrList {
	margin-bottom: 0;
}

.settingsList dl dl {
	border: 0;
}

.settingsList dl dl div {
	border: 0;
	padding: 8px 0;
}

.settingsList small {
	font-size: var(--font-size-ss);
	color: var(--text-color-secondary);
}

.areaFaq .faqDetail {
	background: rgba(204, 204, 204, 0.4);
	padding: 8px;
	border-bottom: solid 1px #ddd;
}

.areaFaq .faqDetail .subTitle,
.areaFaq .faqDetail .content,
.areaFaq .faqDetail .picture {
	margin: 8px 0 0 0;
}

.areaFaq .faqDetail .subTitle {
	font-weight: 700;
}

.areaFaq .faqDetail .content {
	font-size: var(--font-size-m);
}

.areaFaq .faqDetail :nth-child(1) {
	margin: 0 !important;
}

.areaFaq .faqDetail .picture {
	max-width: 100%;
}

.univName {
	font-size: var(--font-size-main);
	text-align: center;
}

.areaSettingMyphoto {
	font-size: var(--font-size-main);
	margin: 50px 0;
}

.areaSettingMyphoto img {
	width: 160px;
	height: 160px;
	border: solid 2px #fff;
	border-radius: 50%;
	box-shadow: 0px 0px 20px 2px #00000033;
	background: #eee;
}

.reactionList {
	/* border-top: solid 1px #d6d6d6; */
}

.userCmnt .userCmntInfo {
	padding-right: 40px;
}

.userCmnt .userCmntReplyInfo {
	font-size: var(--font-size-m);
}

.positionDots {
	position: absolute;
	/* top: 10px; */
	right: 0;
}

.replyOffset {
	padding-left: 20px;
}

.userReplyCmnt {
	border-top: solid 1px #d6d6d6;
}

.cmntTextarea {
	height: 1.5rem;
	max-height: 40svh;
}

.passwordEyeAjst {
	top: auto;
	bottom: 5px;
	right: 5px;
}

/* 画像挿入エリア */
.areaInsertPic {
	min-height: 70px;
}

.areaBtnInsertPic {
	position: absolute;
	top: 5px;
	left: 5px;
}

/* プレビュー画像エリア */
.areaPrevPict {
	width:fit-content;
	height:fit-content;
}

.areaPrevPict .imageTrash {
	position: absolute;
	bottom: 40px;
	right: 15px;
}

.areaPrevPict .imageTrash::before {
	content: "";
	height: 36px;
	width: 36px;
	display: block;
	position: absolute;
	top: -6px;
	right: -6px;
	border-radius: 50%;
	background: rgba(255,255,255,0.4);
	/* filter: blur(6px); */
	z-index: 1;
}

.areaPrevPict .imageTrash .svg-icon-trash {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

/* タイムライン投稿 */
.areaPictMain {
	position: relative;
}

.areaPictMain .imageTrash {
	position: absolute;
	bottom: 15px;
	right: 15px;
}

.areaPictMain .contentThumb {
	width: 100%;
}

.areaPictMain .imageTrash {
	position: absolute;
	bottom: 15px;
	right: 15px;
	z-index: 1;
}

.areaPictMain .imageTrash::before {
	content: "";
	height: 36px;
	width: 36px;
	display: block;
	position: absolute;
	top: -4px;
	right: -6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	z-index: -1;
}

.areaPictSub .contentThumb {
	height: 100%;
}

.areaPictSub .areaPictSubBox {
	aspect-ratio: 1/1;
}

.areaPictSub .areaPictSubBox.pictOver4 {
	width: 30%;
}

.subPictSize {
	width: 100%;
	object-fit: cover;
	object-position: center;
}

.sortable-fallback {
	opacity: 0 !important
}

.areaMypSkrkGkrkList .svg-icon-up,
.areaMypSkrkGkrkList .svg-icon-down {
	width: 22px;
}

/* タイムライン投稿詳細ボタン背景 */
.existImg + .topBtnAreaFloat .coveredBtn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 50%;
}

.existImg + .topBtnAreaFloat .gapOverwrite {
	gap: .5rem !important;
}

/* コミュニティ投稿のフィルター */
.cmnPostFilter {
	filter: blur(3px);
}

/* コミュニティ投稿のフィルター時の上に表示するテキストにつける */
.cmnPostFilterText {
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: var(--font-size-sss);
	color: rgba(0, 0, 0, 0.9);
	background-color: #fff;
	border-radius: 4px;
	border: solid 2px #f2f2f2;
	text-align: center;
}

/* 経歴・学歴 縦線 */
.areaMypSkrkGkrkList.verticalLine::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
}

/* 問合せ情報（コンテナ） */
.areaChat .usrInqHeader {
	border-bottom: solid 1px #d6d6d6;
	padding-bottom: 10px;
}

/* 問合せ情報（カテゴリ名） */
.areaChat .usrInqHeader .inqCtgrKbnName {
	margin-bottom: 4px;
}

/* 問合せ情報（問合せ件名） */
.areaChat .usrInqHeader .inqTitle {
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}

/* 問合せ内容（コンテナ：質問） */
.areaChat .usrInqDetQuestion {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0 5px;
	margin-top: 15px;
}

/* 問合せ内容（コンテナ：回答） */
.areaChat .usrInqDetAnswer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0 5px;
	margin-top: 15px;
}

/* 問合せ内容（ユーザアイコン）*/
.areaChat .inqDetUsrIcon {
	align-self: flex-end;
}

/* 問合せ内容（内容登録日時） */
.areaChat .inqDetTime {
	align-self: flex-end;
}

/* 問合せ内容（内容） */
.areaChat .inqContent {
	word-wrap: break-word;
	padding: 5px 10px;
}

/* 問合せ内容（内容：質問）*/
.areaChat .usrInqDetQuestion .inqContent {
	background-color: #fff;
	border: 1px solid #999;
	border-radius: 10px 10px 0 10px;
	max-width: 75%;
}

/* 問合せ内容（内容：回答）*/
.areaChat .usrInqDetAnswer .inqContent {
	background-color: #d9d9d9;
	border: 1px solid #999;
	border-radius: 10px 10px 10px 0;
	max-width: 75%;
}

/* 問合せ内容（内容画像） */
.areaChat .inqPicture {
	width: 50%;
}

/* 問合せ内容（表示名：回答） */
.areaChat .usrInqDetAnswer .inqDetUsrName {
	flex-basis: 100%;
	margin-left: 40px;
}

/* 問合せ内容（OGPプレビューリスト） */
.areaChat .inqDetOgpInfoList {
	flex-basis: 70%;
}

/* 問合せ内容（OGPプレビューリスト：回答）*/
.areaChat .usrInqDetAnswer .inqDetOgpInfoList {
	margin-left: 40px;
}

.areaChat .usrInqDetAnswer .inqDetOgpInfoList .ogpPreview {
	background-color: #d9d9d9;
}

/* 問合せ内容（OGPプレビュー）*/
.areaChat .inqDetOgpInfoList .ogpPreview {
	flex-wrap: wrap; 
	border-radius: 10px;
}

.areaChat .inqDetOgpInfoList .ogpPreview .prevContent {
	width: 100%;
	height: auto; /* prevContentにprevImgまたはprevMovieがない場合は高さ0で表示する */
}

.areaChat .inqDetOgpInfoList .ogpPreview .prevContent.prevImg {
	border-radius: 10px 10px 0 0;
	height: 120px;
}

.areaChat .inqDetOgpInfoList .ogpPreview .prevContent.prevMovie iframe {
	border-radius: 10px 10px 0 0;
	height: 120px;
}

/* 大学登録情報連携 */
.procMsgArea {
	padding: 4px;
	background: rgba(255, 255, 255, 0.3);
}

.linkage {
	position: absolute;
	top: 0;
	right: 0;
}

.afterUpdateLabel {
	color: var(--text-color-secondary);
	font-size: var(--font-size-m);
	margin-right: 0.4rem;
}

/* タイムライン、画像なしの場合のユーザー情報表示 */
.postHeader .existNoImg {
	margin-left: 20px;
	margin-top: 60px;
	position: relative;
	top: 20px;
}

.div-status {
	width: fit-content;
	background: #000;
	color: var(--text-color-tertiary);
	padding: 8px 16px;
	border-radius: 100px;
	font-size: var(--font-size-m);
	text-align: center;
}

.postHeader .existNoImg .div-status {
	margin-bottom: 5px;
}

.postHeader .existImg .div-status {
	position: absolute;
	bottom: 25px;
	left: 20px;
}

.contentHead {
	font-size: var(--font-size-sss);
	color: var(--text-color-secondary);
}

.contentUpdate {
	font-size: 0.7rem;
}

/* タイムライン（質問・投票、アンケート） */
.imgVotOptPict, .imgQreQueOptPict {
	width: 54px;
	height: 54px;
	object-fit: cover;
}

.qreSts {
	scale: 0.75;
	padding: 8px 20px;
	border-radius: 100px;
}

.qreStsNotCreated {
	background: #fff;
	color: #222; 
}

.qreStsPostable {
	background: #393;
	color: #fff;
}

.qreStsPosted {
	background: #666;
	color: #000;
}

.areaQre .svg-icon-arrow-right path {
	fill: #fff;
}

.votOpt .form-check-input {
	border-radius: 50%;
}

.votOpt .invalid-feedback {
	margin-top: -4px;
}

.votView {
	font-size: var(--font-size-s);
	color: var(--text-color-primary);
	margin-top: 10px;
}

.votView .votItem {
	min-height: 40px;
}

.votView .votItem .votItemSelected {
	width: 24px;
}

.votView .votItem .votItemImg {
	width: 54px;
}

.votView .votItem .votItemImg img {
	width: 54px;
	height: 54px;
	object-fit: cover;
}

.votInfoArea .svg-icon-check path,
.votInfoArea .svg-icon-hourglass path {
	stroke: var(--text-color-secondary);
}

.votInfoArea .svg-icon-clock path {
	fill: var(--text-color-secondary);
}

.qreAnswerView {
	font-size: var(--font-size-s);
	color:var(--text-color-primary);
}

.qreAnswerView .qreQueItem .qreQueItemImg {
	width: 54px;
}

.qreAnswerView .qreQueItem .qreQueItemImg img {
	width: 54px;
	height: 54px;
	object-fit: cover;
}

.qreQueContainer .qreQue {
	border-left: 4px solid #ccc;
}

.qreQueContainer.dragging .qreQue {
	border: 4px dashed #ccc;
}

.qreQueContainer.dragging .qreQue.drag-item {
	border: 4px dashed #999;
}

.queView {
	font-size: var(--font-size-s);
	color: var(--text-color-primary);
}

/* アンケート・質問投票 回答期間終了まで3日以内 */
.div-status.voteStatusSoon {
	background: #c33;
}

/* イベント 開催中 */
/* アンケート・質問投票 回答期間中 */
.div-status[data-event-status='0'],
.div-status.voteStatusYet {
	background: #000;
}

/* イベント 開催前、終了 */
/* アンケート・質問投票 回答期間終了 */
.div-status[data-event-status='-1'],
.div-status[data-event-status='1'],
.div-status.voteStatusEnd {
	background: #999;
}

/* 大学登録情報変更 変更後ラベル */
.afterUpdateLabel {
	min-width: 55px;
}

/* 報告対象コメント */
.highlight {
	position: relative;
}

.highlight::after {
	content: "";
	position: absolute;
	width: 35px;
	height: 35px;
	display: inline-block;
	background: url(../img/pointer.png) no-repeat;
	background-size: contain;
	vertical-align: middle;
	bottom: 40px;
	right: 5px;
	animation: highlightFade 1s ease-in-out infinite alternate;
}

/* コミュニティユーザーアイコン選択 */
.icon-card {
	border-radius: 50%;
	box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.3);
	border: solid 2px #fff;
}

.icon-card svg.svg-icon-image-alt {
	width: 120px;
	height: 120px;
}

.icon-card img.icon-img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
}

.icon-card.selected {
	border: solid 2px #ff0;
}

/* コミュニティ画像 */
.imgCmnPict {
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid #f2f2f2;
	background: linear-gradient(#eee, #bbb);
}

/* コミュニティ画像（詳細） */
.imgCmnPict.imgCmnPictMain {
	width: 72px;
	height: 72px;
}

/* コミュニティ画像（一覧） */
.imgCmnPict.imgCmnPictList {
	width: 48px;
	height: 48px;
	border: 0;
}

/* コミュニティ みんなに質問カード */
/* コミュニティ おすすめコミュニティ投稿カード（タイムライン一覧） */
.areaCmnPostForPickupQue .cmnPostView,
.recommendCmnPostForTml {
	background-color: #e2e2e2;
	border:1px solid #999;
}

.tagStyle.tagStyleQuestion {
	background: #a0522d;
	color: #fff;
}

.tagStyle.tagStyleRecommend {
	background: #333;
	color: #fff;
}

/* コミュニティコメントエリア */
.cmnPostCmntView {
	border-bottom: solid 1px #d6d6d6;
}

/* アンケート、質問・投票 画像なしエリア */
.noImageArea {
	width: 54px;
	height: 54px;
}

/* コミュニティアイコン */
.areaCmnIcon .editAlt {
	width: 32px;
	height: 32px;
	position: absolute;
	bottom: -10px;
	right: -15px;
}

/* 公式コミュニティアイコン */
.officialCmnIcon {
	position: relative;
	bottom: 2px;
}

.officialCmnIcon path {
	stroke: #a0522d;
}

@keyframes highlightFade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}