@charset "utf-8";
body{
  color: var(--text-color);
  font-family: var(--text-font);
  font-weight: 400;
  font-size: 4.25vw;
  font-feature-settings: "palt";
  letter-spacing: var(--spacing-text);
  line-height: 2em;
  overflow-y: scroll;
}
.wrapper{
  background: url(../images/bg-pattern.png) repeat;
}
li{
  list-style: none;
}
img{
  width: 100%;
}
.defs{
  display: none;
}
@media screen and (min-width: 737px) {
  body{
    font-size: 1.75vw;
  }
  .is-sp{
    display: none;
  }
}
@media screen and (min-width: 1280px) {
  body{
    font-size: 1vw;
  }
}
@media not all and (min-width: 737px) {
  .is-pc{
    display: none;
  }
}
/*===================
Common Compornent Frame
===================*/
.l-flexbox{
  display: flex;
}
@media screen and (min-width: 737px) {
  .l-split{
    display: flex;
  }
  .l-flexbox--pc{
    display: flex;
  }
}
/*===================
Page Layout
===================*/
.l-container{
  margin: 0 auto;
  padding: var(--inner-padding);
  box-sizing: content-box;
}
.l-inner{
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 737px) {
  .l-inner{
    width: 96%;
  }
}
@media screen and (min-width: 1280px) {
  .l-inner{
    width: 80%;
  }
}
/*===================
title style
===================*/
h1, h2, h3,
.en-title{
  font-family: var(--text-title);
  font-weight: 600;
}
.en-title{
  padding-right: 4.75em;
  display: inline-block;
  font-size: 0.875em;
  line-height: 1;
  text-transform: uppercase;
  position: relative;
}
.en-title:after{
  content: '';
  display: inline-block;
  height: 1px;
  width: 4.125em;
  background: var(--text-color);
  position: absolute;
  top: calc((100% - 1px) / 2);
  right: 0;
  opacity: 0.2;
}
/*===================
main text style
===================*/
main p{
  font-size: 1.0625em;
  line-height: 2;
}
/*===================
PAGE LAYOUT
===================*/
.page__header{
  margin-top: 6.25em;
}
.page__header .l-inner{
  position: relative;  
}
.page__header h1{
  font-size: 2.25em;
}
.page__header .breadcrumbs{
  font-size: 0.875em;
}
.page__header .breadcrumbs>li{
  display: inline-block;
}
.page__header .breadcrumbs>li:not(:first-child):before{
  content: '>';
  margin-right: 0.5em;
}
@media screen and (min-width: 737px) {
  .page__header{
    margin-top: 8.75em;
  }
  .page__header h1{
    font-size: 3.75em;
  }
  .page__header .breadcrumbs{
    position: absolute;
    top: 0;
    right: 0;
  }
  .page__contents{
    margin-top: 10.625em;
  }
  .page__contents *+h2{
    margin-top: 3.25em;
  }
  .page__contents h2{
    margin-bottom: 3.25em;
  }
  .page__contents *+h3{
    margin-top: 4.375em;
  }
  .page__contents h3{
    margin-bottom: 2.75em;
  }
}
@media not all and (min-width: 737px) {
  .page__header .breadcrumbs{
    margin-top: 2.25em;
  }
}
/*page-contents*/
.page__contents{
  margin-top: 4.375em;
}
.page__contents>section{
  margin-top: 6.25em;
}
.page__contents>section>section{
  margin-top: 3.75em;
}
.page__contents>section>section:not(:first-of-type){
  padding-top: 3.75em;
  border-top-color: var(--border-color);
  border-top-width: 1px;
  border-top-style: solid;
}
.page__contents *+h2{
  margin-top: 3.25em;
}
.page__contents h2{
  margin-bottom: 1.75em;
  line-height: 1.5;
}
.page__contents *+h3{
  margin-top: 3.75em;
}
.page__contents h3{
  margin-bottom: 1.75em;
}
.page__contents h2{
  font-size: 2em;
}
.page__contents h3{
  font-size: 1.375em;
}
.page__contents *+p{
  margin-top: 1.75em;
}
.page__contents p+p{
  margin-top: 0.75em;
}
.page__contents p.lead{
  margin-top: 3.75em;
}
@media screen and (min-width: 737px) {
  .page__contents>section{
    margin-top: 6.25em;
  }
  .page__contents>section>section{
    margin-top: 4.375em;
  }
  .page__contents>section>section:not(:first-of-type){
    padding-top: 4.375em;
  }
  .page__contents h2{
    margin-bottom: 2.25em;
  }
  .page__contents h3{
    margin-bottom: 1.75em;
  }
  .page__contents *+p{
    margin-top: 2.5em;
  }
  .page__contents p.lead{
    margin-top: 7.5em;
  }
  .page__contents .l-split{
    align-items: flex-start;
  }
  .page__contents .l-split .split__left{
    flex-basis: 55%;
  }
  .l-split__right{
    margin-left: auto;
    flex-basis: 40%;
  }
}
@media not all and (min-width: 737px) {
  .l-split__right{
    margin-top: 1.75em;
  }
}
/*===================
Compornent
===================*/
/*button*/
*+.s-bt{
  margin-top: 3.75em;
}
.s-bt a{
  color: var(--text-color);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: .3s;
  vertical-align: middle;
}
.s-bt a:after{
  content: '';
  display: inline-block;
  margin-left: 1em;
  border-color: var(--btn-border);
  border-width: 1px;
  border-style: solid;
  width: 4.375em;
  height: 4.375em;
  border-radius: 50%;
  background: transparent url(../images/common/btn-arrow.svg) no-repeat center center;
  background-size: 1em 1em;
  vertical-align: middle;
  transition: .3s;
}
.s-bt a:hover{
  color: var(--text-color-rgba);
}
.s-bt a:hover:after{
  background-color: var(--accent-color);
}
/*------------------
FORM COMPORNENT
------------------*/
input{
  font-size: 1.125em;
}
input[type="text"]{
  padding: 0.25em;
}
textarea{
  width: 90%;
  height: 7em;
}
@media screen and (min-width: 737px) {
  textarea{
    width: 24em;
  }
}
/*===============
unique style for each page
===============*/
/*------------------
EVENT LIST
------------------*/
.event-list>li{
  padding: 1.375em 0;
  border-top-color: var(--border-color);
  border-top-width: 1px;
  border-top-style: solid;
  line-height: 1.4;
}
.top__information .event-list>li:nth-child(n+4){
  display: none;
}
.event-list dl{
  width: 100%;
}
.event-list dt{
  font-size: 1.25em;
  font-family: var(--text-title);
  font-weight: 600;
}
.event-list dt small{
  font-size: 0.75em;
}
@media screen and (min-width: 737px) {
  .event-list dl{
    display: table;
  }
  .event-list dt, .event-list dd{
    display: table-cell;
    table-layout: fixed;
  }
  .event-list dt{
    width:45%;
  }
  .event__area{
    width: 27.5%;
  }
  .event__date{
    width: 27.5%;
  }
}
@media screen and (min-width: 1280px) {
  .event-list dt{
    width:50%;
  }
  .event__area{
    width: 25%;
  }
  .event__date{
    width: 25%;
  }
}
@media not all and (min-width: 737px) {
  .event-list dl{
    display: flex;
    flex-direction: column;
  }
  .event-list dt{
    margin-top: 0.75em;
    order: 2;
  }
  .event__area{
    margin-top: 0.5em;
    color: var(--text-color-dull);
    order: 3;
  }
  .event__date{
    font-size: 1.125em;
    order: 1;
  }
}
/*------------------
TOP PAGE
------------------*/
/*Main Visual*/
.top__mv{
  margin-top: 6.25em;
  position: relative;
}
.top__mv *{
  margin: 0;
  line-height: 1;
}
.top__mv__image{
  width: 100%;
  padding-top: 75%;
  position: relative;
}
.top__mv__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.top__mv__catch{
  position: absolute;
  top: -3.75em;
  left: 10%;
  writing-mode: vertical-rl;
}
.top__mv__catch p{
  font-size: 0.9375em;
  font-family: var(--text-title);
  font-weight: 600;
  line-height: 2.2;
}
.top__mv__catch h1{
  margin-right: 1.5em;
  padding-left: 1em;
  background: transparent url(../images/top_mv-stamp.png) no-repeat left bottom 0.25em;
  background-size: 0.6875em auto;
  font-size: 1.25em;
}
.top__mv__catch small{
  margin-bottom: 1em;
  font-size: 0.5em;
}
.top__mv__shop-name{
  display: none;
  color: var(--text-color-light);
  font-size: 2.75em;
  font-family: var(--text-title);
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
  opacity: 0.7;
  position: absolute;
  bottom: -0.5em;
  right: var(--inner-padding-ltrt);
}
@media screen and (min-width: 737px) {
  .top__mv{
    margin-top: 17.8125em;
  }
  .top__mv__image{
    padding-top: 65%;
  }
  .top__mv__catch{
    top: -7.5em;
    left: 10%;
  }
  .top__mv__catch p{
    font-size: 1.375em;
    line-height: 2.75;
  }
  .top__mv__catch h1{
    margin-right: 2.85em;
    font-size: 1.75em;
  }
  .top__mv__shop-name{
    font-size: 6.25em;
    bottom: -1.5em;
  }
}
/*animation*/
.top__mv__catch>*{
  opacity: 0;
  transition: 2.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier:(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
}
.top__mv__catch p{
  transition-delay: .5s;
}
.top__mv__catch h1{
  transition-delay: 2s;
}
.top__mv__catch *.is-active{
  opacity: 1;
}
/*------------------
News
------------------*/
.top__news{
  padding: 1.25em 6.25%;
  position: absolute;
  bottom: -10.375em;
  left: 0;
}
.top__news__title h2{
  margin-bottom: 1.5em;
  color: var(--text-color-dull);
  font-size: 0.75em;
  text-transform: uppercase;
}
.top__news__link a{
  color: var(--text-color-dull);
  font-size: 0.75em;
  font-weight: 300;
  text-decoration: none;
  vertical-align: middle;
}
.top__news__link svg{
  margin-left: 0.25em;
  width: 0.875em;
  height: 0.875em;
  stroke: var(--text-color-dull);
}
.top__news__link a:hover{
  color: var(--accent-color);
}
.top__news__link a:hover svg{
  stroke: var(--accent-color);
}
.ticker{
  margin-left: 10%;
  width: 72.5vw;
  position: relative;
}
.ticker li:not(:first-child){
  opacity: 0;
}
.news__date{
  font-size: 0.875em;
  font-family: var(--text-number);
}
.top__news .news-list{
  margin-left: 2em;
}
.top__news .news-list dl{
  margin-top: 1em;
}
.top__news .news-list dt{
  font-size: 0.875em;
  line-height: 1.7;
}
.top__news .news-list dt a{
  color: var(--text-color);
  text-underline-offset: 4px;
}
.top__news .news-list dt a:hover{
  color: var(--accent-color);
}
.news-list dd{
  display: none;
}
.modaal-content-container{
  border-color: var(--accent-color);
  border-width: 4px;
  border-style: solid;
}
.modaal-wrapper h3{
  margin-bottom: 0.75em;
  padding-bottom: 0.5em;
  border-bottom-color: var(--text-color);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  font-size: 1.375em;
}
@media screen and (min-width: 737px) {
  .top__news{
    padding: 1em;
    bottom: 0;
    background: var(--bgcolor-light);
  }
  .ticker{
    width: 18em;
  }
}
@media screen and (min-width: 1024px) {
  .top__news{
    padding: 2.25em 1.875em 2em 1.875em;
  }
  .ticker{
    width: 20em;
  }
}
/*------------------
event information
------------------*/
section.top__information{
  margin-top: 15em;
}
.top__information h2{
  margin-bottom: 0;
  display: inline-block;
  font-size: 2em;
}
p.top__information__text{
  margin-top: 0;
  display: inline-block;
  font-size: 1.125em;
  font-family: var(--text-title);
  font-weight: 600;
  letter-spacing: var(--spacing-title);
}
.top__information .event-list{
  margin-top: 3.75em;
}
.top__information__caption{
  margin-top: 3.125em;
  align-items: center;
  justify-content: flex-end;
  text-align: left;
  vertical-align: middle;
}
.top__information__caption p{
  margin-top: 0;
}
.top__information__caption p.s-bt{
  font-size: 1em;
}
@media screen and (min-width: 737px) {
  .top__information .l-flexbox--pc{
    align-items: center;
  }
  p.top__information__text{
    margin-top: 0;
    margin-left: 2.5em;
  }
  .top__information .event-list{
    margin-top: 6.25em;
  }
  .top__information__caption{
    margin-top: 8.4375em;
  }
  .top__information__caption p.s-bt{
    margin-left: 3em;
  }
}
@media not all and (min-width: 1024px) {
  .top__information__caption .flex-left{
    flex-basis: 62.5%;
  }
}
@media not all and (min-width: 737px) {
  .top__information__caption p.s-bt{
    margin-top: 2.5em;
  }
}
/*------------------
Center Flavor Image
------------------*/
.top__flavor-image{
  margin-top: 8.75em;
  position: relative;
}
.top__flavor-image p:first-of-type{
  width: 90%;
}
.top__flavor-image p:last-of-type{
  width: 32.5%;
  position: absolute;
  top: 42.5%;
  right: 0;
}
@media screen and (min-width: 737px) {
  .top__flavor-image{
    margin-top: 15.625em;
  }
  .top__flavor-image p:first-of-type{
    width: 79%;
  }
  .top__flavor-image p:last-of-type{
    width: 20%;
    top: 0;
    right: 0;
  }
}
/*animation*/
.top__flavor-image p{
  opacity: 0;
  transition: 1.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
}
.top__flavor-image p.is-active{
  opacity: 1;
}
@media screen and (min-width: 737px) {
  .top__flavor-image p:last-of-type{
    transition-delay: .5s;
  }
}
/*------------------
Ohagi Image
------------------*/
.top__ohagi-image{
  margin: 0 -3.125%;
  padding: 8.125em 0;
  background-image: url(../images/top_text-ohagi-sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
}
.top__ohagi-image p{
  margin: 0 auto;
  width: 62.5%;
}
@media screen and (min-width: 737px) {
  .top__ohagi-image{
    background-image: url(../images/top_text-ohagi.png);
  }
  .top__ohagi-image p{
    width: 40%;
  }
}
@media not all and (min-width: 737px) {
  .top__ohagi-image{
    margin: 4.375em  -3.125% 2.25em -3.125%;
  }
}
/*animation*/
.top__ohagi-image p{
  opacity: 0;
  transition: 1.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); /* easeInSine */
}
.top__ohagi-image p.is-active{
  opacity: 1;
}
/*------------------
Product
------------------*/
.top__product{
  margin-top: 8.125em;
}
.top__product__banner{
  margin-bottom: 4.375em;
}
.top__product .split-left,
.top__product .split-right{
  flex-basis: 50%;
  position: relative;
}
.top__product .split-left{
  padding-left: 10%;
}
.top__product h2{
  margin-bottom: 0.875em;
  font-size: 1.375em;
}
.top__product h3{
  display: inline-block;
  font-size: 2.75em;
  position: relative;
}
.top__product h3:after{
  content: '';
  display: block;
  width: 1.15em;
  height: 1.7em;
  background: url(../images/top_ohagi-stamp.png) no-repeat center center;
  background-size: cover;
  position: absolute;
  bottom: -0.55em;
  right: -1.5em;
}
.top__product .en-title{
  display: block;
  font-size: 0.75em;
  transform: rotate(90deg);
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 1em;
}
@media screen and (min-width: 737px) {
  .top__product h2{
    margin-bottom: 1.25em;
    font-size: 1.25em;
  }
}
@media screen and (min-width: 960px) {
  .top__product h3{
    font-size: 3.25em;
  }
}
@media not all and (min-width: 737px) {
  .top__product .split-right{
    margin-top: 3.75em;
  }
}
/*------------------
Shop
------------------*/
.top__shop{
  margin-top: 8.75em;
}
.top__shop__image{
  position: relative;
}
.top__shop__image p:first-of-type{
  width: 75%;
}
.top__shop__image p:last-of-type{
  width: 35%;
  position: absolute;
  top: 40%;
  right: 0;
}
.top__shop__text{
  margin-top: 10.875em;
  flex-direction: row-reverse;
}
.top__shop__text h2{
  margin-bottom: 0.5em;
  font-size: 1.375em;
}
.top__shop__text h3{
  margin-bottom: 1.5625em;
  font-size: 2.5em;
}
.top__shop__text>div{
  flex-basis: 50%;
}
.top__shop__text .split-right{
  text-align: right;
}
@media screen and (min-width: 737px) {
  .top__shop{
    margin-top: 16em;
  }
  .top__shop__image p:first-of-type{
    width: 69%;
  }
  .top__shop__image p:last-of-type{
    width: 30%;
    top: 0;
    right: 0;
  }
  .top__shop__text{
    margin-top: 6.875em;
  }
  .top__shop__text h2{
    margin-bottom: 2.25em;
    font-size: 1.375em;
  }
  .top__shop__text h3{
    margin-bottom: 1.5625em;
    font-size: 2em;
  }
}
@media not all and (min-width: 737px) {
  .top__shop__text .split-left{
    margin-top: 3.75em;
  }
}
@media screen and (min-width: 960px) {
  .top__shop__text h3 br{
    display: none;
  }
}
@media not all and (min-width: 960px) {
  .top__shop__text h3{
    line-height: 1.7;
  }
  .top__shop__text h3 br{
    display: block;
  }
}
/*animation*/
.top__shop__image p{
  opacity: 0;
  transition: 1.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
}
.top__shop__image p.is-active{
  opacity: 1;
}
@media screen and (min-width: 737px) {
  .top__shop__image p:last-of-type{
    transition-delay: .5s;
  }
}
/*------------------
Calendar
------------------*/
.event__calendar{
  margin: 3.75em auto 0 auto;
}
.event__calendar iframe{
  width: 100%;
  height: 600px;
  border-color: var(--text-color);
  border-width: 1px;
  border-style: solid;
}
@media screen and (min-width: 960px) {
  .event__calendar{
    width: 82.5%;
  }
}
/*------------------
Ohagi
------------------*/
.ohagi__movie{
  margin-top: 4.375em;
  margin-bottom: 3.75em;
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}
.ohagi__movie iframe{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.ohagi__banner{
  margin-bottom: 1.75em;
}
@media screen and (min-width: 737px) {
  .ohagi__movie{
    margin-top: 10.25em;
    margin-bottom: 12.5em;
  }
  .ohagi__banner{
    margin-bottom: 3.75em;
  }
}