@media screen and (max-width: 768px) {
  .topPage section {
    overflow: hidden; } }
.topPage .ttlWrap {
  position: relative;
  display: inline-block;
  margin: 0 auto 15px; }
  .topPage .ttlWrap .numTx {
    position: absolute;
    top: -12px;
    right: -62px;
    z-index: 9;
    background: #819ab1;
    border-radius: 90px;
    width: 52px;
    height: 52px;
    border-radius: 90px;
    text-align: center;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.2;
    padding: 11px 0; }
    @media screen and (max-width: 768px) {
      .topPage .ttlWrap .numTx {
        right: -40px;
        top: -16px; } }
    .topPage .ttlWrap .numTx span {
      display: block;
      transform: scale(0.9);
      font-size: 1.0rem; }
  .topPage .ttlWrap .secTtl {
    text-align: center; }
    .topPage .ttlWrap .secTtl p {
      display: inline-block;
      margin: 0 auto;
      position: relative;
      font-size: 3.6rem;
      font-family: "Zen Old Mincho", serif;
      line-height: 1.65; }
      @media screen and (max-width: 768px) {
        .topPage .ttlWrap .secTtl p {
          font-size: 2.0rem; } }
      .topPage .ttlWrap .secTtl p .color {
        color: #2c6395; }
      .topPage .ttlWrap .secTtl p .line01, .topPage .ttlWrap .secTtl p .line02 {
        position: absolute;
        top: 55%;
        left: -45px;
        transform: translateY(-50%);
        width: 1px;
        height: 80%;
        background: #000; }
        @media screen and (max-width: 768px) {
          .topPage .ttlWrap .secTtl p .line01, .topPage .ttlWrap .secTtl p .line02 {
            left: -25px;
            height: 90%;
            top: 50%; } }
        .topPage .ttlWrap .secTtl p .line01::before, .topPage .ttlWrap .secTtl p .line01::after, .topPage .ttlWrap .secTtl p .line02::before, .topPage .ttlWrap .secTtl p .line02::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 8px;
          height: 1px;
          background: #000; }
        .topPage .ttlWrap .secTtl p .line01::after, .topPage .ttlWrap .secTtl p .line02::after {
          top: auto;
          bottom: 0; }
      .topPage .ttlWrap .secTtl p .line02 {
        left: auto;
        right: -45px; }
        @media screen and (max-width: 768px) {
          .topPage .ttlWrap .secTtl p .line02 {
            right: -25px; } }
        .topPage .ttlWrap .secTtl p .line02::before, .topPage .ttlWrap .secTtl p .line02::after {
          left: auto;
          right: 0; }
.topPage .secTtl02 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 3.6rem;
  font-family: "Zen Old Mincho", serif;
  line-height: 1.7; }
  @media screen and (max-width: 768px) {
    .topPage .secTtl02 {
      font-size: 2.4rem;
      margin-bottom: 5px; } }
  .topPage .secTtl02 span {
    font-family: "Roboto", sans-serif;
    font-size: 1.4rem;
    display: block;
    color: #819ab1; }
    @media screen and (max-width: 768px) {
      .topPage .secTtl02 span {
        font-size: 1.2rem; } }
.topPage .readTx {
  text-align: center;
  font-size: 2.0rem;
  line-height: 2.2; }
  @media screen and (max-width: 768px) {
    .topPage .readTx {
      font-size: 1.4rem; } }
  .topPage .readTx .big {
    font-size: 3.0rem; }
    @media screen and (max-width: 768px) {
      .topPage .readTx .big {
        font-size: 2.4rem; } }
  @media screen and (max-width: 768px) {
    .topPage .readTx.pcCenter {
      text-align: left; } }
.topPage .mv {
  height: 100vh;
  position: relative;
  background: url("../cmn_img/top/mv_bg.jpg") no-repeat center center/cover;
  width: 100%; }
  @media screen and (max-width: 768px) {
    .topPage .mv {
      background-image: url("../cmn_img/top/mv_bg_sp.jpg");
      padding-top: 165.3333%;
      height: auto; } }
  .topPage .mv .txWrap {
    width: calc(100% - 40px);
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9; }
    .topPage .mv .txWrap .logo {
      width: 195px;
      margin: 0 auto; }
      @media screen and (max-width: 768px) {
        .topPage .mv .txWrap .logo {
          width: 150px; } }
    .topPage .mv .txWrap .copy {
      display: block;
      line-height: 1.8;
      font-size: 3.2rem;
      font-family: "Zen Old Mincho", serif;
      margin-top: 20px; }
      @media screen and (max-width: 768px) {
        .topPage .mv .txWrap .copy {
          font-size: 1.7rem; } }
    .topPage .mv .txWrap .priceWrap {
      font-size: 0;
      padding: 10px 0;
      max-width: 540px;
      width: calc(100% - 40px);
      margin: 30px auto 0 auto;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000; }
      @media screen and (max-width: 768px) {
        .topPage .mv .txWrap .priceWrap {
          margin-top: 20px; } }
      .topPage .mv .txWrap .priceWrap p {
        display: inline-block;
        vertical-align: middle; }
        .topPage .mv .txWrap .priceWrap p.tx01 {
          font-size: 5.8rem;
          font-family: "Roboto", sans-serif;
          margin-right: 5px;
          line-height: 1; }
          @media screen and (max-width: 768px) {
            .topPage .mv .txWrap .priceWrap p.tx01 {
              font-size: 3.8rem; } }
        .topPage .mv .txWrap .priceWrap p.tx02 {
          line-height: 1.5;
          font-size: 2.6rem;
          line-height: 1.15; }
          @media screen and (max-width: 768px) {
            .topPage .mv .txWrap .priceWrap p.tx02 {
              font-size: 1.6rem; } }
          .topPage .mv .txWrap .priceWrap p.tx02 span {
            display: block;
            font-size: 1.4rem; }
            @media screen and (max-width: 768px) {
              .topPage .mv .txWrap .priceWrap p.tx02 span {
                font-size: 1.0rem;
                transform: scale(0.9); } }
        .topPage .mv .txWrap .priceWrap p.tx03 {
          margin-left: 15px;
          font-size: 1.6rem;
          text-align: left;
          line-height: 1.65; }
          @media screen and (max-width: 768px) {
            .topPage .mv .txWrap .priceWrap p.tx03 {
              font-size: 1.1rem; } }
.topPage .sec01 {
  background: url("../cmn_img/top/sec01_bg.jpg") no-repeat center bottom/cover; }
  @media screen and (max-width: 768px) {
    .topPage .sec01 {
      background-image: url("../cmn_img/top/sec01_bg_sp.jpg");
      background-position: center bottom;
      padding-bottom: 240px; } }
  .topPage .sec01 .tx01 {
    font-size: 2.0rem;
    text-align: center;
    line-height: 2.2; }
    @media screen and (max-width: 768px) {
      .topPage .sec01 .tx01 {
        font-size: 1.5rem; } }
  .topPage .sec01 .btnWrap {
    margin-top: 50px; }
    @media screen and (max-width: 768px) {
      .topPage .sec01 .btnWrap {
        margin-top: 35px; } }
    .topPage .sec01 .btnWrap .ttl {
      font-size: 2.8rem;
      text-align: center; }
      @media screen and (max-width: 768px) {
        .topPage .sec01 .btnWrap .ttl {
          font-size: 2.4rem; } }
      .topPage .sec01 .btnWrap .ttl p {
        display: flex;
        align-items: center;
        font-family: "Zen Old Mincho", serif; }
        .topPage .sec01 .btnWrap .ttl p span {
          font-size: 3.8rem; }
          @media screen and (max-width: 768px) {
            .topPage .sec01 .btnWrap .ttl p span {
              font-size: 3.4rem; } }
        .topPage .sec01 .btnWrap .ttl p::before, .topPage .sec01 .btnWrap .ttl p::after {
          content: "";
          height: 1px;
          flex-grow: 1;
          background-color: #666; }
        .topPage .sec01 .btnWrap .ttl p::before {
          margin-right: 1rem; }
        .topPage .sec01 .btnWrap .ttl p::after {
          margin-left: 1rem; }
    @media screen and (max-width: 768px) {
      .topPage .sec01 .btnWrap .btnList > li {
        margin: 0 0 10px;
        width: 100%; } }
    .topPage .sec01 .btnWrap .btnList > li a {
      display: block;
      background: #fff url("../cmn_img/arw_btm.png") no-repeat center right 15px/11px 6px;
      border-radius: 3px;
      text-align: center;
      padding: 18px 15px;
      font-size: 1.7rem;
      line-height: 1.7; }
      @media screen and (max-width: 768px) {
        .topPage .sec01 .btnWrap .btnList > li a {
          font-size: 1.5rem; } }
      .topPage .sec01 .btnWrap .btnList > li a span {
        color: #2c6395;
        font-weight: 600; }
      .topPage .sec01 .btnWrap .btnList > li a:hover {
        background-position: top 53% right 15px;
        background-color: #e4ecf2; }
.topPage .sec02 .img01 {
  max-width: 389px;
  width: 100%;
  margin: 15px auto 0; }
  @media screen and (max-width: 768px) {
    .topPage .sec02 .img01 {
      max-width: 305px; } }
.topPage .sec03 {
  background: #f5f5f5; }
  .topPage .sec03 .checkList {
    margin-top: 40px;
    border-radius: 3px; }
    @media screen and (max-width: 768px) {
      .topPage .sec03 .checkList {
        margin-top: 30px; } }
    .topPage .sec03 .checkList > li {
      text-align: center;
      background: #fff;
      width: 50%;
      display: inline-block;
      vertical-align: top;
      padding: 30px 40px 25px;
      border-right: 2px solid #f5f5f5;
      position: relative; }
      @media screen and (max-width: 768px) {
        .topPage .sec03 .checkList > li {
          padding: 25px 15px 20px; } }
      .topPage .sec03 .checkList > li .ttl {
        text-align: center;
        font-size: 1.6rem;
        background: #d3dee7;
        border-radius: 90px;
        width: 30%;
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        padding: 3px;
        border-radius: 90px; }
        @media screen and (max-width: 768px) {
          .topPage .sec03 .checkList > li .ttl {
            font-size: 1.4rem;
            width: 70%;
            padding-top: 1px;
            line-height: 1.7; } }
        .topPage .sec03 .checkList > li .ttl::before {
          content: "";
          position: absolute;
          bottom: -7px;
          left: 50%;
          transform: translateX(-50%);
          display: inline-block;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 7px 6px 0px 6px;
          border-color: #d3dee7 transparent transparent transparent; }
        .topPage .sec03 .checkList > li .ttl::after {
          content: "";
          position: absolute;
          top: -20px;
          left: -10px;
          background: url("../cmn_img/top/sec03_item01.png") no-repeat center center/cover;
          width: 30px;
          height: 39px;
          z-index: 9; }
      .topPage .sec03 .checkList > li .txList {
        display: inline-block;
        margin: 0 auto; }
        .topPage .sec03 .checkList > li .txList > li {
          text-align: left;
          font-size: 1.7rem;
          padding-left: 22px;
          background: url("../cmn_img/top/sec03_icon01.png") no-repeat center left/13px 9px; }
          @media screen and (max-width: 768px) {
            .topPage .sec03 .checkList > li .txList > li {
              font-size: 1.2rem;
              background-size: 10px 7px;
              padding-left: 18px; } }
      .topPage .sec03 .checkList > li:nth-child(2) .ttl {
        color: #fff;
        background-color: #819ab1; }
        .topPage .sec03 .checkList > li:nth-child(2) .ttl::before {
          border-color: #819ab1 transparent transparent transparent; }
        .topPage .sec03 .checkList > li:nth-child(2) .ttl::after {
          background-image: url("../cmn_img/top/sec03_item02.png");
          width: 35px;
          height: 35px;
          left: auto;
          right: -10px; }
      .topPage .sec03 .checkList > li:nth-child(2) .txList > li {
        background-image: url("../cmn_img/top/sec03_icon02.png"); }
.topPage .sec04 .ttlWrap .numTx {
  right: -58px; }
.topPage .sec04 .img01 {
  max-width: 427px;
  width: 100%;
  margin: 25px auto 0; }
.topPage .sec05 .img01 {
  margin: 10px auto 0 auto;
  max-width: 413px;
  width: 100%;
  display: block; }
.topPage .sec05 .stepList {
  margin-top: 35px; }
  .topPage .sec05 .stepList > li {
    background: #ecf2f6;
    border-radius: 3px;
    padding: 25px;
    font-size: 0;
    position: relative; }
    @media screen and (max-width: 768px) {
      .topPage .sec05 .stepList > li {
        padding: 15px; } }
    .topPage .sec05 .stepList > li::after {
      content: "01";
      position: absolute;
      top: -20px;
      right: 25px;
      line-height: 1;
      font-size: 4.6rem;
      color: #c8d7e3;
      font-family: "Roboto", sans-serif; }
      @media screen and (max-width: 768px) {
        .topPage .sec05 .stepList > li::after {
          font-size: 4.0rem;
          top: -15px;
          right: 20px; } }
    .topPage .sec05 .stepList > li::before {
      content: "";
      position: absolute;
      top: 50%;
      right: -15px;
      transform: translateY(-50%);
      display: inline-block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 15px 0px 15px 15px;
      border-color: transparent transparent transparent #ecf2f6; }
      @media screen and (max-width: 768px) {
        .topPage .sec05 .stepList > li::before {
          border-color: #ecf2f6 transparent transparent transparent;
          border-width: 12px 30px 0px 30px;
          left: 50%;
          top: auto;
          bottom: -11px;
          transform: translateX(-50%) translateY(0); } }
    .topPage .sec05 .stepList > li .thum {
      width: 30%;
      margin-right: 5%;
      display: inline-block;
      vertical-align: middle; }
    .topPage .sec05 .stepList > li .txWrap {
      width: 65%;
      display: inline-block;
      vertical-align: middle; }
      .topPage .sec05 .stepList > li .txWrap .ttl {
        font-size: 2.0rem;
        font-weight: 600;
        color: #06335c; }
        @media screen and (max-width: 768px) {
          .topPage .sec05 .stepList > li .txWrap .ttl {
            font-size: 1.6rem; } }
      .topPage .sec05 .stepList > li .txWrap .tx {
        font-size: 1.5rem; }
        @media screen and (max-width: 768px) {
          .topPage .sec05 .stepList > li .txWrap .tx {
            font-size: 1.2rem; } }
    .topPage .sec05 .stepList > li:nth-child(2)::after {
      content: "02"; }
    .topPage .sec05 .stepList > li:nth-child(3)::after {
      content: "03"; }
    .topPage .sec05 .stepList > li:nth-child(4)::after {
      content: "04"; }
.topPage .sec05 .lastTx {
  text-align: center; }
  .topPage .sec05 .lastTx p {
    display: inline-block;
    color: #06335c;
    border: 2px solid #06335c;
    border-radius: 3px;
    padding: 3px 22px;
    font-size: 1.8rem;
    font-weight: 600; }
    @media screen and (max-width: 768px) {
      .topPage .sec05 .lastTx p {
        font-size: 1.6rem; } }
.topPage .sec05 .img02 {
  margin: 25px auto 0;
  width: 100px;
  display: block; }
.topPage .sec05 .img03 {
  margin: 30px auto 0;
  max-width: 419px;
  width: 100%; }
.topPage .sec06 .priceList {
  margin-top: 30px;
  font-size: 0;
  border: 1px solid #ddd;
  border-radius: 3px; }
  .topPage .sec06 .priceList > li {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    padding: 45px 20px;
    text-align: center; }
    @media screen and (max-width: 768px) {
      .topPage .sec06 .priceList > li {
        width: 100%;
        padding: 25px 15px; } }
    .topPage .sec06 .priceList > li .wrap {
      display: inline-block; }
      .topPage .sec06 .priceList > li .wrap .priceTx {
        display: block;
        margin-bottom: 15px; }
        @media screen and (max-width: 768px) {
          .topPage .sec06 .priceList > li .wrap .priceTx {
            margin-bottom: 5px; } }
      .topPage .sec06 .priceList > li .wrap .tx01 {
        font-size: 1.5rem;
        color: #06335c;
        border: 1px solid #06335c;
        border-radius: 3px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
        width: 110px;
        padding: 3px 0 5px;
        text-align: center;
        line-height: 1.4;
        margin-bottom: 8px; }
        @media screen and (max-width: 768px) {
          .topPage .sec06 .priceList > li .wrap .tx01 {
            font-size: 1.4rem;
            margin-bottom: 3px;
            width: 100px; } }
      .topPage .sec06 .priceList > li .wrap .tx02 {
        display: inline-block;
        vertical-align: bottom;
        font-size: 4.8rem;
        font-family: "Roboto", sans-serif;
        line-height: 1; }
        @media screen and (max-width: 768px) {
          .topPage .sec06 .priceList > li .wrap .tx02 {
            font-size: 3.8rem; } }
      .topPage .sec06 .priceList > li .wrap .tx03 {
        font-size: 2.0rem;
        font-weight: 600;
        display: inline-block;
        vertical-align: bottom;
        margin-left: 4px; }
        @media screen and (max-width: 768px) {
          .topPage .sec06 .priceList > li .wrap .tx03 {
            font-size: 1.6rem; } }
      .topPage .sec06 .priceList > li .wrap .tx04 {
        display: inline-block;
        vertical-align: middle;
        background: #819ab1;
        color: #fff;
        font-size: 1.7rem;
        border-radius: 90px;
        padding: 1px 16px 2px; }
        @media screen and (max-width: 768px) {
          .topPage .sec06 .priceList > li .wrap .tx04 {
            font-size: 1.4rem;
            margin-top: 4px;
            display: block; } }
        .topPage .sec06 .priceList > li .wrap .tx04.blue {
          background: #06335c;
          margin-left: 5px; }
          @media screen and (max-width: 768px) {
            .topPage .sec06 .priceList > li .wrap .tx04.blue {
              margin-left: 0; } }
    .topPage .sec06 .priceList > li:nth-child(2) {
      border-left: 1px solid #ddd; }
      @media screen and (max-width: 768px) {
        .topPage .sec06 .priceList > li:nth-child(2) {
          border-left: none;
          border-top: 1px solid #ddd; } }
.topPage .sec06 .infoBox {
  background: #f5f5f5;
  padding: 35px 50px;
  margin-top: 50px;
  border-radius: 3px; }
  @media screen and (max-width: 768px) {
    .topPage .sec06 .infoBox {
      padding: 25px 20px; } }
  .topPage .sec06 .infoBox .ttl {
    text-align: center; }
    .topPage .sec06 .infoBox .ttl span {
      font-size: 1.8rem;
      display: inline-block;
      position: relative; }
      .topPage .sec06 .infoBox .ttl span::before, .topPage .sec06 .infoBox .ttl span::after {
        content: "";
        position: absolute;
        top: 50%;
        left: -20px;
        transform: translateY(-50%);
        width: 6px;
        height: 6px;
        border-radius: 90px;
        background: #06335c; }
      .topPage .sec06 .infoBox .ttl span::after {
        left: auto;
        right: -20px; }
      @media screen and (max-width: 768px) {
        .topPage .sec06 .infoBox .ttl span {
          font-size: 1.6rem; } }
  .topPage .sec06 .infoBox .tx {
    margin-top: 2px;
    font-size: 1.4rem; }
    @media screen and (max-width: 768px) {
      .topPage .sec06 .infoBox .tx {
        font-size: 1.2rem; } }
.topPage .sec07 {
  background: #ecf2f6; }
  .topPage .sec07 .salonList {
    margin-top: 35px; }
    @media screen and (max-width: 768px) {
      .topPage .sec07 .salonList {
        margin-top: 25px; } }
    .topPage .sec07 .salonList > li {
      background: #fff;
      border-radius: 3px;
      text-align: center;
      font-size: 1.4rem;
      padding: 30px 20px;
      margin-bottom: 2%; }
      @media screen and (max-width: 768px) {
        .topPage .sec07 .salonList > li {
          font-size: 1.1rem;
          padding: 15px 15px; } }
      .topPage .sec07 .salonList > li .ttl {
        font-size: 1.8rem;
        font-weight: 600;
        color: #06335c;
        line-height: 1.7;
        padding-top: 30px;
        background: url("../cmn_img/top/sec07_icon01.png") no-repeat center top/15px 20px;
        display: block;
        margin-bottom: 3px; }
        @media screen and (max-width: 768px) {
          .topPage .sec07 .salonList > li .ttl {
            font-size: 1.3rem;
            padding-top: 25px; } }