@charset "UTF-8";
@viewport {
  width: device-width;
}
.sp-br {
  display: none;
}
@media screen and (max-width: 1023px) {
  .sp-br {
    display: block;
  }
}

.l-main,
.l-main p,
.l-main a,
.l-main li,
.l-main dt,
.l-main dd,
.l-main input,
.l-main select {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-feature-settings: "palt" 1;
}

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

.l-main {
  margin: 0;
}
.l-main img {
  max-width: 100%;
  height: auto;
}
.l-main .tt-u {
  text-transform: uppercase;
}

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop,
.l-main {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  *::-ms-backdrop,
.l-main a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  *::-ms-backdrop,
.l-main li {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  *::-ms-backdrop,
.l-main p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  *::-ms-backdrop,
.l-main input {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  *::-ms-backdrop,
.l-main button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  *::-ms-backdrop,
.l-main dt {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  *::-ms-backdrop,
.l-main dd {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
}
.main-contents {
  background-color: #ebe4db;
}

.link-button {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 2.8571428571em;
  align-items: center;
  justify-content: center;
  padding: 0.2857142857em;
  border: 1px solid;
  margin-top: 2.8571428571em;
  background-color: transparent;
  color: #231815;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  transition: color ease 0.3s;
}
@media screen and (max-width: 1023px) {
  .link-button {
    font-size: 1em;
  }
}
@media screen and (min-width: 768px) {
  .link-button:hover {
    color: #fff;
  }
}
.link-button::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ae223b;
  content: "";
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform ease 0.3s;
}
@media screen and (min-width: 768px) {
  .link-button:hover::before {
    transform: scaleY(1);
  }
}
.link-button > .arrow {
  position: relative;
  display: block;
  overflow: hidden;
  width: 0.8571428571em;
  height: 0.8571428571em;
  border: solid;
  border-width: 1px 1px 0 0;
  margin-left: 1em;
}
.link-button > .arrow::before {
  position: absolute;
  top: 0;
  right: -1px;
  display: block;
  width: 0;
  height: 1.7142857143em;
  border-left: 1px solid;
  content: "";
  transform: rotate(45deg);
  transform-origin: top right;
}
.link-button + .link-button {
  margin-top: 1.4285714286em;
}

.link-image {
  display: block;
}
.link-image img,
.link-image picture {
  display: block;
}
@media screen and (min-width: 768px) {
  .link-image {
    transition: opacity 0.3s, filter 0.3s;
  }
  .link-image:hover {
    filter: brightness(0.95);
    opacity: 0.9;
  }
  .link-image.comingsoon-bnr:hover {
    filter: brightness(1);
    opacity: 1;
  }
}

.intro-read,
.intro-visual {
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
}
.intro-read::before, .intro-read::after,
.intro-visual::before,
.intro-visual::after {
  display: table;
  content: "";
}
.intro-read--wrap,
.intro-visual--wrap {
  height: 200vh;
}

.intro-read {
  position: sticky;
  top: 0;
  background: url("/dairies/cheese/meijitokachi/products/smart_cheese/love_tokachi/images/intro-bg.jpg") center no-repeat;
  background-size: auto 150%;
}
.intro-read > .paragraph {
  margin: auto;
  color: #fff;
  font-size: 5.3125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2470588235;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .intro-read > .paragraph {
    font-size: 6.6666666667vw;
    line-height: 1.24;
  }
}
.intro-read > .scroll-info {
  position: sticky;
  bottom: 2.5em;
  width: 3.5em;
  margin-bottom: 2.5em;
}
@media screen and (max-width: 1023px) {
  .intro-read > .scroll-info {
    bottom: 2.6666666667vw;
    width: 8vw;
    margin-bottom: 2.6666666667vw;
  }
}

.intro-visual {
  position: relative;
  justify-content: center;
}
@media screen and (max-width: 1023px) {
  .intro-visual {
    font-size: 1.25vw;
  }
}
.intro-visual--wrap {
  background-color: #fff;
}
.intro-visual.logo {
  position: sticky;
  top: 0;
}
.intro-visual > .logo {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 11.75em;
  height: 11.4375em;
  transform: translate(-50%, -50%);
}
.intro-visual > .logo img {
  transform: translate(0, 0) scale(4);
}
.intro-visual > .type {
  position: relative;
  z-index: 1;
  width: 57em;
}

.project-header {
  position: fixed;
  z-index: 10;
  top: 0;
  display: flex;
  width: 100%;
  height: 8.125em;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transform: translateY(-100%);
  transition: transform ease 0.6s;
}
@media screen and (max-width: 1023px) {
  .project-header {
    height: 17.3333333333vw;
  }
}
.project-header.scroll-in {
  transform: translateY(0%);
}
.project-header > .logo {
  width: 15.625em;
}
@media screen and (max-width: 1023px) {
  .project-header > .logo {
    width: 33.3333333333vw;
  }
}

.project-read {
  padding-top: 15.625em;
}
@media screen and (max-width: 1023px) {
  .project-read {
    padding-top: 29.3333333333vw;
  }
}
.project-read > .heading {
  margin: 0;
}
.project-read > .paragraph {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 5.75em 0 2.75em;
  margin: 0;
  color: #fff;
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.75;
}
@media screen and (max-width: 1023px) {
  .project-read > .paragraph {
    padding: 24vw 0 10.6666666667vw;
    font-size: 2vw;
  }
}
.isIe .project-read > .paragraph {
  background: url("/dairies/cheese/meijitokachi/products/smart_cheese/love_tokachi/images/bg-wave.png") no-repeat top center/cover;
}
.project-read > .paragraph > .text {
    position: absolute;
    z-index: 1;
    display: block;
    width: 19.4em;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 9.5em;
}

@media screen and (max-width: 1023px) {
  .project-read > .paragraph > .text {
      width: 46vw;
      top: 26vw;
      line-height: 1.6;
      font-size: 2.6vw;
  }
}


.read-heading {
  padding-top: 7.5em;
  margin: 0 auto;
  font-size: 1rem;
}

.product-image-main {
  width: 1086px;
  margin: 0 auto;
  display: block;
}

@media screen and (max-width: 1023px) {
  .product-image-main {
    width: auto;
  }
}

.product-image01 {
  position: relative;
  opacity: 1;
  transform: translateY(0%);
  transition: transform ease 1s, opacity ease 1s;
  display: block;
  z-index: 1;
  max-width: 1086px;
}

.product-image01.woe {
  opacity: 0;
  transform: translateY(50%);
}


@media screen and (max-width: 1023px) {
  .read-heading {
    font-size: 1.3333333333vw;
  }
}
.read-heading > .read,
.read-heading > .mark {
  display: block;
  margin: auto;
}
.read-heading > .read {
  width: 63.875em;
}
@media screen and (max-width: 1023px) {
  .read-heading > .read {
    width: 86.6666666667vw;
  }
}
.read-heading > .mark {
  width: 534px;
  margin-top: 2.5em;
  opacity: 1;
  transform: translateY(0%);
  transition: transform ease 1s, opacity ease 1s;
}
@media screen and (max-width: 1023px) {
  .read-heading > .mark {
    width: 43vw;
  }
}
.read-heading > .mark.woe {
  opacity: 0;
  transform: translateY(50%);
}

.wine-wave {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.project-flow,
.project-about {
  padding-bottom: 3.75em;
  font-size: 1rem;
}
@media screen and (max-width: 1023px) {
  .project-flow,
.project-about {
    font-size: 2.3333333333vw;
  }
}
.project-flow > .paragraph,
.project-about > .paragraph {
  font-size: 1.375em;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.6818181818;
  text-align: center;
}

.project-flow {
  padding-top: 7.5em;
}
@media screen and (max-width: 1023px) {
  .project-flow {
    padding-top: 16vw;
  }
}

.section-title {
  margin-bottom: 3.75em;
  font-size: 1em;
  line-height: 1;
  text-align: center;
}
.section-title > .ja {
  display: inline-block;
  padding-bottom: 0.3571428571em;
  border-bottom: solid 1px;
  font-size: 1.75em;
  font-weight: 600;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 1023px) {
  .section-title > .ja {
    font-size: 4.6666666667vw;
  }
}
.section-title > .en {
  display: block;
  margin-top: 0.5555555556em;
  color: #231815;
  font-weight: 400;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1023px) {
  .section-title > .en {
    font-size: 2.9333333333vw;
  }
}

.project-movie{
   width: 600px;
   margin: 0 auto 7em;
   display: block;
}

@media screen and (max-width: 1023px) {
   .project-movie{
       width: auto;
       margin: 0 4em  7em;
   }
}


.flow-list {
  padding: 0;
  counter-reset: num;
  list-style: none;
  display: flex;
  flex-flow: column wrap;
  height: 20em;
  width: 1020px;
  margin: 0 auto;

}
@media screen and (max-width: 1023px) {
  .flow-list {
    margin: 0 5em;
    display: flex;
    flex-flow: column wrap;
    height: auto;
    width: auto;
  }
}
.flow-list > .end {
  color: #ae223b;
}
.flow-list > .current {
  position: relative;
  color: #ae223b;
}
.flow-list > .current::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6em;
  display: block;
  width: 168px;
  height: 4.5333333333em;
  margin: auto;
  background: url("/dairies/cheese/meijitokachi/products/smart_cheese/love_tokachi/images/icon-imakoko.png") center/contain no-repeat;
  content: "";
  opacity: 1;
  transform: translateX(0%);
  transition: transform ease 1s, opacity ease 1s;
}
@media screen and (max-width: 1023px) {
  .flow-list > .current::after {
    width: 22.1333333333vw;
  }
}
.flow-list > .woe.current::after {
  opacity: 0;
  transform: translateX(-50%);
}
.flow-list > .item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #fff;
  font-size: 1.875em;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 2.3333333333;
  margin: 0 0.7em;
}
.flow-list > .item::before {
  display: flex;
  width: 2.6666666667em;
  align-items: center;
  justify-content: center;
  padding-right: 0.5333333333em;
  content: counter(num, decimal-leading-zero);
  counter-increment: num;
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1;
}
.flow-list a {
  color: inherit;
  text-decoration: none;
}

.flow-list .list-icon{
  font-weight: normal;
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  position: relative;
  top: -2px;
}


@media screen and (min-width: 768px) {
  .flow-list a:hover {
    text-decoration: none;
    color: #ae223b;
  }
  
  .flow-list > .item:hover {
    color: #ae223b;
  }
  
  .flow-list > .item:nth-child(1):hover,
  .flow-list > .item:nth-child(8):hover{
    color: #000;
  }
}

.about-contents {
  max-width: 80em;
  margin: auto;
}
.about-contents > .about-content {
  display: grid;
}
@media screen and (max-width: 1023px) {
  .about-contents > .about-content {
    display: block;
  }
}
.about-contents > .about-content:nth-of-type(odd) {
  position: relative;
  z-index: 0;
  padding: 6.875em 0;
  grid-template: "image heading" 10em "image paragraph" auto/52.9310344828% 42.7586206897%;
}
@media screen and (max-width: 1023px) {
  .about-contents > .about-content:nth-of-type(odd) {
    padding: 9.3333333333vw 6vw 9.3333333333vw 12vw;
  }
}
.about-contents > .about-content:nth-of-type(odd)::after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: calc(50% - 50vw);
  bottom: 0;
  left: 4.375em;
  display: block;
  background-color: #fff;
  content: "";
}
@media screen and (max-width: 1023px) {
  .about-contents > .about-content:nth-of-type(odd)::after {
    left: 6vw;
  }
}
.about-contents > .about-content:nth-of-type(odd) > .heading {
  grid-area: heading;
}
.about-contents > .about-content:nth-of-type(odd) > .image {
  grid-area: image;
}
.about-contents > .about-content:nth-of-type(odd) > .paragraph {
  grid-area: paragraph;
}
.about-contents > .about-content:nth-of-type(even) {
  padding: 8.125em 0 8.125em 7.5em;
  background-color: #ebe4db;
  grid-template: "heading image" 10em "paragraph image" auto/42.2413793103% 49.1379310345%;
}
@media screen and (max-width: 1023px) {
  .about-contents > .about-content:nth-of-type(even) {
    overflow: hidden;
    padding: 9.3333333333vw 9.3333333333vw 9.3333333333vw 10.6666666667vw;
  }
}
.about-contents > .about-content:nth-of-type(even) > .heading {
  grid-area: heading;
}
.about-contents > .about-content:nth-of-type(even) > .image {
  grid-area: image;
}
.about-contents > .about-content:nth-of-type(even) > .paragraph {
  padding-right: 2.2222222222em;
  grid-area: paragraph;
}
@media screen and (max-width: 1023px) {
  .about-contents > .about-content:nth-of-type(even) > .paragraph {
    padding: 0;
  }
}

.about-content {
  font-size: 1rem;
}
@media screen and (max-width: 1023px) {
  .about-content {
    font-size: 2.1333333333vw;
  }
}
.about-content > .heading {
  margin: 0;
  font-size: 3em;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.375;
}
.about-content > .paragraph {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 27.5em;
  margin: 0;
  font-size: 1.125em;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 2.2222222222;
}
@media screen and (max-width: 1023px) {
  .about-content > .paragraph {
    width: auto;
    font-size: 2.9333333333vw;
  }
}

.project-want > .image {
  margin: -0.625em -3.125em 0 0;
  opacity: 1;
  transform: translateX(0%);
  transition: transform ease 1s, opacity ease 1s;
}
@media screen and (max-width: 1023px) {
  .project-want > .image {
    margin: 2.6666666667vw auto -4vw -12vw;
  }
}
.project-want > .image.woe {
  opacity: 0;
  transform: translateX(-50%);
}

.project-known > .image {
  margin: 6.25em 0 0;
  opacity: 1;
  transform: translateX(0%);
  transition: transform ease 1s, opacity ease 1s;
}
@media screen and (max-width: 1023px) {
  .project-known > .image {
    margin: 2.6666666667vw -6.6666666667vw 2.6666666667vw 6.6666666667vw;
  }
}
.project-known > .image.woe {
  opacity: 0;
  transform: translateX(50%);
}

.project-collaborator > .image {
  margin: 0 -4.5em 0 0;
  opacity: 1;
  transform: translateX(0%);
  transition: transform ease 1s, opacity ease 1s;
}
@media screen and (max-width: 1023px) {
  .project-collaborator > .image {
    margin: 4vw auto -4vw -12vw;
  }
}
.project-collaborator > .image.woe {
  opacity: 0;
  transform: translateX(-50%);
}
.project-collaborator::after {
  bottom: -18.75em !important;
}

.project-aside {
  position: relative;
  z-index: 1;
}
.project-aside--container {
  position: relative;
  padding: 16.25em 0 8.75em;
  font-size: 1rem;
}
@media screen and (max-width: 1023px) {
  .project-aside--container {
    font-size: 1.6666666667vw;
  }
}
.isIe .project-aside--container {
  background: url("/dairies/cheese/meijitokachi/products/smart_cheese/love_tokachi/images/bg-wave.png") no-repeat top center/cover;
}
.project-aside > .heading {
  margin: 0;
  color: #d2c3ae;
  font-size: 4em;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-align: center;
}
.project-aside .aside-contents {
  display: grid;
  width: 100%;
  max-width: 62.25em;
  margin: 2.5em auto 3.75em;
  grid-template: "image-l text image-r"/148px auto 148px;
}
@media screen and (max-width: 1023px) {
  .project-aside .aside-contents {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
.project-aside > .link-image {
  width: 48.5625em;
  margin: auto;
}
@media screen and (max-width: 1023px) {
  .project-aside > .link-image {
    width: 86.6666666667vw;
  }
}

.aside-contents > .image-r {
  grid-area: image-r;
  opacity: 1;
  transform: translateX(0%);
  transition: transform ease 1s, opacity ease 1s;
}
@media screen and (max-width: 1023px) {
  .aside-contents > .image-r {
    width: 24.5333333333vw;
    margin: 0 2.6666666667vw;
  }
}
.aside-contents > .image-r.woe {
  opacity: 0;
  transform: translateX(50%);
}
.aside-contents > .image-l {
  grid-area: image-l;
  opacity: 1;
  transform: translateX(0%);
  transition: transform ease 1s, opacity ease 1s;
}
@media screen and (max-width: 1023px) {
  .aside-contents > .image-l {
    width: 24.5333333333vw;
    margin: 0 2.6666666667vw;
  }
}
.aside-contents > .image-l.woe {
  opacity: 0;
  transform: translateX(-50%);
}
.aside-contents > .paragraph {
  margin: 0;
  color: #fff;
  font-size: 1.375em;
  font-weight: 600;
  grid-area: text;
  letter-spacing: 0.1em;
  line-height: 1.6818181818;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .aside-contents > .paragraph {
    margin-top: 4vw;
    font-size: 3.2vw;
  }
}

.product-contents{
  width: 990px;
  margin: 3rem auto 0;
  display: flex;
  justify-content: space-between;
}

.product-contents .product-item{
  width: 480px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 1.15em;
}
.product-contents .product-item-inner{
  border: 3px solid #bbad96;
  padding: 27px 5px 27px 4px;
  text-align: center;
}

.product-contents .item-image {
  position: relative;
  opacity: 1;
  transform: translateY(0%);
  transition: transform ease 1s, opacity ease 1s;
  display: block;
  z-index: 1;
}

.product-contents .item-image.woe {
  opacity: 0;
  transform: translateY(50%);
}

.product-contents .product-item-detail {
  position: relative;
  opacity: 1;
  transition: transform ease-in 2s, opacity ease-in 2s;
  display: block;
  z-index: 1;
}

.product-contents .product-item-detail.woe {
  opacity: 0;
}

.product-item-title{
  margin: 10px 2em;
  padding: 0 0 5px;
}

.product-item-title.title-cheddar{
  border-bottom: 2px solid #2d3e8c;
}

.product-item-title.title-cheddar img{
  width: 209px;
}

.product-item-title.title-parmesan{
  border-bottom: 2px solid #417442;
}

.product-item-title.title-parmesan img{
  width: 217px;
}

.product-item-text.text-cheddar{
  color: #2d3e8c;
  margin: 0;
}
.product-item-text.text-parmesan{
  color: #417442;
  margin: 0;
}

.bnr-ballon-area .ballon-item{
  margin: 3.5em auto 10px;
  width: 572px;
}

.bnr-ballon-area .bnr-item{
  margin: 0 auto;
  width: 281px;
  text-align: center;
}

.ballon-item-img {
  position: relative;
  opacity: 1;
  transform: translateY(0%);
  transition: transform ease 1s, opacity ease 1s;
  display: block;
  z-index: 1;
}

.ballon-item-img.woe {
  opacity: 0;
  transform: translateY(60%);
}


@media screen and (max-width: 1023px) {
  .product-contents{
    width: auto;
    margin: 1.5rem auto 0;
    display: block;
  }

  .product-contents .product-item{
    width: auto;
    padding: 5px;
    margin: 0 4em 1.5em;
    font-size: 1.8em;
  }
  .product-contents .product-item-inner{
    border: 2px solid #bbad96;
    padding: 12px 5px 15px 4px;
    text-align: center;
  }
  .product-item-title{
    margin: 7px 2em;
    padding: 0 0 5px;
  }

  .product-item-title.title-cheddar{
    border-bottom: 1px solid #2d3e8c;
  }

  .product-item-title.title-cheddar img{
    width: 32vw;
  }

  .product-item-title.title-parmesan{
    border-bottom: 1px solid #417442;
  }

  .product-item-title.title-parmesan img{
    width: 33vw;
  }

  .bnr-ballon-area .ballon-item{
    margin: 4em 5.5em 5px;
    width: auto;
  }

  .bnr-ballon-area .bnr-item{
    margin: 0 auto;
    width: 40vw;
    text-align: center;
  }
}


.project-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8em 0;
  background: linear-gradient(30deg, #fff, #e6e6e6);
  background: linear-gradient(120deg, transparent 75%, rgb(255, 255, 255) 75%) 0 0, linear-gradient(240deg, transparent 75%, rgb(255, 255, 255) 75%) 0 0, linear-gradient(120deg, transparent 75%, rgb(255, 255, 255) 75%) 0.875em -1.25em, linear-gradient(240deg, transparent 75%, rgb(255, 255, 255) 75%) 0.875em -1.25em, linear-gradient(30deg, #fff, #e6e6e6 90%);
  background-size: 1.75em 2.5em, 1.75em 2.5em, 1.75em 2.5em, 1.75em 2.5em, auto;
  color: #4d4d4d;
  font-size: 1rem;
}
@media screen and (max-width: 1023px) {
  .project-footer {
    padding: 4.375em 0;
    background: linear-gradient(120deg, transparent 75%, rgb(255, 255, 255) 75%) 0 0, linear-gradient(240deg, transparent 75%, rgb(255, 255, 255) 75%) 0 0, linear-gradient(120deg, transparent 75%, rgb(255, 255, 255) 75%) 0.8vw -1.3333333333vw, linear-gradient(240deg, transparent 75%, rgb(255, 255, 255) 75%) 0.8vw -1.3333333333vw, linear-gradient(30deg, #fff, #e6e6e6 90%);
    background-size: 1.8666666667vw 2.6666666667vw, 1.8666666667vw 2.6666666667vw, 1.8666666667vw 2.6666666667vw, 1.8666666667vw 2.6666666667vw, auto;
    font-size: 2.6666666667vw;
  }
}
.project-footer > .read {
  margin: 0 0 1.25em;
  font-size: 0.875em;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .project-footer > .read {
    line-height: 1.3529411765;
  }
}
.project-footer > .banner-box {
  width: 63.75em;
}
@media screen and (max-width: 1023px) {
  .project-footer > .banner-box {
    width: auto;
  }
}
.project-footer > .banner-box + .banner-box {
  padding-top: 5em;
}

.project-footer .footer-link-txt {
  font-size: 1.2rem;
  display: inline-block;
  text-decoration: none;
  color: #231916;
  font-weight: 700;
  text-align: center;
  position: relative;
  padding-left: 42px;
}
.project-footer .footer-link-txt:hover {
  text-decoration: underline;
}
.project-footer .footer-link-txt::before {
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background: url("/dairies/cheese/meijitokachi/products/smart_cheese/love_tokachi/images/icon-arr.svg") no-repeat center center / contain;
}
@media screen and (max-width: 1023px) {
  .project-footer .footer-link-txt {
    font-size: 1rem;
    padding-left: 6.5vw;
  }
  .project-footer .footer-link-txt::before {
    width: 5vw;
    height: 5vw;
  }
}

.banner-box > .banner-read {
  margin: 0 0 1.875em;
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .banner-box > .banner-read {
    font-size: 1.3em;
  }
}
.banner-box > .link-list {
  display: grid;
  padding: 0;
  margin: 0;
  gap: 0 15px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  list-style: none;
}
@media screen and (max-width: 1023px) {
  .banner-box > .link-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }
  .banner-box > .link-list > .item + .item {
    margin-top: 4vw;
  }
}
.banner-box .link-image.single-image {
	width: 330px;
	margin: auto;
}
@media screen and (max-width: 1023px) {
  .banner-box .link-image.single-image {
    width: 66.6666666667vw;
  }
}
@media screen and (max-width: 1023px) {
  .banner-box .link-image {
    width: 66.6666666667vw;
  }
}

.flow-banner {
  max-width: 63.75em;
  margin: 0 auto 4.375em;
}
@media screen and (max-width: 1023px) {
  .flow-banner {
    width: 86.6666666667vw;
    margin: -2.6666666667vw auto 8vw;
  }
}
@media screen and (min-width: 768px) {
  .flow-banner {
    transition: opacity 0.3s, filter 0.3s;
  }
  .flow-banner:hover {
    filter: brightness(0.9);
    opacity: 0.85;
  }
}
.flow-banner img {
  display: block;
  width: 100%;
}