@charset "UTF-8";
@media screen and (max-width: 767px) {
  /*****************************************
   * 質問一覧
   *****************************************/
  .questions-header {
    padding: 0 20px;
  }
  .questions-header .titles {
    margin-bottom: 20px;
    padding: 0 0 10px;
    border-bottom: 1px solid #333333;
    background-image: url(/images/qa-header-bg.jpg);
    background-repeat: no-repeat;
    background-position: left center;
  }
  .questions-header .titles .title {
    font-size: 25px;
    line-height: 1;
  }
  .questions-header .titles .link {
    text-align: right;
  }
  .questions-header .titles .link a {
    display: inline-block;
    margin-top: 5px;
  }
  .questions-header .descriptions {
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
  }

  .questions-subheader {
    margin: 0 auto 20px;
    padding: 20px;
  }

  .questions-contents {
    padding: 0 20px;
  }
  .questions-contents .questions-content {
    margin-bottom: 10px;
  }
  .questions-contents .questions-content a {
    display: block;
  }
  .questions-contents .questions-content .data {
    padding: 10px;
    border: 1px solid #D59658;
    box-sizing: border-box;
  }
  .questions-contents .questions-content .data:hover {
    padding: 8px;
    border: 3px solid #D59658;
  }
  .questions-contents .questions-content .data .upper {
    padding-bottom: 3px;
    border-bottom: 1px solid #D4D4D4;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .questions-contents .questions-content .data .upper .sex-icon {
    margin-right: 20px;
  }
  .questions-contents .questions-content .data .upper .sex-icon img {
    width: 50px;
    height: auto;
  }
  .questions-contents .questions-content .data .upper .q-icon {
    margin-right: 10px;
  }
  .questions-contents .questions-content .data .upper .q-icon img {
    width: 30px;
    height: auto;
  }
  .questions-contents .questions-content .data .upper .title {
    font-size: 18px;
    line-height: 1.4;
  }
  .questions-contents .questions-content .data .lower {
    padding-top: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    color: #C56715;
  }
  .questions-contents .questions-content .data .lower .status-label {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    height: 20px;
    width: 50px;
    font-size: 10px;
    text-align: center;
    color: #FFFFFF;
    background-color: #C50003;
  }
  .questions-contents .questions-content .data .lower .status-label.closed {
    background-color: #1D35A7;
  }
  .questions-contents .questions-content .data .lower .priority-label {
    margin-right: 10px;
  }
  .questions-contents .questions-content .data .lower .priority-icon {
    margin-right: 20px;
  }
  .questions-contents .questions-content .data .lower .priority-icon img {
    width: 30px;
    height: auto;
  }
  .questions-contents .questions-content .data .lower .separator {
    margin-left: 10px;
    margin-right: 10px;
  }

  .questions-footer {
    margin: 0 auto 40px;
    padding-top: 20px;
  }

  .questions-pager-wrapper {
    margin-bottom: 20px;
    border-bottom: 1px dotted #9a9a9a;
  }
  .questions-pager-wrapper .links {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .questions-pager-wrapper .links .link {
    width: 100px;
  }
  .questions-pager-wrapper .links .link:not(:last-child) {
    margin-right: 32px;
  }
  .questions-pager-wrapper .questions-pager {
    margin: 0 auto;
    padding-bottom: 40px;
  }
  .questions-pager-wrapper .questions-pager .pages {
    text-align: center;
  }
  .questions-pager-wrapper .questions-pager .pager .current:before {
    content: '[';
  }
  .questions-pager-wrapper .questions-pager .pager .current:after {
    content: ']';
  }

  /*****************************************
   * 質問詳細
   *****************************************/
  .question-contents {
    padding: 0 20px;
  }
  .question-contents .closed {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    font-size: 18px;
    letter-spacing: 3px;
    color: #FFFFFF;
    background-color: #0F5CC4;
  }
  .question-contents .question .header .data .upper {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
  }
  .question-contents .question .header .data .upper .priority-icon img {
    width: 30px;
    height: auto;
  }
  .question-contents .question .header .data .upper .date {
    font-size: 14px;
    color: #FF7E00;
  }
  .question-contents .question .header .data .middle {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
  }
  .question-contents .question .header .data .middle .q-icon {
    margin-right: 20px;
  }
  .question-contents .question .header .data .middle .q-icon img {
    width: 50px;
    height: auto;
  }
  .question-contents .question .header .data .middle .title {
    font-size: 28px;
    line-height: 1.2;
    color: #333333;
  }
  .question-contents .question .header .data .lower {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
  }
  .question-contents .question .header .data .lower .sex-icon {
    margin-right: 10px;
  }
  .question-contents .question .header .data .lower .sex-icon img {
    width: 40px;
    height: auto;
  }
  .question-contents .question .header .data .lower .names {
    font-size: 14px;
    line-height: 1.4;
    color: #006EC9;
  }
  .question-contents .question .body {
    margin-bottom: 30px;
    border: 2px solid #CBCBCB;
    padding: 20px;
    font-size: 16px;
    line-height: 1.6;
    text-align: justify;
  }
  .question-contents .images .image {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #CBCBCB;
    display: flex;
    justify-content: space-between;
  }
  .question-contents .images .image img {
    width: 250px;
    height: auto;
    vertical-align: middle;
  }
  .question-contents .images .image .caption {
    width: 360px;
    font-size: 16px;
    line-height: 1.6;
    text-align: justify;
  }
  .question-contents .additions .title {
    margin-top: 25px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    font-size: 16px;
    letter-spacing: 1em;
    color: #FFFFFF;
    background-color: #724F1D;
  }
  .question-contents .additions .addition {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #999999;
    border-radius: 7px;
    font-size: 14px;
    line-height: 1.6;
    background-color: #F1F1F1;
  }
  .question-contents .additions .addition .date {
    font-size: 10px;
    color: #F38000;
  }
  .question-contents .answer_button {
    margin-bottom: 30px;
    text-align: center;
  }
  .question-contents .buttons {
    margin-top: 30px;
    text-align: center;
  }
  .question-contents .answers {
    margin-bottom: 50px;
    padding: 10px;
    border: 2px solid #65A1D3;
    font-size: 16px;
    line-height: 1.6;
    background-color: #F0FFFD;
  }
  .question-contents .answers .header {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .question-contents .answers .header .left {
    display: flex;
    align-items: center;
  }
  .question-contents .answers .header .left .a-icon {
    margin-right: 20px;
  }
  .question-contents .answers .header .left .a-icon img {
    width: 50px;
    height: auto;
  }
  .question-contents .answers .header .left .title {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 0.2em;
    line-height: 1.2;
    color: #009F92;
  }
  .question-contents .answers .header .right {
    display: flex;
    align-items: center;
  }
  .question-contents .answers .header .right .title {
    margin-right: 20px;
    font-size: 16px;
    color: #3F4CD4;
  }
  .question-contents .answers .header .right .count {
    font-size: 24px;
    font-weight: bold;
    color: #3F4CD4;
  }
  .question-contents .answers .answer {
    padding: 10px;
    border: 2px solid #DC7E80;
    background-color: #FFFFFF;
  }
  .question-contents .answers .answer .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .question-contents .answers .answer .header .left .number {
    margin-right: 10px;
  }
  .question-contents .answers .answer .header .left .sex-icon {
    margin-right: 10px;
  }
  .question-contents .answers .answer .header .left .sex-icon img {
    width: 40px;
    height: auto;
  }
  .question-contents .answers .answer .header .left .names {
    font-size: 14px;
    line-height: 1.4;
    color: #006EC9;
  }
  .question-contents .answers .answer .header .right .home-icon img {
    width: 50px;
    height: auto;
  }
  .question-contents .answers .answer .body {
    text-align: justify;
  }
  .question-contents .answers .answer + .answer {
    margin-top: 30px;
  }
  .question-contents .answers .thanks {
    margin-top: 30px;
    padding: 10px;
    border: 2px solid #2044B4;
    background-color: #EFEFFF;
  }
  .question-contents .answers .thanks .header {
    margin-bottom: 10px;
    padding-left: 5px;
    border-bottom: 1px solid #FFFFFF;
    display: flex;
    justify-content: flex-start;
    font-size: 12px;
  }
  .question-contents .answers .thanks .header .title {
    margin-right: 16px;
  }
  .question-contents .answers .thanks .header .date {
    color: #D97A02;
  }
  .question-contents .answers .requestions {
    margin-top: 30px;
    padding: 8px;
    border: 1px solid #9C9C9C;
    border-radius: 7px;
    background-color: #F1F1F1;
  }
  .question-contents .answers .requestions .header {
    margin-bottom: 10px;
    padding-left: 5px;
    border-bottom: 1px solid #FFFFFF;
    display: flex;
    justify-content: flex-start;
    font-size: 12px;
  }
  .question-contents .answers .requestions .header .title {
    margin-right: 16px;
  }
  .question-contents .answers .requestions .header .date {
    color: #D97A02;
  }
  .question-contents .answers .reanswers {
    margin-top: 30px;
    padding: 8px;
    border: 1px solid #39C47D;
    border-radius: 7px;
    background-color: #F1F1F1;
  }
  .question-contents .answers .reanswers .header {
    margin-bottom: 10px;
    padding-left: 5px;
    border-bottom: 1px solid #FFFFFF;
    display: flex;
    justify-content: flex-start;
    font-size: 12px;
  }
  .question-contents .answers .reanswers .header .title {
    margin-right: 16px;
  }
  .question-contents .answers .reanswers .header .date {
    color: #D97A02;
  }

  /*****************************************
   * 新規質問
   *****************************************/
  .question-new .header {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    font-size: 18px;
    color: #FFFFFF;
    background-color: #744108;
  }
  .question-new .icon {
    width: 40px;
    height: auto;
    vertical-align: middle;
  }
  .question-new .preview {
    max-width: 300px;
    max-height: 300px;
  }
  .question-new .addition {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .question-new .form_wrapper {
    padding: 0 20px;
  }
  .question-new .form_table {
    width: 100%;
  }
  .question-new .form_table td {
    display: block;
    width: 100%;
  }
  .question-new .form_required {
    display: inline-block;
  }
  .question-new label + [type="radio"] {
    margin-left: 20px;
  }
  .question-new textarea {
    height: 200px;
    width: 100%;
    box-sizing: border-box;
  }
  .question-new .rule {
    margin: 10px auto 30px;
    padding: 10px 20px;
    border: 1px solid #C1C1C1;
    border-radius: 5px;
    font-size: 11px;
    line-height: 1.6;
  }
  .question-new .rule .title {
    font-weight: bold;
  }
  .question-new .rule .text {
    text-align: justify;
  }
  .question-new .agreement_wrapper {
    margin: 0 auto 30px;
    padding: 10px 20px;
    border: 1px solid #C1C1C1;
    border-radius: 5px;
    font-size: 18px;
    text-align: center;
    background-color: #dddddd;
  }
  .question-new .form_message {
    padding: 0;
  }
  .question-new .form_message button {
    display: block;
    width: 100%;
    padding: 8px;
  }

  /*****************************************
   * 質問サイドバー
   *****************************************/
  .qas-sidebar {
    margin-top: 20px;
  }
  .qas-sidebar .new-button {
    margin-bottom: 40px;
    padding: 0 20px;
  }
  .qas-sidebar .new-button a {
    display: block;
    padding: 8px;
    text-align: center;
    border-radius: 8px;
    font-weight: bold;
  }
  .qas-sidebar .status {
    margin-bottom: 40px;
  }
  .qas-sidebar .status .upper {
    display: flex;
    align-items: center;
  }
  .qas-sidebar .status .upper .sex-icon {
    margin-right: 10px;
  }
  .qas-sidebar .status .upper .sex-icon img {
    width: 40px;
    height: auto;
  }
  .qas-sidebar .status .upper .names {
    font-size: 14px;
    line-height: 1.4;
    color: #006EC9;
  }
  .qas-sidebar .status .lower {
    display: flex;
    justify-content: space-around;
  }
  .qas-sidebar .status .lower .questions-count {
    font-size: 16px;
    line-height: 1.6;
  }
  .qas-sidebar .status .lower .answers-count {
    font-size: 16px;
    line-height: 1.6;
  }
  .qas-sidebar .questions {
    margin-bottom: 40px;
  }
  .qas-sidebar .questions .title {
    margin-bottom: 16px;
    padding: 3px 0 3px 5px;
    font-size: 14px;
    background-color: #E1E1E1;
  }
  .qas-sidebar .questions .question {
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 1.4;
    padding: 0 10px;
  }
  .qas-sidebar .outlet {
    margin-bottom: 40px;
    text-align: center;
  }
  .qas-sidebar .mailmagazines {
    margin-bottom: 40px;
  }
  .qas-sidebar .mailmagazines .caption {
    margin-bottom: 8px;
    border-top: 5px solid #4F4F4F;
    padding-top: 8px;
    border-bottom: 1px dotted #B0B0B0;
    padding-bottom: 8px;
    font-size: 15px;
    font-weight: bold;
    padding-left: 10px;
  }
  .qas-sidebar .mailmagazines .mailmagazine {
    margin-bottom: 8px;
    border-bottom: 1px dotted #B0B0B0;
    padding-bottom: 8px;
    display: block;
    padding: 0 10px;
  }
  .qas-sidebar .mailmagazines .mailmagazine .date {
    margin-bottom: 2px;
    font-size: 10px;
    color: #767676;
  }
  .qas-sidebar .mailmagazines .mailmagazine .title {
    color: #1B3880;
    font-size: 13px;
    line-height: 1.4;
  }

  /*****************************************
   * 共通部品: スムーズスライダー
   *****************************************/
  .smooth-slider .smooth-slider-images {
    position: relative;
    display: flex;
    height: 190px;
  }
  .smooth-slider .smooth-slider-images .smooth-slider-image {
    position: absolute;
    opacity: 0;
    margin-left: 20px;
    margin-right: 20px;
    width: 190px;
  }
  .smooth-slider .smooth-slider-images .smooth-slider-image a {
    display: block;
    text-align: center;
  }
  .smooth-slider .smooth-slider-images .smooth-slider-image a .caption {
    font-weight: bold;
    text-align: center;
    word-wrap: break-word;
  }
}