@charset "UTF-8";
body {
  width: 100%;
}

.kome {
  /*キービジュアル*/
  /*リード*/
  /*お米のプロが“同時メシ”でご提案！*/
  /*グランポレールと同時メシのペアリングレシピ*/
  /*絢*/
  /*泉*/
  /*ブランドサイトへ*/
  /*アニメーション*/
}
.kome h1,
.kome h2,
.kome h3,
.kome h4,
.kome div,
.kome p,
.kome ul,
.kome li {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.kome li {
  list-style: none;
}
.kome img {
  width: 100%;
  height: auto;
  line-height: 0;
  vertical-align: bottom;
  max-height: inherit;
  max-width: inherit;
}
@media only screen and (min-width: 769px) {
  .kome a img {
    transition: all 0.3s ease;
  }
}
@media only screen and (min-width: 769px) {
  .kome a:hover img {
    opacity: 0.7;
  }
}
.kome sup {
  font-size: 0.7em;
}
.kome .pcOnly {
  display: none;
}
@media only screen and (min-width: 769px) {
  .kome .pcOnly {
    display: inline;
  }
}
.kome .spOnly {
  display: inline;
}
@media only screen and (min-width: 769px) {
  .kome .spOnly {
    display: none;
  }
}
.kome .kv {
  position: relative;
  width: 100vw;
  height: 152.6666666667vw;
  background-image: url("../img/kv_bkph_sp.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (min-width: 769px) {
  .kome .kv {
    width: 100%;
    min-width: 1080px;
    height: 600px;
    background-image: url("../img/kv_bkph_pc.jpg");
    background-position: center center;
  }
}
.kome .kv--inner {
  width: 100vw;
  padding-top: 47.3333333333vw;
}
@media only screen and (min-width: 769px) {
  .kome .kv--inner {
    width: 1080px;
    margin: 0 auto;
    padding-top: 0;
  }
}
.kome .kv--inner--title {
  width: 100vw;
}
@media only screen and (min-width: 769px) {
  .kome .kv--inner--title {
    width: 862px;
    margin: 0 auto;
  }
}
.kome .kv--prod {
  width: 100vw;
  height: 33.3333333333vw;
  background-color: #40210f;
}
@media only screen and (min-width: 769px) {
  .kome .kv--prod {
    width: 100%;
    height: 114px;
  }
}
.kome .kv--prod--inner {
  width: 100vw;
  margin: 0 auto;
  position: relative;
}
@media only screen and (min-width: 769px) {
  .kome .kv--prod--inner {
    width: 1080px;
    height: 114px;
  }
}
.kome .kv--prod--inner--bk {
  position: absolute;
  top: -10.2666666667vw;
  left: 6.9333333333vw;
  width: 85.6vw;
}
@media only screen and (min-width: 769px) {
  .kome .kv--prod--inner--bk {
    top: -93px;
    left: 126px;
    width: 828px;
  }
}
.kome .kv--prod--inner--text {
  position: absolute;
  top: 5.3333333333vw;
  left: 21.6vw;
  width: 56.8vw;
  overflow: hidden;
  transition: all 0.75s linear;
  clip-path: inset(0 100% 0 0);
}
@media only screen and (min-width: 769px) {
  .kome .kv--prod--inner--text {
    top: 37px;
    left: 202px;
    width: 676px;
  }
}
.kome .kv--prod--inner--text.active {
  clip-path: inset(0 0 0 0);
}
.kome .lead {
  width: 100vw;
}
@media only screen and (min-width: 769px) {
  .kome .lead {
    width: 100%;
  }
}
.kome .lead--inner {
  width: 100vw;
  padding: 9.3333333333vw 0 16.2666666667vw;
}
@media only screen and (min-width: 769px) {
  .kome .lead--inner {
    width: 1080px;
    padding: 75px 0 109px;
    margin: 0 auto;
  }
}
.kome .lead--inner--title01 {
  position: relative;
  margin: 0 auto;
  width: 39.2vw;
  height: 12.5333333333vw;
}
@media only screen and (min-width: 769px) {
  .kome .lead--inner--title01 {
    width: 243px;
    height: 78px;
  }
}
.kome .lead--inner--title01--txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 39.2vw;
  height: 12.5333333333vw;
  line-height: 0;
  z-index: 1;
}
@media only screen and (min-width: 769px) {
  .kome .lead--inner--title01--txt {
    width: 243px;
    height: 78px;
  }
}
.kome .lead--inner--title01--mrk {
  position: absolute;
  bottom: 0.5333333333vw;
  left: 0.6666666667vw;
  width: 33.3333333333vw;
  height: 2.6666666667vw;
  line-height: 0;
  overflow: hidden;
  transition: all 0.75s linear;
  clip-path: inset(0 100% 0 0);
}
@media only screen and (min-width: 769px) {
  .kome .lead--inner--title01--mrk {
    bottom: 4px;
    left: 5px;
    width: 207px;
    height: 16px;
  }
}
.kome .lead--inner--title01--mrk.active {
  clip-path: inset(0 0 0 0);
}
.kome .lead--inner--title01--ac {
  position: absolute;
  top: 0.6666666667vw;
  left: -2.6666666667vw;
  width: 7.2vw;
  line-height: 0;
}
@media only screen and (min-width: 769px) {
  .kome .lead--inner--title01--ac {
    top: 5px;
    left: -15px;
    width: 45px;
  }
}
.kome .lead--inner--title02 {
  position: relative;
  margin: 2vw auto 0;
  width: 83.2vw;
  height: 7.2vw;
}
@media only screen and (min-width: 769px) {
  .kome .lead--inner--title02 {
    margin: 16px auto 0;
    width: 514px;
    height: 45px;
  }
}
.kome .lead--inner--title02--txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 83.2vw;
  height: 7.2vw;
  line-height: 0;
  z-index: 1;
}
@media only screen and (min-width: 769px) {
  .kome .lead--inner--title02--txt {
    width: 514px;
    height: 45px;
  }
}
.kome .lead--inner--title02--mrk {
  position: absolute;
  bottom: 0.5333333333vw;
  left: 33.6vw;
  width: 20.8vw;
  height: 2.6666666667vw;
  line-height: 0;
  overflow: hidden;
  transition: all 0.75s 0.75s linear;
  clip-path: inset(0 100% 0 0);
}
@media only screen and (min-width: 769px) {
  .kome .lead--inner--title02--mrk {
    bottom: 4px;
    left: 208px;
    width: 129px;
    height: 16px;
  }
}
.kome .lead--inner--title02--mrk.active {
  clip-path: inset(0 0 0 0);
}
.kome .lead--inner--bar {
  width: 88.8vw;
  border-top: #40210f 1px solid;
  margin: 5.0666666667vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .lead--inner--bar {
    width: 718px;
    margin: 22px auto 0;
  }
}
.kome .lead--inner--text {
  width: 82.1333333333vw;
  margin: 6.6666666667vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .lead--inner--text {
    width: 625px;
    margin: 45px auto 0;
  }
}
.kome .suggest {
  width: 100vw;
  background-image: url(../img/suggest_bk_sp.jpg);
  background-size: 100% auto;
  background-position: top center;
}
@media only screen and (min-width: 769px) {
  .kome .suggest {
    width: 100%;
    min-width: 1080px;
    background-image: url(../img/suggest_bk_pc.jpg);
    background-size: auto;
  }
}
@media only screen and (min-width: 2000px) {
  .kome .suggest {
    background-size: cover;
  }
}
.kome .suggest--inner {
  width: 100vw;
  padding: 8.5333333333vw 0 10.4vw;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--inner {
    width: 1080px;
    padding: 85px 0 150px;
    margin: 0 auto;
  }
}
.kome .suggest--cont {
  width: 90.6666666667vw;
  margin: 0 auto;
  padding: 7.7333333333vw 0 11.7333333333vw;
  background-color: #ebf0db;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--cont {
    width: 873px;
    padding: 75px 0 88px;
  }
}
.kome .suggest--cont--sh {
  width: 74.5333333333vw;
  margin: 0 auto;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--cont--sh {
    width: 347px;
  }
}
.kome .suggest--cont--title {
  width: 78.8vw;
  margin: -1.8666666667vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--cont--title {
    width: 706px;
    margin: -13px auto 0;
  }
}
.kome .suggest--prof {
  width: 88.6666666667vw;
  height: 115.3333333333vw;
  margin: 2.6666666667vw auto 0;
  padding: 10vw 0 0;
  background-image: url(../img/sugg_prof_bk_sp.png);
  background-size: cover;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--prof {
    width: 840px;
    height: 464px;
    margin: 13px auto 0;
    padding: 65px 0 0;
    background-image: url(../img/sugg_prof_bk_pc.png);
  }
}
.kome .suggest--prof--title {
  width: 65.7333333333vw;
  margin: 0 auto;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--prof--title {
    width: 562px;
    margin: 0 auto 0 72px;
  }
}
.kome .suggest--prof--text {
  width: 64.8vw;
  margin: 5.6vw auto 0 12vw;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--prof--text {
    width: 444px;
    margin: 26px auto 0 135px;
  }
}
.kome .suggest--prof--ph {
  position: relative;
  width: 22.6666666667vw;
  margin: -30.6666666667vw auto 0 53.3333333333vw;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--prof--ph {
    width: 140px;
    margin: -216px auto 0 620px;
  }
}
.kome .suggest--prof--btn {
  width: 66.6666666667vw;
  margin: 5.3333333333vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--prof--btn {
    width: 382px;
    margin: 35px auto 0;
  }
}
.kome .suggest--make {
  width: 75.6vw;
  margin: 12.6666666667vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--make {
    width: 760px;
    margin: 70px auto 0;
  }
}
.kome .suggest--make--title {
  width: 75.6vw;
  margin: 0 auto;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--make--title {
    width: 684px;
    margin: 70px auto 0;
  }
}
.kome .suggest--make--lead {
  width: 70.4vw;
  margin: 5.0666666667vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--make--lead {
    width: 559px;
    margin: 35px auto 0;
  }
}
.kome .suggest--make--step {
  margin: 7.4666666667vw 0 0;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--make--step {
    margin: 32px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: start;
  }
}
.kome .suggest--make--step li:nth-child(1) {
  width: 63.3333333333vw;
  margin: 0 auto 0 4.6666666667vw;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--make--step li:nth-child(1) {
    width: 245px;
    margin: 0;
  }
}
.kome .suggest--make--step li:nth-child(2) {
  width: 69.2vw;
  margin: 5.3333333333vw auto 0 4.1333333333vw;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--make--step li:nth-child(2) {
    width: 242px;
    margin: 0;
  }
}
.kome .suggest--make--step li:nth-child(3) {
  width: 63.4666666667vw;
  margin: 6.4vw auto 0 4.6666666667vw;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--make--step li:nth-child(3) {
    width: 242px;
    margin: 0;
  }
}
.kome .suggest--charm {
  position: relative;
  width: 80vw;
  height: 82.4vw;
  margin: 18.6666666667vw auto 0;
  background-color: #fff;
  padding-top: 10vw;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--charm {
    width: 752px;
    height: 303px;
    margin: 115px auto 0;
    padding-top: 55px;
  }
}
.kome .suggest--charm--title {
  position: absolute;
  width: 53.0666666667vw;
  top: -4.2666666667vw;
  left: 50%;
  transform: translateX(-50%);
  mix-blend-mode: multiply;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--charm--title {
    width: 284px;
    top: -23px;
  }
}
.kome .suggest--charm--cont {
  position: relative;
  width: 69.4666666667vw;
  margin: 0 auto;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--charm--cont {
    width: 590px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
}
.kome .suggest--charm--cont li {
  position: absolute;
  width: 29.7333333333vw;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--charm--cont li {
    width: 160px;
    position: relative;
    margin-bottom: 30px;
  }
}
.kome .suggest--charm--cont--01 {
  top: 0;
  left: 0;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--charm--cont--01 {
    top: inherit;
    left: inherit;
  }
}
.kome .suggest--charm--cont--02 {
  top: 0;
  left: 36.6666666667vw;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--charm--cont--02 {
    top: inherit;
    left: inherit;
  }
}
.kome .suggest--charm--cont--03 {
  top: 22.6666666667vw;
  left: 0;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--charm--cont--03 {
    top: inherit;
    left: inherit;
  }
}
.kome .suggest--charm--cont--04 {
  width: 35.3333333333vw !important;
  top: 20vw;
  left: 33.8666666667vw;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--charm--cont--04 {
    top: inherit;
    left: inherit;
    width: 190px !important;
    margin-left: 95px;
  }
}
.kome .suggest--charm--cont--05 {
  top: 46vw;
  left: 36.9333333333vw;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--charm--cont--05 {
    top: inherit;
    left: inherit;
    margin-right: 90px;
  }
}
.kome .suggest--charm--ph {
  position: absolute;
  width: 28vw;
  bottom: 0;
  left: 5.3333333333vw;
}
@media only screen and (min-width: 769px) {
  .kome .suggest--charm--ph {
    width: 122px;
    left: 23px;
  }
}
.kome .pairing--nav {
  margin: 12.8vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .pairing--nav {
    margin: 129px auto 0;
  }
}
.kome .pairing--nav--title {
  width: 73.6vw;
  margin: 0 auto;
}
@media only screen and (min-width: 769px) {
  .kome .pairing--nav--title {
    width: 617px;
  }
}
.kome .pairing--nav--lead {
  width: 88.8vw;
  margin: 7.7333333333vw auto;
}
@media only screen and (min-width: 769px) {
  .kome .pairing--nav--lead {
    width: 728px;
    margin: 28px auto 0;
  }
}
.kome .pairing--nav--sp {
  display: flex;
  justify-content: space-between;
  width: 88.6666666667vw;
  margin: 5.6vw auto;
}
.kome .pairing--nav--sp li:nth-child(1) {
  position: relative;
  width: 41.8666666667vw;
  height: 37.7333333333vw;
}
.kome .pairing--nav--sp li:nth-child(2) {
  position: relative;
  width: 42.4vw;
  height: 37.7333333333vw;
}
.kome .pairing--nav--sp .pairing--nav--aya--bk--sp,
.kome .pairing--nav--sp .pairing--nav--aya--btn--sp,
.kome .pairing--nav--sp .pairing--nav--sen--bk--sp,
.kome .pairing--nav--sp .pairing--nav--sen--btn--sp {
  position: absolute;
  top: 0;
  left: 0;
}
.kome .pairing--nav--sp .pairing--nav--aya--bk--sp,
.kome .pairing--nav--sp .pairing--nav--sen--bk--sp {
  mix-blend-mode: multiply;
}
@media only screen and (min-width: 769px) {
  .kome .pairing--nav--sp {
    display: none;
  }
}
.kome .pairing--nav--pc {
  display: none;
}
@media only screen and (min-width: 769px) {
  .kome .pairing--nav--pc {
    display: flex;
    justify-content: space-between;
    width: 890px;
    margin: 25px auto 0;
  }
}
.kome .pairing--nav--pc li:nth-child(1) {
  position: relative;
  width: 434px;
  height: 538px;
}
.kome .pairing--nav--pc .pairing--nav--pc--aya--bk {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
}
.kome .pairing--nav--pc li:nth-child(2) {
  position: relative;
  width: 439px;
  height: 538px;
}
.kome .pairing--nav--pc .pairing--nav--pc--sen--bk {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
}
.kome .pairing--nav--pc--aya--ol {
  width: 363px;
  margin: 40px auto 0 32px;
  position: relative;
  z-index: 1;
}
.kome .pairing--nav--pc--sen--ol {
  width: 376px;
  margin: 42px auto 0 34px;
  position: relative;
  z-index: 1;
}
.kome .pairing--nav--pc--aya--btn,
.kome .pairing--nav--pc--sen--btn {
  width: 355px;
  margin: 30px auto 0;
  position: relative;
  z-index: 1;
}
.kome .aya {
  padding: 8vw 0 17.7333333333vw;
  background-image: url(../img/pairing_recipe_aya_bk_sp.jpg);
  background-size: 100% auto;
}
@media only screen and (min-width: 769px) {
  .kome .aya {
    padding: 70px 0 150px;
  }
}
.kome .aya--title {
  width: 82.6666666667vw;
  margin: 0 auto;
}
@media only screen and (min-width: 769px) {
  .kome .aya--title {
    position: relative;
    z-index: 1;
    width: 1050px;
  }
}
.kome .aya--title--sub--sp {
  width: 100vw;
  margin: 4vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .aya--title--sub--sp {
    display: none;
  }
}
.kome .aya--mv {
  width: 100vw;
}
@media only screen and (min-width: 769px) {
  .kome .aya--mv {
    position: relative;
    width: 1000px;
    margin: -47px auto 0;
  }
}
.kome .aya--recipe--copy {
  width: 80vw;
  margin: 2.6666666667vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .aya--recipe--copy {
    width: 540px;
    margin: 40px auto 0;
    transform: translateX(-85px);
  }
}
.kome .aya--recipe--catch {
  position: relative;
  width: 89.6vw;
  height: 30.6666666667vw;
  margin: -2.6666666667vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .aya--recipe--catch {
    width: 916px;
    height: 275px;
    margin: -130px auto 0;
  }
}
.kome .aya--racipe--text01 {
  position: absolute;
  width: 51.6vw;
  height: 8.5333333333vw;
  top: 3.2vw;
  left: 8.6666666667vw;
  overflow: hidden;
  transition: all 0.5s linear;
  clip-path: inset(0 100% 0 0);
}
@media only screen and (min-width: 769px) {
  .kome .aya--racipe--text01 {
    width: 632px;
    height: 53px;
    top: 163px;
    left: 46px;
    transition: all 0.75s linear;
  }
}
.kome .aya--racipe--text01.active {
  clip-path: inset(0 0 0 0);
}
.kome .aya--racipe--text02 {
  position: absolute;
  width: 62.6666666667vw;
  height: 8.5333333333vw;
  top: 13.0666666667vw;
  left: 3.3333333333vw;
  overflow: hidden;
  transition: all 0.5s 0.5s linear;
  clip-path: inset(0 100% 0 0);
}
@media only screen and (min-width: 769px) {
  .kome .aya--racipe--text02 {
    display: none;
  }
}
.kome .aya--racipe--text02.active {
  clip-path: inset(0 0 0 0);
}
.kome .aya--recipe--ac {
  position: absolute;
  width: 25.0666666667vw;
  top: 0;
  left: 62.1333333333vw;
}
@media only screen and (min-width: 769px) {
  .kome .aya--recipe--ac {
    width: 223px;
    top: 0;
    left: 646px;
  }
}
.kome .aya--recipe {
  width: 90.6666666667vw;
  padding: 6.6666666667vw 2.6666666667vw 6.6666666667vw;
  margin: 0 auto;
  background-image: url(../img/pairing_recipe_cont_bk_sp.jpg);
  background-size: cover;
}
@media only screen and (min-width: 769px) {
  .kome .aya--recipe {
    position: relative;
    width: 845px;
    margin: -3px auto 0;
    padding: 22px 55px 30px;
    background-image: url(../img/pairing_recipe_cont_bk_pc.jpg);
  }
}
.kome .aya--recipe--mate {
  width: 80vw;
  margin: 0 auto;
}
@media only screen and (min-width: 769px) {
  .kome .aya--recipe--mate {
    width: 735px;
    margin: 0 auto;
  }
}
.kome .aya--recipe--how {
  width: 80vw;
  margin: 12.2666666667vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .aya--recipe--how {
    width: 735px;
    margin: 32px auto 0;
  }
}
.kome .aya--recipe--ph {
  width: 47.2vw;
  margin: 8vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .aya--recipe--ph {
    position: absolute;
    width: 186px;
    margin: inherit;
    right: 65px;
    bottom: 75px;
  }
}
.kome .sen {
  padding: 8vw 0 17.7333333333vw;
  background-image: url(../img/pairing_recipe_sen_bk_sp.jpg);
  background-size: 100% auto;
}
@media only screen and (min-width: 769px) {
  .kome .sen {
    padding: 70px 0 150px;
  }
}
.kome .sen--title {
  width: 82.6666666667vw;
  margin: 0 auto;
}
@media only screen and (min-width: 769px) {
  .kome .sen--title {
    position: relative;
    z-index: 1;
    width: 1050px;
  }
}
.kome .sen--title--sub--sp {
  width: 100vw;
  margin: 4vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .sen--title--sub--sp {
    display: none;
  }
}
.kome .sen--mv {
  width: 100vw;
}
@media only screen and (min-width: 769px) {
  .kome .sen--mv {
    position: relative;
    width: 1000px;
    margin: -47px auto 0;
  }
}
.kome .sen--recipe--copy {
  width: 80vw;
  margin: 2.6666666667vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .sen--recipe--copy {
    width: 540px;
    margin: 40px auto 0;
    transform: translateX(-85px);
  }
}
.kome .sen--recipe--catch {
  position: relative;
  width: 89.6vw;
  height: 29.7333333333vw;
  margin: 0.6666666667vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .sen--recipe--catch {
    width: 916px;
    height: 275px;
    margin: -122px auto 0;
  }
}
.kome .sen--racipe--text01 {
  position: absolute;
  width: 53.4666666667vw;
  height: 8.5333333333vw;
  top: 3.2vw;
  left: 8.2666666667vw;
  overflow: hidden;
  transition: all 0.5s linear;
  clip-path: inset(0 100% 0 0);
}
@media only screen and (min-width: 769px) {
  .kome .sen--racipe--text01 {
    width: 632px;
    height: 53px;
    top: 163px;
    left: 46px;
    transition: all 0.75s linear;
  }
}
.kome .sen--racipe--text01.active {
  clip-path: inset(0 0 0 0);
}
.kome .sen--racipe--text02 {
  position: absolute;
  width: 47.6vw;
  height: 8.5333333333vw;
  top: 13.0666666667vw;
  left: 11.0666666667vw;
  overflow: hidden;
  transition: all 0.5s 0.5s linear;
  clip-path: inset(0 100% 0 0);
}
@media only screen and (min-width: 769px) {
  .kome .sen--racipe--text02 {
    display: none;
  }
}
.kome .sen--racipe--text02.active {
  clip-path: inset(0 0 0 0);
}
.kome .sen--recipe--ac {
  position: absolute;
  width: 24.5333333333vw;
  top: 0;
  left: 63.8666666667vw;
}
@media only screen and (min-width: 769px) {
  .kome .sen--recipe--ac {
    width: 223px;
    top: 0;
    left: 646px;
  }
}
.kome .sen--recipe {
  width: 90.6666666667vw;
  padding: 6.6666666667vw 2.6666666667vw 6.6666666667vw;
  margin: 0.4vw auto 0;
  background-image: url(../img/pairing_recipe_cont_bk_sp.jpg);
  background-size: cover;
}
@media only screen and (min-width: 769px) {
  .kome .sen--recipe {
    position: relative;
    width: 845px;
    margin: -3px auto 0;
    padding: 22px 55px 140px;
    background-image: url(../img/pairing_recipe_cont_bk_pc.jpg);
  }
}
.kome .sen--recipe--mate {
  width: 80vw;
  margin: 0 auto;
}
@media only screen and (min-width: 769px) {
  .kome .sen--recipe--mate {
    width: 735px;
  }
}
.kome .sen--recipe--how {
  width: 80vw;
  margin: 11.7333333333vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .sen--recipe--how {
    width: 735px;
    margin: 32px auto 0;
  }
}
.kome .sen--recipe--ph {
  width: 47.2vw;
  margin: 9.6vw auto 0;
}
@media only screen and (min-width: 769px) {
  .kome .sen--recipe--ph {
    position: absolute;
    width: 186px;
    margin: inherit;
    right: 65px;
    bottom: 75px;
  }
}
.kome .brandlink {
  width: 100vw;
  padding: 8.8vw 0;
}
@media only screen and (min-width: 769px) {
  .kome .brandlink {
    padding: 118px 0;
  }
}
.kome .brandlink--btn {
  width: 66.6666666667vw;
  margin: 0 auto;
}
@media only screen and (min-width: 769px) {
  .kome .brandlink--btn {
    width: 473px;
  }
}
.kome .effect-fadein {
  opacity: 0;
}
.kome .effect-fadein.active {
  animation: fadeIn 0.75s ease forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.kome .effect-fadeup-in {
  opacity: 0;
  transform: translateY(20%);
}
.kome .effect-fadeup-in.active {
  animation: fadeUpIn 0.75s ease forwards;
}
.kome .effect-fadeup-in-d {
  opacity: 0;
  transform: translateY(20%);
}
.kome .effect-fadeup-in-d.active {
  animation: fadeUpIn 0.75s ease 0.25s forwards;
}
@keyframes fadeUpIn {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}/*# sourceMappingURL=kome.css.map */