@charset "UTF-8";

/* Scss Document */

.body {

  position: relative; }



.txt_header h1 {

  color: #ec6d7b;

  position: relative;

  padding: 55px 0 0 0; }

  .txt_header h1:before {

    position: absolute;

    content: "";

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

    background-size: 35px auto;

    display: block;

    width: 35px;

    height: 50px;

    top: -10px;

    left: 50%;

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

    /* Safari用 */

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



.fade {

  opacity: 0; }



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

.top_menu {

  background: linear-gradient(to bottom, #fadce9, #fdeeed);

  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;

      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;

      color: #20325f; }

    .top_menu li.pink01 {

      background-color: #f29c9f; }

    .top_menu li.pink02 {

      background-color: #ed7984; }

    .top_menu li.pink03 {

      background-color: #e9546b; }



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

  .top_menu li.pink01 a:hover {

    color: #f29c9f; }

  .top_menu li.pink02 a:hover {

    color: #ed7984; }

  .top_menu li.pink03 a:hover {

    color: #e9546b; } }

@keyframes pink01 {

  0% {

    opacity: 0; }

  100% {

    opacity: 1; } }

@keyframes pink02 {

  0% {

    opacity: 0; }

  100% {

    opacity: 1; } }

@keyframes pink03 {

  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 30px;

      padding: 25px 0 10px; }

      .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; } }

.content {

  max-width: 1080px;

  width: calc(100% - 80px);

  margin: 0 auto 70px;

  position: relative; }

  .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: #dd6673;

    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: #ec6d7b;

      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; }

  .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: 55%;

      max-width: 550px;

    }*/ }

    .content .flex_box dl {

      max-width: 620px; }

    .content .flex_box img {

      width: calc(100% - 620px);

      max-width: 450px;

      height: 100% !important; }

  .content dt {

    background-color: #dd6673;

    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;

    text-align: justify;

    text-justify: inter-ideograph; }

    .content dd a {

      position: relative;

      border-bottom: 2px solid #e9546b;

      padding: 0 15px 0 0;

      color: #333; }

      .content dd a:before {

        position: absolute;

        content: "";

        right: 0;

        top: 9px;

        width: 6px;

        height: 6px;

        border-top: 2px solid #e9546b;

        border-right: 2px solid #e9546b;

        -webkit-transform: rotate(45deg);

        transform: rotate(45deg); }



.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: #f29c9f;

    left: 0;

    top: 8px;

    border-radius: 50%; }



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

  .content dd a:hover {

    color: #e9546b; }

    .content dd a:hover:before {

      right: -10px; } }

/*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*/