@charset "UTF-8";
/*==========================
リセット
==========================*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-area.lp * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-area.lp table {
  border-spacing: 0;
  border-collapse: collapse;
}

.main-area.lp * html table {
  border-collapse: collapse;
}

.main-area.lp *:first-child + html table {
  border-collapse: collapse;
}

.main-area.lp caption, th {
  text-align: left;
  font-weight: normal;
}

.main-area.lp table, th, td, img {
  border: 0;
}

.main-area.lp input {
  vertical-align: middle;
  outline: none;
}

.main-area.lp q:before, q:after {
  content: "";
}

.main-area.lp ul {
  list-style: none;
}

.main-area.lp hr,
.main-area.lp legend,
.main-area.lp caption {
  display: none;
}

.main-area.lp img {
  border: 0;
  vertical-align: bottom;
}

.main-area.lp a:focus {
  outline: none;
}

/* aタグ設定
------------------------------------- */
.alpha a:hover {
  opacity:0.75;
}
.main-area.lp a {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
  text-decoration: none;
}
/* 基本設定
------------------------------------- */
html { font-size: 62.5%; } 
body .main-area.lp {
  -webkit-text-size-adjust: 100%;
  font-size: 1.4rem;/* =14px */
  font-family: 'Josefin Sans',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  background-color: #F0F0EB;
  color: #3C3C3C;
}
.main-area.lp ul {
  list-style: none;
}
.main-area.lp .font-white {
  color: #fff;
}
.main-area.lp h2 {
  font-size: 7.8rem;
  font-weight: 500;
}
/*rugiada
-------------------------------------*/
.main-area.lp #fv {
  /* min-width: 1366px; */
  width: 100%;
  height: auto;
  font-weight: 100;
}
.main-area.lp .fv-area {
  position: relative;
}
.main-area.lp .logo-area {
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 18%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.main-area.lp .logo-area p:first-of-type {
  font-size: 6.0rem;
  padding-bottom: 4px;
  white-space: nowrap;
}
.main-area.lp .logo-area p:last-of-type {
  font-size: 3.0rem;
  letter-spacing: 0.05em;
}

.main-area.lp .section {
  margin: 0 auto;
  padding: 45px 10px 44px;
  max-width: 1290px;
}
.main-area.lp .section-inner {
  display: flex;
  padding-left: 70px;
}
.main-area.lp .left-area {
  display: none;
  width: calc(50% - 570px);
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  flex: 0 0 auto;
}
@media screen and (max-width:1270px) {
  .main-area.lp .left-area {
    width: 44px;
    left: 10px;
  }
}
.main-area.lp .left-area p {
  font-weight: 500;
  writing-mode: vertical-lr;
  font-size: 4.0rem;
  position: absolute;
  top: calc(50% - 80px);
  left: calc(50% - 30px);

}
.main-area.lp .left-area > a {
  z-index: 16;
  display: block;
  margin: 0 auto;
  position: absolute;
  width: 20px;
  left: calc(50% - 17px);
  bottom: 20px;
}
.main-area.lp .right-area {
    margin: 0 auto;
    width: 100%; /* SPでの幅を確保 */
}
.main-area.lp .tittle-area p:first-of-type {
  font-size: 1.1rem;
  padding-bottom: 17px;
}
.main-area.lp .tittle-area span {
  content: "";
  display: block;
  background-color: #000;
  height: 1px;
  width: 100%;
  margin-bottom: 16px;
}
.main-area.lp .tittle-area p:last-of-type {
  font-size: 2.2rem;
  padding-bottom: 48px;
}
.main-area.lp .sub-tittle {
  font-size: 1.1rem;
}
.main-area.lp .wayaku {
  font-size: 2.2rem;
}

/* 共通のgoods-area ulスタイル */
.main-area.lp .goods-area ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 56px; /* PC用 */
}

/* 共通のgoods-area li スタイル */
.main-area.lp .goods-area li {
  color: #3C3C3C;
  margin-bottom: 36px; /* PC用 */
}

.main-area.lp .goods-img {
  width: 380px;
  height: 380px;
  position: relative;
  overflow: hidden;
}
.main-area.lp .goods-img img {
  object-fit: cover;
  height: 100%;
  width: auto;
  position: absolute;
  top: 50%;
  bottom: 50%;
  transform: translate(0 ,-50%);
  transition: .3s ease-in-out;
}
.main-area.lp .goods-img.goods-logo img {
  transform: translate(0 ,-50%);
}
.main-area.lp .logo-order {
  order: 0;
}
.main-area.lp .text-area a {
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  font-size: 1.4rem;
  text-decoration: none;
  color: #3C3C3C;
}
.main-area.lp .text-area a:visited {
  color: #3C3C3C;
}
.main-area.lp .text-area p:first-of-type{
  font-size: 1.4rem;
}

.main-area.lp .text-area p.label{
  font-size: 1rem;
  color: #3C3C3C;
  padding: 4px 4px 3px;
  border-radius: 4px;
  width: 55px;
  text-align: center;
  border: 1px solid #3C3C3C;
  margin-top: -4px;
}

.main-area.lp .text-area p span {
  font-size: 1.1rem;
}
.main-area.lp .text-area p {
  font-weight: 400;
}
.main-area.lp .bottom-area {
  position: relative;
  margin-top: 12px;
}
.main-area.lp .bottom-area > div {
  background-color: #3C3C3C;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 0;
  right: 0;
}
.main-area.lp .bottom-area img {
  position: absolute;
  top: -12px;
  left: 0;
  width: 12px;
  height: 12px;
}
.main-area.lp .bottom-area p {
  text-align: right;
  padding-top: 16px;
}
.main-area.lp .bottom-area p a {
  text-decoration: none;
  color: #3C3C3C;
}
.main-area.lp .bottom-area p a:visited {
  color: #3C3C3C;
}

/* レスポンシブ設定 */
@media screen and (min-width:768px){
  .main-area.lp .sp {
    display: none!important;
  }
  .main-area.lp .goods-img a:hover {
    opacity: 1;
  }
  .main-area.lp .goods-img a:hover img:nth-of-type(2) {
    opacity: 0;
  }
  .main-area.lp .goods-img a:hover img:nth-of-type(1) {
    opacity: 1;
  }
  .main-area.lp .goods-img a img:nth-of-type(1) {
    opacity: 0;
  }

  /* コンテンツ全体の左右余白と中央寄せ（PC用）*/
  .main-area.lp {
    max-width: 1800px; /* コンテンツの最大幅を設定。必要に応じて調整 */
    margin-left: auto;   /* 左側の余白を自動調整 */
    margin-right: auto;  /* 右側の余白を自動調整 */
    padding: 0 20px; /* 左右に少しパディングを追加して、端に寄りすぎないようにする */
  }

  .main-area.lp .section {
    padding: 95px 0 88px; /* main-area.lpで左右パディングを持つため、sectionでは左右パディングを0にする */
  }
  .main-area.lp .section-inner {
    padding-left: 0; /* section-innerの左パディングをリセット */
  }

  /* goods-area ul のPC向けリスト表示 */
  .main-area.lp .goods-area ul {
    width: 100%; /* 親要素の幅を使う */
    margin-bottom: 56px; /* 元の値を維持 */
  }
  /* goods-area li のPC向けリスト表示 */
  .main-area.lp .goods-area li {
    width: 33.333%; /* PCでは3列表示にするため、100% / 3 = 33.333% に設定 */
    padding: 5px 5px; /* 横の余白を減らす */
    margin-bottom: 36px; /* PC用は元の値を維持 */
  }
}

@media screen and (max-width:767px){
  .main-area.lp .pc {
    display: none!important;
  }
  
  .main-area.lp h2 {
    font-size: calc(80 / 750 * 100vw);
  }
  .main-area.lp #fv {
    min-width: auto;
    width: auto;
    height: 100%;
  }
  
  .main-area.lp .gold-caption {
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.8;
  color: #3C3C3C;
  margin: 32px auto 48px;
}

.main-area.lp .gold-caption a {
  color: #3C3C3C;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .main-area.lp .gold-caption {
    font-size: calc(28 / 750 * 100vw);
    padding: 0 5%;
    margin: 24px auto 36px;
  }
}


  .main-area.lp .logo-area {
    top: calc(860 / 750 *100vw);
    left: 50%;
  }
  .main-area.lp .logo-area p:first-of-type {
    font-size: calc(67 / 750 * 100vw);
    padding-bottom: calc(12 / 750 * 100vw);
  }
  .main-area.lp .logo-area p:last-of-type {
    font-size: calc(34 / 750 * 100vw);
  }

  .main-area.lp .text-area p.label{
    font-size: calc(14 / 750 * 100vw)!important;
    padding: 4px 2px 3px;
    margin-bottom: 8px;
    margin-top: 0;

  }
  /* SP時のsection-innerの左パディングも0に */
  .main-area.lp .section-inner {
    padding-left: 0;
  }
  .main-area.lp .left-area {
    position: static;
    margin-right: 0;
    width: 0;
    padding-top: 0;
  }
  .main-area.lp .left-area > a {
    margin: 0;
    position: fixed;
    width: calc(36 / 750 * 100vw);
    left: auto;
    right: calc(25 / 750 * 100vw);
    bottom: calc(25 / 750 * 100vw);
  }
  .main-area.lp .right-area {
    max-width: none; /* SPでは最大幅を制限しない */
    width: 100%; /* SPでright-areaが幅いっぱいになるように */
    padding: 0 5%; /* SPでright-areaに左右のパディングを追加 */
  }
  .main-area.lp .tittle-area p:first-of-type {
    font-size: calc(18 / 750 * 100vw);
    padding-bottom: calc(17 / 750 * 100vw);
  }
  .main-area.lp .tittle-area span {
    margin-bottom: 2.1vw;
  }
  .main-area.lp .tittle-area p:last-of-type {
    font-size: calc(28 / 750 * 100vw);
    padding-bottom: 10.2vw;
  }

  /* --- SP表示時: 一般的な商品リスト（#SHOPではないgoods-area）のスタイル --- */
  .main-area.lp .goods-area ul {
    width: 100%; /* ul自体は親の幅いっぱいに */
    justify-content: space-between; /* 2列にするため隙間を空ける */
    margin-bottom: calc(72/ 750 * 100vw);
  }

  .main-area.lp .goods-area li {
    width: 48%; /* 2列表示: 左右に1%ずつの隙間を空ける計算 */
    margin-bottom: 8vw; /* 商品間の縦の余白 */
  }
  .main-area.lp .goods-img {
    width: 100%; /* liの幅に合わせて100%に */
    height: 0; /* padding-topで高さを調整するため0に */
    padding-top: 100%; /* 正方形にする。画像の縦横比に合わせて調整してください */
    position: relative;
    overflow: hidden;
    margin: 0; /* 中央寄せはulのjustify-contentで対応 */
  }
  .main-area.lp .goods-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none; /* 元の画像の中央寄せ transform をリセット */
  }
  /* goods-logo imgも調整が必要であれば */
  .main-area.lp .goods-img.goods-logo img {
    transform: none; /* 必要に応じて調整 */
  }

  /* --- SP表示時: #SHOPセクション内のリスト（店舗リスト）のスタイル --- */
  /* こちらのセレクタは優先度が高いため、上記の.goods-areaのスタイルを上書きします */
  #SHOP .goods-area ul {
    width: 100%; /* SHOPセクション内のulはSPで100%幅に */
    margin-bottom: calc(72/ 750 * 100vw);
    justify-content: flex-start; /* 1列なので左寄せ */
  }
  #SHOP .goods-area ul li {
    width: 100% !important; /* SHOPセクションのliだけSPで1列表示に！他のwidth指定を強制的に上書き */
    margin-bottom: 0; /* 店舗間の縦方向のマージンを削除 */
    padding: 2px 5px; /* 上下のパディングはそのまま */
  }
  /* SHOPセクション内の画像の幅は存在しないため、ここでは特別に調整は不要 */
  /* ただし、ロゴ画像がある場合は、以下のスタイルを調整 */
  #SHOP .goods-area .goods-img { /* ロゴ画像にこのセレクタが適用されている場合 */
    width: auto; /* 必要に応じて調整 */
    height: auto; /* 必要に応じて調整 */
    padding-top: 0; /* height固定の場合は不要 */
    margin: 0; /* 必要に応じて調整 */
  }
  #SHOP .goods-area .goods-img img {
    transform: none; /* 必要に応じて調整 */
    width: auto;
    height: auto;
    object-fit: contain; /* ロゴはcontainの方が良い場合が多い */
  }


  .main-area.lp .logo-order {
    order: 1;
  }
  .main-area.lp .text-area a {
    display: block;
    padding-top: 1.7vw;
    font-size: calc(20 / 750 * 100vw);
    text-decoration: none;
  }
  .main-area.lp .text-area p:first-of-type , p:last-of-type {
    font-size: calc(20 / 750 * 100vw);
  }
  .main-area.lp .text-area p:last-of-type {
    padding-top: 1.3vw;
  }
  .main-area.lp .text-area p span {
    font-size: calc(18 / 750 * 100vw);
  }
  
  .main-area.lp .bottom-area {
    margin-top: 1.6vw;
  }
  .main-area.lp .bottom-area p {
    padding-top: 2.1vw;
  }
  .main-area.lp .goods-img a.tapped {
    opacity: 1;
  }
  .main-area.lp .goods-img a.tapped img:nth-of-type(2) {
    opacity: 0;
  }
  .main-area.lp .goods-img a.tapped img:nth-of-type(1) {
    opacity: 1;
  }
  .main-area.lp .goods-img a img:nth-of-type(1) {
    opacity: 0;
  }

  /* SP時の【東京】などのエリアタイトルと最初の店舗名の間に余白を追加 */
  #SHOP .goods-area p {
    margin-bottom: 15px; /* エリアタイトル下の余白を調整 */
    /* margin-top: 20px; は共通で設定済みなのでここでは不要 */
  }
}


/*元js - アニメーション関連のスタイルはここにまとまっています */
body{
  opacity:0;
}
.main-area.lp .tittle-area h2{
  overflow:hidden;
}
.main-area.lp .tittle-area h2 span{
  display:inline;
  background:inherit;
  position:relative;
  top:1em;
  opacity:0;
  transition-duration:600ms;
  transition-property:opacity top;
}
.main-area.lp .tittle-area h2.on span{
  opacity:1;
  top:0;
}
.main-area.lp .tittle-area h2.on span:nth-child(2){
  transition-delay:50ms;
}
.main-area.lp .tittle-area h2.on span:nth-child(3){
  transition-delay:100ms;
}
.main-area.lp .tittle-area h2.on span:nth-child(4){
  transition-delay:150ms;
}
.main-area.lp .tittle-area h2.on span:nth-child(5){
  transition-delay:200ms;
}
.main-area.lp .tittle-area h2.on span:nth-child(6){
  transition-delay:250ms;
}
.main-area.lp .tittle-area h2.on span:nth-child(7){
  transition-delay:300ms;
}
.main-area.lp .tittle-area h2.on span:nth-child(8){
  transition-delay:350ms;
}
.main-area.lp .tittle-area h2.on span:nth-child(9){
  transition-delay:400ms;
}

.main-area.lp .tittle-area > span,.main-area.lp .bottom-area > div{
  width:0;
  transition-duration:600ms;
  transition-property:width;
}
.main-area.lp .tittle-area > span.on, .main-area.lp .bottom-area > div.on{
  width:100%;
}
.main-area.lp .goods-area li{
  opacity:0;
}
.main-area.lp .logo-area{
  opacity:0;
}

/* 共通のSHOPセクションスタイル（メディアクエリの外に配置） */
/* エリアタイトル共通の余白 */
#SHOP .goods-area p {
  margin-bottom: 5px; /* カテゴリタイトル下の余白の基本値 */
  margin-top: 20px; /* 各エリアタイトルの上部に余白 */
}

/* 最初のエリアタイトル（【東京】）には上部の余白を適用しない */
#SHOP .goods-area p:first-of-type {
  margin-top: 0;
}

/* SHOPセクションのul要素（Flexboxの親）共通スタイル */
#SHOP .goods-area ul {
  display: flex; /* Flexboxを適用 */
  flex-wrap: wrap; /* アイテムの折り返しを許可 */
  padding: 0;      /* デフォルトのパディングをリセット */
  margin: 0;       /* デフォルトのマージンをリセット */
  list-style: none; /* リストの黒丸を非表示に */
}

/* SHOPセクションのli要素（店舗名）共通スタイル */
/* widthやmargin-bottomはSP/PCで異なるため、それぞれのメディアクエリ内で設定 */
#SHOP .goods-area ul li {
  box-sizing: border-box; /* パディングとボーダーを幅に含める */
  padding: 2px 5px; /* 上下のパディングを少し減らし、左右に少し余白 (SPの基本値) */
  line-height: 1.4; /* 行の高さを調整して行間を詰める */
}
.main-area.lp .gold-caption {
  text-align: center;
  font-size: 1.4rem;
  line-height: 2.1;
  color: #3C3C3C;
  margin: 32px auto 48px;
}

.main-area.lp .gold-caption .underline {
  text-decoration: underline;
}