@charset "utf-8";

/*===================================================================
  CSS Import
===================================================================*/
@import url(./ress.css);
@import url(./font-awesome.css);

/*===================================================================
  Common
===================================================================*/
html{ width:100%; overflow-y:scroll; }
body{ width:100%;  font-size:16px;
  display: grid; /* コンテンツ量が少ない時だけフッターを下部に固定 */
  grid-template-rows: auto 1fr auto; /* コンテンツ量が少ない時だけフッターを下部に固定 */
  grid-template-columns: 100%; /* コンテンツ量が少ない時だけフッターを下部に固定 */
  min-height: 100vh; /* コンテンツ量が少ない時だけフッターを下部に固定 */
}
*{ font-family:"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; }
p{ color:#333333; line-height:220%; }
a{ color:#333333; }
a:hover{ cursor:pointer;  }
a.newWin:after{ content:''; display:inline-block; width:0.8rem; height:0.8rem; margin:0 0.5rem; background-image:url(../img/ico_window.svg); background-size:contain; }
.indent{ padding-left: 1em; text-indent: -1em; }


/*===================================================================
  Font Weight
===================================================================*/
.fB{ font-weight:bold; }
.fN{ font-weight:normal; }


/*===================================================================
  Colors
===================================================================*/
.cGrayAA { color: #333333;}
.cGrayBB { color: #999999;}
.cBlueAA { color:#69b9e6; }
.cBlueBB { color:#3796c8; }
.cBlueCC { color:#e1f5ff; }


/*===================================================================
Common
===================================================================*/
.ContentMainArea{ width:800px; margin: 0 auto; }
.ContentVisualArea{ position: relative; top: 0; width:100%; height:19rem; background: url("../../img/homeMainVisual.jpg") no-repeat center; background-size: cover; z-index: 777; }
.ContentVisualArea .MainTitle{ width:800px; margin: 0 auto; padding-top: 11rem; }
.ContentVisualArea .MainTitle > p:nth-of-type(1){ font-size: 1.75rem; font-weight: bold; }
.ContentVisualArea .MainTitle > p:nth-of-type(2){ line-height: 180%; }
.Pagetop{ position: relative; margin-top: 1rem; margin-bottom: 10rem; text-align: center; }
.Pagetop > p{ position: absolute; right: 0; display: block; width: 8rem; font-size: 0.8rem; padding: 0.5rem 1rem; border-radius: 2rem; background-color: #f2f2f2; }
.Pagetop > p:hover{ opacity: 0.7; }


/*===================================================================
overview
===================================================================*/
.overviewBox{ margin-top: 3rem; margin-bottom: 4rem; display: flex; flex-wrap : wrap; }
.overviewBox > p{ margin-right: 0.5rem; margin-bottom: 0.5rem; padding: 0.5rem 1rem; border-radius: 2rem; background-color: #e1f5ff; text-decoration: none; }
.overviewBox > p:hover{ opacity: 0.7; }
.overviewBox > p::before{ content:''; display:inline-block; width:0.8rem; height:0.8rem; margin:0 0.2rem; background-image:url(../img/ico_circle.svg); background-size:contain; }
.overviewBox02{ }
.overviewBox02 > p:nth-of-type(1){ font-size: 1.75rem; font-weight: bold; color: #3796c8; }
.overviewBox02 > p:nth-of-type(2){ margin-top: 2rem; }
.overviewBox03{ }
.overviewBox03 > p.ListTT{ font-size: 1.75rem; font-weight: bold; color: #3796c8; }
.overviewBox03 > p.ListTL{ font-size: 1.25rem; font-weight: bold; margin-top: 2rem; }
.overviewBox03 > div{ display: flex; flex-wrap : nowrap; border-top: 1px solid #000000; padding: 0.5rem 0; }
.overviewBox03 > div > p:nth-of-type(1){ width: 10rem; font-weight: bold; }
.overviewBox03 > div > p:nth-of-type(2){ width: calc(100% - 10rem); }


/*===================================================================
disease01
===================================================================*/
.diseaseBox{ margin-top: 3rem; margin-bottom: 4rem; display: flex; flex-wrap : wrap; }
.diseaseBox > p{ margin-right: 0.5rem; margin-bottom: 0.5rem; padding: 0.5rem 1rem; border-radius: 2rem; background-color: #e1f5ff; text-decoration: none; }
.diseaseBox > p::before{ content:''; display:inline-block; width:0.8rem; height:0.8rem; margin:0 0.2rem; background-image:url(../img/ico_circle.svg); background-size:contain; }
.diseaseBox > p:hover{ opacity: 0.7; }
.diseaseBox02{ }
.diseaseBox02 > .diseaseTitle{ display: flex; flex-wrap : wrap; justify-content:space-between; padding: 0.5rem 2rem; font-weight: bold; border-radius: 2rem; background-color: #91cdee; }
.diseaseBox02 > .diseaseTitle > p:nth-of-type(1){ width: 80%; font-size: 1.5rem; }
.diseaseBox02 > .diseaseTitle > p:nth-of-type(2){ width: 20%; font-size: 1rem; text-align: right; padding-top: 0.5rem; }
.diseaseBox02 > .diseaseCont{ display: flex; flex-wrap : nowrap; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #000000; }
.diseaseBox02 > .diseaseCont:last-child{ padding-bottom: 1.5rem; border-bottom: 1px solid #000000; }
.diseaseBox02 > .diseaseCont > p:nth-of-type(1){ width: 15%; font-weight: bold; }
.diseaseBox02 > .diseaseCont > p:nth-of-type(2){ width: 85%; }
.diseaseBox02 > .diseaseCont > div{ width: 85%; }
.diseaseBox02 > .diseaseCont > p > a{ width: 85%; transition: color 0.3s; color:#3796c8; }
.diseaseBox02 > .diseaseCont > p > a:hover{ opacity: 0.7; }


/*===================================================================
disease02
===================================================================*/
.disease02Box{ margin-top: 3rem; margin-bottom: 4rem; display: flex; flex-wrap : wrap; }
.disease02Box > p{ margin-right: 0.5rem; margin-bottom: 0.5rem; padding: 0.5rem 1rem; border-radius: 2rem; background-color: #e1f5ff; text-decoration: none; }
.disease02Box > p::before{ content:''; display:inline-block; width:0.8rem; height:0.8rem; margin:0 0.2rem; background-image:url(../img/ico_circle.svg); background-size:contain; }
.disease02Box > p:hover{ opacity: 0.7; }
.disease02Box02{ }
.disease02Box02 > p:nth-of-type(1){ padding: 0.5rem 2rem; font-size: 1.5rem; font-weight: bold; border-radius: 2rem; background-color: #91cdee; }
.disease02Box02 > div{ display: flex; flex-wrap : nowrap; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #000000; }
.disease02Box02 > div:last-child{ padding-bottom: 1.5rem; border-bottom: 1px solid #000000; }
.disease02Box02 > div > p:nth-of-type(1){ width: 15%; font-weight: bold; }
.disease02Box02 > div > p:nth-of-type(2){ width: 85%; }
.disease02Box02 > div > p > a{ width: 85%; transition: color 0.3s; color:#3796c8; }
.disease02Box02 > div > p > a:hover{ opacity: 0.7; }


/*===================================================================
guidelines
===================================================================*/
.guidelineBox{ margin-top: 3rem; margin-bottom: 2rem; }
.guidelineBox > p:nth-of-type(2){ margin-top: 3rem; font-weight: normal; }
.guidelineBox > p:nth-of-type(2) > span{ font-size:1.5rem; font-weight: bold; }
.guidelineBox02{ padding: 1rem 0; border-top: 1px solid #000000; }
.guidelineBox02 > p{ font-size:1.5rem; font-weight: bold; padding-bottom: 1rem; }
.guidelineBox02 > div{ width: 100%; display: flex; flex-wrap : wrap; justify-content:space-between; }
.guidelineBox02 > div > div{ width: 32%; }
.guidelineBox02 > div > div > p > a{ display: block; padding: 0.5rem 1rem; border-radius: 2rem; background-color: #e1f5ff; text-decoration: none; }
.guidelineBox02 > div > div > p > a:hover{ opacity: 0.7; }
.guidelineBox02 > div > div > p > a::before{ content:''; display:inline-block; width:0.8rem; height:0.8rem; margin:0 0.2rem; background-image:url(../img/ico_circle.svg); background-size:contain; }
.guidelineBox02 > div > div > p:nth-of-type(2){ padding-left: 1rem; line-height:180%; padding-top: 0.5rem; }
.guidelineBox02 > div::after{ content:""; display: block; width:32%; }


/*===================================================================
patient
===================================================================*/
.patientBox{ margin-top: 3rem; }
.patientBox > p:nth-of-type(2){ margin-top: 3rem; font-weight: bold; }
.patientBox > p:nth-of-type(2) > span{ font-size:1.5rem; }


/*===================================================================
contact
===================================================================*/
.contactBox{ margin-top: 3rem; }
.contactBox > p:nth-of-type(2){ margin-top: 2rem; font-weight: bold; }
.contactBox > p:nth-of-type(2) > span:nth-of-type(1){ font-size: 1.5rem; }
.contactBox > p:nth-of-type(2) > span:nth-of-type(2){ font-weight: normal; }
.contactBox > div{ display: flex; margin-top: 2rem; }
.contactBox > div > p:nth-of-type(1){ width: 20%; background-color: #91cdee; text-align: center; padding: 2.25rem 0; font-size: 1.25rem; font-weight: bold; }
.contactBox > div > p:nth-of-type(2){ width: 80%; background-color: #e1f5ff; padding: 1.5rem; }
.contactBox > div > p:nth-of-type(2) > span{ font-weight: bold; font-size: 1.25rem; }



/*===================================================================
Home
===================================================================*/
.homeVisualArea{ position: relative; top: 0; width:100%; height:480px; background: url("../../img/homeMainVisual.jpg") no-repeat center; background-size: cover; z-index: 777; }
.homeVisualArea .MainTitle{ width:800px; margin: 0 auto; padding-top: 8rem; text-align: center; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); }
.homeVisualArea .MainTitle > img{ width:70%; margin: 0 auto; }
.homeVisualArea .MainTitle > p:nth-of-type(1){ font-size: 1.5rem; font-weight: bold; }
.homeVisualArea .MainTitle > p:nth-of-type(2){ font-size: 1.25rem; line-height: 180%; }
.TitleBox{ margin-top: 5rem; }
.TitleBox > p{ font-size: 1.75rem; color: #3796c8; font-weight: bold; }
.GreetingBox01{ margin-top: 3rem; }
.GreetingBox01 > p{ margin-bottom: 1rem; }
.GreetingBox02{ margin-top: 3rem; margin-bottom: 2rem; font-weight: bold; }
.GreetingBox02 > p:nth-of-type(2){ font-size: 1.5rem; }
.NewsBox{ padding: 2rem; background-color: #f2f2f2; }
.NewsBox > div{ display: flex; padding: 1.5rem 0; border-top: 1px solid #000000; }
.NewsBox > div:last-child{ border-bottom: 1px solid #000000; }
.NewsBox > div > p:nth-of-type(1){ width: 15%; font-weight: bold; }
.NewsBox > div > p:nth-of-type(2){ width: 85%; }
.NewsBox > div > p > a{ transition: color 0.3s; color:#3796c8; }
.NewsBox > div > p > a:hover{ opacity: 0.7; }



/*===================================================================
Header
===================================================================*/
#Header{ position: absolute; top: 0; width:100%; height:8rem; z-index: 999; }
.HeaderBG{ background-color: rgba(255,255,255,0.7); }
.HeaderLogo{ width: 10rem; height: 10rem; }
.HeaderLogo > a:hover{ opacity: 0.7; }
.HeaderLogo > a > img{ width: 100%; }
.MainMenu{ position: absolute; top: 1rem; left: 11rem; }
.MainMenu > div:nth-of-type(1) > p:nth-of-type(1){ font-size: 0.8rem; font-weight: bold; }
.MainMenu > div:nth-of-type(1) > p:nth-of-type(2){ font-size: 1.25rem; line-height: 100%; font-weight: bold; }
.MainMenu > div:nth-of-type(2){ display: flex; margin-top: 1rem; }
.MainMenu > div:nth-of-type(2) > a{ position: relative; display: block; margin-right: 1.5rem; text-decoration: none; }
.MainMenu > div:nth-of-type(2) > a::before{
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .3s ease-in-out;
    background-image:url(../img/ico_circle02.svg);
    background-size:contain;
}
.MainMenu > div:nth-of-type(2) > a:hover::before, .MainMenu > div:nth-of-type(2) > a.ON::before{
    opacity: 1;
}
.HeaderContact{ position:absolute; right:0; top:0; height:auto; background-color:#333333; text-align: center; }
.HeaderContact > a{ display: block; color: #ffffff; padding: 1rem 2rem; text-decoration: none; }
.HeaderContact:hover{ background-color:#3796c8; } 


/*===================================================================
Footer
===================================================================*/
.footer{ width:100%; margin-top:7rem; padding-top: 2rem; background-color:#e1f5ff; }
.footerBody{ width:800px; margin:auto; text-align: center; padding-bottom: 6rem; }
.footerBody > img{ width:55%; }
.footerBody > p:nth-of-type(1){ font-size: 1.2rem; font-weight: bold; }
.footerBody > p:nth-of-type(2){ line-height: 180%; font-size: 1.1rem; }
.footerBody > p:nth-of-type(3){ padding-top: 3rem; font-size: 0.8rem; }