@charset "utf-8";



/* ===== topics ===== */

@media(max-width:768px) { /* 画面幅768px以下の場合 */
.topics {
  padding: 0 0 70px;
}
}

.tab-board.is-topics {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
  margin: 40px auto 0;
  padding: 0 0 50px;
  width: 100%;
  border-top: 14px solid #CA8A04;
  border-bottom: 14px solid #CA8A04;
  background: url(/assets/images/common/board-bg.jpg) repeat-y;

}
@media(max-width:1280px) { /* 画面幅1280px以下の場合 */
.tab-board.is-topics {
  margin: 30px auto 0;
  width: 95%;
}
}
@media(max-width:768px){
  .tab-board.is-topics {
    padding-bottom: 30px;
  }
}

.tab-board.is-topics .tab-board__item {
  padding:  50px;
  width: 100%;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board.is-topics .tab-board__item {
  padding: 15px 0 20px;
}
}



.tab-board__item {
  display: block;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  margin-top: 10px;
}
}

.tab-board__nodata {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
  margin-top: 50px;
  width: 100%;
}



.tab-board__item-tag {
  padding: 0 20px 20px;
  text-align: right;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-tag {
  order: 2;
  margin: 0 3% 0;
  padding: 0 3% 30px;
  width: 94%;
  background-color: #fff;
  text-align: left;
}
}

.tab-board__item-tag-item {
  display: inline-block;
  top: 0;
  right: 0;
  min-height: 50px;
  margin-left: 5px;
  padding: 18px 60px 18px 30px;
  background-color: #fff;
  border: 2px solid #A5C5CA;
  border-radius: 32px;
  font-size: 1.4rem;
  color: #000;
  font-weight: bold;
  line-height: 1.0em;
  text-align: center;
  text-decoration: none;
  background-image: url('/assets/images/topics/img-item-tag-bird.png');
  background-repeat: no-repeat;
  background-size: 35px 33px;
  background-position: right 12px center;
}
@media(min-width:769px) { /* 画面幅769px以上の場合 */
.tab-board__item-tag-item:hover {
  color: #004098;
  text-decoration: underline;
}
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-tag-item {
  display: inline-block;
  min-width: 115px;
  height: auto;
  min-height: auto;
  padding: 5px 5px;
  margin-left: 0;
  margin-right: 5px;
  background-color: #E5EEF7;
  background-image: none;
  border: none;
  border-radius: 0;
  font-size: 1.2rem;
  color: #004098;
  font-weight: normal;
  white-space: nowrap;
  text-align: center;
}
}
.tab-board__item-tag-item:focus {
  outline: 2px solid #fff;
  box-shadow: 0 0 3px 5px rgba(0,0,0,.5);
}

.tab-board__item-paper {
  position: relative;
  margin: 0 9% 0;
  padding: 0 9% 50px;
  background-color: #fff;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-paper {
  order: 1;
  margin: 0 3% 0;
  padding: 0 3% 20px;
}
}

.tab-board__nodata .tab-board__item-paper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  padding: 0 9% 60px;
}

.tab-board__item-paper-pin--left {
  position: absolute;
  width: 23px;
  height: 35px;
  top: -12px;
  left: 10px;
  background-image: url('/assets/images/common/img-pin-left.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
}

.tab-board__item-paper-pin--right {
  position: absolute;
  width: 23px;
  height: 35px;
  top: -12px;
  right: 10px;
  background-image: url('/assets/images/common/img-pin-right.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
}


.tab-board__item-status {
  position: absolute;
  top: 0;
  right: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: stretch;
  align-content: stretch;
  padding: 0 0 0 0;
}

.tab-board__item-status-item {
  width: 8.0rem;
  margin-left: 10px;
  padding: 10px 10px 10px;
  background-color: #ccc;
  font-size: 1.2rem;
  color: #fff;
  font-weight: bold;
  line-height: 1.0em;
  text-align: center;
  text-decoration: none;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-status-item {
  width: 6.0rem;
  padding: 6px 8px 4px;
  font-size: 1.0rem;
}
}
.tab-board__item-status-item.is-new {
  background-color: #b92727;
}
.tab-board__item-status-item.is-recommend {
  background-color: #205079;
}


.tab-board__item-title {
  position: relative;
  padding-top: 60px;
  font-size: 3.6rem;
  color: #004098;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-title {
  padding-top: 40px;
  font-size: 2.0rem;
  text-align: left;
}
.tab-board__nodata .tab-board__item-title {
  text-align: center;
}
}

.tab-board__item-catch {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  margin-top: 30px;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-catch {
  margin-top: 15px;
}
}

.tab-board__item-catch-mark {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  min-width: 4.8rem;
  min-height: 4.8rem;
  padding: 5px;
  background-color: #005bac;
  border: 3px solid #005bac;
  border-radius: 50%;
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  font-size: 1.5rem;
  color: #fff;
  line-height: 1.0em;
  text-align: center;
  white-space: nowrap;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-catch-mark {
  min-width: 4.0rem;
  min-height: 4.0rem;
  font-size: 1.4rem;
}
}

.tab-board__item-catch-text {
  align-self: center;
  padding: 3px 0 0 1.2rem;
  width: 100%;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-catch-text {
  width: calc( 100% - 50px );
  font-size: 1.4rem;
}
}

.tab-board__item-catch-keyword {
  display: inline;
  margin-right: 1.0em;
  font-size: 2.0rem;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-catch-keyword {
  font-size: 1.6rem;
}
}

.tab-board__item-lead {
  margin-top: 30px;
  padding: 20px;
  background-color: #E5EEF7;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-lead {
  margin-top: 20px;
  padding: 10px;
}
}

.tab-board__item-lead-text {
  font-size: 1.6rem;
  line-height: 1.8;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-lead-text {
  font-size: 1.5rem;
  line-height: 1.6;
}
}

.tab-board__item-normal-text {
  margin-top: 20px;
  font-size: 1.6rem;
  line-height: 1.8;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-normal-text {
  margin-top: 15px;
  font-size: 1.5rem;
  line-height: 1.6;
}
}

.tab-board__item-album {
  margin-top: 60px;
  text-align: center;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-album {
  margin-top: 30px;
}
}

.tab-board__item-image {
  max-width: 100%;

  &.is-self-medication{
    width: 420px;
    height: auto;
    aspect-ratio: 28/13;
  }

  &.is-otc-pharma{
    width: 420px;
    height: auto;
    aspect-ratio: 440/181;
  }

  &.is-otc-pharma-table{
    width: 570px;
    height: auto;
    aspect-ratio: 285/104;
  }

  &.is-medical-drugs{
    width: 280px;
    height: auto;
    aspect-ratio: 280/249;
  }

  &.is-healthy-life{
    width: 500px;
    height: auto;
    aspect-ratio: 125/97;
  }

  &.is-healthy-life-image{
    width: 280px;
    height: auto;
    aspect-ratio: 280/283;
  }
}
.tab-board__item-image.is-kakaritsukeyakkyoku {
  width: 180px;
}
.tab-board__item-image.is-kakaritsukei {
  width: 288px;
}
.tab-board__item-image.is-okusuritechou {
  width: 327px;
}
.tab-board__item-image.is-onlinefukuyakushidou {
  width: 319px;
}
.tab-board__item-image.is-onlineshinryou {
  width: 328px;
}
.tab-board__item-image.is-mainahokenshou {
  width: 327px;
}



.tab-board__item-paragraph-title {
  margin-top: 60px;
  padding: 0 10px 5px 20px;
  border-left: 10px solid #005BAC;
  border-bottom: 1px solid #005BAC;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-paragraph-title {
  margin-top: 30px;
  padding: 0 0 3px 10px;
  font-size: 1.6rem;
}
}

.tab-board__item-paragraph-body {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 100px;

  @media(min-width:769px) {
    grid-template-columns: 1fr auto;

    .tab-board__item-album{
      margin-top: 0;
    }
  }

  img {
    max-width: 100%;
  }
}

.tab-board__item-list-body {
  padding-left: 20px;
  list-style-position: outside;

  &.__row-height-few{
    & li {
      margin-top: 10px;

      &:first-child{
        margin-top: 0px;
      }
    }
  }

  &.__row-height{
    & li {
      margin-top: 0px;
    }
  }
}

.tab-board__item-list-body > li {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.tab-board__item-list-marker {
  width: 1.5em;
  font-size: 1.6rem;
  line-height: 1.8;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-list-marker {
  font-size: 1.5rem;
  line-height: 1.6;
}
}

.tab-board__item-list-text {
  width: calc( 100% - 1.5em );
  font-size: 1.6rem;
  line-height: 1.8;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-list-text {
  font-size: 1.5rem;
  line-height: 1.6;
}
}



/* ----- 中ページ：用語解説 ----- */

.tab-board__item-word-commentary {
  margin-top: 40px;
}
.tab-board__item-word-commentary.is-separate-top {
  padding-top: 30px;
  border-top: 1px solid #707070;
}

.tab-board__item-word-commentary-text {
  margin-top: 15px;
  font-size: 1.4rem;
  line-height: 1.5;
}

.tab-board__inner-head{
  margin-top: 60px;
  display: grid;
  gap: 20px;

  @media(max-width: 768px){
    margin-top: 30px;
  }
}

.tab-board__inner-head-title{
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  font-size: 1.6rem;
  line-height: 1.5;
  align-items: baseline;

  @media(max-width:768px){
    font-size: 1.5rem;
  }
}

.tab-board__inner-head-content{
  display: grid;
  gap: 16px;
}

.tab-board__inner-head-content-title{
  font-weight: bold;
  display: block;
}

.tab-board__item-album-info{
  display: grid;
  gap: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  margin-top: 60px;
  @media(max-width:768px){
    font-size: 1.5rem;
    margin-top: 60px;
  }

  .tab-board__item-album{
    margin-top: 0px;
  }
}

.tab-board__item-album-info-title{
  font-weight: bold;
}

/* ----- 中ページ：出典・参照 ----- */

.tab-board__item-source {
  margin-top: 30px;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-source {
  margin-top: 20px;
}
}
.tab-board__item-source.is-separate-top {
  padding-top: 30px;
  border-top: 1px solid #707070;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-source.is-separate-top {
  padding-top: 20px;
}
}

.tab-board__item-source-title {
  width: 6.4rem;
  padding: 8px 15px;
  background-color: #BCBCBC;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.0em;
  text-align: center;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-source-title {
  width: 5.0rem;;
  padding: 5px 5px;
  font-size: 1.2rem;
}
}

.tab-board__item-source-link-name {
  margin-top: 15px;
  font-size: 1.4rem;
  line-height: 1.5;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-source-link-name {
  font-size: 1.2rem;
}
}

.tab-board__item-source-link-url {
  display: block;
  margin-top: 5px;
  font-size: 1.4rem;
  line-height: 1.5;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-source-link-url {
  margin-top: 5px;
  font-size: 1.2rem;
  text-decoration: underline;
}
}
@media(min-width:769px) { /* 画面幅769px以上の場合 */
.tab-board__item-source-link-url:hover {
  text-decoration: underline;
}
}
.tab-board__item-source-link-url:focus {
  outline: 3px solid #fff;
  box-shadow: 0 0 3px 6px rgba(0,0,0,.5);
}

.tab-board__item-source-inspected {
  margin-top: 15px;
  font-size: 1.4rem;
  line-height: 1.5;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board__item-source-inspected {
  font-size: 1.2rem;
}
}

/* ----- 中ページ：ほかにもくすりの疑問を解決したい方はコチラ ----- */

.tab-board-inside__detail-etc {
  margin-top: 50px;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board-inside__detail-etc {
  margin-top: 40px;
}
}

.tab-board-inside__detail-etc-title {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
}

.tab-board-inside__detail-etc-title-marker {
  display: block;
  margin-top: 1px;
  width: 16px;
  height: 16px;
  background-color: #005BAC;
}

.tab-board-inside__detail-etc-title-text {
  width: calc( 100% - 25px );
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 20px;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board-inside__detail-etc-title-text {
  font-size: 1.5rem;
}
}

.tab-board-inside__detail-etc-body {
  margin-top: 20px;
  text-align: left;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board-inside__detail-etc-body {
  text-align: center;
}
.tab-board-inside__detail-etc-body .common-btn {
  margin: 10px auto 0;
}
}




/* ===== Q&A扉ページ ===== */

.topics-top{


.tab-board.is-topics {
  position: relative;
  margin: 0 auto;
  padding: 0 0 30px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  border: none;
  background: none;
}
@media(max-width:1280px) { /* 画面幅1280px以下の場合 */
.tab-board.is-topics {
  width: 95%;
}
}

.tab-board.is-topics .tab-board__item {
  position: relative;
  display: block;
  margin-top: 40px;
  width: 48%;
  padding: 0;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board.is-topics .tab-board__item {
  margin-top: 20px;
  width: 100%;
}
}

.tab-board.is-topics .tab-board__item-link {
  display: block;
  padding: 2.5rem 20px 2.0rem;
  border-radius: 20px;
  background-color: #fff;
  cursor: pointer;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board.is-topics .tab-board__item-link {
  padding: 2.0rem 20px 2.0rem;
}
}


.tab-board.is-topics .tab-board__item-link:focus {
  outline: 2px solid #005bac;
  box-shadow: 0 0 3px 5px rgba(0,0,0,.5);
}

.tab-board.is-topics .tab-board__item-status {
  position: absolute;
  top: 0;
  right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: stretch;
  align-content: stretch;
}

.tab-board.is-topics .tab-board__item-status-item {
  min-width: 8.0rem;
  margin-right: 10px;
  padding: 10px 10px 10px;
  background-color: #ccc;
  font-size: 1.2rem;
  color: #fff;
  font-weight: bold;
  line-height: 1.0em;
  text-align: center;
  text-decoration: none;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board.is-topics .tab-board__item-status-item {
  min-width: 6.0rem;
  padding: 8px 5px 8px;
  font-size: 1.0rem;
  line-height: 1.0em;
}
}

.tab-board.is-topics .tab-board__item-status-item.is-new {
  background-color: #b92727;
}
.tab-board.is-topics .tab-board__item-status-item.is-recommend {
  background-color: #205079;
}

.tab-board.is-topics .tab-board__item-q {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
}

.tab-board.is-topics .tab-board__item-q-mark {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  min-width: 4.8rem;
  min-height: 4.8rem;
  padding: 0.3rem;
  background-color: #005bac;
  border: 3px solid #005bac;
  border-radius: 50%;
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  font-size: 2.8rem;
  color: #fff;
  font-weight: bold;
  line-height: 1.0em;
  text-align: center;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board.is-topics .tab-board__item-q-mark {
  min-width: 3.8rem;
  min-height: 3.8rem;
  font-size: 2.2rem;
}
}

.tab-board.is-topics .tab-board__item-q-text {
  padding: 5px 0 0 1.2rem;
  width: 100%;
  font-size: 2.4rem;
  color: #005bac;
  font-weight: bold;
  line-height: 1.5;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board.is-topics .tab-board__item-q-text {
  width: calc( 100% - 50px );
  font-size: 2.0rem;
  text-decoration: underline;
}
}
@media(min-width:769px) { /* 画面幅769px以上の場合 */
.tab-board.is-topics .tab-board__item:hover .tab-board__item-q-text {
  text-decoration: underline;
}
}

.tab-board.is-topics .tab-board__item-text {
  margin-top: 20px;
  font-size: 1.6rem;
  color: #000;
  line-height: 1.8;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board.is-topics .tab-board__item-text {
  margin-top: 15px;
  font-size: 1.5rem;
  color: #005bac;
  line-height: 1.6;
  text-decoration: underline;
}
}
@media(min-width:769px) { /* 画面幅769px以上の場合 */
.tab-board.is-topics .tab-board__item:hover .tab-board__item-text {
  color: #005bac;
  text-decoration: underline;
}
}

.tab-board.is-topics .tab-board__item-bottom-tab-label {
  display: none;
}
@media(max-width:768px) { /* 画面幅768px以下の場合 */
.tab-board.is-topics .tab-board__item-bottom-tab-label {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  padding-top: 10px;
}
}

.tab-board.is-topics .tab-board__item-bottom-tab-label-item {
  display: inline-block;
  min-width: 115px;
  padding: 5px 5px;
  margin-right: 5px;
  background-color: #E5EEF7;
  font-size: 1.2rem;
  color: #004098;
  line-height: 1.0em;
  white-space: nowrap;
  text-align: center;
}


  
}

.topics-return-btn{
  margin-top: 0 !important;
  /* padding: 15px 30px !important; */
}

.control-bottom-near--topics{
  margin-bottom: 20px;
  width: 100%;
  padding-left: 12.5%;
  padding-right: 12.5%;
  @media(max-width:768px) {
    padding-left: 10px;
    padding-right: 10px;
  }
  .common-btn{
    margin-top: 0;
  }
}