/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
コア機能
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body {
font-family: "Helvetica Neue", "Segoe UI", Arial,
"Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Noto Sans JP", sans-serif;
}
/*#####################################
【バグ対処】プロフィールページの最大幅を通常の幅に統一
#######################################*/
.qa-template-user .qa-body-wrapper {
margin: 2rem 3rem 0 3rem;
}
/*#####################################
アニメーション無効
#######################################*/
.leftPanel .qa-nav-main-item,
.leftPanel .qa-nav-main-item-opp{
animation: none;
opacity:1;
}
/*#####################################
「質問する」テキスト装飾
#######################################*/
.qa-nav-main-item{
border-radius: 0 !important;
}
.qa-nav-main-ask{
background-color: #5aad6d;
}
.qa-nav-main-ask{
color: #fff;
}
.qa-nav-main-ask .qa-svg path {
fill: #fff;
}
.qa-nav-main-ask.qa-nav-main-selected:after {
background-color:#fff;
}
.qa-nav-main-ask .main-nav-text{
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
サイドバー
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*#####################################
Activity Count
#######################################*/
.qa-activity-widget h2{
color: currentColor !important;
font-weight: 400 !important;
font-size: 0.9em !important;
}
.qa-activity-count {
border-radius: 0 !important;
background: none;
color: currentColor;
}
/* 中央のボーダー */
.qa-activity-count-item {
border: 1px solid rgba(0, 0, 0, 0.20);
border-top: none;
border-left: none;
}
.qa-activity-count-item:nth-child(2) {
border-right: none;
}
.qa-activity-count-item:nth-child(3) {
border-bottom: none;
}
.qa-activity-count-item:nth-child(4) {
border-left: none;
border-bottom: none;
border-right: none;
}
.qa-activity-count,
.qa-activity-count p,
.qa-activity-count span{
text-align: center;
color: currentColor;
}
.qa-activity-count .qa-activity-count-data{
font-weight: 800;
}
.qa-widget-side.qa-widget-side-top.qa-activity-widget {
padding: 4px 0;
}
/*#####################################
サイドバーのコンテンツの枠（関連する質問）
#######################################*/
.qa-widget-side.qa-widget-side-top{
border-radius: 0 !important;
}
/*#####################################
サイドバーのコンテンツの枠（関連する質問）
#######################################*/
.qa-widget-side.qa-feed{
border-radius: 0 !important;
}
/*#####################################
カテゴリ一覧
#######################################*/
/* 共通スタイル */
.qa-nav-cat-list {
font-size: 0.85em;
}
.qa-nav-cat-list .qa-nav-cat-link::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 6px;
vertical-align: middle;
background-color: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
/* お気に入りに登録しているカテゴリー */
.qa-nav-cat-list .qa-nav-cat-favorited {
/*
margin-left: -18px;
*/
margin-left: 0;
}
.qa-nav-cat-link {
color: currentColor !important;
}
.qa-nav-cat-link::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
color: inherit !important;
vertical-align: middle;
background-color: currentColor;
color: inherit;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
/* 通常：閉じたフォルダ */
.qa-nav-cat-list .qa-nav-cat-link::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8.5 8C6.03 8 4 10.03 4 12.5V35.5C4 37.97 6.03 40 8.5 40h31c2.47 0 4.5-2.03 4.5-4.5v-18c0-2.47-2.03-4.5-4.5-4.5H24.04l-4.47-3.72c-0.99-0.82-2.23-1.28-3.52-1.28H8.5zm0 3H16.05c0.59 0 1.15 0.21 1.6 0.58l3.5 2.92-3.5 2.92c-0.45 0.37-1.01 0.58-1.6 0.58H7v-5.5c0-0.85 0.65-1.5 1.5-1.5zM24.04 16H39.5c0.85 0 1.5 0.65 1.5 1.5v18c0 0.85-0.65 1.5-1.5 1.5h-31c-0.85 0-1.5-0.65-1.5-1.5V21h9.05c1.29 0 2.53-0.45 3.52-1.28L24.04 16z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8.5 8C6.03 8 4 10.03 4 12.5V35.5C4 37.97 6.03 40 8.5 40h31c2.47 0 4.5-2.03 4.5-4.5v-18c0-2.47-2.03-4.5-4.5-4.5H24.04l-4.47-3.72c-0.99-0.82-2.23-1.28-3.52-1.28H8.5zm0 3H16.05c0.59 0 1.15 0.21 1.6 0.58l3.5 2.92-3.5 2.92c-0.45 0.37-1.01 0.58-1.6 0.58H7v-5.5c0-0.85 0.65-1.5 1.5-1.5zM24.04 16H39.5c0.85 0 1.5 0.65 1.5 1.5v18c0 0.85-0.65 1.5-1.5 1.5h-31c-0.85 0-1.5-0.65-1.5-1.5V21h9.05c1.29 0 2.53-0.45 3.52-1.28L24.04 16z' fill='black'/%3E%3C/svg%3E");
}
/* 選択中カテゴリ：開いたフォルダ */
.qa-nav-cat-list > .qa-nav-cat-selected > .qa-nav-cat-link::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8.5 8C6.03 8 4 10.03 4 12.5v23.91h.02c-.03 1.87 1.49 3.59 3.48 3.59H36.55c1.87 0 3.56-1.17 4.21-2.92l5.01-13.33c0-.01 0-.02.01-.03.86-2.25-.86-4.75-3.27-4.75H42v-1.5c0-2.47-2.03-4.5-4.5-4.5H24.04l-4.47-3.72c-.99-.82-2.24-1.28-3.52-1.28H8.5zm0 3h7.55c.59 0 1.15.21 1.6.58l4.89 4.07c.28.23.69.35 1.06.35H37.5c.85 0 1.5.65 1.5 1.5V19H13.45c-1.87 0-3.56 1.17-4.21 2.92L7 27.88V12.5c0-.85.65-1.5 1.5-1.5zM13.45 22H42.5c.4 0 .61.31.47.68l-5.01 13.35a1.52 1.52 0 01-1.41.97H7.5c-.4 0-.61-.31-.47-.67l5.01-13.35c.22-.59.77-.98 1.41-.98z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8.5 8C6.03 8 4 10.03 4 12.5v23.91h.02c-.03 1.87 1.49 3.59 3.48 3.59H36.55c1.87 0 3.56-1.17 4.21-2.92l5.01-13.33c0-.01 0-.02.01-.03.86-2.25-.86-4.75-3.27-4.75H42v-1.5c0-2.47-2.03-4.5-4.5-4.5H24.04l-4.47-3.72c-.99-.82-2.24-1.28-3.52-1.28H8.5zm0 3h7.55c.59 0 1.15.21 1.6.58l4.89 4.07c.28.23.69.35 1.06.35H37.5c.85 0 1.5.65 1.5 1.5V19H13.45c-1.87 0-3.56 1.17-4.21 2.92L7 27.88V12.5c0-.85.65-1.5 1.5-1.5zM13.45 22H42.5c.4 0 .61.31.47.68l-5.01 13.35a1.52 1.52 0 01-1.41.97H7.5c-.4 0-.61-.31-.47-.67l5.01-13.35c.22-.59.77-.98 1.41-.98z' fill='black'/%3E%3C/svg%3E");
}
/*#####################################
カテゴリページの各カテゴリ位置調整
#######################################*/
.qa-browse-cat-list-1{
padding: 5px
}
.qa-browse-cat-list-2 li{
padding-left: 1.5em;
}
/*#####################################
一覧内のカテゴリタグの文字サイズ
#######################################*/
.qa-category-link,
a.qa-category-link,
.qa-tag-link,
a.qa-tag-link{
font-size: .65rem;
padding: 4px 9px;
text-overflow: ellipsis;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
}
/*#####################################
質問、回答内の折りたたみを解除して全文表示
#######################################*/
.qa-post-clamp,
.qa-post-content.expandable {
display: block !important;
max-height: none !important;
overflow: visible !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
}
/* 折りたたみリンク非表示 */
.expandpost,
.showmore-anchor {
display: none !important;
}
/* 下部のフェードを解除 */
.qa-post-clamp::after,
.qa-post-content.expandable::after {
content: none !important;
display: none !important;
background: none !important;
mask-image: none !important;
}
.qa-post-content.expandable {
opacity: 1 !important;
filter: none !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
質問ページ
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*#####################################
質問、回答内コンテンツの上下のマージン
#######################################*/
.qa-post-content{
margin-bottom: 3em;
}
/*#####################################
質問、回答内コンテンツの行間
#######################################*/
.qa-post-content{
line-height: 2em;
}
/*#####################################
質問、回答内コンテンツの改行強制
#######################################*/
.qa-post-content span{
white-space: pre-wrap !important;
}
/*#####################################
画像 が見つからない場合に高さを確保
#######################################*/
.qa-post-content img.error {
display: block;
}
/*#####################################
画像 Border
#######################################*/
.qa-form-tall-error{
margin-top: 0.3em;
margin-bottom: 0.3em;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
投稿＆投稿フォーム共通
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*#####################################
質問、回答内エディタ内の文字
#######################################*/
.cke_editable{
font-size: 0.9em;
line-height: 1.8em;
}
/*#####################################
「質問する」ページのカテゴリ選択 Selectbox の高さ幅
#######################################*/
select.qa-form-tall-select {
width: 38%;
height: 3em;
box-sizing: border-box;
}
/*#####################################
画像 Border
#######################################*/
.cke_editable img,
.qa-post-content img{
margin: 10px 3px;
padding: 3px;
border:1px solid #cccccc
}
/*#####################################
リンクアイコン
#######################################*/
.cke_editable p a:not(:has(img)):not(:empty):not([href$=".svg"])::after,
.qa-post-content p a:not(:has(img)):not(:empty):not([href$=".svg"])::after {
content: '';
display: inline-block;
width: 1.1em;
height: 1.1em;
margin-top: -0.3em;
margin-left: 0.3em;
vertical-align: middle;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/*#####################################
引用
#######################################*/
.cke_editable blockquote,
.qa-post-content blockquote {
border-left: none;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 3em 1em;
position: relative;
}
.cke_editable blockquote::before,
.qa-post-content blockquote::before {
content: "❝";
font-size: 500%;
line-height: 1em;
color: rgba(0, 0, 0, 0.3);;
position: absolute;
left: 5px;
top: 0;
}
.cke_editable blockquote::after,
.qa-post-content blockquote::after {
content: "❞";
font-size: 500%;
line-height: 0em;
color: rgba(0, 0, 0, 0.3);;
position: absolute;
right: 5px;
bottom: 10px;
}
/*#####################################
LIST
#######################################*/
.cke_editable ul,
.cke_editable ol,
.qa-post-content ul,
.qa-post-content ol{
margin-top: 1.4em;
margin-bottom: 1.4em;
padding-left : 0;
margin-left: 0.6em;
}
.cke_editable ul li,
.cke_editable ol li,
.qa-post-content ul li,
.qa-post-content ol li{
margin-left: 1em;
margin-top: 0.2em;
margin-bottom: 0.2em;
padding-left: 0.4em;
}
/* UL 専用 */
.cke_editable ul,
.qa-post-content ul{
list-style: none;
}
.cke_editable ul > li,
.qa-post-content ul > li{
position: relative;
padding-left: 24px;
}
.cke_editable ul > li::before,
.qa-post-content ul > li::before{
content: '';
display: inline-block;
position: absolute;
top: 0.8em;
left: 0;
width: 6px;
height: 6px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 3px;
}
/* OL 専用 */
.cke_editable ol,
.qa-post-content ol{
margin-left: 0.4em;
list-style-type: none;
counter-reset: number;
}
.cke_editable ol > li,
.qa-post-content ol > li{
position: relative;
padding-left: 2.4em;
}
.cke_editable ol > li::before,
.qa-post-content ol > li::before{
counter-increment: number;
content: counter(number);
position: absolute;
top: 0.5em;
left: 0;
width: 18px;
height: 18px;
border: solid 1px rgba(0, 0, 0, 0.2);
border-radius: 50%;
font-size: 0.8em;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
/*#####################################
見出し（h1 h2 h3 h4 h5 h6）
#######################################*/
.cke_editable h1,
.cke_editable h2,
.cke_editable h3,
.cke_editable h4,
.cke_editable h5,
.cke_editable h6,
.qa-post-content h1,
.qa-post-content h2,
.qa-post-content h3,
.qa-post-content h4,
.qa-post-content h5,
.qa-post-content h6 {
border-left: solid 0.3em currentColor;
padding: 0 0 0 0.6em;
position: relative;
margin-top: 2em;
}
/* 最初の H は margin-top:0: */
.cke_editable h1:first-of-type,
.cke_editable h2:first-of-type,
.cke_editable h3:first-of-type,
.cke_editable h4:first-of-type,
.cke_editable h5:first-of-type,
.cke_editable h6:first-of-type,
.qa-post-content h1:first-of-type,
.qa-post-content h2:first-of-type,
.qa-post-content h3:first-of-type,
.qa-post-content h4:first-of-type,
.qa-post-content h5:first-of-type,
.qa-post-content h6:first-of-type {
margin-top: 0;
}
/*#####################################
テーブルデザイン
#######################################*/
.cke_editable table,
.qa-post-content table {
width: 100%;
border-collapse: collapse;
}
.cke_editable table th,
.cke_editable table td,
.qa-post-content table th,
.qa-post-content table td{
border: solid 1px;
}
.cke_editable table caption,
.qa-post-content table caption {
line-height: 1.2em;
margin: 4px auto;
padding-bottom: 0;
text-align: left;
}
.cke_editable table caption::before,
.qa-post-content table caption::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
margin-right: 1em;
margin-bottom: 0.6em;
vertical-align: middle;
background-color: currentColor;
box-shadow:
8px 0 currentColor, /* 右：7px + 1px */
0 8px currentColor, /* 下：7px + 1px */
8px 8px currentColor; /* 右下 */
}
.cke_editable thead th,
.qa-post-content thead th {
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
vertical-align: middle;
padding: 5px;
}
.cke_editable tbody th[scope="row"],
.qa-post-content tbody th[scope="row"] {
background-color: rgba(0, 0, 0, 0.1);
color: inherit;
text-align: center;
vertical-align: middle;
padding: 5px;
}
/* 偶数行の背景色 */
.cke_editable tbody tr:nth-child(even),
.qa-post-content tbody tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.05);
}
/* ホバー時の行背景（上書きされる） */
.cke_editable tbody tr:hover,
.qa-post-content tbody tr:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.cke_editable thead th:last-child,
.qa-post-content thead th:last-child {
}
.cke_editable tbody td,
.qa-post-content tbody td {
padding: 5px;
vertical-align: middle;
}
/*#####################################
コード用ベーススタイル
#######################################*/
.cke_editable pre,
.qa-post-content pre {
padding: 3px;
border-radius: 6px;
overflow-x: auto;
}
.cke_editable pre code,
.qa-post-content pre code {
background-color: #4d4d4d;
color: #eeeeee;
}
.cke_editable pre code .code-line,
.qa-post-content pre code .code-line {
display: flex;
position: relative;
line-height: 1.7;
white-space: pre;
font-family: inherit;
font-size: inherit;
}
.cke_editable pre code .line-marker,
.qa-post-content pre code .line-marker {
display: inline-block;
width: 2em;
text-align: right;
padding-right: 0.5em;
color: #707070;
user-select: none;
flex-shrink: 0;
border-right: 1px solid #444444;
position: relative;
}
.cke_editable pre code .line-content,
.qa-post-content pre code .line-content {
display: inline-block;
padding-left: 0.75em;
width: 100%;
overflow-x: auto;
position: relative;
}
.cke_editable pre code .line-content::after,
.qa-post-content pre code .line-content::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
border-bottom: 1px dotted #686868;
opacity: 0.4;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
質問ページ
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.link-bn-wrap{
}
.link-bn{
width: 100%;
height: 5em;
display: block;
overflow: hidden;
margin: 3px 0;
position: relative;
}
.link-bn a{
display: block;
width: 100%;
height: 100%;
background-color: #e6e6e6;
border: 1px solid #333333;
color: #333333;
}
.link-bn a:hover{
filter: alpha(opacity=75);
opacity: 0.75;
}
.link-bn .bn-text-wrap{
display: block;
padding: 8px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.link-bn span{
width: 100%;
display: block;
text-align: center;
white-space: nowrap;
overflow: hidden;
line-height: 1.5em;
}
.link-bn span.bn-title{
font-size: 1.2em;
font-weight: 600;
}
.link-bn span.bn-desc{
font-size: 0.85em;
text-overflow: ellipsis;
font-weight: 400;
}
.link-bn span.bn-url{
font-size: 0.75em;
text-overflow: ellipsis;
font-weight: 300;
}