@charset "UTF-8";

/* Scss Document */

.body {

  position: relative; }



.txt_header h1 {

  color: #008fc9;

  position: relative;

  padding: 55px 0 0 0;

  text-align: center; }

  .txt_header h1:before {

    position: absolute;

    content: "";

    background: url("../images/common/icon_nephrology.svg") center top no-repeat;

    background-size: contain;

    display: block;

    width: 60px;

    height: 55px;

    top: 0;

    left: 50%;

    -webkit-transform: translate(-50%, 0%);

    /* Safari用 */

    transform: translate(-50%, 0%); }



/***************************************/

.top_menu {

  background: linear-gradient(to bottom, #c7e8fa, #eaf6fd);

  padding: 40px 0;

  margin: 0 auto 100px; }

  .top_menu ul {

    width: calc(100% - 80px);

    max-width: 800px;

    margin: 0 auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    -webkit-justify-content: space-between;

    justify-content: space-between;

    align-items: stretch; }

  .top_menu li {

    border-radius: 15px;

    width: calc((100% - 40px)/3);

    max-width: 380px;

    color: #fff;

    padding: 30px 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    flex-direction: column;

    flex-wrap: wrap;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    -webkit-justify-content: space-between;

    justify-content: space-between;

    font: 15px/1.8em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 500; }

    .top_menu li p {

      margin: 0 0 30px;

      padding: 0 30px; }

    .top_menu li .ttl {

      margin: 0 0 25px;

      padding: 0;

      text-align: center;

      font: 28px/1.3em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

      font-weight: 500; }

    .top_menu li a {

      display: block;

      background-color: #ffffff;

      color: #20325f;

      width: 210px;

      height: 40px;

      border-radius: 50px;

      margin: 0 auto;

      font: 15px/38px 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

      font-weight: 500;

      text-align: center; }

    .top_menu li.blue01 {

      background-color: #06b4ea; }

    .top_menu li.blue02 {

      background-color: #38a1db; }

    .top_menu li.blue03 {

      background-color: #4694d1; }



@media (min-width: 1024px) and (hover: hover) {

  .top_menu li.blue01 a:hover {

    color: #06b4ea; }

  .top_menu li.blue02 a:hover {

    color: #38a1db; }

  .top_menu li.blue03 a:hover {

    color: #4694d1; } }

@keyframes blue01 {

  0% {

    opacity: 0; }

  100% {

    opacity: 1; } }

@keyframes blue02 {

  0% {

    opacity: 0; }

  100% {

    opacity: 1; } }

@keyframes blue03 {

  0% {

    opacity: 0; }

  100% {

    opacity: 1; } }

/*max-width:1280px*/

@media (max-width: 1024px) {

  .top_menu li .ttl {

    font: 26px/1.3em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 500; }

  .top_menu li a {

    width: 190px; } }

/*max-width:1024px*/

@media (max-width: 768px) {

  .top_menu {

    padding: 50px 0;

    margin: 0 auto 100px; }

    .top_menu ul {

      width: calc(100% - 60px);

      max-width: 1280px; }

    .top_menu li {

      width: 100%;

      max-width: 640px;

      margin: 0 auto 20px;

      padding: 25px 0 30px; }

      .top_menu li .ttl {

        font: 24px/1.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

        font-weight: 500;

        margin: 0 0 20px; }

        .top_menu li .ttl br {

          display: none; }

        .top_menu li .ttl span {

          margin: 0 0 0 10px; }

    .top_menu p {

      margin: 0 0 30px;

      padding: 0 30px; } }

/*max-width:768px*/

@media (max-width: 480px) {

  .top_menu {

    padding: 50px 0;

    margin: 0 auto 100px; }

    .top_menu ul {

      width: calc(100% - 40px);

      max-width: 1280px; }

    .top_menu li {

      width: 100%;

      max-width: 640px;

      margin: 0 auto 10px;

      padding: 25px 0 30px; }

      .top_menu li .ttl {

        font: 28px/1.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

        font-weight: 500;

        margin: 0 0 20px; }

        .top_menu li .ttl span {

          font: 15px/1.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

          font-weight: 500; }

    .top_menu p {

      margin: 0 0 30px;

      padding: 0 20px; } }

/*max-width:480px*/

/***************************************/

@keyframes content {

  0% {

    bottom: -100px;

    opacity: 0; }

  100% {

    bottom: 0;

    opacity: 1; } }

.fade {

  opacity: 0; }



.content {

  max-width: 1080px;

  width: calc(100% - 80px);

  margin: 0 auto 70px;

  position: relative;

  /* li{

     font:16px/2.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

     font-weight: 400;

     position: relative;

     margin: 0 0 10px;

     padding: 0 0 0 20px;

     max-width: 445px;

     &:before{

       display: block;

       content: "";

       position: absolute;

       width: 13px;

       height: 13px;

       background-color: #a0d1f1;

       left: 0;

        top: 12px;

       border-radius: 50%;

     }

   }*/ }

  .content.active {

    animation-name: content;

    /*アニメーションの定義名*/

    animation-duration: 1.5s;

    /*アニメーション変化時間 ※デフォルト*/

    animation-fill-mode: forwards;

    animation-delay: 0s; }

  .content:last-of-type {

    margin: 0 auto 250px; }

  .content h2 {

    color: #008fc9;

    font: 22px/1.6em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 500;

    border-bottom: 2px solid #dcdddd;

    position: relative;

    padding: 0 0 15px 0;

    margin: 0 0 25px; }

    .content h2:before {

      position: absolute;

      content: "";

      content: #fff;

      width: 260px;

      height: 2px;

      background-color: #5fb4e6;

      z-index: 1;

      display: block;

      left: 0;

      bottom: -2px; }

  .content p {

    font: 16px/2.4em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 400; }

  .content .list_box {

    border: 1px solid #c9caca;

    padding: 40px 40px 30px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    -webkit-justify-content: space-between;

    justify-content: space-between;

    /* ul{

       width: calc((100% - 50px)/2);

     }*/ }

  .content .flex_box {

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    -webkit-justify-content: space-between;

    justify-content: space-between;

    /*ul{

      width: 45%;

      max-width: 435px;

    }*/ }

    .content .flex_box img {

      width: 45%;

      max-width: 400px; }

  .content dt {

    background-color: #008fc9;

    color: #fff;

    display: inline-block;

    font: 16px/26px 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 400;

    padding: 0 20px;

    margin: 0 0 10px; }

  .content dd {

    font: 16px/2.2em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 400;

    margin: 0 0 50px; }



.content ul.flex {

  display: -webkit-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-justify-content: space-between;

  justify-content: space-between;

  align-items: flex-start; }

  .content ul.flex li {

    width: calc((100% - 30px)/2); }

.content ul li {

  font: 16px/1.6em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

  font-weight: 400;

  position: relative;

  margin: 0 0 10px;

  padding: 0 0 0 15px; }

  .content ul li:before {

    display: block;

    content: "";

    position: absolute;

    width: 10px;

    height: 10px;

    background-color: #a0d1f1;

    left: 0;

    top: 8px;

    border-radius: 50%; }



/*max-width:1280px*/

@media (max-width: 1024px) {

  .content ul.flex li {

    width: 100%; } }

/*max-width:1024px*/

@media (max-width: 768px) {

  .content {

    max-width: 1080px;

    width: calc(100% - 60px);

    margin: 0 auto 70px; }

    .content:last-of-type {

      margin: 0 auto 250px; }

    .content .list_box {

      padding: 25px;

      display: block; }

      .content .list_box ul {

        width: 100%; }

    .content .flex_box {

      display: block; }

      .content .flex_box ul {

        width: 100%;

        max-width: 100%; }

      .content .flex_box dl {

        width: 100%;

        max-width: 100%; }

      .content .flex_box img {

        width: 100%;

        max-width: 400px;

        display: block;

        margin: 0 auto; } }

/*max-width:768px*/

@media (max-width: 480px) {

  .content {

    max-width: 1080px;

    width: calc(100% - 40px);

    margin: 0 auto 70px; }

    .content:last-of-type {

      margin: 0 auto 150px; }

    .content .list_box {

      padding: 20px; }

    .content h2 {

      font: 20px/1.6em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

      font-weight: 500;

      padding: 0 0 10px;

      margin: 0 0 25px; } }

/*max-width:480px*/