/* ******************************
 *
 * RESPONSIVE MIXIN
 *
 * ****************************** */
/* ******************************
 *
 * FONT SETTINGS
 *
 * ****************************** */
@font-face {
  font-family: "tsukuhou";
  src: url("../font/Tsukuhou-35Point-Gothic.ttf") format("truetype");
}
/* ******************************
 *
 * FONT SETTINGS
 *
 * ****************************** */
/* ******************************
 *
 * KEYFRAMES
 *
 * ****************************** */
@-webkit-keyframes loopCl {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes loopCl {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.topFv {
  position: relative;
  overflow: hidden;
}

.gallery {
  position: relative;
  z-index: 10;
  padding: 0 0 64px;
}
@media screen and (min-width: 320px) {
  .gallery {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    margin-top: -17.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .gallery {
    -webkit-transform: unset;
            transform: unset;
    margin-top: -10.5rem;
  }
}

.galBack, .galFront, .galWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 320px) {
  .galBack .img:nth-child(1), .galFront .img:nth-child(1), .galWrapper .img:nth-child(1) {
    width: 30rem;
    margin: 0 64px 0 0;
  }
}
@media screen and (min-width: 1025px) {
  .galBack .img:nth-child(1), .galFront .img:nth-child(1), .galWrapper .img:nth-child(1) {
    width: 60rem;
    margin: 0 64px 0 0;
  }
}
@media screen and (min-width: 320px) {
  .galBack .img:nth-child(2), .galFront .img:nth-child(2), .galWrapper .img:nth-child(2) {
    width: 20rem;
    margin: 24rem 64px 0 0;
  }
}
@media screen and (min-width: 1025px) {
  .galBack .img:nth-child(2), .galFront .img:nth-child(2), .galWrapper .img:nth-child(2) {
    width: 40rem;
    margin: 24rem 64px 0 0;
  }
}
@media screen and (min-width: 320px) {
  .galBack .img:nth-child(3), .galFront .img:nth-child(3), .galWrapper .img:nth-child(3) {
    width: 10.5rem;
    margin: 0 64px 0 -12.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .galBack .img:nth-child(3), .galFront .img:nth-child(3), .galWrapper .img:nth-child(3) {
    width: 20.5rem;
    margin: 0 64px 0 -12.5rem;
  }
}
@media screen and (min-width: 320px) {
  .galBack .img:nth-child(4), .galFront .img:nth-child(4), .galWrapper .img:nth-child(4) {
    width: 8.5rem;
    margin: 30rem 64px 0 0;
  }
}
@media screen and (min-width: 1025px) {
  .galBack .img:nth-child(4), .galFront .img:nth-child(4), .galWrapper .img:nth-child(4) {
    width: 17.5rem;
    margin: 30rem 64px 0 0;
  }
}
@media screen and (min-width: 320px) {
  .galBack .img:nth-child(5), .galFront .img:nth-child(5), .galWrapper .img:nth-child(5) {
    width: 20rem;
    margin: 0 64px 0 0;
  }
}
@media screen and (min-width: 1025px) {
  .galBack .img:nth-child(5), .galFront .img:nth-child(5), .galWrapper .img:nth-child(5) {
    width: 40rem;
    margin: 0 64px 0 0;
  }
}
.galBack .imgWrapper, .galFront .imgWrapper, .galWrapper .imgWrapper {
  background: var(--primary-color);
  padding-bottom: 100%;
  border-radius: 50%;
}

.galBack {
  -webkit-transform: translateX(-25%);
          transform: translateX(-25%);
}
.galBack .img {
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
  -webkit-filter: blur(16px) opacity(0.75);
          filter: blur(16px) opacity(0.75);
}

.galFront {
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 320px) {
  .galFront {
    margin-top: -24rem;
  }
}
@media screen and (min-width: 1025px) {
  .galFront {
    margin-top: -52rem;
  }
}

.galWrapper.back {
  -webkit-animation: loopCl 50000ms linear infinite both;
          animation: loopCl 50000ms linear infinite both;
}
.galWrapper.front {
  -webkit-animation: loopCl 35000ms linear infinite both;
          animation: loopCl 35000ms linear infinite both;
}

.topIntro {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 10%;
}
@media screen and (min-width: 320px) {
  .topIntro {
    margin-top: -16rem;
  }
}
@media screen and (min-width: 1025px) {
  .topIntro {
    margin-top: -8rem;
  }
}

.topIntroCopy {
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  letter-spacing: 0.1em;
  background: -webkit-gradient(linear, left top, right top, from(var(--primary-color)), to(var(--secondary-color)));
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (min-width: 320px) {
  .topIntroCopy {
    font-size: 4.2rem;
  }
}
@media screen and (min-width: 1025px) {
  .topIntroCopy {
    font-size: 9.6rem;
  }
}
.topIntroCopy span {
  display: inline-block;
}
@media screen and (min-width: 320px) {
  .topIntroCopy span:last-child {
    margin-left: 3.4rem;
  }
}
@media screen and (min-width: 1025px) {
  .topIntroCopy span:last-child {
    margin-left: 14rem;
  }
}

.topIntroDesc {
  position: relative;
  color: var(--desc-color);
}
@media screen and (min-width: 320px) {
  .topIntroDesc {
    font-size: 1.2rem;
    margin-top: 14rem;
    padding-top: 0;
    line-height: 2.2;
  }
}
@media screen and (min-width: 1025px) {
  .topIntroDesc {
    font-size: 2.2rem;
    margin-top: 24rem;
    padding-top: 8rem;
    line-height: 1.8;
  }
}
.topIntroDesc img {
  position: absolute;
  height: auto;
}
@media screen and (min-width: 320px) {
  .topIntroDesc img {
    width: 100%;
    top: -13rem;
    right: 0;
  }
}
@media screen and (min-width: 1025px) {
  .topIntroDesc img {
    width: 56rem;
    top: -18rem;
    right: -8vw;
  }
}
.topIntroDesc strong {
  display: block;
  font-size: 140%;
  margin-bottom: 16px;
}
@media screen and (min-width: 320px) {
  .topIntroDesc br {
    display: none;
  }
}
@media screen and (min-width: 1025px) {
  .topIntroDesc br {
    display: block;
  }
}

.topBg {
  position: absolute;
  left: 0;
}
@media screen and (min-width: 320px) {
  .topBg {
    width: 200%;
    bottom: 70rem;
    -webkit-transform: rotate(-18deg) scale(1.5);
            transform: rotate(-18deg) scale(1.5);
  }
}
@media screen and (min-width: 1025px) {
  .topBg {
    width: 100%;
    bottom: 42rem;
    -webkit-transform: unset;
            transform: unset;
  }
}
.topBg img {
  height: auto;
}

.topAbout {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (min-width: 320px) {
  .topAbout {
    padding: 0 2.5vw;
  }
}
@media screen and (min-width: 1025px) {
  .topAbout {
    padding: 0 2.5vw;
  }
}

@media screen and (min-width: 320px) {
  .topAboutImgs {
    width: 100%;
    margin-top: 24px;
  }
}
@media screen and (min-width: 1025px) {
  .topAboutImgs {
    width: 50%;
    margin-top: -8rem;
  }
}
.topAboutImgs .img {
  background: var(--primary-color);
  border-radius: 50%;
  overflow: hidden;
}
@media screen and (min-width: 320px) {
  .topAboutImgs .img:first-child {
    width: 30%;
    margin: 0 0 0 auto;
  }
}
@media screen and (min-width: 1025px) {
  .topAboutImgs .img:first-child {
    width: 30%;
    margin: 0 0 0 auto;
  }
}
@media screen and (min-width: 320px) {
  .topAboutImgs .img:last-child {
    width: 60%;
    margin: -4rem 0 0 2.5vw;
  }
}
@media screen and (min-width: 1025px) {
  .topAboutImgs .img:last-child {
    width: 60%;
    margin: -18rem 0 0 2.5vw;
  }
}
.topAboutImgs .imgWrapper {
  padding-bottom: 100%;
}

@media screen and (min-width: 320px) {
  .topAboutInfo {
    width: 100%;
    padding: 64px 0 0 2%;
  }
}
@media screen and (min-width: 1025px) {
  .topAboutInfo {
    width: 50%;
    padding: 64px 0 0 9%;
  }
}

@media screen and (min-width: 320px) {
  .topRecipe .sectionInner {
    padding: 80px 7.5%;
  }
}
@media screen and (min-width: 1025px) {
  .topRecipe .sectionInner {
    padding: 128px 7.5%;
  }
}

.recipeBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.recipeBlock.fukusai {
  border-top: dashed 1px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 320px) {
  .recipeBlock.fukusai {
    margin-top: 64px;
    padding-top: 64px;
  }
}
@media screen and (min-width: 1025px) {
  .recipeBlock.fukusai {
    margin-top: 64px;
    padding-top: 64px;
  }
}

@media screen and (min-width: 320px) {
  .recipeBlock_title {
    width: 40%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1025px) {
  .recipeBlock_title {
    width: 10%;
    margin: 0;
  }
}
.recipeBlock_title .title {
  font-weight: 700;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 320px) {
  .recipeBlock_title .title {
    font-size: 2rem;
  }
}
@media screen and (min-width: 1025px) {
  .recipeBlock_title .title {
    font-size: 2.8rem;
  }
}
.recipeBlock_title .subtitle {
  line-height: 1.36;
  margin-top: 4px;
}
@media screen and (min-width: 320px) {
  .recipeBlock_title .subtitle {
    font-size: 1.3rem;
  }
}
@media screen and (min-width: 1025px) {
  .recipeBlock_title .subtitle {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 320px) {
  .recipeBlock_title .subtitle br {
    display: none;
  }
}
@media screen and (min-width: 1025px) {
  .recipeBlock_title .subtitle br {
    display: block;
  }
}

.recipeBlock_titleWrapper {
  position: relative;
  width: 100%;
  height: 0;
}
@media screen and (min-width: 320px) {
  .recipeBlock_titleWrapper {
    padding-bottom: 60%;
  }
}
@media screen and (min-width: 1025px) {
  .recipeBlock_titleWrapper {
    padding-bottom: 100%;
  }
}

.recipeBlock_titleInner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  border: solid 1px;
}
@media screen and (min-width: 320px) {
  .recipeBlock_titleInner {
    border-radius: 16px;
    background: var(--base-color);
    color: var(--primary-color);
  }
}
@media screen and (min-width: 1025px) {
  .recipeBlock_titleInner {
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--base-color);
  }
}
@media screen and (min-width: 320px) {
  .recipeBlock_titleInner.fukusai {
    background: var(--base-color);
    color: var(--secondary-color);
  }
}
@media screen and (min-width: 1025px) {
  .recipeBlock_titleInner.fukusai {
    background: var(--secondary-color);
    color: var(--base-color);
  }
}

.recipeBlock_listwrapper {
  display: grid;
}
@media screen and (min-width: 320px) {
  .recipeBlock_listwrapper {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 16px;
    padding-top: 3.8rem;
  }
}
@media screen and (min-width: 1025px) {
  .recipeBlock_listwrapper {
    width: 85%;
    grid-template-columns: repeat(4, 1fr);
    gap: 72px 32px;
    padding-top: 3.8rem;
  }
}

.recipe_article .link {
  display: block;
}
@media screen and (min-width: 320px) {
  .recipe_article .thumb {
    margin-bottom: 8px;
  }
}
@media screen and (min-width: 1025px) {
  .recipe_article .thumb {
    margin-bottom: 16px;
  }
}
.recipe_article .imgWrapper {
  border-radius: 0 32px 0 32px;
  background: var(--primary-color);
}
.recipe_article .title {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: var(--base-color);
  border-radius: 100px;
  -webkit-box-shadow: 0 0 30px -10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 30px -10px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 320px) {
  .recipe_article .title {
    padding: 8px 16px;
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 1025px) {
  .recipe_article .title {
    padding: 12px 24px;
    font-size: 2rem;
  }
}
.recipe_article .title .arrow {
  position: absolute;
  right: 24px;
}
@media screen and (min-width: 320px) {
  .recipe_article .title .arrow {
    display: none;
  }
}
@media screen and (min-width: 1025px) {
  .recipe_article .title .arrow {
    display: block;
  }
}
.recipe_article .title .arrow svg {
  display: block;
}
@media screen and (min-width: 320px) {
  .recipe_article .title .arrow svg {
    width: 1.8rem;
    height: 1.8rem;
  }
}
@media screen and (min-width: 1025px) {
  .recipe_article .title .arrow svg {
    width: 1.8rem;
    height: 1.8rem;
  }
}/*# sourceMappingURL=top.css.map */