@charset "UTF-8";
/**
 mixin
 */
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
article {
  color: #666666; }
  article em {
    font-style: normal;
    color: #e67baa;
    font-weight: bold; }
  article nav {
    padding: 25px 0;
    background: #e67baa; }
    article nav ul {
      width: 980px;
      display: flex;
      justify-content: center;
      margin: 0 auto; }
      article nav ul li {
        min-width: 145px;
        display: flex;
        align-items: center;
        justify-content: center; }
        article nav ul li a {
          display: block;
          width: 100%;
          height: 100%;
          border-left: 1px solid #fff;
          text-decoration: none;
          text-align: center;
          padding: 3px 25px; }
          article nav ul li a p {
            font-size: 15px;
            color: #fff;
            line-height: 1.4;
            font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HGS明朝E", メイリオ, Meiryo, serif, Georgia; }
            article nav ul li a p.en {
              font-size: 12px;
              font-family: "Questrial", serif;
              margin: 0 0 5px;
              letter-spacing: 2px; }
        article nav ul li:last-child a {
          border-right: 1px solid #fff; }
    @media (max-width: 979px) {
      article nav {
        padding: 0; }
        article nav ul {
          width: 100%;
          flex-wrap: wrap;
          justify-content: flex-start; }
          article nav ul li {
            width: 50%;
            min-width: inherit;
            border-bottom: 1px solid #fff; }
            article nav ul li a {
              display: flex;
              justify-content: center;
              align-content: center;
              flex-direction: column;
              height: 14vw;
              border-left: none;
              padding: 0; }
              article nav ul li a p {
                font-size: 4vw; }
                article nav ul li a p.en {
                  font-size: 3vw;
                  margin: 0 0 0.5vw; }
            article nav ul li:last-child a {
              border-right: none; }
            article nav ul li:nth-child(odd) {
              border-right: 1px solid #fff; } }
  article section {
    font-size: 18px; }
    @media (max-width: 979px) {
      article section {
        font-size: 3.5vw; } }
    article section header.index {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: relative;
      margin: 0 0 60px;
      color: #e67baa; }
      article section header.index h2 {
        font-size: 50px;
        font-weight: normal;
        font-family: "Questrial", serif;
        line-height: 1;
        margin: 0;
        position: relative; }
        article section header.index h2::before {
          content: "";
          width: 46px;
          height: 59px;
          background: url("/assets/nose/hyaluron/finehaultra/images/icon01.png") center top/100% auto no-repeat;
          position: absolute;
          left: -57px;
          top: -25px; }
      article section header.index p {
        font-weight: bold; }
      @media (max-width: 979px) {
        article section header.index {
          margin: 0 0 6vw; }
          article section header.index h2 {
            font-size: 8vw;
            margin: 0 0 0.5vw; }
            article section header.index h2::before {
              width: 6.5vw;
              height: 9vw;
              left: -7vw;
              top: -5vw; }
          article section header.index p {
            font-size: 4vw; } }
    article section#mv {
      background: url("/assets/nose/hyaluron/finehaultra/images/mv_bg.jpg") center top no-repeat; }
      @media (max-width: 979px) {
        article section#mv {
          background: none;
          text-align: center; } }
    article section.what {
      padding: 95px 0 125px;
      background: url("/assets/nose/hyaluron/finehaultra/images/what01.jpg") center top/cover no-repeat; }
      article section.what p {
        text-align: center;
        font-size: 20px;
        line-height: 2; }
      article section.what .container01 {
        width: 700px;
        background: #fff;
        padding: 1px 110px 55px 110px;
        margin: 100px auto 0; }
        article section.what .container01 .index {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 275px;
          height: 50px;
          font-size: 22px;
          font-weight: bold;
          background: #415dac;
          color: #fff;
          border-radius: 100px;
          position: relative;
          margin: -25px auto 0; }
          article section.what .container01 .index::before {
            content: "";
            width: 16px;
            height: 12px;
            -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
                    clip-path: polygon(0 0, 100% 0, 50% 100%);
            background: #415dac;
            position: absolute;
            left: 50%;
            bottom: -10px;
            transform: translate(-50%, 0); }
        article section.what .container01 ul {
          margin: 45px 0 0; }
          article section.what .container01 ul li {
            padding: 0 0 0 40px;
            background: url("/assets/nose/hyaluron/finehaultra/images/icon02.png") left 4px no-repeat; }
            article section.what .container01 ul li + li {
              margin-top: 10px; }
      @media (max-width: 979px) {
        article section.what {
          padding: 9vw 0 13vw; }
          article section.what p {
            font-size: 3.9vw;
            line-height: 2; }
          article section.what .container01 {
            width: 94%;
            padding: 1vw 5vw 5vw 5vw;
            margin: 10vw auto 0; }
            article section.what .container01 .index {
              width: 50vw;
              height: 9vw;
              font-size: 4vw;
              margin: -4.5vw auto 0; }
              article section.what .container01 .index::before {
                width: 4;
                height: 3vw;
                bottom: -2.5vw; }
            article section.what .container01 ul {
              margin: 5vw 0 0; }
              article section.what .container01 ul li {
                font-size: 4vw;
                padding: 0 0 0 7vw;
                background-position: left 0.3vw;
                background-size: 5vw auto; }
                article section.what .container01 ul li + li {
                  margin-top: 1.5vw; } }
    article section.about {
      padding: 95px 0 165px;
      background: #f2f3f6;
      overflow: hidden; }
      article section.about .container01 {
        display: grid;
        grid-template-columns: 1fr 100px 780px 100px 1fr;
        grid-template-rows: 1fr;
        position: relative;
        z-index: 0; }
        article section.about .container01 + .container01 {
          margin-top: 138px; }
        article section.about .container01::before {
          content: "";
          position: absolute;
          z-index: 0; }
        article section.about .container01.img01 {
          z-index: 1; }
          article section.about .container01.img01::before {
            width: 763px;
            height: 492px;
            background: url("/assets/nose/hyaluron/finehaultra/images/point01.png") center top/cover no-repeat;
            left: 50%;
            top: -60px;
            transform: translate(60px, 0); }
        article section.about .container01.img02::before {
          width: 707px;
          height: 559px;
          background: url("/assets/nose/hyaluron/finehaultra/images/point02.png") center top/cover no-repeat;
          right: 50%;
          top: -240px;
          transform: translate(-200px, 0); }
        article section.about .container01 .bg01,
        article section.about .container01 .bg02 {
          background: rgba(255, 255, 255, 0.8);
          box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.15);
          grid-row: 1 / 2;
          position: relative;
          z-index: 2; }
        article section.about .container01 .inner01,
        article section.about .container01 .inner02 {
          grid-row: 1 / 2;
          position: relative;
          z-index: 3; }
          article section.about .container01 .inner01 .index,
          article section.about .container01 .inner02 .index {
            display: flex;
            align-items: center;
            color: #415dac;
            margin: 0 0 30px; }
            article section.about .container01 .inner01 .index .point,
            article section.about .container01 .inner02 .index .point {
              width: 121px;
              height: 119px;
              background: url("/assets/nose/hyaluron/finehaultra/images/icon03.png") no-repeat;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              text-align: center;
              padding: 0 0 0 5px; }
              article section.about .container01 .inner01 .index .point p,
              article section.about .container01 .inner02 .index .point p {
                font-size: 13px;
                font-weight: bold; }
                article section.about .container01 .inner01 .index .point p.num,
                article section.about .container01 .inner02 .index .point p.num {
                  font-size: 48px;
                  font-weight: normal;
                  line-height: 1; }
            article section.about .container01 .inner01 .index h3,
            article section.about .container01 .inner02 .index h3 {
              font-size: 30px;
              margin: 0 0 0 20px; }
          article section.about .container01 .inner01 > p + p,
          article section.about .container01 .inner02 > p + p {
            margin-top: 1em; }
          article section.about .container01 .inner01 > figure,
          article section.about .container01 .inner02 > figure {
            margin-top: 30px; }
        article section.about .container01 .bg01 {
          grid-column: 1 / 4; }
        article section.about .container01 .inner01 {
          grid-column: 2 / 4;
          padding: 60px 80px 65px 0; }
        article section.about .container01 .bg02 {
          grid-column: 3 / 6; }
        article section.about .container01 .inner02 {
          grid-column: 3 / 5;
          padding: 60px 0 65px 80px; }
      @media (max-width: 979px) {
        article section.about {
          padding: 9vw 0 18vw; }
          article section.about .container01 {
            grid-template-columns: 1fr 4vw 84vw 4vw 1fr; }
            article section.about .container01 + .container01 {
              margin-top: 7vw; }
            article section.about .container01.img01::before {
              width: 80vw;
              height: 65vw;
              background-size: 100% auto;
              top: -5vw;
              transform: translate(5vw, 0); }
            article section.about .container01.img02::before {
              width: 80vw;
              height: 65vw;
              background-size: 100% auto;
              top: -17vw;
              transform: translate(-10vw, 0); }
            article section.about .container01 .bg01,
            article section.about .container01 .bg02 {
              box-shadow: 0 1vw 3vw 0 rgba(0, 0, 0, 0.15); }
            article section.about .container01 .inner01 .index,
            article section.about .container01 .inner02 .index {
              margin: 0 0 4vw; }
              article section.about .container01 .inner01 .index .point,
              article section.about .container01 .inner02 .index .point {
                width: 16vw;
                height: 16vw;
                background-size: 100% auto;
                padding: 0 0 0 1vw; }
                article section.about .container01 .inner01 .index .point p,
                article section.about .container01 .inner02 .index .point p {
                  font-size: 2.5vw; }
                  article section.about .container01 .inner01 .index .point p.num,
                  article section.about .container01 .inner02 .index .point p.num {
                    font-size: 6vw; }
              article section.about .container01 .inner01 .index h3,
              article section.about .container01 .inner02 .index h3 {
                flex: 1;
                font-size: 4.3vw;
                margin: 0 0 0 2vw; }
            article section.about .container01 .inner01 > p + p,
            article section.about .container01 .inner02 > p + p {
              margin-top: 1em; }
            article section.about .container01 .inner01 > figure,
            article section.about .container01 .inner02 > figure {
              margin-top: 4vw; }
            article section.about .container01 .inner01 {
              padding: 4vw 0; }
            article section.about .container01 .bg01 {
              grid-column: 1 / 5; }
            article section.about .container01 .inner02 {
              padding: 4vw 0; }
            article section.about .container01 .bg02 {
              grid-column: 2 / 6; } }
    article section.bui {
      height: 539px;
      background: url("/assets/nose/hyaluron/finehaultra/images/bui01.jpg") center top/auto 100% no-repeat;
      position: relative; }
      article section.bui p {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 220px;
        height: 160px;
        background: #767982;
        background: linear-gradient(0deg, #767982 0%, #56575c 100%);
        color: #fff;
        font-size: 30px;
        position: absolute;
        left: 50%;
        top: -50px;
        transform: translate(200px, 0); }
        article section.bui p::before {
          content: "";
          display: block;
          width: 240px;
          height: 180px;
          position: absolute;
          left: -10px;
          top: -10px;
          border: 1px solid #767982; }
      @media (max-width: 979px) {
        article section.bui {
          height: 68vw;
          background-size: auto 100%; }
          article section.bui p {
            width: 30vw;
            height: 20vw;
            font-size: 5vw;
            top: -5vw;
            left: inherit;
            right: 5vw;
            transform: translate(0, 0); }
            article section.bui p::before {
              width: 32vw;
              height: 22vw;
              left: -1vw;
              top: -1vw; } }
    article section.price {
      padding: 95px 0;
      background: #eaecef; }
      article section.price .container01 {
        width: 980px;
        margin: 0 auto;
        padding: 45px;
        background: #fff; }
        article section.price .container01 ul li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: bold;
          padding: 0 80px; }
          article section.price .container01 ul li + li {
            margin-top: 25px; }
          article section.price .container01 ul li.monitor {
            color: #d3526d; }
            article section.price .container01 ul li.monitor * {
              border-color: #d3526d !important; }
          article section.price .container01 ul li > div.left {
            color: #666666;
            text-align: center;
            margin-right: 50px; }
            article section.price .container01 ul li > div.left p {
              font-size: 22px; }
              article section.price .container01 ul li > div.left p span {
                display: block;
                width: 215px;
                border: 1px solid #666666;
                padding: 0; }
              article section.price .container01 ul li > div.left p + p {
                margin-top: 5px; }
          article section.price .container01 ul li > div.right {
            display: flex;
            justify-content: flex-end;
            align-items: flex-end; }
            article section.price .container01 ul li > div.right p {
              color: #e67baa; }
              article section.price .container01 ul li > div.right p.amount {
                font-size: 28px;
                margin-right: 20px; }
              article section.price .container01 ul li > div.right p.num {
                font-size: 80px;
                line-height: 1; }
                article section.price .container01 ul li > div.right p.num span {
                  font-size: 46px;
                  position: relative; }
                  article section.price .container01 ul li > div.right p.num span span {
                    font-size: 17px;
                    position: absolute;
                    white-space: nowrap;
                    right: 1px;
                    bottom: 3.2em;
                    letter-spacing: 0.2em; }
        article section.price .container01 .price_ttl {
          text-align: center;
          font-size: 30px;
          margin-bottom: 10px; }
        article section.price .container01 .clinic_wrap {
          margin-top: 10px; }
          article section.price .container01 .clinic_wrap .modalbtn {
            justify-content: center; }
            article section.price .container01 .clinic_wrap .modalbtn a {
              background-color: #e67baa;
              min-width: 280px; }
      article section.price .caution {
        padding: 20px 40px;
        background: #fff;
        margin: 40px 0 0; }
        article section.price .caution > p:first-child {
          font-size: 28px;
          font-weight: bold;
          text-align: center;
          margin: 0 0 5px; }
      @media (max-width: 979px) {
        article section.price {
          padding: 9vw 4vw 13vw; }
          article section.price .container01 {
            width: 100%;
            padding: 5vw; }
            article section.price .container01 ul li {
              flex-direction: column;
              padding: 0; }
              article section.price .container01 ul li + li {
                margin-top: 5vw; }
              article section.price .container01 ul li > div.left {
                margin: 0 0 3vw; }
                article section.price .container01 ul li > div.left p {
                  font-size: 4vw; }
                  article section.price .container01 ul li > div.left p span {
                    width: 45vw; }
                  article section.price .container01 ul li > div.left p + p {
                    margin-top: 1.5vw; }
              article section.price .container01 ul li > div.right {
                margin: 1vw 0 0; }
                article section.price .container01 ul li > div.right p.amount {
                  font-size: 6vw;
                  margin-right: 3vw; }
                article section.price .container01 ul li > div.right p.num {
                  font-size: 13vw; }
                  article section.price .container01 ul li > div.right p.num span {
                    font-size: 8vw; }
                    article section.price .container01 ul li > div.right p.num span span {
                      font-size: 3.2vw;
                      right: 0;
                      bottom: 3em;
                      letter-spacing: 0.2em; }
            article section.price .container01 .price_ttl {
              font-size: 5vw;
              margin-bottom: 1vw; }
          article section.price .caution {
            padding: 3vw 4vw;
            margin: 4vw 0 0; }
            article section.price .caution > p:first-child {
              font-size: 4.5vw;
              margin: 0 0 1vw; } }
    article section.photo {
      padding: 95px 0 135px;
      background: url("/assets/nose/hyaluron/finehaultra/images/what01.jpg") center top/100% auto no-repeat #e2e4e7; }
      article section.photo .inner {
        width: 755px;
        margin: 0 auto; }
        article section.photo .inner .dr {
          margin: 5px 0 0;
          text-align: right; }
          article section.photo .inner .dr + figure {
            margin-top: 50px; }
      article section.photo .risk {
        width: 980px;
        margin: 50px auto 0; }
      @media screen and (max-width: 979px) {
        article section.photo {
          padding: 9vw 4vw 13vw;
          background-position: right top;
          background-size: 200% auto; }
          article section.photo .inner {
            width: 100%; }
            article section.photo .inner .dr {
              margin: 1.5vw 0 0; }
              article section.photo .inner .dr + figure {
                margin-top: 5vw; }
          article section.photo .risk {
            width: 100%;
            margin: 6vw auto 0; }
            article section.photo .risk .mhlw-risk {
              padding: 0;
              min-height: inherit; }
              article section.photo .risk .mhlw-risk > .mhlw-risk-single {
                margin: 0;
                font-size: 2.5vw;
                padding: 2.5vw; } }
    article section.qa {
      padding: 95px 0 135px; }
      article section.qa .faq-box {
        width: 830px;
        margin: 0 auto;
        position: relative; }
        article section.qa .faq-box > .question,
        article section.qa .faq-box > .answer {
          min-height: inherit; }
          article section.qa .faq-box > .question::before,
          article section.qa .faq-box > .answer::before {
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 500;
            width: 40px;
            height: 40px;
            font-size: 20px;
            border-radius: 100%;
            z-index: 1;
            top: -4px; }
        article section.qa .faq-box > .question {
          border-bottom: 1px solid #666666;
          padding-bottom: 25px;
          position: relative; }
          article section.qa .faq-box > .question::before {
            color: #fff;
            background: #e67baa; }
          article section.qa .faq-box > .question h3 {
            min-height: inherit;
            color: #e67baa; }
        article section.qa .faq-box > .answer {
          min-height: inherit;
          font-size: 20px;
          padding-top: 20px;
          margin: 0; }
          article section.qa .faq-box > .answer::before {
            color: #e67baa;
            background: #fff;
            border: 2px solid #e67baa;
            top: 25px;
            left: 2px; }
          article section.qa .faq-box > .answer + .question {
            margin-top: 55px; }
      @media (max-width: 979px) {
        article section.qa {
          padding: 9vw 4vw 13vw; }
          article section.qa .faq-box {
            width: 100%; }
            article section.qa .faq-box > .question,
            article section.qa .faq-box > .answer {
              padding: 0 0 0 10vw; }
              article section.qa .faq-box > .question h3,
              article section.qa .faq-box > .answer h3 {
                font-size: 4.5vw; }
              article section.qa .faq-box > .question p,
              article section.qa .faq-box > .answer p {
                font-size: 3.5vw; }
              article section.qa .faq-box > .question::before,
              article section.qa .faq-box > .answer::before {
                width: 7vw;
                height: 7vw;
                font-size: 4vw;
                top: -0.5vw; }
            article section.qa .faq-box > .question {
              padding-bottom: 3vw; }
            article section.qa .faq-box > .answer {
              font-size: 4.5vw;
              padding-top: 3vw; }
              article section.qa .faq-box > .answer::before {
                width: 7vw;
                height: 7vw;
                top: 3vw;
                left: 0; }
              article section.qa .faq-box > .answer + .question {
                margin-top: 5vw; } }
    article section.clinic #clinic-map {
      min-height: 2000px; }
    article section.clinic .container01 {
      width: 980px;
      margin: 0 auto; }
    @media (max-width: 979px) {
      article section.clinic #clinic-map {
        margin-top: 0; }
      article section.clinic .container01 {
        width: 100%; } }