@charset "UTF-8";
html.menuFixed {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

:root {
  --coGap: 80px;
  --fontXL: 2.8rem;
  --fontLL: 2.25rem;
  --fontL: 1.6rem;
  --fontM: 1.25rem;
  --fontS: 1rem;
  --fontNote: .87rem;
}

@media (max-width: 767px) {
  :root {
    --fontXL: 2.5rem;
    --fontLL: 2rem;
    --fontL: 1.45rem;
    --fontM: 1.125rem;
    --fontS: .9rem;
    --fontNote: .78rem;
  }
}

@media (max-width: 414px) {
  :root {
    --coGap: 12vw;
    --fontXL: 8vw;
    --fontLL: 6.2vw;
    --fontL: 5vw;
    --fontM: 4.4vw;
    --fontS: 3.6vw;
    --fontNote: 3.2vw;
  }
}

@media screen and (max-width: 767px) {
  .pcOnly {
    display: none;
  }
}

@media screen and (max-width: 1000px) {
  .pcOnly1000 {
    display: none;
  }
}

@media (min-width: 768px) {
  .tabOnly {
    display: none;
  }
}

@media (max-width: 767px) {
  .tabOnly {
    display: block;
  }
}

@media print, screen and (min-width: 768px) {
  .spOnly {
    display: none;
  }
}

@media print, screen and (min-width: 361px) {
  .spOnly360 {
    display: none;
  }
}

.iblock {
  display: inline-block !important;
  font-size: inherit !important;
}

.green {
  color: #008870;
}

.bgBeige {
  background-color: #f5f5f0;
}

.bgGreen {
  background-color: #e7f0f2;
}

.flex {
  display: flex;
}

.mainContent {
  font-weight: bold;
}

.mainContent *,
.mainContent *::before,
.mainContent *::after {
  box-sizing: border-box;
}

.mainContent a {
  color: #222;
  text-decoration: none;
  transition: 0.3s ease-in-out all;
}
.mainContent a:hover {
  opacity: 0.8;
}

.mainContent img {
  max-width: 100%;
  vertical-align: top;
}

.mainContent [class*="logo_"] > svg {
  width: 100%;
  height: 100%;
}

.mainContent [class*="logo_"] > img {
  width: 100%;
  height: auto;
}

.mainContent figure img {
  width: 100%;
  height: auto;
}

.mainContent sup {
  font-size: .65em;
  vertical-align: .4em;
}

.mainContent sub {
  font-size: .65em;
  vertical-align: -.1em;
}

.mainContent .note {
  font-weight: normal;
  font-size: 1.4rem !important;
  font-size: var(--fontNote) !important;
  color: #666;
}

.mainContent ul.note {
  counter-reset: numlist;
}

.mainContent ul.note li {
  margin-bottom: .3em;
  padding-left: 1.2em;
  position: relative;
}

.mainContent ul.note li::before {
  content: '※';
  position: absolute;
  left: 0;
}

.mainContent ul.numnote {
  counter-reset: numnote;
}

.mainContent ul.numnote li {
  padding-left: 2.2em;
}

.mainContent ul.numnote li::before {
  content: "※" counter(numnote);
  counter-increment: numnote;
}

.mainContent ul.numnote.countreset2 {
  counter-reset: numnote 1;
}

.mainContent ul.numnote.countreset3 {
  counter-reset: numnote 2;
}

.mainContent ul.numnote.countreset4 {
  counter-reset: numnote 3;
}

.mainContent ul.numnote.countreset5 {
  counter-reset: numnote 4;
}

.mainContent ul.numnote.countreset6 {
  counter-reset: numnote 5;
}

.mainContent ul.numnote.countreset7 {
  counter-reset: numnote 6;
}

.mainContent .sec:not(#concept) {
  width: 100%;
  padding: 80px 0;
  padding: var(--coGap, 80px) 0;
  text-align: center;
  line-height: 1.8;
}

.mainContent #lead .copy {
  margin: 0 0 .75em;
  font-size: 2.6rem;
  font-size: var(--fontL);
}

.mainContent #lead .subcopy {
  font-size: 2rem;
  font-size: var(--fontM);
}

@media (max-width: 767px) {
  .mainContent #lead .subcopy {
    padding: 0 1.5em;
    text-align: justify;
  }
}

@media (max-width: 767px) {
  .mainContent #lead:not(.top) .subcopy .iblock {
    display: inline !important;
  }
}

.mainContent #lead .note {
  margin-top: 1.5rem;
}

.mainContent .arrowBg {
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.mainContent .arrowBg::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8vw;
  pointer-events: none;
  background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, #fff), color-stop(50.1%, transparent)) left bottom/51% 100% no-repeat, -webkit-gradient(linear, right bottom, left top, color-stop(50%, #fff), color-stop(50.1%, transparent)) right bottom/51% 100% no-repeat;
  background: linear-gradient(to right top, #fff 50%, transparent 50.1%) left bottom/51% 100% no-repeat, linear-gradient(to left top, #fff 50%, transparent 50.1%) right bottom/51% 100% no-repeat;
  z-index: 2;
}

@media all and (-ms-high-contrast: none) {
  .mainContent {
    min-width: 768px;
  }
}

/* add 2022.02.16 */
.siteContents {
  padding-bottom: 0;
}

.l-gsFooter {
  padding-top: 0 !important;
}