@charset "UTF-8";
/*----------------------------------------
       Reset
----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: 400;
  box-sizing: border-box;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

ul, li {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  outline: none; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

@media only screen and (max-width: 750px) {
  html {
    font-size: 2.5641025641vw; } }
@media only screen and (min-width: 751px) {
  html {
    font-size: 0.78125vw; } }
@media only screen and (min-width: 1280px) {
  html {
    font-size: 10px; } }

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  word-wrap: break-word;
  color: #4d4d4d;
  width: 100%;
  overflow-x: hidden; }

main {
  padding-top: 3.5rem; }
  @media only screen and (min-width: 751px) {
    main {
      padding-top: 6.8rem; } }

img {
  width: 100%;
  line-height: 0;
  vertical-align: bottom; }

a {
  text-decoration: none;
  transition: all .2s ease-in-out; }

a:hover,
a:active {
  text-decoration: underline;
  text-decoration-thickness: 1px; }

a img {
  border: none; }

a.over:hover,
a:hover img,
input.over:hover {
  text-decoration: none;
  filter: opacity(70);
  -moz-opacity: .7;
  opacity: .7; }

@media only screen and (min-width: 420px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }
sup {
  font-size: 70%;
  vertical-align: top; }

.only_sp {
  display: inherit; }
  @media only screen and (min-width: 1280px) {
    .only_sp {
      display: none; } }

.only_pc {
  display: none; }
  @media only screen and (min-width: 1280px) {
    .only_pc {
      display: inherit; } }

/*******　ヘッダー　*******/
.header {
  z-index: 400;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; }

.header-inner {
  position: relative;
  width: 100%;
  height: 3.5rem;
  margin: 0 auto;
  background-color: #fff; }
  @media only screen and (min-width: 751px) {
    .header-inner {
      height: 6.8rem; } }
  .header-inner .header-logo {
    position: absolute;
    top: 1rem;
    left: 1.7rem;
    width: 23.5rem; }
    @media only screen and (min-width: 751px) {
      .header-inner .header-logo {
        top: 3rem;
        left: 4.5rem;
        width: 30.4rem; } }
  .header-inner .nav-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.5rem;
    height: 3.5rem;
    background-image: url("../img/cmn/nav_btn.svg");
    background-size: cover; }
    @media only screen and (min-width: 751px) {
      .header-inner .nav-btn {
        display: none; } }
    .header-inner .nav-btn.active {
      background-image: url("../img/cmn/nav_btn_close.svg"); }
  .header-inner .nav {
    display: none;
    position: fixed;
    top: 3.5rem;
    width: 100%;
    padding: 0;
    background-color: #fff; }
    @media only screen and (min-width: 751px) {
      .header-inner .nav {
        position: relative;
        display: block;
        top: 2.8rem;
        right: 6.8rem; } }
    .header-inner .nav.active {
      display: block; }
    .header-inner .nav ul {
      width: 100%;
      border-top: 1px solid #cfcfcf; }
      @media only screen and (min-width: 751px) {
        .header-inner .nav ul {
          position: absolute;
          top: 0;
          right: 0;
          display: flex;
          justify-content: space-between;
          align-content: center;
          width: 39rem;
          border-top: none; } }
      .header-inner .nav ul li {
        font-size: 1.6rem;
        font-weight: 600;
        text-align: center;
        border-bottom: 1px solid #cfcfcf; }
        @media only screen and (min-width: 751px) {
          .header-inner .nav ul li {
            font-size: 1.4rem;
            width: 39rem;
            border-bottom: none; } }
        .header-inner .nav ul li a {
          display: block;
          padding: 1rem;
          color: #000; }
          @media only screen and (min-width: 751px) {
            .header-inner .nav ul li a {
              padding: 0; } }
          .header-inner .nav ul li a:hover {
            text-decoration: none; }
            @media only screen and (min-width: 751px) {
              .header-inner .nav ul li a:hover {
                opacity: 0.8; } }

/*******　フッター　*******/
footer {
  width: 100%;
  padding: 1.1rem 0;
  background-color: #626158; }
  @media only screen and (min-width: 751px) {
    footer {
      padding: 1.4rem 0; } }

.footer-inner {
  text-align: center;
  font-size: 0.9rem;
  color: #fff; }
  @media only screen and (min-width: 751px) {
    .footer-inner {
      padding: 1.4rem 0;
      font-size: 1rem; } }

.toppage {
  /*キービジュアル*/
  /*メニュー*/ }
  .toppage .keyvisual {
    width: 100%; }
  .toppage .keyvisual-inner {
    position: relative; }
    @media only screen and (min-width: 751px) {
      .toppage .keyvisual-inner {
        width: 100%;
        display: flex;
        flex-wrap: nowrap; } }
  .toppage .keyvisual-photo {
    width: 100%; }
    @media only screen and (min-width: 751px) {
      .toppage .keyvisual-photo {
        order: 2;
        width: calc(797 / 1280 *100vw); } }
  .toppage .keyvisual-copy {
    position: relative; }
    @media only screen and (min-width: 751px) {
      .toppage .keyvisual-copy {
        order: 1;
        width: calc(483 / 1280 *100vw); } }
    .toppage .keyvisual-copy .keyvisual-catch {
      margin: -3.7rem auto 0 1.6rem;
      width: 29.8rem; }
      @media only screen and (min-width: 751px) {
        .toppage .keyvisual-copy .keyvisual-catch {
          margin: calc(88 / 1280 *100vw) calc(-90 / 1280 *100vw) 0 auto;
          width: calc(474 / 1280 *100vw); } }
    .toppage .keyvisual-copy .keyvisual-lead {
      margin: 3rem auto 0 3rem;
      font-size: 1.4rem;
      font-weight: 600;
      line-height: 1.85; }
      @media only screen and (min-width: 751px) {
        .toppage .keyvisual-copy .keyvisual-lead {
          margin: calc(75 / 1280 *100vw) auto 0 calc(90 / 1280 *100vw);
          font-size: calc(16 / 1280 *100vw);
          line-height: 1.85; } }
  .toppage .top-menu {
    width: 100%;
    background-color: #f3f0eb;
    margin: 4.2rem auto 0;
    padding-bottom: 3rem; }
    @media only screen and (min-width: 751px) {
      .toppage .top-menu {
        margin: 0 auto;
        padding-bottom: 5rem; } }
  .toppage .top-menu-inner {
    width: 34.5rem;
    margin: 0 auto;
    padding: 3.5rem 0; }
    @media only screen and (min-width: 751px) {
      .toppage .top-menu-inner {
        width: 76rem;
        padding: 9.2rem 0 3rem; } }
  .toppage .top-menu-subtitle {
    width: 22.7rem;
    margin: 0 auto; }
    @media only screen and (min-width: 751px) {
      .toppage .top-menu-subtitle {
        width: 29.1rem; } }
  .toppage .top-menu-index {
    width: 34.5rem;
    margin: 0 auto; }
    @media only screen and (min-width: 751px) {
      .toppage .top-menu-index {
        display: flex;
        justify-content: space-between;
        width: 76rem;
        margin: 2.8rem auto 0; } }
    .toppage .top-menu-index li {
      margin-top: 3.8rem; }
      @media only screen and (min-width: 751px) {
        .toppage .top-menu-index li {
          width: 34.4rem;
          margin: 0; } }
    .toppage .top-menu-index a {
      color: #4d4d4d; }
      .toppage .top-menu-index a:hover {
        text-decoration: none; }
    .toppage .top-menu-index .text {
      font-size: 1.6rem;
      font-weight: 600;
      padding: 0 0 0 1.8rem;
      margin-top: 1.5rem;
      background-image: url("../img/cmn/link_arrow.svg");
      background-size: 1.4rem auto;
      background-position: top left;
      background-repeat: no-repeat; }