@charset   "Shift_JIS";

@media screen and (max-width: 320px) {

 .self-novideo{ width:100px; }
  blockquote{ border: solid 1px #cccccc; }

  /* --- HIMEスライダー（小画面最適化版） --- */

  .hime-swiper{
    /* 画面幅に追従。上限だけ 400px に制限 */
    --hime-w: min(100vw, 380px);
    --pad-x:  20px;  /* 余白は少しだけ狭める */
    --vid-w:  calc(var(--hime-w) - 2*var(--pad-x));
    /* フレーム高は可変：縦動画 9:16 に合わせて算出 */
    --frame-h: calc(var(--vid-w) * 16 / 9);

    width: 100%;           /* ここを 100% にするのがポイント */
    max-width: var(--hime-w);
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: #fff;
  }

  .hime-swiper .swiper-slide{
    width: 100% !important;
    margin: 0 auto;
    padding: 10px var(--pad-x) 0;
    box-sizing: border-box;
    /* スワイプとタップの競合を軽減（横スワイプは許可、タップを取りやすく） */
    touch-action: pan-y;
  }

  .hime-swiper .swiper-slide video{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    background: #fff;
    /* タップを動画に通しやすくする */
    pointer-events: auto;
  }

  /* （任意）is-land/is-port を使う場合の比率 */
  .hime-swiper .swiper-slide.is-land  video{ aspect-ratio: 4 / 3; }
  .hime-swiper .swiper-slide.is-port  video{ aspect-ratio: 9 / 16; }

  /* 横動画は中央寄せ（フレーム高に対して上下マージンで調整） */
  .hime-swiper .swiper-slide.is-land  video{
    margin-top:    calc((var(--frame-h) - (var(--vid-w) * 3 / 4)) / 2);
    margin-bottom: calc((var(--frame-h) - (var(--vid-w) * 3 / 4)) / 2);
  }
  .hime-swiper .swiper-slide.is-port  video{
    margin-top: 0;
    margin-bottom: 0;
  }

  /* ▼ 矢印は .hime-swiper にスコープして小型化＆端へ寄せる */
  .hime-swiper{
    --swiper-navigation-color: #fff !important;
    --swiper-theme-color:      #fff !important;
    --swiper-navigation-size:  18px;  /* 小型化 */
  }
  .hime-swiper .swiper-button-next,
  .hime-swiper .swiper-button-prev{
    z-index: 10;
    background: rgba(255,255,255,.85) !important;
    width: 44px !important;   /* 小型化 */
    height: 64px !important;  /* 小型化 */
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    display: flex; justify-content: center; align-items: center;
    /* 画面が小さいとコントロールに被りがちなので、少しだけ上に */
    top: 46% !important;
  }
  .hime-swiper .swiper-button-next::after,
  .hime-swiper .swiper-button-prev::after{
    color: #fff !important;
    background: #fff !important; 
    font-size: 18px !important; /* 小型化に合わせる */
  }

  /* キャプション */
  .hime-swiper .cap{
    margin: 6px 0 10px;
    text-align: center;
    font-size: 13px;  /* ほんの少しだけ縮める */
    color: #fe89cf;
    font-weight: bold;
  }
  .hime-swiper .cap a{
    color: inherit;
    text-decoration: none;
  }
  .hime-swiper .cap a:hover{ text-decoration: underline; }

  .hime-swiper .swiper-wrapper { z-index: 1; }
#tab01{
       text-align:center;
       padding:0;
       width:320px;
       overflow: hidden;
}

#tab02{
       width:320px;
       text-align:center;
}

#tab03{
       width:320px;
       text-align:center;
       overflow: hidden;
}

#kakuicon{
   position:relative;
   top:-60px;
   left:-112px;
   transform: rotate( -20deg );
   z-index:20;
}

.shop_diary{
       margin:0;
       width:320px;
}

.diaryp{
   position:relative;
   top:17px;
   color:#333333;
   width:320px;
   margin:0 auto;
   height:28px;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
   border-bottom:1px solid #dddddd;
   border-top:1px solid #e8e8e8;
}

.diarypl{
   font-size:11.8px;
   font-weight:bold;
  line-height:32px;
  float:left;
  margin:0;
  padding:0 0 0 5px;
}

.diarypr{
   font-size:11.8px;
   font-weight:bold;
  line-height:32px;
  float:right;
  margin:0 10px 0 0;
}

.diarytitle{
       font-size:13px;
       color:#e94e0c;
       font-weight:bold;
       margin:0;
       padding:0;
       height:13px;
       width:320px;
       border-bottom:2px solid #e94e0c;
       text-align:left;
       position:relative;
       top:17px;
       left:5px;
}

.sokutitle{
       font-size:13px;
       color:#e94e0c;
       font-weight:bold;
       margin:0;
       padding:20px 0 0 11px;
       height:13px;
       width:317px;
       border-bottom:2px solid #e94e0c;
       text-align:left;
       position:relative;
       top:5px;
}

.sokup{
       font-size:13px;
       color:#ffffff;
       font-weight:bold;
       margin:0 0 0 3px;
       padding: 5px 5px 15px 5px;
       height:30px;
       width:303px;
       text-align:right;
       line-height:20px;
       display: inline-block;
       background: #a6d3c8;/*リボンの色*/
       position:relative;
       z-index:3;
}


.sokup:before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 10px transparent;
border-right: solid 20px rgb(149, 158, 155);/*折り返し部分*/
z-index:3;
}

.tww_in{
  width:270px;
  height:399px;
  padding: 0;
  margin:0 auto;
  overflow:hidden;
  position:relative;
  top:10px;
  background-color: rgba(255,255,255,0.7);
}

.sokujo{
       width:317px;
       overflow:hidden;
       position:relative;
       top:10px;
       left:-5px;
       margin:0 0 15px 0;
}

#tabzone{
      position:relative;
      width:100%;
      margin: 0;
      padding:13px 0 5px 0;
      text-align:center;
      line-height:1;
      background:#2c1305;
}

.bbgg{
      width:320px;
      margin:0;
}

#tabnavi {
      margin:0;
      padding:0;
      width:320px;
}

#tabnavi li{
	display: inline-block;
}

#tabnavi li a{
 	position: relative;
	display: inline-block;
 	margin:0;
	padding: 7px 5px;
	width: 80px;
       border:2px solid #e0edff;
	background: #ffffff;
       border-radius:5px;
      color:#000000;
      font-size:14px;
      text-align:center;
      line-height:28px;
}

#tabnavi li a.active{
	background: #e0edff;
}


#tabnavi li a.active:before{
       content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -20px;
	border: 20px solid transparent;
	border-top: 10px solid #e0edff;
}

#tabcontent{
      width:320px;
      margin:15px 0 5px 0px;
      background:white;
      border-top: 1px solid #868686;
      border-bottom: 1px solid #868686;
}
}

@media screen and (min-width:321px) and (max-width: 374px) {

 .self-novideo{ width:100px; }
  blockquote{ border: solid 1px #cccccc; }

  /* --- HIMEスライダー（小画面最適化版） --- */

  .hime-swiper{
    /* 画面幅に追従。上限だけ 400px に制限 */
    --hime-w: min(100vw, 380px);
    --pad-x:  20px;  /* 余白は少しだけ狭める */
    --vid-w:  calc(var(--hime-w) - 2*var(--pad-x));
    /* フレーム高は可変：縦動画 9:16 に合わせて算出 */
    --frame-h: calc(var(--vid-w) * 16 / 9);

    width: 100%;           /* ここを 100% にするのがポイント */
    max-width: var(--hime-w);
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: #fff;
  }

  .hime-swiper .swiper-slide{
    width: 100% !important;
    margin: 0 auto;
    padding: 10px var(--pad-x) 0;
    box-sizing: border-box;
    /* スワイプとタップの競合を軽減（横スワイプは許可、タップを取りやすく） */
    touch-action: pan-y;
  }

  .hime-swiper .swiper-slide video{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    background: #fff;
    /* タップを動画に通しやすくする */
    pointer-events: auto;
  }

  /* （任意）is-land/is-port を使う場合の比率 */
  .hime-swiper .swiper-slide.is-land  video{ aspect-ratio: 4 / 3; }
  .hime-swiper .swiper-slide.is-port  video{ aspect-ratio: 9 / 16; }

  /* 横動画は中央寄せ（フレーム高に対して上下マージンで調整） */
  .hime-swiper .swiper-slide.is-land  video{
    margin-top:    calc((var(--frame-h) - (var(--vid-w) * 3 / 4)) / 2);
    margin-bottom: calc((var(--frame-h) - (var(--vid-w) * 3 / 4)) / 2);
  }
  .hime-swiper .swiper-slide.is-port  video{
    margin-top: 0;
    margin-bottom: 0;
  }

  /* ▼ 矢印は .hime-swiper にスコープして小型化＆端へ寄せる */
  .hime-swiper{
    --swiper-navigation-color: #fff !important;
    --swiper-theme-color:      #fff !important;
    --swiper-navigation-size:  18px;  /* 小型化 */
  }
  .hime-swiper .swiper-button-next,
  .hime-swiper .swiper-button-prev{
    z-index: 10;
    background: rgba(255,255,255,.85) !important;
    width: 44px !important;   /* 小型化 */
    height: 64px !important;  /* 小型化 */
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    display: flex; justify-content: center; align-items: center;
    /* 画面が小さいとコントロールに被りがちなので、少しだけ上に */
    top: 46% !important;
  }
  .hime-swiper .swiper-button-next::after,
  .hime-swiper .swiper-button-prev::after{
    color: #fff !important;
    background: #fff !important; 
    font-size: 18px !important; /* 小型化に合わせる */
  }

  /* キャプション */
  .hime-swiper .cap{
    margin: 6px 0 10px;
    text-align: center;
    font-size: 13px;  /* ほんの少しだけ縮める */
    color: #fe89cf;
    font-weight: bold;
  }
  .hime-swiper .cap a{
    color: inherit;
    text-decoration: none;
  }
  .hime-swiper .cap a:hover{ text-decoration: underline; }

  .hime-swiper .swiper-wrapper { z-index: 1; }

#tab01{
       text-align:center;
       padding:10px 0 0 0;
       width:348px;
}

#tab02{
       width:348px;
       text-align:center;
}

#tab03{
       width:348px;
       text-align:center;
}

#kakuicon{
   position:relative;
   top:-60px;
   left:-120px;
   transform: rotate( -20deg );
   z-index:20;
}

.shop_diary{
       margin:0 auto;
       padding:0;
       position:relative;
       top:-8px;
       width:343px;
}

.sokutitle{
       font-size:13px;
       color:#e94e0c;
       font-weight:bold;
       margin:0 auto;
       padding:10px 0 0 0;
       height:13px;
       width:343px;
       border-bottom:2px solid #e94e0c;
       text-align:left;
       position:relative;
       left:0px;
       top:10px;
}

.sokup{
       font-size:13px;
       color:#ffffff;
       font-weight:bold;
       margin:0 0 0 2px;
       padding: 5px 15px 15px 15px;
       height:30px;
       width:303px;
       text-align:right;
       line-height:20px;
       display: inline-block;
       background: #a6d3c8;/*リボンの色*/
       position:relative;
       z-index:3;
}


.sokup:before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 10px transparent;
border-right: solid 20px rgb(149, 158, 155);/*折り返し部分*/
z-index:3;
}

.tww_in{
  width:270px;
  height:425px;
  padding: 0;
  margin:0 auto;
  overflow: hidden;
  position:relative;
  top:15px;
  background-color: rgba(255,255,255,0.7);
}

.sokujo{
   width:343px;
   margin:0 auto;
   padding:0 0 15px 0;
   overflow:hidden;
}


.bunbun p{
      font-size:11px;
      color:black;
      padding:0 0 0 10px;
}

.line_q{
      width:348px;
      height:5px;
      margin:0 0 0 5px;
      padding:0;
      border-left: 1px solid #868686;
      border-right: 1px solid #868686;
      border-top: 1px solid #868686;
      background: #868686;
}
.line_c{
       background:#868686;
       height:20px;
       width:348px;
       margin:0 0 20px 5px;
       padding:0;
       border-left: 1px solid #868686;
       border-right: 1px solid #868686;
       border-bottom: 1px solid #868686;
       position:relative;
       top:-17px;
}


#tabzone{
      position:relative;
      width:100%;
      margin: 0;
      padding:13px 0 5px 0;
      text-align:center;
      line-height:1;
      background:#2c1305;
}

.bbgg{
      width:348px;
      margin:0 0 0 5px;
}

#tabnavi {
      margin:0;
      padding:0;
      width:348px;
}

#tabnavi li{
	display: inline-block;
}

#tabnavi li a{
 	position: relative;
	display: inline-block;
 	margin:0;
	padding: 7px 10px;
	width: 80px;
       border:2px solid #e0edff;
	background: #ffffff;
       border-radius:5px;
      color:#000000;
      font-size:14px;
      text-align:center;
      line-height:28px;
}

#tabnavi li a.active{
	background: #e0edff;
}


#tabnavi li a.active:before{
       content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -20px;
	border: 20px solid transparent;
	border-top: 10px solid #e0edff;
}

#tabcontent{
      width:348px;
      margin:15px 0 5px 5px;
      background:white;
      border: 1px solid #868686;
}
}


@media screen and (min-width: 375px) and (max-width: 413px) {


  .self-novideo{ width:100px; }
  blockquote{ border: solid 1px #cccccc; }

  /* --- HIMEスライダー（小画面最適化版） --- */

  .hime-swiper{
    /* 画面幅に追従。上限だけ 400px に制限 */
    --hime-w: min(100vw, 380px);
    --pad-x:  20px;  /* 余白は少しだけ狭める */
    --vid-w:  calc(var(--hime-w) - 2*var(--pad-x));
    /* フレーム高は可変：縦動画 9:16 に合わせて算出 */
    --frame-h: calc(var(--vid-w) * 16 / 9);

    width: 100%;           /* ここを 100% にするのがポイント */
    max-width: var(--hime-w);
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: #fff;
  }

  .hime-swiper .swiper-slide{
    width: 100% !important;
    margin: 0 auto;
    padding: 10px var(--pad-x) 0;
    box-sizing: border-box;
    /* スワイプとタップの競合を軽減（横スワイプは許可、タップを取りやすく） */
    touch-action: pan-y;
  }

  .hime-swiper .swiper-slide video{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    background: #fff;
    /* タップを動画に通しやすくする */
    pointer-events: auto;
  }

  /* （任意）is-land/is-port を使う場合の比率 */
  .hime-swiper .swiper-slide.is-land  video{ aspect-ratio: 4 / 3; }
  .hime-swiper .swiper-slide.is-port  video{ aspect-ratio: 9 / 16; }

  /* 横動画は中央寄せ（フレーム高に対して上下マージンで調整） */
  .hime-swiper .swiper-slide.is-land  video{
    margin-top:    calc((var(--frame-h) - (var(--vid-w) * 3 / 4)) / 2);
    margin-bottom: calc((var(--frame-h) - (var(--vid-w) * 3 / 4)) / 2);
  }
  .hime-swiper .swiper-slide.is-port  video{
    margin-top: 0;
    margin-bottom: 0;
  }

  /* ▼ 矢印は .hime-swiper にスコープして小型化＆端へ寄せる */
  .hime-swiper{
    --swiper-navigation-color: #fff !important;
    --swiper-theme-color:      #fff !important;
    --swiper-navigation-size:  18px;  /* 小型化 */
  }
  .hime-swiper .swiper-button-next,
  .hime-swiper .swiper-button-prev{
    z-index: 10;
    background: rgba(255,255,255,.85) !important;
    width: 44px !important;   /* 小型化 */
    height: 64px !important;  /* 小型化 */
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    display: flex; justify-content: center; align-items: center;
    /* 画面が小さいとコントロールに被りがちなので、少しだけ上に */
    top: 46% !important;
  }
  .hime-swiper .swiper-button-next::after,
  .hime-swiper .swiper-button-prev::after{
    color: #fff !important;
    background: #fff !important; 
    font-size: 18px !important; /* 小型化に合わせる */
  }

  /* キャプション */
  .hime-swiper .cap{
    margin: 6px 0 10px;
    text-align: center;
    font-size: 13px;  /* ほんの少しだけ縮める */
    color: #fe89cf;
    font-weight: bold;
  }
  .hime-swiper .cap a{
    color: inherit;
    text-decoration: none;
  }
  .hime-swiper .cap a:hover{ text-decoration: underline; }

  .hime-swiper .swiper-wrapper { z-index: 1; }
.shop_diary{
       margin:0 auto;
       padding:0;
       position:relative;
       width:343px;
       overflow:hidden;
}

.diaryp{
   position:relative;
   top:17px;
   color:#333333;
   width:343px;
   margin:0 auto;
   height:28px;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
   border-bottom:1px solid #dddddd;
   border-top:1px solid #e8e8e8;
}

.diarypl{
   font-size:11.8px;
   font-weight:bold;
  line-height:32px;
  float:left;
  margin:0;
  padding:0 0 0 5px;
}

.diarypr{
   font-size:11.8px;
   font-weight:bold;
  line-height:32px;
  float:right;
  margin:0;
  padding:0 5px 0 0;
}

.diarytitle{
       font-size:13px;
       color:#e94e0c;
       font-weight:bold;
       margin:0;
       padding:0;
       height:13px;
       width:343px;
       border-bottom:2px solid #e94e0c;
       text-align:left;
       position:relative;
       left:0px;
       top:17px;
}

.sokutitle{
       font-size:13px;
       color:#e94e0c;
       font-weight:bold;
       margin:0;
       padding:20px 0 0 0;
       height:13px;
       width:343px;
       border-bottom:2px solid #e94e0c;
       text-align:left;
       position:relative;
       left:10px;
       top:5px;
}

.sokup{
       font-size:13px;
       color:#ffffff;
       font-weight:bold;
       margin:0 0 0 3px;
       padding: 5px 15px 15px 15px;
       height:30px;
       width:303px;
       text-align:right;
       line-height:20px;
       display: inline-block;
       background: #a6d3c8;/*リボンの色*/
       position:relative;
       z-index:3;
}


.sokup:before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 10px transparent;
border-right: solid 20px rgb(149, 158, 155);/*折り返し部分*/
z-index:3;
}

#kakuicon{
   position:relative;
   top:-60px;
   left:-120px;
   transform: rotate( -20deg );
   z-index:20;
}

#tab01{
       text-align:center;
       padding:10px 0 0 0;
       width:363px;
}

#tab02{
       text-align:center;
       width:363px;
}

#tab03{
       text-align:center;
       width:363px;
}


.tww_in{
  width:303px;
  height:455px;
  padding: 0;
  margin:0 auto;
  position:relative;
  top:10px;
  overflow: hidden;
  background-color: rgba(255,255,255,0.7);
}

.sokujo{
   width:343px;
   margin:0 auto;
   padding:0 0 10px 0;
   overflow:hidden;
}

.bunbun p{
      font-size:11px;
      color:black;
      padding:0 0 0 10px;
}

.line_q{
      width:363px;
      height:5px;
      margin:0 0 0 5px;
      padding:0;
      border-left: 1px solid #868686;
      border-right: 1px solid #868686;
      border-top: 1px solid #868686;
      background: #868686;
}
.line_c{
       background:#868686;
       height:20px;
       width:363px;
       margin:0 0 20px 5px;
       padding:0;
       border-left: 1px solid #868686;
       border-right: 1px solid #868686;
       border-bottom: 1px solid #868686;
       position:relative;
       top:-17px;
}

#tabzone{
      position:relative;
      width:100%;
      margin: 0;
      padding:13px 0 5px 0;
      text-align:center;
      line-height:1;
      background:#2c1305;
}

.bbgg{
      width:363px;
      margin:0 0 0 5px;
}

#tabnavi {
      margin:0;
      padding:0;
      width:365px;
}


#tabnavi li{
	display: inline-block;
}

#tabnavi li a{
 	position: relative;
	display: inline-block;
 	margin:0;
	padding: 7px 10px;
	width: 86px;
       border:2px solid #e0edff;
	background: #ffffff;
       border-radius:5px;
      color:#000000;
      font-size:14px;
      text-align:center;
      line-height:28px;
}

#tabnavi li a.active{
	background: #e0edff;
}


#tabnavi li a.active:before{
       content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -20px;
	border: 20px solid transparent;
	border-top: 10px solid #e0edff;
}


#tabcontent{
      width:363px;
      margin:15px 0 5px 5px;
      background:white;
      border: 1px solid #868686;
}
}

@media screen and (min-width: 414px) {

.self-novideo{
  width:100px;
}

blockquote{
  border: solid 1px #cccccc;
}

/* --- HIMEスライダー 最終スタイル（このブロックで上書き） --- */

/* �@ コンテナ：横幅はここだけで決める（例：400px） */
.hime-swiper{
  --hime-w: 400px;   /* ← 好きな横幅に変更可 */
  --pad-x:  20px;    /* 左右余白 */
  --vid-w:  calc(var(--hime-w) - 2*var(--pad-x)); /* 表示動画横幅（=360px） */
  --frame-h: 640px;  /* ビデオ枠の基準高さ（縦動画の高さ、横動画も中央揃えの基準） */

  width: var(--hime-w);
  margin: 0 auto;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #fff;
}

/* �A スライド：コンテナ幅いっぱい＋上10px開始＋左右20px余白 */
.hime-swiper .swiper-slide{
  width: 100% !important;
  margin: 0 auto;
  padding: 10px var(--pad-x) 0;  /* 上10px / 左右20px */
  box-sizing: border-box;
}

/* �B 動画：基本は切り抜かずに収める（contain）・横幅360pxに */
.hime-swiper .swiper-slide video{
  display: block;
  width: 100%;           /* = 360px（左右20px余白を引いた幅） */
  height: auto;
  object-fit: contain;   /* 余白を許容して収める */
  object-position: center;
  background: #fff;
}

/* �C 縦横比の指定（横=4:3／縦=9:16） */
.hime-swiper .swiper-slide.is-land  video{ aspect-ratio: 4 / 3; }  /* 横動画 → 360x270 */
.hime-swiper .swiper-slide.is-port  video{ aspect-ratio: 9 / 16; } /* 縦動画 → 360x640 */

/* �D 縦動画は“上から10px”開始（既にスライド上10px開始なので margin不要） */
.hime-swiper .swiper-slide.is-port  video{
  margin-top: 0;
  margin-bottom: 0;
}

/* �E 横動画は“要素の中央”に配置するため、上下に余白を足して中央寄せに見せる
      ＝ 640(枠) - 270(動画) の半分ずつを上下に付与 */
.hime-swiper .swiper-slide.is-land  video{
  margin-top:  calc((var(--frame-h) - (var(--vid-w) * 3 / 4)) / 2);
  margin-bottom: calc((var(--frame-h) - (var(--vid-w) * 3 / 4)) / 2);
}

/* ナビゲーションボタンを最前面に */
.swiper-button-next,
.swiper-button-prev {
  z-index: 10; /* 一番前に配置 */
  color: white!important; /* ボタンの色 */
  background: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
  width: 60px !important;
  height: 90px !important; /* ボタンの高さ */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* キャプション（動画のすぐ下） */
.hime-swiper .cap{
  margin: 6px 0 10px;
  text-align: center;
  font-size: 14px;
  color: #fe89cf;
  font-weight: bold;
}
.hime-swiper .cap a{
  color: inherit;
  text-decoration: none;
}
.hime-swiper .cap a:hover{ text-decoration: underline; }

/* 他の要素の重なり順（スコープ付きに） */
.hime-swiper .swiper-wrapper { z-index: 1; }

/* ナビゲーションを最前面＆薄い白背景のパネルに（矢印は必ず白に） */
.hime-swiper{
  --swiper-navigation-color: #fff !important; /* 変数ベースのSwpier用 */
  --swiper-theme-color:      #fff !important;
  --swiper-navigation-size:  22px;
}
.hime-swiper .swiper-button-next,
.hime-swiper .swiper-button-prev{
  z-index: 10;
  background: rgba(255,255,255,.85) !important; /* 薄い白い背景 */
  width: 60px !important;
  height: 90px !important;
  display: flex; justify-content: center; align-items: center;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  color: #fff !important; /* 旧実装（font/color方式）にも効かせる保険 */
}
/* mask-image方式のSwiperでも白になるように直接上書き */
.hime-swiper .swiper-button-next::after,
.hime-swiper .swiper-button-prev::after{
  color: #fff !important;
  background: #fff !important; /* ← これが矢印色になる版もある */
  font-size: 22px !important;
}
.shop_diary{
       margin:0 auto;
       padding:0;
       position:relative;
       width:382px;
}

.diaryp{
   position:relative;
   top:17px;
   color:#333333;
   width:382px;
   margin:0 auto;
   height:28px;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
   border-bottom:1px solid #dddddd;
   border-top:1px solid #e8e8e8;
}

.diarypl{
   font-size:11.8px;
   font-weight:bold;
  line-height:32px;
  float:left;
  margin:0;
  padding:0 0 0 5px;
}

.diarypr{
   font-size:11.8px;
   font-weight:bold;
  line-height:32px;
  float:right;
  margin:0;
  padding:0 5px 0 0;
}

.diarytitle{
       font-size:13px;
       color:#e94e0c;
       font-weight:bold;
       margin:0;
       padding:0;
       height:13px;
       width:382px;
       border-bottom:2px solid #e94e0c;
       text-align:left;
       position:relative;
       left:0px;
       top:17px;
}

.sokutitle{
       font-size:13px;
       color:#e94e0c;
       font-weight:bold;
       margin:0;
       padding:20px 0 0 0;
       height:13px;
       width:382px;
       border-bottom:2px solid #e94e0c;
       text-align:left;
       position:relative;
       left:10px;
       top:5px;
}

.sokup{
       font-size:13px;
       color:#ffffff;
       font-weight:bold;
       margin:0 0 0 21px;
       padding: 5px 15px 15px 15px;
       height:30px;
       width:310px;
       text-align:right;
       line-height:20px;
       display: inline-block;
       background: #a6d3c8;/*リボンの色*/
       position:relative;
       z-index:3;
}


.sokup:before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 10px transparent;
border-right: solid 20px rgb(149, 158, 155);/*折り返し部分*/
z-index:3;
}

#kakuicon{
   position:relative;
   top:-15px;
   left:-343px;
   transform: rotate( -20deg );
   z-index:20;
}

#tab01{
       text-align:center;
       padding:10px 0 0 0;
       width:402px;
}

#tab02{
       text-align:center;
       width:402px;
}

#tab03{
       text-align:center;
       width:402px;
}


.tww_in{
  width:342px;
  height:500px;
  padding:0;
  margin:0 auto;
  overflow: hidden;
  background-color: rgba(255,255,255,0.7);
  position:relative;
  top:13px;
}

.sokujo{
   width:382px;
   margin: 0 auto;
   overflow:hidden;
}

.bunbun p{
      font-size:11px;
      color:black;
      padding:0 0 0 10px;
}

.line_q{
      width:363px;
      height:5px;
      margin:0 0 0 5px;
      padding:0;
      border-left: 1px solid #868686;
      border-right: 1px solid #868686;
      border-top: 1px solid #868686;
      background: #868686;
}
.line_c{
       background:#868686;
       height:20px;
       width:363px;
       margin:0 0 20px 5px;
       padding:0;
       border-left: 1px solid #868686;
       border-right: 1px solid #868686;
       border-bottom: 1px solid #868686;
       position:relative;
       top:-17px;
}

#tabzone{
      position:relative;
      width:100%;
      margin: 0;
      padding:13px 0 5px 0;
      text-align:center;
      line-height:1;
      background:#2c1305;
}

.bbgg{
      width:363px;
      margin:0 0 0 5px;
}

#tabnavi {
      margin: 0 auto;
      padding:2px;
      width:400px;
}


#tabnavi li{
	display: inline-block;
}

#tabnavi li a{
 	position: relative;
	display: inline-block;
 	margin:0;
	padding: 7px 10px;
	width: 104px;
       height: 30px;
       border:2px solid #e0edff;
	background: #ffffff;
       border-radius:5px;
      color:#000000;
      font-size:14px;
      text-align:center;
      line-height:32px;
}

#tabnavi li a.active{
	background: #e0edff;
}


#tabnavi li a.active:before{
       content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -20px;
	border: 20px solid transparent;
	border-top: 10px solid #e0edff;
}


#tabcontent{
      width:402px;
      margin:15px 0 5px 5px;
      background:white;
      border: 1px solid #868686;
}
}




.tab_sch{
       width:320px;
       margin:0 auto;
}