:root {
  --color-base: #efefef;
  --color-main: #BF1A20;
  --color-sub: #ff6600;
  --color-accent: #1BBFA3;
  --color-white: #ffffff;
  --color-black: #231815;
  --color-gray: #8d8d8d;
  --color-deep-green: #32382c;
  --font-base: 'Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Meiryo", sans-serif';
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--color-black);
}

html {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, var(--font-base);
  font-size: 17px;
  background-color: var(--color-base);
  transition: background-color 0.06s linear;
  color: var(--color-black);
}

body {
  line-height: 1.88;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1 {
  font-size: 2.2rem;
  line-height: 1.75;
}

h2 {
  font-size: 2.2rem;
  line-height: 1.55;
  margin-bottom: 56px;
}

h3 {
  font-size: 1.5rem;
}

.container {
  width: 100%;
  height: auto;
  max-width: 1800px;
  margin: 0 auto;
  padding: 128px 80px;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.between {
  justify-content: space-between;
}

.red-line {
  display: flex;
  align-items: center;
  height: 32px;
}

.red-line span {
  width: 64px;
  height: 1px;
  background-color: var(--color-main);
}

.section-label {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

.section-label-name {
  display: block;
  color: var(--color-main);
}

.section-title {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
}

.section-title h2 {
  margin-bottom: 0;
}

.section-title .section-label {
  align-items: center;
  margin-bottom: 0;
}

/* ------------------------------
* Lenis不具合への対処
------------------------------ */
html {
  scroll-behavior: auto !important;
}
html.lenis {
  height: auto;
  min-height: 100%;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}


/* ------------------------------
* singlePost
------------------------------ */
.singlePost {
  position: relative;
  max-width: 1100px;
  max-width: 110rem;
  width: 90%;
  padding-bottom: 240px;
  padding-bottom: 24rem;
  margin-right: auto;
  margin-left: auto;
}


/* ------------------------------
* pagination
------------------------------ */
.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: fixed;
  top: 13.7%;
  right: 0;
  z-index: 1;
}

.pagination-top {
  position: relative;
  margin-bottom: 102px;
  margin-bottom: 10.2rem;
}

.pagination-top:before {
  position: absolute;
  top: 50%;
  right: -72px;
  right: -7.2rem;
  width: 144px;
  width: 14.4rem;
  height: 144px;
  height: 14.4rem;
  border-radius: 50%;
  background-color: #fff;
  content: '';
  z-index: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: background-color 0.55s cubic-bezier(0.27, 0.43, 0.44, 0.94);
  transition: background-color 0.55s cubic-bezier(0.27, 0.43, 0.44, 0.94);
}

.pagination-top:hover:before {
  background-color: #7ea856;
}

.pagination-top a {
  position: relative;
  display: block;
  padding-top: 32px;
  padding-top: 3.2rem;
  background-image: url(../img/step_top_g.svg);
  background-repeat: no-repeat;
  background-size: 3.1rem 3.1rem;
  background-position: 50% 0%;
  font-family: source-han-sans-japanese, "ヒラギノ 角ゴ ProN", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Mairyo, "メイリオ", sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #7ea856;
  z-index: 1;
  -webkit-transition: background-image 0.55s cubic-bezier(0.27, 0.43, 0.44, 0.94), color 0.55s cubic-bezier(0.27, 0.43, 0.44, 0.94);
  transition: background-image 0.55s cubic-bezier(0.27, 0.43, 0.44, 0.94), color 0.55s cubic-bezier(0.27, 0.43, 0.44, 0.94);
}

.pagination-top:hover a {
  background-image: url(../img/step_top.svg);
  color: #fff;
}

.pagination-top a:before {
  position: absolute;
  top: 50%;
  right: -72px;
  right: -7.2rem;
  width: 144px;
  width: 14.4rem;
  height: 144px;
  height: 14.4rem;
  border-radius: 50%;
  content: '';
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.pagination-list {
  position: relative;
  margin-bottom: 10px;
  margin-bottom: 1rem;
}

.pagination-list a {
  position: relative;
  display: block;
}

.pagination-list a:before {
  position: relative;
  display: block;
  width: 50px;
  width: 5rem;
  height: 50px;
  height: 5rem;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: #757575;
  -webkit-transition: background-color 0.55s cubic-bezier(0.27, 0.43, 0.44, 0.94);
  transition: background-color 0.55s cubic-bezier(0.27, 0.43, 0.44, 0.94);
  content: '';
  z-index: 1;
}

.pagination-list._step01 a:before {
  background-image: url(../img/step_01.svg);
  background-size: 1.8rem 3.2rem;
}

.pagination-list._step02 a:before {
  background-image: url(../img/step_02.svg);
  background-size: 2.3rem 2.3rem;
}

.pagination-list._step03 a:before {
  background-image: url(../img/step_03.svg);
  background-size: 3.1rem 2.4rem;
}

.pagination-list._step04 a:before {
  background-image: url(../img/step_04.svg);
  background-size: 2.8rem 3.2rem;
}

.pagination-list._step05 a:before {
  background-image: url(../img/step_05.svg);
  background-size: 2.4rem 3.2rem;
}

.pagination-list._step06 a:before {
  background-image: url(../img/step_06.svg);
  background-size: 2.5rem 2.8rem;
}

.pagination-list a.active:before,
.pagination-list a:hover:before {
  background-color: #7ea856;
}

.pagination-list a span {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  top: 0;
  left: 0;
  width: 106px;
  width: 10.6rem;
  height: 100%;
  color: #fff;
  font-family: source-han-sans-japanese, "ヒラギノ 角ゴ ProN", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Mairyo, "メイリオ", sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  background-color: #7ea856;
  -webkit-transition: left 0.55s cubic-bezier(0.27, 0.43, 0.44, 0.94);
  transition: left 0.55s cubic-bezier(0.27, 0.43, 0.44, 0.94);
  z-index: 0;
}

.pagination-list a.active span {
  left: -106px;
  left: -10.6rem;
}

.pagination-fixed {
  position: absolute !important;
  top: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

.pagination-fixed.active {
  opacity: 1;
}


@media (max-width: 767px) {
  
}


@media (max-width: 1080px) {
  .container {
    padding: 128px 40px;
  }

  main {
    margin-top: 128px;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 16px;
  }

  h1 {
    font-size: 1.7rem;
    line-height: 1.65;
  }

  h2 {
    font-size: 1.7rem;
  }

  h3 {
    font-size: 1.4rem;
  }

  .container {
    padding: 80px 16px;
  }

  main {
    margin-top: 88px;
  }
}

a:hover,
button:hover {
  opacity: 0.6;
}