@charset "UTF-8";
/* ---------------------------------------------------------
  INDEX
      Document visual----ページタイトル部分のCSS。
      Document heading---h2見出し部分のCSS
      汎用スタイル---colorやmarginなどカスタム用のスタイル
                      プロパティ毎に[共通/ＰＣ/スマホ]を随時追加。
--------------------------------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}
/* ---------------------------------------------------------
	Document visual(SP)
--------------------------------------------------------- */
#visual {
  padding: 2% 2% 1.8%;
  background: #4472c4;
  font-size: 0;
  text-align: left;
  line-height: 1.2;
  /* border-bottom: solid 10px #4472c4; */
  margin-bottom: 20px;
}
#visual .article {
  width: 100%;
  padding: 3% 0;
}
#visual h1 {
  vertical-align: middle;
  width: 100%;
  text-align: center;
  padding: 0 10% 0 0;
  margin: 10px 0;
}
#visual h1 img {
  width: 100%;
}
#visual p {
  vertical-align: middle;
  text-align: left;
  font-weight: bold;
  font-size: 21px;
  line-height: 1.4;
  color: #fff;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif;
  margin-left: 4px;
}
/*————————————————-
Document visual(PC)
————————————————-*/
@media screen and (min-width:750px) {
  #visual {
    padding: 0 30px 0 24px;
  }
  #visual .article {
    width: 100%;
    padding: 30px 0;
  }
  #visual h1 {
    text-align: left;
    width: 55%;
    padding: 0 5% 0 0;
    margin: 0;
    float: left;
  }
  #visual p {
    font-size: 26px;
    line-height: 1.3;
    margin-left: 0;
  }
}
.fv_catch {
  font-size: 170%;
}
.fv_catch span {
  font-weight: bold;
}
@media screen and (min-width:750px) {
  .fv_catch {
    font-size: 220%;
  }
}
/* ---------------------------------------------------------
	Document heading(SP)
--------------------------------------------------------- */
h2 {
  margin-bottom: 20px;
  padding: 5px 0 10px 20px;
  border-bottom: solid 4px #d7d6d5;
  font-weight: 500;
  font-size: 6vw;
  line-height: 1.6;
  position: relative;
}
h2:before {
  content: '';
  width: 9px;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
h2 span {
  font-weight: 500;
}
.h2-leftColor-Pink:before {
  background: #e80c7c;
}
.h2-leftColor-Blue:before {
  background: #51b5cf;
}
.h2-leftColor-Green:before {
  background: #5ab8b5;
}
.h2-leftColor-Orange:before {
  background: #fa8d6b;
}
h3 {
  margin-bottom: .5em;
  padding: 5px 0 5px 20px;
  font-weight: 500;
  font-size: 5.8vw;
  line-height: 1.4;
  position: relative;
}
h3:before {
  content: '';
  width: 5px;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.h3-leftColor-Pink:before {
  background: #e80c7c;
}
.h3-leftColor-Blue:before {
  background: #51b5cf;
}
.h3-leftColor-Green:before {
  background: #5ab8b5;
}
.h3-leftColor-Orange:before {
  background: #fa8d6b;
}
/*———————————————————-
Document heading(PC)
———————————————————-*/
@media screen and (min-width:750px) {
  h2 {
    min-height: 60px;
    padding: 5px 0 10px 28px;
    line-height: 1.6;
    font-size: 30px;
  }
  h3 {
    padding: 5px 0 5px 20px;
    font-size: 24px;
  }
}
/* ---------------------------------------------------------
	汎用スタイル
--------------------------------------------------------- */
/*———————————————-
line-height
———————————————-*/
.lh-90per {
  line-height: 90% !important;
}
.lh-100per {
  line-height: 100% !important;
}
.lh-110per {
  line-height: 110% !important;
}
.lh-120per {
  line-height: 120% !important;
}
.lh-130per {
  line-height: 130% !important;
}
.lh-140per {
  line-height: 140% !important;
}
.lh-150per {
  line-height: 150% !important;
}
.lh-160per {
  line-height: 160% !important;
}
.lh-170per {
  line-height: 170% !important;
}
.lh-180per {
  line-height: 180% !important;
}
/*———————————————-
margin　共通
———————————————-*/
.mb0 {
  margin-bottom: 0 !important;
}
.mb5 {
  margin-bottom: 5px !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.mb20 {
  margin-bottom: 20px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.mb40 {
  margin-bottom: 40px !important;
}
.mb50 {
  margin-bottom: 50px !important;
}
.mb100 {
  margin-bottom: 100px !important;
}
.mb1em {
  margin-bottom: 1em !important;
}
.mb2em {
  margin-bottom: 2em !important;
}
.mb3em {
  margin-bottom: 3em !important;
}
.mt0 {
  margin-top: 0 !important;
}
.mt10 {
  margin-top: 10px !important;
}
.mt20 {
  margin-top: 20px !important;
}
.mt30 {
  margin-top: 30px !important;
}
.mt40 {
  margin-top: 40px !important;
}
.mt50 {
  margin-top: 50px !important;
}
.mt1em {
  margin-top: 1em;
}
.mt2em {
  margin-top: 2em;
}
.m0auto {
  margin: 0 auto;
}
/*———————————————-
margin　PC
———————————————-*/
@media screen and (min-width:750px) {
  .mb0Pc {
    margin-bottom: 0 !important;
  }
  .mb5Pc {
    margin-bottom: 5px !important;
  }
  .mb10Pc {
    margin-bottom: 10px !important;
  }
  .mb20Pc {
    margin-bottom: 20px !important;
  }
  .mb30Pc {
    margin-bottom: 30px !important;
  }
  .mb40Pc {
    margin-bottom: 40px !important;
  }
  .mb50Pc {
    margin-bottom: 50px !important;
  }
  .mt0Pc {
    margin-top: 0 !important;
  }
  .mt10Pc {
    margin-top: 10px !important;
  }
  .mt20Pc {
    margin-top: 20px !important;
  }
  .mt30Pc {
    margin-top: 30px !important;
  }
  .mt40Pc {
    margin-top: 40px !important;
  }
  .mt50Pc {
    margin-top: 50px !important;
  }
}
/*———————————————-
margin　Mo
———————————————-*/
@media screen and (max-width:749px) {
  .mb0Mo {
    margin-bottom: 0 !important;
  }
  .mb5Mo {
    margin-bottom: 5px !important;
  }
  .mb10Mo {
    margin-bottom: 10px !important;
  }
  .mb20Mo {
    margin-bottom: 20px !important;
  }
  .mb30Mo {
    margin-bottom: 30px !important;
  }
  .mb40Mo {
    margin-bottom: 40px !important;
  }
  .mb50Mo {
    margin-bottom: 50px !important;
  }
  .mt0Mo {
    margin-top: 0 !important;
  }
  .mt10Mo {
    margin-top: 10px !important;
  }
  .mt20Mo {
    margin-top: 20px !important;
  }
  .mt30Mo {
    margin-top: 30px !important;
  }
  .mt40Mo {
    margin-top: 40px !important;
  }
  .mt50Mo {
    margin-top: 50px !important;
  }
  .mr5Mo {
    margin-right: 5px !important;
  }
  .mlr-negativeAutoMo {
    margin: 0 calc(50% - 50vw);
  }
}
/*———————————————-
padding
———————————————-*/
.pb0 {
  padding-bottom: 0;
}
.pb5 {
  padding-bottom: 5px;
}
.pb10 {
  padding-bottom: 10px;
}
.pb20 {
  padding-bottom: 20px;
}
.pb30 {
  padding-bottom: 30px;
}
.pb40 {
  padding-bottom: 40px;
}
.pb50 {
  padding-bottom: 50px;
}
.pb05em {
  padding-bottom: 0.5em;
}
.p8px {
  padding: 8px;
}
.p1em-05em {
  padding: 1em 0.5em;
}
.p05em-0 {
  padding: 0.5em 0;
}
.p1em-0 {
  padding: 1em 0;
}
.p0-05em {
  padding: 0 0.5em;
}
.p0-1em {
  padding: 0 1em;
}
.p0-2em {
  padding: 0 2em;
}
.pl05em {
  padding-left: 0.5em;
}

.p0-2em {
  padding: 8em;
}

/*———————————————-
font
———————————————-*/
.fwb {
  font-weight: bold;
}
.fc-red {
  color: #ea3131;
}
.fc-blue {
  color: #0149b5;
}

.fc-green {
  color: #017F3E;
}
.fc-white {
  color: #FFFFFF;
}
.fc-orange01 {
  color: #f4977a;
}
.fs-70per {
  font-size: 70%;
}
.fs-80per {
  font-size: 80%;
}
.fs-90per {
  font-size: 90%;
}
.fs-110per {
  font-size: 110%;
}
.fs-120per {
  font-size: 120%;
}
.fs-130per {
  font-size: 130%;
}
.fs-140per {
  font-size: 140%;
}
.fs-150per {
  font-size: 150%;
}
.fs-160per {
  font-size: 160%;
}
.fs-170per {
  font-size: 170%;
}
.fs-180per {
  font-size: 180%;
}
.fs-190per {
  font-size: 190%;
}
.fs-200per {
  font-size: 200%;
}
/*———————————————-
border
———————————————-*/
.bs1px-999999 {
  border: solid 1px #999999;
}
.bs2px-dddddd {
  border: solid 2px #dddddd;
}
.bs2px-f5f5c8 {
  border: solid 2px #f5f5c8;
}
.bs2px-ea3131 {
  border: solid 2px #ea3131;
}
.bs2px-ea722b {
  border: solid 2px #ea722b;
}
.bs3px-000000 {
  border: solid 3px #000000;
}
.bs3px-dddddd {
  border: solid 3px #DDDDDD;
}
.bd2px-0168b7 {
  border-bottom: dotted 2px #0168b7;
}
.bd3px-0168b7 {
  border-bottom: dotted 3px #0168b7;
}
.bbs1px-ffffff {
  border-bottom: solid 1px #ffffff;
}
.bbs1px-0000bb {
  border-bottom: solid 1px #0000bb;
}
.bbs3px-004da0 {
  border-bottom: solid 3px #004da0;
}
.bbd4px-777777 {
  border-bottom: double 4px #777777;
}
/*———————————————-
text-align
———————————————-*/
.ta-r {
  text-align: right;
}
.ta-l {
  text-align: left;
}
.ta-c {
  text-align: center;
}
/*———————————————-
text-align　PC
———————————————-*/
@media screen and (min-width:750px) {
  .ta-rPc {
    text-align: right;
  }
  .ta-lPc {
    text-align: left;
  }
  .ta-cPc {
    text-align: center;
  }
}
/*———————————————-
text-align　Mo
———————————————-*/
@media screen and (max-width:749px) {
  .ta-rMo {
    text-align: right;
  }
  .ta-lMo {
    text-align: left;
  }
  .ta-cMo {
    text-align: center;
  }
}
/*———————————————-
display
———————————————-*/
.disp-b {
  display: block;
}
.disp-ilb {
  display: inline-block;
}
.disp-flex {
  display: flex;
}
/*———————————————-
スマホのみ表示
———————————————-*/
@media screen and (min-width:750px) {
  .sp {
    display: none;
  }
}
/*———————————————-
PCのみ表示
———————————————-*/
@media screen and (max-width:749px) {
  .pc {
    display: none;
  }
}
/*———————————————-
Shadow
———————————————-*/
.fil-ds {
  filter: drop-shadow(2px 6px 6px rgba(0, 0, 0, 0.4));
}
/*———————————————
box-Shadow
———————————————*/
.b-shadow {
  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.3)
}
/*———————————————
text-shadow
———————————————*/
.t-shadow {
  text-shadow: 1px 0px #dddddd;
}
/*———————————————-
二重打ち消し線
———————————————-*/
.entryday {
  display: inline-block;
  position: relative;
}
.entryday:before {
  content: ”;
  width: 100%;
  height: 1px;
  border-top: solid 2px #F44336;
  position: absolute;
  left: 0;
  top: calc(50% – 4px);
}
.entryday:after {
  content: ”;
  width: 100%;
  height: 1px;
  border-bottom: solid 2px #F44336;
  position: absolute;
  left: 0;
  bottom: calc(50% – 4px);
}
/*———————————————-
listの角合わせ
『・』『※』等
———————————————-*/
.corner-match {
  padding-left: 1.1em;
  text-indent: -1.1em;
}
.corner-match img {
  width: 1em;
  vertical-align: text-top;
}
/*———————————————-
background
———————————————-*/
.bg-colorR {
  background-color: #ea3131;
}
.bg-colorO {
  background-color: #ffb800;
}
.bg-colorY {
  background-color: #fdfbe5;
}
.bg-colorY--radius6px {
  background-color: #faf3a8;
  border-radius: 6px;
  padding: 0.5em;
}
.bg-colorR--linear {
  background: linear-gradient(transparent 87%, rgb(220, 0, 0) 60%);
}
.bg-colorB--linear {
  background: linear-gradient(transparent 90%, rgb(0, 53, 199) 60%);
}
/*　囲み枠 */
.kakomi-waku01 {
  padding: 1em 1em;
  width: 100%;
  background-color: #fffeef;
  border-radius: 6px;
  color: #616161;
}
.kakomi-waku02 {
  padding: .5em .5em;
  width: 100%;
  border: 4px solid rgba(188, 219, 227, .3);
}
.kakomi-waku03 {
  padding: .5em .5em;
  width: 100%;
  background-color: rgb(220, 245, 253, .3);
}

.kakomi-waku04 {
  padding: 2em 2em;
  width: 100%;
  border:solid #dde1e4 6px;
  border-radius: 16px;
}

/*———————————————-
テキスト下矢印
———————————————-*/
.bottom-arrow {
  position: relative;
}
.bottom-arrow::after {
  content: '';
  width: 2em;
  height: 2em;
  display: inline-block;
  background: no-repeat center/100% url(../images/arrow_red-down.png);
  position: absolute;
  bottom: 0;
  left: 5em;
  transform: translate(0, 100%);
}
/*———————————————-
imageの背景
———————————————-*/
.image-column {
  background-color: #fffff7;
  border-radius: 8px;
  padding: 1em 0.5em;
  text-align: center;
}
.image-column p:nth-child(odd) img {
  border: solid 3px #DDDDDD;
}
.image-column p:nth-child(even) img {
  width: 100px;
}
.image-column-b {
  background-color: #fffff7;
  border-radius: 8px;
  padding: 1em 0.5em;
  text-align: center;
}
.image-column-b p img {
  border: solid 3px #DDDDDD;
}
/*———————————————-
治療薬の評価
———————————————-*/
.medicineBox {
  margin-bottom: 1em;
  border: solid 3px #5ab8b5;
}
.medicineBox-tit {
  font-weight: bold;
  font-size: 1.2em;
  background-color: #3a928f;
  color: #FFFFFF;
  margin-bottom: 0.5em;
  padding: 0.2em 0.5em;
}
.medicineBox-tit .fa-tablets {
  margin-right: 0.2em;
  background-color: #FFF;
  color: #5ab8b5;
  border-radius: 50%;
  padding: 0.3em;
}
.medicineBox-image {
  width: 100px;
  height: 100px;
  background-color: #999999;
  border: solid 3px #dddddd;
  margin: 0 10px 0 1em;
}
.medicineBox-status {
  margin-top: 0.3em;
  font-size: 96%;
}
.star-cat {
  display: inline-block;
  min-width: 6.5em;
}
.medicineBox-text {
  margin-bottom: 1em;
  padding: 0 1em;
}
.medicine-recommended {
  display: inline-block;
  border-top: solid 3px #4c8bea;
  border-bottom: solid 3px #4c8bea;
  line-height: 40px;
  padding: 0 1em;
  font-weight: bold;
}
/*———————————————-
年代別に見るEDの原因
———————————————-*/
.ageCause-tit {
  background-color: #92bbe2;
  padding: 0.5em 1em;
  margin-bottom: 0.2em;
}
/*———————————————-
フキダシ
———————————————-*/
.arrow_box01 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  border-bottom: solid 3px #999;
  box-sizing: border-box;
  border-radius: 6px;
  width: 100%;
  text-align: center;
}
.arrow_box01:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}
.arrow_box01:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #ec7d34;
  z-index: 1;
}
.arrow_box01 p {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 32px;
}
/*———————————————-
小見出し--タグ風--
———————————————-*/
.midashi-tag01 {
  position: relative;
  overflow: hidden;
  padding: 0.2em 0 0 80px;
  border: 2px solid #4c8bea;
}
.midashi-tag01:before {
  position: absolute;
  top: -150%;
  left: -140px;
  width: 200px;
  height: 300%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: #4c8bea;
}
.midashi-tag01 span {
  font-size: 26px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 5px;
  padding-left: 10px;
  color: #fff;
  line-height: 26px;
}
@media screen and (max-width:749px) {
  .midashi-tag01 {
    padding: 0.1em 0 0 60px;
  }
  .midashi-tag01 span {
    font-size: 21px;
    padding-top: 2px;
  }
  .midashi-tag01:before {
    top: -180%;
    left: -150px;
  }
}
/*———————————————-
論文アイコン
———————————————-*/
.icon-paper {
  background: url(../images/icon-paper.png) no-repeat;
  background-size: contain;
  background-position: left bottom;
  padding-left: 45px;
}
/*———————————————-
医者アイコン
———————————————-*/
.icon-doctor {
  width: 8vw;
  height: 12vw;
  display: inline-block;
  background: no-repeat center/100% url(../images/icon_doctor01.png);
}
@media screen and (min-width:750px) {
  .icon-doctor {
    width: 35px;
    height: 50px;
    display: inline-block;
    background: no-repeat center/100% url(../images/icon_doctor01.png);
  }
}
/*———————————————-
blockquote
———————————————-*/
blockquote {
  box-sizing: border-box;
  /* font-style: italic; */
  background: #f5f5f5;
  color: #777777;
  border-left: 4px solid #9dd4ff;
  margin: 0;
  padding: 0 0.5em;
}
blockquote p {
  padding: 0;
  margin: 7px 0;
  line-height: 1.7;
}
blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 80%;
  font-style: normal;
}
/*———————————————-
icon-title
———————————————-*/
.icon-title01 {
  margin-bottom: .5em;
  padding: 1% 0;
  font-weight: 500;
  font-size: 5.8vw;
  line-height: 1.4;
  position: relative;
  display: flex;
  align-items: center;
}
.icon-title_icon {
  margin-right: 3vw;
  transform: translate(0, -10%);
}
h3:before {
  content: '';
  width: 5px;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
/*———————————————————-
Document heading(PC)
———————————————————-*/
@media screen and (min-width:750px) {
  .icon-title01 {
    padding: 5px 10px;
    font-size: 24px;
  }
  .icon-title_icon {
    margin-right: 20px;
    transform: translate(0, -10%);
  }
}
/*———————————————————-
matome
———————————————————-*/
@media screen and (max-width:749px) {
  .matome ul {
    margin-left: -1em;
  }
}
.flex_box {
  display: -webkit-flex;
  display: flex;
  flex-wrap: nowrap;
  margin: 0 auto;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  align-items: center;
  -webkit-align-items: center;
}
.matome .flex_box img {
  width: 180px;
}
.matome .txt {
  width: 50%;
  margin-right: 2em;
}
#cause .flex_box {
  width: 100%;
  align-items: flex-end;
  height: auto;
  -webkit-align-items: flex-end;
}
.fv .flex_box {
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}
.fv .flex_box .txt {
  margin-right: 1.5em;
}
@media screen and (max-width:749px) {
  .flex_box {
    flex-wrap: nowrap;
  }
  .matome .flex_box {
    width: 100%;
    flex-wrap: nowrap;
    margin: 0 auto;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
  }
  .matome {
    padding: 1px 20px 30px 30px;
  }
  .matome h3 {
    margin: -30px 50px 40px 10px;
  }
  .matome .flex_box .txt {
    width: 70%;
  }
  .matome .flex_box span {
   /* display: inline-block;*/
    width: 30%;
  }
  #test .flex_box .txt {
    width: 60%;
    margin-right: 1em;
  }
  #test .flex_box .img {
    width: 30%;
  }

.fv .flex_box .txt {
  margin-right: 0.5em;
}
.fv .flex_box .img {
  width: 10%;
}

}

.bg_face_f,.bg_face_e,.bg_face_d{height: 13em;
	background-image:url("../images/face_f.png.webp");
background-position: right;
	background-repeat: no-repeat;background-size: 30%;}

.bg_face_f{
	background-image:url("../images/face_f.png.webp");}
.bg_face_e{
	background-image:url("../images/face_e.png.webp");}
.bg_face_d{
	background-image:url("../images/face_d.png.webp");}

.c-ruby {
  ruby-align: center;
}

.c-ruby rt {
  position: relative;
  top: 1.3px;
}