﻿.qa-card{background:#ffffff;-webkit-box-shadow:rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;box-shadow:rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;border-radius:.5rem;padding:1.5rem;margin-bottom:.75rem}
.qa-card:last-child{margin-bottom:0}
.qa-card__publisher{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;margin-bottom:14px;justify-content:space-between}
.qa-card__publisher-info{display:flex;flex:1;justify-content:space-between}
.qa-card__publisher-name{color:#272727;font-weight:700;font-size:16px;line-height:20px}
.qa-card__top{margin-bottom:.75rem}
.qa-card__user{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.qa-card__user-avatar{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden}
.qa-card__user-avatar > img{width:100%;height:100%;-o-object-position:center;object-position:center;-o-object-fit:cover;object-fit:cover}
.qa-card__question-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:.5rem}
.qa-card__question-user-avatar{margin-right:.75rem}
.qa-card__question-user-name{font-size:.875rem;font-weight:var(--font-weight-bold)}
.qa-card__time-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:.75rem;font-weight:var(--font-weight-regular);color:var(--color-sub-font)}
.qa-card__time-info-icon{display:block;margin-right:.5rem}
.qa-card__time-info-divider{margin:0 .375rem}
.qa-card__question-title{font-size:1rem;font-weight:var(--font-weight-bold);color:var(--color-font)}
.qa-card__question-title:hover{color:var(--color-primary)}
.qa-card__question-text{font-size:14px;line-height:22px;margin-top:14px}
.qa-card__meta-list,.qa-card__meta-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.qa-card__meta-list{-webkit-box-flex:1;-ms-flex:1;flex:1}
.qa-card__meta-list-left,.qa-card__meta-list-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.qa-card__meta-item{font-size:.875rem;color:var(--color-sub-font);margin-right:1.125rem}
.qa-card__meta-item-icon{margin-right:.375rem}
.qa-card__meta-item-edit{margin-left:auto}
.qa-card__meta-item:last-child{margin-right:0}
.qa-card__row-divider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding-top:1.125rem;padding-bottom:1rem}
.qa-card__row-divider-text{font-size:1rem;font-weight:var(--font-weight-semi-bold);color:var(--color-primary);padding-right:.4375rem}
.qa-card__row-divider-line{-webkit-box-flex:1;-ms-flex:1;flex:1;height:1px;background-color:#cccccc}
.qa-card__ans-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.qa-card__ans-user-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:.5rem}
.qa-card__ans-user-group .qa-card__user-avatar{border:2px solid #ffffff}
.qa-card__ans-user-group .qa-card__user-avatar + .qa-card__user-avatar{margin-left:-20px}
.qa-card__ans-user-number{display:block;font-weight:var(--font-weight-bold);font-size:.875rem}
.qa-card__ans-divider{width:1px;height:24px;background:#cccccc;margin:0 24px}
.qa-rank-board{background:#ffffff;-webkit-box-shadow:0 12px 24px -12px rgba(0,0,0,0.12);box-shadow:0 12px 24px -12px rgba(0,0,0,0.12);border-radius:.5rem}
.qa-rank-board__header-title{font-weight:var(--font-weight-bold);font-size:1.5rem;margin-bottom:0;text-align:center;color:var(--color-primary)}
.qa-rank-board__header-title-wrapper{padding-top:1.5rem;padding-bottom:1.125rem;background:#f8efe9}
.qa-rank-board__header-tab{display:-webkit-box;display:-ms-flexbox;display:flex}
.qa-rank-board__header-tab-item{position:relative;width:33.3333333333%;font-weight:var(--font-weight-bold);font-size:1.125rem;text-align:center;color:var(--color-font);height:40px;line-height:40px;background:#eeeeee}
.qa-rank-board__header-tab-item:hover,.qa-rank-board__header-tab-item.active{color:#ffffff;background-color:var(--color-primary)}
.qa-rank-board__header-tab-item.active::before{position:absolute;content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border-width:6px;border-style:solid;border-color:var(--color-primary) transparent transparent}
.qa-rank-board__user-item{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 3.75rem;padding-top:.75rem;padding-bottom:.75rem;border-top:1px solid #eeeeee;border-bottom:1px solid #eeeeee}
.qa-rank-board__user-item:first-child{padding-top:1.5rem;border-top-style:hidden}
.qa-rank-board__user-item:last-child{padding-bottom:1.5rem;border-bottom-style:hidden}
.qa-rank-board__user-item-avatar{-webkit-box-flex:0;-ms-flex:none;flex:none;display:block;margin-right:.75rem;width:48px;height:48px;overflow:hidden}
.qa-rank-board__user-item-avatar > img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;border-radius:50%}
.qa-rank-board__user-item-info{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.qa-rank-board__user-item-info__name{font-size:.875rem;font-weight:var(--font-weight-bold);color:var(--color-font);margin-bottom:.5rem}
.qa-rank-board__user-item-info__name:hover,.qa-rank-board__user-item-info__name:focus{color:var(--color-primary)}
.qa-rank-board__user-item-info__subject{font-size:.75rem;font-weight:var(--font-weight-regular)}
.qa-rank-board__user-item-info__subject-item{margin-bottom:.125rem}
.qa-rank-board__user-item-info__subject-item:last-child{margin-bottom:0}
.qa-rank-board__user-item-info__subject-item > span:first-child{color:var(--color-primary);margin-right:.25rem}
.qa-rank-board__user-item-info__subject-item > span:last-child{color:var(--color-sub-font)}
.qa-page__main-right{margin-top:2.5rem}
@media (min-width: 992px) {
.qa-page__main-right{margin-top:0}
}
.qa-tab__nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid #cccccc}
@media (min-width: 576px) {
.qa-tab__nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
}
.qa-tab__nav-item{position:relative;padding-bottom:1.625rem;text-align:center}
@media (min-width: 576px) {
.qa-tab__nav-item{margin-right:2.5rem}
}
.qa-tab__nav-item.active > a{color:var(--color-primary)}
.qa-tab__nav-item.active .qa-tab__nav-item-checked-icon{display:block}
.qa-tab__nav-item > a{font-size:1.25rem;font-weight:var(--font-weight-bold);padding:.25rem .5rem;padding-bottom:1.625rem;color:var(--color-font);cursor:pointer}
.qa-tab__nav-item > a:hover{color:var(--color-primary)}
.qa-tab__nav-item:last-child{margin-right:0}
.qa-tab__nav-item-checked-icon{display:none;position:absolute;left:50%;bottom:0;margin-bottom:-8px;margin-left:-8px}
.qa-tab__bottom{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:40px 0}
.qa-tab__search-input-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;height:56px;padding:1.25rem 1.875rem;width:100%;max-width:792px;background:#ffffff;border-radius:.5rem;-webkit-box-shadow:0 12px 24px -12px rgba(0,0,0,0.12);box-shadow:0 12px 24px -12px rgba(0,0,0,0.12)}
.qa-tab__search-input-wrapper > input{width:100%;padding:0;border:none;outline:none;font-weight:var(--font-weight-regular);font-size:.875rem;color:var(--color-sub-font)}
.qa-tab__search-btn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:.25rem}
.qa-summary{margin-top:26px}
.qa-divider{margin-top:21px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.qa-divider__text{color:#f16101;font-weight:600;font-size:16px;line-height:24px}
.qa-divider__line{-webkit-box-flex:1;-ms-flex:1;flex:1;height:1px;background-color:#ccc;margin-left:7px}
.qa-top-answer{margin-top:0;display:-webkit-box;display:-ms-flexbox;display:flex;padding:24px 0}
@media only screen and (max-width: 414px) {
.qa-top-answer{display:block;padding:12px 0}
}
.qa-top-answer__profile{-webkit-box-flex:0;-ms-flex:0 0 96px;flex:0 0 96px;text-align:center}
.qa-top-answer__profile-avatar{display:flex;justify-content:center;border-radius:50%;height:4em;width:4em;margin:auto;overflow:hidden;align-items:center}
.qa-top-answer__profile-caption,.qa-top-answer__profile-caption h3{font-weight:700;font-size:14px;line-height:22px;margin-top:8px}
@media only screen and (max-width : 992px) {
.qa-top-answer__profile-avatar{margin:0;width:2.5em;height:2.5em}
}
@media only screen and (max-width: 414px) {
.qa-top-answer__profile{text-align:left}
.qa-top-answer__profile figure{display:-webkit-box;display:-ms-flexbox;display:flex}
.qa-top-answer__profile-caption{padding-left:10px;margin-top:0}
}
.qa-top-answer__item{color:#272727;font-size:14px;line-height:22px;position:relative;padding-left:14px}
.qa-top-answer__item::after{content:"";width:6px;height:6px;background-color:#272727;border-radius:99px;position:absolute;top:10px;left:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
.qa-top-answer__expand{margin-top:13px;float:right;}
.qa-top-answer__expand a{color:#f16101;font-size:14px;line-height:22px}
.qa-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:40px}
.qa-top-answer-teacher .form-group label{font-weight:600;font-size:16px;line-height:24px;margin-bottom:8px}
.qa-top-answer-teacher .form-control{height:48px;padding:13px 24px;border:1px solid #cccccc;border-radius:8px;color:#272727}
.qa-top-answer-teacher .form-control::-webkit-input-placeholder{color:#727272}
.qa-top-answer-teacher .form-control::-moz-placeholder{color:#727272}
.qa-top-answer-teacher .form-control:-ms-input-placeholder{color:#727272}
.qa-top-answer-teacher .form-control::-ms-input-placeholder{color:#727272}
.qa-top-answer-teacher .form-control::placeholder{color:#727272}
.qa-top-answer + .qa-top-answer{border-top:1px solid #ccc}
.qa-top-answer__summary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.qa-top-answer__summary .qa-summary{margin-top:0;margin-left:26px}
@media only screen and (max-width: 48em) {
.qa-top-answer__summary{display:block}
.qa-top-answer__summary .qa-summary{margin-top:20px;margin-left:0}
}
.qa-top-answer__content{-webkit-box-flex:1;-ms-flex:1;flex:1;padding-left:28px}
.qa-top-answer .qa-top-answer__content{padding-left:0}
.qa-top-answer .qa-top-answer__content .qa-top-answer__item{display:-webkit-box;display:-ms-flexbox;display:flex}
.qa-top-answer .qa-top-answer__content .qa-top-answer__item .sound{cursor:pointer;display:block;margin-top:-2px;margin-left:10px}
.qa-top-answer .qa-top-answer__content .qa-top-answer__item .sound img{height:auto;width:18px}
@media only screen and (max-width: 767px) {
.qa-top-answer__content{padding-left:0;margin-top:10px}
.qa-top-answer .qa-top-answer__content .qa-top-answer__item .sound img{height:auto;width:1.5em}
}
.qa-top-answer__answer{padding:6px}
.qa-top-answer__desc{color:#727272;font-size:14px;line-height:22px;margin-top:24px}
.qa-top-answer__translate{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:24px}
.qa-top-answer__translate .translate-title{font-weight:600;font-size:16px;line-height:24px;color:#272727}
.qa-top-answer__translate .translate-options{margin-left:8px}
.qa-top-answer__translate .translate-options .dropdown-filter__toggle{padding:0;font-size:12px;height:auto;line-height:1;min-height:24px;min-width:120px;padding:3px 8px;border:1px solid #cccccc;border-radius:4px}
.qa-top-answer__translate .translate-options .dropdown-filter__toggle::after{background-image:url(../images/icons/dropdown-icon.svg);background-size:100% 100%;right:10px;top:13px;width:8px;height:4px}
.qa-top-answer__translate .translate-options .dropdown-menu{min-width:120px}
.qa-top-answer__translate .translate-options .dropdown-item.dropdown-filter__item{font-size:12px}
.qa-top-answer__helpful{text-align:center;margin-top:24px}
.qa-top-answer__helpful button span + span{margin-left:5px}
@media only screen and (max-width: 48em) {
.qa-card__publisher{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;flex-wrap:wrap}
.qa-card__publisher-info{flex-wrap:wrap;margin-left:12px}
}
.qa-tab__content:not(.active){display:none}
.correction-tab__top_left .qa-tab__nav{justify-content:left!important}
.questions-and-answers__filter .custom-radio + .custom-radio{margin-left:68px}
.questions-and-answers__content{margin-top:40px}
.qa-card textarea{min-height:128px;}

/*renew html*/
.ranking-wapper .rank-number {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    width: 2em;
    text-align: center;
    font-weight: 700;
    border-radius: 50%;
}

.ranking-wapper {
    padding: 0 0 1.5rem 0 !important;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-top: 0;
    position: relative;
}

    .ranking-wapper .ranking-1 {
        background-color: #f7d85c
    }

    .ranking-wapper .ranking-2 {
        background-color: #dadada
    }

    .ranking-wapper .ranking-3 {
        background-color: #e6974c
    }

.custom-radio .custom-radio__check {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #727272;
}

    .custom-radio .custom-radio__check::before {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: transparent;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
.qa-rank-board .tab-pane.fade:not(.show) {opacity:0;display:none;}
/* Mũi tên hướng lên khi active */
.dropdown-toggle:not(.collapsed)::after {
    border-top: 0;
    border-bottom: .3em solid;
}
.btn-translate {cursor:pointer}
/* 非ログインの閲覧者へ出す、続きの案内 */
.qa-answer-teaser {
    border: 1px dashed #c9c9c9;
    border-radius: 8px;
    background: #fafafa;
}

/* ===== 2026-07-29 デザイン改修（設計 impl-qa-relaunch.md §4） ===== */

/* タブ: ピル型セグメント。従来の下線+チェックアイコンをやめ、選択中を塗りで示す */
.qa-tab__nav{border-bottom:none;background:#f4f4f5;border-radius:999px;padding:6px;display:inline-flex;gap:4px;margin:0 auto}
.qa-tab__top{display:flex;justify-content:center}
.qa-tab__nav-item{padding-bottom:0;margin-right:0!important}
.qa-tab__nav-item > a{display:inline-flex;align-items:center;font-size:1rem;padding:.55rem 1.25rem;padding-bottom:.55rem;border-radius:999px;color:var(--color-sub-font);white-space:nowrap}
.qa-tab__nav-item > a:hover{color:var(--color-primary);background:#ffffff}
.qa-tab__nav-item.active > a{color:var(--color-primary);background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,.10)}
.qa-tab__nav-item-checked-icon{display:none!important}
/* 「質問する」だけ塗りのボタンで分離 */
.qa-tab__nav-item--cta > a{background:var(--color-primary);color:#ffffff;font-weight:var(--font-weight-bold)}
.qa-tab__nav-item--cta > a:hover{background:var(--color-primary);color:#ffffff;opacity:.85}
.qa-tab__nav-item--cta.active > a{background:var(--color-primary);color:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.qa-tab__bottom{padding:24px 0}
@media (max-width: 767px){
  .qa-tab__nav{flex-wrap:wrap;justify-content:center;border-radius:16px}
  .qa-tab__search-input-wrapper{width:100%}
}

/* 非ログインのヒーロー帯 */
.qa-hero{background:linear-gradient(135deg,#fff7f0 0%,#fff 60%);border:1px solid #f4e3d6;border-radius:16px;margin-top:1.5rem;padding:2.25rem 1.5rem;text-align:center}
.qa-hero__title{font-size:1.6rem;font-weight:var(--font-weight-bold);color:var(--color-font);margin-bottom:.5rem}
.qa-hero__lead{color:var(--color-sub-font);max-width:640px;margin:0 auto 1.25rem}
.qa-hero__actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* 非ログインの右カラム案内 */
.qa-guest-panel{background:#ffffff;border:1px solid #ececec;border-radius:12px;padding:1.5rem;box-shadow:0 12px 24px -12px rgba(0,0,0,.08)}
.qa-guest-panel__title{font-size:1.05rem;font-weight:var(--font-weight-bold);margin-bottom:1rem}
.qa-guest-panel__list{list-style:none;padding:0;margin:0 0 1.25rem}
.qa-guest-panel__list li{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.75rem;color:var(--color-font);font-size:.9rem;line-height:1.5}
.qa-guest-panel__list li i{color:var(--color-primary);margin-top:.2rem}

/* 質問カード: タイトルを主役に、匿名IDは脇役に */
.qa-card__question-title{font-size:1.125rem;line-height:1.5}
.qa-anon-name{font-weight:var(--font-weight-regular);font-size:.8rem;color:#9a9a9a}
.qa-anon-name i{font-size:.9rem}

/* 並び替えセレクト */
.qa-sort-select{border-radius:8px;border:1px solid #ddd;padding:.4rem 2rem .4rem .75rem;font-size:.875rem;color:var(--color-font);background-color:#fff}

/* 自分の質問: フィルタ（すべて/未回答のみ） */
.qa-filter{display:flex;gap:8px;justify-content:center;margin-top:.5rem}
.qa-filter__item{padding:.35rem 1.1rem;border-radius:999px;border:1px solid #ddd;background:#fff;color:var(--color-sub-font);font-size:.875rem}
.qa-filter__item:hover{color:var(--color-primary);border-color:var(--color-primary)}
.qa-filter__item.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:var(--font-weight-bold)}

/* 質問フォーム: 回答がつきやすい質問のコツ */
.qa-guide{background:#fff9f2;border:1px solid #f4e3d6;border-radius:10px;padding:1rem 1.25rem}
.qa-guide__title{font-weight:var(--font-weight-bold);color:var(--color-font);margin-bottom:.5rem}
.qa-guide__title i{color:var(--color-primary)}
.qa-guide__list{margin:0;padding-left:1.25rem}
.qa-guide__list li{font-size:.85rem;color:var(--color-sub-font);line-height:1.7;margin-bottom:.25rem}
.qa-consent{background:#fff8f3;border:1px solid #f3d6c2;border-radius:.5rem}
.qa-consent__notice{font-size:.8125rem;line-height:1.7;color:var(--color-sub-font)}
.qa-consent .form-check-label{font-size:.875rem;font-weight:var(--font-weight-bold)}
.qa-scope{background:#f7f9fc;border:1px solid #dfe6ef;border-radius:.5rem;padding:1rem;margin-bottom:1rem}
.qa-scope__title{font-weight:var(--font-weight-bold);font-size:.9375rem;margin-bottom:.5rem}
.qa-scope__list{margin:0;padding-left:1.25rem}
.qa-scope__list li{font-size:.8125rem;line-height:1.8;color:var(--color-sub-font)}
.qa-answer-note{margin:.5rem 0 0;font-size:.75rem;color:var(--color-sub-font)}
.qa-answer-report{text-align:right;margin-top:.25rem}
.qa-answer-report .btn-report{background:none;border:none;padding:0;font-size:.75rem;color:var(--color-sub-font);cursor:pointer}
.qa-answer-report .btn-report:hover{text-decoration:underline}
.qa-report__lead{font-size:.8125rem;line-height:1.7;color:var(--color-sub-font)}
.qa-office-stats{border:1px solid #dfe6ef;border-radius:.5rem;padding:1rem;margin-bottom:1rem;background:#f7f9fc}
.qa-office-stats__title{font-weight:var(--font-weight-bold);font-size:.9375rem;margin-bottom:.5rem}
.qa-office-stats__row{display:flex;justify-content:space-between;font-size:.8125rem;padding:.25rem 0}
.qa-office-stats__label{color:var(--color-sub-font)}
.qa-office-stats__value{font-weight:var(--font-weight-bold)}
.qa-office-stats__denominator{font-weight:var(--font-weight-regular);color:var(--color-sub-font)}
.qa-office-stats__recent{margin-top:.75rem;border-top:1px solid #dfe6ef;padding-top:.75rem}
.qa-office-stats__recent-title{font-size:.8125rem;font-weight:var(--font-weight-bold);margin-bottom:.5rem}
.qa-office-stats__recent-item{margin-bottom:.5rem}
.qa-office-stats__recent-body{margin:.125rem 0 0;font-size:.75rem;color:var(--color-sub-font)}
