@charset "utf-8";

/* -----------------------------------------------------------
　common
----------------------------------------------------------- */

main * {box-sizing: border-box;}
main img {max-width: 100%;}
main figure img {
  display: block;
  width: 100%;
}
main a {
  color: inherit;
  text-decoration: none;
}

body {
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: url("../img/bg_body.jpg") no-repeat top center / cover;
}

@media screen and (min-width: 801px) {
  .sp_cont {display: none !important;}
}
a:hover {
  text-decoration: underline;
  color: inherit;
}

/* -----------------------------------------------------------
  template
----------------------------------------------------------- */

/* :::::::::: main :::::::::: */

.hidden_area {overflow: hidden;}
main {
  box-sizing: border-box;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.875;
  color: #000000;
}
main article {width: 100%;}
.box {
  max-width: 1200px;
  padding: 0 50px;
  margin: 0 auto;
}
.h2_common {
  width: 50%;
  margin: 0 0 6.25em;
  text-align: left;
  overflow: hidden;
}
.h2_common span {
  position: relative;
  z-index: 0;
  display: inline-block;
  font-family: "Cinzel", serif;
  font-size: 2.1875em;
  font-weight: 600;
  line-height: 1.2;
}
.h2_common span::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 600px;
  height: 1px;
  background: #000000;
  inset: 0 auto 0 calc(100% + 50px);
  margin: auto;
}
.btn_lineup {
  width: 230px;
  height: 55px;
  margin: 30px auto 0;
}
.btn_lineup a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #72253D;
  font-weight: 500;
  line-height: 1;
  border: solid 1px #72253D;
  text-align: left;
  padding: 0 2em;
  text-decoration: none;
  transition: 0.5s;
}
.btn_lineup a::after {
  display: block;
  content: "";
  width: 2em;
  height: 0.5em;
  background: url("../img/btn_lineup.svg") no-repeat center / contain;
}
.btn_lineup a:hover {
  color: #FFFFFF;
  background: #72253D;
  opacity: 1;
}
.btn_lineup a:hover::after {background: url("../img/btn_lineup_w.svg") no-repeat center / contain;}

.store_link {
  max-width: 1100px;
  margin: 80px auto;
  padding: 0 50px;
}
.store_link ul {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}
.store_link ul li {
  width: 48%;
  height: 100px;
}
.store_link ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #72253D;
  font-size: 1.375em;
  font-weight: 500;
  line-height: 1;
  border: solid 1px #72253D;
  text-align: left;
  padding: 0 30px;
  text-decoration: none;
  transition: 0.5s;
}
.store_link ul li a::after {
  display: block;
  content: "";
  width: 1.5em;
  height: 0.5em;
  background: url("../img/btn_lineup.svg") no-repeat center / contain;
}
.store_link ul li a:hover {
  color: #FFFFFF;
  background: #72253D;
  opacity: 1;
}
.store_link ul li a:hover::after {background: url("../img/btn_lineup_w.svg") no-repeat center / contain;}


@media screen and (max-width: 1100px) {
  main {font-size: 14px;}
}



/* -----------------------------------------------------------
 page
----------------------------------------------------------- */

.kv {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto 70px;
  padding: 100px;
}
.kv > h1 ,
.kv > p {
  position: absolute;
  z-index: 1;
}
.kv > p.catch {
  width: 70%;
  inset: 80px auto auto 20px;
}
.kv > h1 {
  display: flex;
  justify-content: space-between;
  width: 55.5%;
  inset: auto 0 70px auto;
}
.kv > h1 img {display: block;}
.kv > h1 img:nth-of-type(1) {width: 14.5%;}
.kv > h1 img:nth-of-type(2) {width: 81%;}
.kv > p.scroll {
  font-family: "Cinzel", serif;
  font-weight: 600;
  line-height: 1;
  inset: auto auto 150px 0;
}
.kv > p.scroll span {
  display: block;
  transform: rotate(-90deg);
}
.kv > p.scroll::after {
  position: absolute;
  display: block;
  content: "";
  width: 0.5625em;
  height: 3.75em;
  background: url("../img/scroll.svg") no-repeat bottom left / 100%;
  inset: 3em 0.5em auto 0;
  margin: auto;
  animation: scroll 2s infinite;
}
  
.anc_list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.anc_list li {
  position: relative;
  z-index: 0;
  width: calc(100% / 3);
  height: 90px;
  text-align: center;
}
.anc_list li::after {
  position: absolute;
  display: block;
  content: "";
  width: 1px;
  height: 120%;
  background: #000000;
  margin: auto;
  inset: -100% 0 -100% auto;
  transform: rotate(30deg);
}
.anc_list li:nth-last-child(1)::after {display: none;}
.anc_list li a {
  position: relative;
  display: block;
  height: 100%;
  font-family: "Cinzel", serif;
  font-size: 1.5625em;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.anc_list li a::after {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 0.8em;
  height: 2em;
  background: url("../img/anc_list.svg") no-repeat center / contain;
  margin: auto;
  inset: auto 5% 0 0;
  transition: 0.5s;
}
.anc_list li a:hover::after {transform: translateY(10px);}
.heading section {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 80px 0;
}
.heading section .tree_l,
.heading section .tree_r {
  position: absolute;
  z-index: -1;
  display: block;
  pointer-events: none;
}
.heading section .tree_l {
  width: 23%;
  max-width: 368px;
  aspect-ratio: 368 / 274;
  background: url("../img/tree01_l.png") no-repeat center / contain;
  inset: auto auto -70px -2.5%;
  transform-origin: bottom left;
}
.heading section .tree_r {
  width: 38%;
  max-width: 606px;
  aspect-ratio: 606 / 466;
  background: url("../img/tree01_r.png") no-repeat center / contain;
  inset: -30px -3.5% auto auto;
  transform-origin: top right;
}
.heading section h2 {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 2em; 
  margin: 0 auto 1.875em;
}
.heading section h2 + p {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 1.5625em; 
  line-height: 2.5;
  margin: 0 auto 60px;
}
.heading section .caption {text-align: right;}

.story {
  padding: 80px 0;
  background: #C4C9C0;
}
.story ol {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.story ol li {
  width: 30%;
  text-align: left
}
.story ol li figure {
  position: relative;
  z-index: 0;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
  margin: 0 auto 30px;
}
.story ol li figure figcaption {
  position: absolute;
  z-index: 1;
  color: #72253D;
  font-family: "Cinzel", serif;
  font-size: 5em;
  font-weight: 600;
  line-height: 1;
  inset: -0.5em auto auto -0.25em;
}
.story ol li h3 {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 25px; 
  line-height: 1.8;
  margin: 0 auto 30px;
}
.products {padding: 70px 0 0;}
.products section h3 {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 1.5625em; 
  line-height: 1.2;
  text-align: center;
  margin: 0 auto 4em;
}
.products section > div {height: 600vh;}
.products section > div ol {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
}
.products section > div ol li {
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: 100vh;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: 2s;
}
.products section > div ol li.show {
  opacity: 1;
  visibility: visible;
}
.products section > div ol li h4 {
  position: absolute;
  z-index: 1;
  color: #72253D;
  font-family: "Cinzel", serif;
  font-size: 2.5em;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  height: 2.4em;
  margin: auto;
  inset: 0;
}
.products section > div ol li h4::before ,
.products section > div ol li h4::after {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 2em;
  height: 1px;
  background: #72253D;
  margin: auto;
}
.products section > div ol li h4::before {inset: -1em 0 auto;}
.products section > div ol li h4::after {inset: auto 0 -1em;}

.products section > div ol li figure {
  width: 50%;
  height: 100%;
}
.products section > div ol li figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.products section > div ol li dl {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
  height: 100%;
  padding: 50px 90px;
}
.products section > div ol li dl dt {
  max-width: 400px;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 1.5625em; 
  line-height: 1.2;
  margin: 0 auto 1.2em;
}
.products section > div ol li dl dt span {font-size: 35px;}
.products section > div ol li dl dd {
  max-width: 400px;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 1.125em; 
  line-height: 1.9;
  text-align: left;
}
.products section > div ol li dl dd span {color: #72253D;}
.products section > div ol li dl dd .caption {
  font-size: 0.889em;
  text-align: center;
  margin: 3em auto 0;
}
.lineup {
  padding: 90px 0 75px;
  overflow: hidden;
}
.lineup section {
  position: relative;
  z-index: 0;
  margin: 0 auto 100px;
}
.lineup section .tree_l,
.lineup section .tree_r {
  position: absolute;
  z-index: -1;
  display: block;
  pointer-events: none;
}
.lineup section .tree_l {
  width: 38%;
  max-width: 610px;
  aspect-ratio: 610 / 417;
  background: url("../img/tree02_l.png") no-repeat center / contain;
  inset: -180px auto auto -5%;
  transform-origin: top left;
}
.lineup section .tree_r {
  width: 33%;
  max-width: 527px;
  aspect-ratio: 527 / 408;
  background: url("../img/tree02_r.png") no-repeat center / contain;
  inset: -200px -3.5% auto auto;
  transform-origin: top right;
}
.lineup section:nth-of-type(3) {margin: 0 auto;}
.lineup section h3 {margin: 0 auto 70px;}
.lineup section:nth-of-type(1) h3 {width: 410px;}
.lineup section:nth-of-type(2) h3 {width: 570px;}
.lineup section:nth-of-type(3) h3 {width: 490px;}
.lineup section ul {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  max-width: 700px;
  text-align: center;
  margin: 0 auto;
}
.lineup section:nth-of-type(1) ul {
  justify-content: space-between;
  max-width: 100%;
}
.lineup section:nth-of-type(1) ul li {width: 33%;}
.lineup section ul li figure {
  width: 170px;
  margin: 0 auto 30px;
}
.lineup section ul li.p_wide figure {width: 200px;}
.lineup section ul li figure + p {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.4em;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 1.5625em; 
  line-height: 1.4;
  text-align: center;
}
.recipe {
  background: #C4C9C0;
  padding: 75px 0 100px;
}
.recipe .box > div {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.recipe .box > div section {
  position: relative;
  z-index: 0;
  width: 48.5%;
  text-align: center;
  background: #FFFFFF;
  border: solid 1px #000000;
}
.recipe .box > div section:nth-of-type(1) {z-index: 1;}
.recipe .box > div section h3 {
  height: 90px;
  line-height: 90px;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 2em; 
  border-bottom: solid 1px #000000;
}
.recipe .box > div section h3 + p {
  position: absolute;
  z-index: 1;
  width: 9.44em;
  height: auto;
  aspect-ratio: 170 / 110;
  line-height: 100px;
  font-size: 1.125em;
  font-weight: 500;
  background: url("../img/ico_recipe.png") no-repeat center / contain;
  inset: -30px auto auto calc(50% + 4.5em);
}
.recipe .box > div section > div {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 20px;
}
.recipe .box > div section > div p {
  font-size: 1.375em; 
  font-weight: 500;
}
.recipe .box > div section > div p span {
  display: block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-family: "Cinzel", serif;
  font-size: 2.7em;
  font-weight: 600;
  border-radius: 50%;
  border: solid 1px #000000;
  margin: 0 auto;
}
.recipe .box > div section > div p:nth-of-type(2) span {
  width: 70px;
  border: none;
  margin: 0 10px 0 0;
}
.recipe .box > div section dl dt {
  height: 55px;
  line-height: 55px;
  color: #FFFFFF;
  font-size: 1.5625em; 
  font-weight: 500;
  background: #72253D;
}
.recipe .box > div section dl dd {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 1.25em 3.125em;
}
.recipe .box > div section dl dd p {
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 1.375em; 
  font-weight: 500;
  line-height: 1.4;
  min-height: 2.8em;
  padding: 0 0 0 0.7em;
  border-left: solid 5px;
}
.recipe .box > div section:nth-of-type(1) dl dd p:nth-of-type(1) {border-color: #E9E186;}
.recipe .box > div section:nth-of-type(1) dl dd p:nth-of-type(2) {border-color: #E3A3A3;}
.recipe .box > div section:nth-of-type(2) dl dd p:nth-of-type(1) {border-color: #E4B15E;}
.recipe .box > div section:nth-of-type(2) dl dd p:nth-of-type(2) {border-color: #F0CD6C;}

.arrange {
  padding: 100px 50px;
  background: url("../img/bg_recipe.jpg") no-repeat center / cover;
}
.arrange p {
  position: relative;
  z-index: 1;
  max-width: 750px;
  text-align: center;
  background: rgba(255,255,255,0.8);
  margin: 0 auto;
}
.arrange p a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 250px;
  font-size: 1.75em;
  font-weight: 500;
  text-decoration: none;
  transition: 0.5s;
}
.arrange p a span {
  display: block;
  font-size: 1.14em; 
}
.arrange p a:hover {opacity: 0.5;}
.arrange p::before,
.arrange p::after,
.arrange p a::before,
.arrange p a::after {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  background: #FFFFFF;
  margin: auto;
}
.arrange p::before {
  width: calc(100% - 50px);
  height: 1px;
  inset: -20px 0 auto;
}
.arrange p::after {
  width: calc(100% - 50px);
  height: 1px;
  inset: auto 0 -20px;
}
.arrange p a::before {
  width: 1px;
  height: 100%;
  inset: 0 auto 0 -20px;
}
.arrange p a::after {
  width: 1px;
  height: 100%;
  inset: 0 -20px 0 auto;
}


/* -----------------------------------------------------------
 animation
----------------------------------------------------------- */

.fade {
  opacity: 0;
  transform: translateY(100px);
  transition: 1s;
}
.fade.fadein {
  opacity: 1;
  transform: translateY(0);
}
@keyframes scroll {
  0% {height: 3.75em;}
  50% {height: 2em;}
  100% {height: 3.75em;}
}