:root{
  --ui-bg: rgba(0,0,0,0.65);
  --ui-pad: 10px;
  --ui-gap: 10px;
  --ui-accent: #ff0000;
}
.video-container{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}
.video-container > * {position:absolute; inset:0;}

/* サムネイル & 再生ボタン */
#video-thumbnail{
  width:100%; height:100%;
  object-fit:cover;
  z-index:30;
  opacity:1;
  transition:opacity .4s ease;
  display:block;
  cursor:pointer;
}
.play-button{
  z-index:31;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:1;
  transition:opacity .4s ease;
}
.play-button .circle{
  width:10%;
  height:17.78%;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}

@media screen and (max-width: 959px) {
  .play-button .circle {
    width:12%;
    height:21.33%;
  }
}

@media screen and (max-width: 599px) {
  .play-button .circle {
    width:15%;
    height:26.67%;
  }
}

.play-button svg{width:70%;height:70%;fill:#fff;margin-left:4px;}

/* 動画 */
#video-player{
  width:100%;
  height:100%;
  z-index:1;
  object-fit:contain;
  display:none;
  background:#000;
}

/* リンクレイヤー */
#link-layer{
  z-index:31;
  pointer-events:none; /* レイヤー自体はクリック不可 */
}
.video-link{
  position:absolute;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none; /* 初期状態はクリック不可 */
}
.video-link.show{
  opacity:1;
  pointer-events:auto; /* 表示時のみクリック可能 */
}
.video-link img{
  width:37vw;
  max-width:400px;
  min-width:80px;
  height:auto;
  object-fit:cover;
  border-radius:10px;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  display:block;
  background:#000;
}

/* カスタムコントロール */
.controls{
  z-index:20;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  opacity:0;
  transition:opacity .25s ease;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
  pointer-events:none;
}
.controls.show{
  opacity:1;
  pointer-events:auto;
}
.controls-inner{
  display:flex;
  align-items:center;
  gap:var(--ui-gap);
  padding:var(--ui-pad);
}
/* シークバー */
.progress-wrap{position:absolute; left:0; right:0; bottom:54px; padding:0 10px; z-index:21; pointer-events:auto;}
.progress{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:6px;
  border-radius:3px;
  background:#444;
  outline:none;
  cursor:pointer;
  background-image:linear-gradient(to right, var(--ui-accent) var(--seek,0%), #444 var(--seek,0%));
}
.progress::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px; height:14px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--ui-accent);
  margin-top:-4px;
}
.time{color:#fff;font:12px/1.2 system-ui, sans-serif;opacity:.95;white-space:nowrap;}
.spacer{flex:1;}
.btn{background:none;border:none;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:6px;border-radius:8px;}
.btn:hover{background:rgba(255,255,255,.08);}
.btn svg{width:20px;height:20px;fill:#fff;}
.volume-wrap{display:flex;align-items:center;gap:6px;min-width:120px;}
.volume{-webkit-appearance:none;appearance:none;width:90px;height:6px;border-radius:3px;background:#444;outline:none;cursor:pointer;background-image:linear-gradient(to right,#fff var(--vol,100%),#444 var(--vol,100%));}
.volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;margin-top:-3px;}
.speed{color:#fff;font:12px/1.2 system-ui, sans-serif;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.25);cursor:pointer;background:rgba(255,255,255,.06);}
.speed:hover{background:rgba(255,255,255,.12);}
:fullscreen .video-container{border-radius:0;}
.video-link:hover img{border-color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.6);}

#fs-toggle {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fs-toggle img {
  width: 24px;
  height: 24px;
  filter: invert(100%); /* 白いアイコン風にする（任意） */
  transition: opacity 0.3s;
}

#fs-toggle:hover img {
  opacity: 0.7;
}


 /* 外側のラッパー */
  .slider-wrapper {
    position: relative;
    width: 100%;
    padding: 0 30px; /* ← 矢印分の余白を確保 */
    box-sizing: border-box;
    border-radius: 12px;
    margin-bottom: 55px;
  }

/* --- 個別デザイン --- */
.v-breakfast {
  background-color: #edf8ff;
  border: 1px solid #dcedf9;
}

.v-lunch {
  background-color: #fffdef;
  border: 1px solid #fff088;
}

.v-dinner {
  background-color: #fff4f4;
  border: 1px solid #ffdfdf;
}

.v-dessert {
  background-color: #fdedff;
  border: 1px solid #f8dffb;
}

.v-soup {
  background-color: #fff8f8;
  border: 1px solid #fbdede;
}

.v-salad {
  background-color: #f5fff8;
  border: 1px solid #d9f4e1;
}

.v-lightmeal {
  background-color: #fff6f3;
  border: 1px solid #ffddd2;
}

.v-lunchbox {
  background-color: #fcfff4;
  border: 1px solid #e3f2ba;
}

.v-appetizer {
  background-color: #f5f7ff;
  border: 1px solid #dbe3ff;
}

.v-camp {
  background-color: #fffef4;
  border: 1px solid #fff37a;
}

.v-party {
  background-color: #fef7ff;
  border: 1px solid #fad2ff;
}

.v-sharing {
  background-color: #fff8f5;
  border: 1px solid #ffd8c8;
}

  /* 画像コンテナ */
  .slider-container {
    position: relative;
    overflow: hidden;
  }

  .slider-track {
    display: flex;
    transition: transform 0.5s ease;
  }

  .slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
  }
  
/* サムネイルリンク全体 */
  .thumb-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    position: relative;
    width: 100%;
  }

  .thumb-link img {
    width: 100%;
    border-radius: 8px;
    display: block;
    transition: opacity 0.3s;
  }

  /* video.png を画像右下に */
  .thumb-link::after {
    content: "";
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 20%;
    height: 20%;
    background: url("/common/img/video.png") no-repeat center center;
    background-size: contain;
    pointer-events: none;
  }

  /* タイトル全体 */
  .video-title {
    margin-top: 6px;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.4;
    text-align: center;
    padding: 0 4px;
  }

  /* 1行目（リンク部分） */
  .video-title a {
    color: red;
    text-decoration: underline;
    transition: font-weight 0.2s;
  }

  /* 2行目（補足部分） */
  .video-title span {
    display: block;
    font-size: 13px;
    font-size: 1.3rem;
    display: -webkit-box;           /* Flexboxの古い仕組みを使う */
  -webkit-box-orient: vertical;   /* 縦方向に並べる */
  -webkit-line-clamp: 2;          /* 最大2行に制限 */
  overflow: hidden;               /* はみ出し部分を隠す */
  text-overflow: ellipsis;
    color: #666;
    margin-top: 2px;
    line-height: 1.5;               /* 行間はお好みで調整 */
  max-height: calc(1.5 * 2);    /* 行数×line-height */
  }

  /* --- ホバー効果をスライド単位で同期 --- */
  .slide:hover .thumb-link img {
    opacity: 0.7;
  }
  .slide:hover .video-title a {
    font-weight: bold;
    text-decoration: underline;
  }

  /* 矢印ボタン → 画像中央に配置 */
  .arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 30px;
    height: 60px;
    background: url("/video/img/movieslider-01.png") no-repeat center center;
    background-size: contain;
    border: none;
    cursor: pointer;
    z-index: 10;
  }
  .arrow:hover {
    background-image: url("/video/img/movieslider-02.png");
  }
  .arrow:disabled { display: none; }
  .arrow.left {
    left: 5px;
    transform: translateY(-50%) rotate(180deg);
  }
  .arrow.right { right: 5px; }

  /* レスポンシブ */
  @media (min-width: 600px) {
    .slide { flex: 0 0 50%; }
  }
  @media (min-width: 900px) {
    .slide { flex: 0 0 33.333%; }
  }
  
  .video-cmn-img {
  position: relative;
}

.video-cmn-img::after {
  content: "";
  position: absolute;
  bottom: 8px;   /* 右下に配置 */
  right: 8px;
  width: 20%;   /* アイコンのサイズ */
  height: 20%;
  background: url("/common/img/video.png") no-repeat center center;
  background-size: contain;
  pointer-events: none; /* クリックを邪魔しない */
}

.video-cmn-img img {
  width: 100%;
  height: auto;
}

.video-opacity {
  -ms-filter: 'alpha( opacity=100)';
  opacity: 1;
  position: relative;
  padding: 3px 9px 7px 90px;
  margin-bottom:10px;
  height: auto !important;
  min-height: 80px;
  background-color: #f5f8fa;
  border-radius: 10px;
}

.video-opacity:hover {
  -ms-filter: 'alpha( opacity=70)';
  filter: alpha(opacity=70);
  opacity: 0.7;
}

.c-breakfast {
  background-color: #edf8ff;
}

.c-lunch {
  background-color: #fffdef;
}

.c-dinner {
  background-color: #fff4f4;
}

.c-dessert {
  background-color: #fdedff;
}

.c-soup {
  background-color: #fff8f8;
}

.c-salad {
  background-color: #f5fff8;
}

.c-lightmeal {
  background-color: #fff6f3;
}

.c-lunchbox {
  background-color: #fcfff4;
}

.c-appetizer {
  background-color: #f5f7ff;
}

.c-camp {
  background-color: #fffef4;
}

.c-party {
  background-color: #fef7ff;
}

.c-sharing {
  background-color: #fff8f5;
}

.video-txt01 {
  font-size: 20px;
  font-size: 2.0rem;
  display: block;
  text-decoration: underline;
}

.tabetoki a:hover .video-txt01, .tabetoki-02 a:hover .video-txt01 {
  text-decoration: underline;
  color: #ff8686;
}

.video-cmn-txt {
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.6;
  color: #010101;
  display: -webkit-box;           /* Flexboxの古い仕組みを使う */
  -webkit-box-orient: vertical;   /* 縦方向に並べる */
  -webkit-line-clamp: 2;          /* 最大2行に制限 */
  overflow: hidden;               /* はみ出し部分を隠す */
  text-overflow: ellipsis;
    color: #666;
    margin-top: 2px;
    line-height: 1.5;               /* 行間はお好みで調整 */
  max-height: calc(1.5 * 2);    /* 行数×line-height */
}

/* video-list
---------------------------------------------------------- */
@media screen and (max-width: 959px) {
  .video-list {
    margin-bottom: 8px;
  }
}

.video-list .mod-cmn {
  position: relative;
  padding-left: 90px;
  height: 80px;
  margin-bottom: 5px;
}

.video-list .mod-cmn-img {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  border-radius: 10px;
}

.video-list .video-cmn-txt {
  margin-right: -1px;
}

@media screen and (max-width: 959px) {
  .video-list .video-cmn-txt {
    margin-right: 0;
  }
}

.list-decimal-i {
  padding-top: 10px;
  font-size: 1.4rem;
  line-height: 1.9;
}

.list-decimal-i li {
  
}

.list-decimal-i li:last-child {
  margin-bottom: 10px;
}

@media screen and (max-width: 599px) {
  .list-decimal-i {
   padding: 10px 9px 0 20px;
  }
}

.list-decimal-r {
  list-style: decimal;
  font-size: 1.4rem;
  line-height: 1.6;
  padding: 10px 9px 0 17px;
}

.list-decimal-r li {
  margin-bottom: 13px;
}

.list-decimal-r li:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 599px) {
  .list-decimal-r {
   padding: 10px 9px 0 40px;
  }
}

.list-decimal-rc {
  color: #d56e00;
}

.grid-half-col-vi {
  width: 43%;
}

.grid-half-col-vr {
  width: 57%;
}

@media screen and (max-width: 1279px) {
  .grid-half-col-vi, .grid-half-col-vr {
    width: 50%;
    padding: 0 10px;
  }
}

@media screen and (max-width: 959px) {
  .grid-half-col-vi {
    width: 43%;
    padding: 0 10px;
  }
}

@media screen and (max-width: 959px) {
  .grid-half-col-vr {
    width: 57%;
    padding: 0 10px;
  }
}

@media screen and (max-width: 599px) {
  .grid-half-col-vi, .grid-half-col-vr {
    width: 100%;
    padding: 0;
  }
}

.btn-video-recipe {
  display: block;
  height: 40px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
  -ms-filter: 'alpha( opacity=100)';
  opacity: 1;
  width: 80%;
  margin-top: 20px;
}

@media screen and (max-width: 599px) {
  .btn-video-recipe {
    width: 80%;
  }
}

.btn-video-recipe:hover {
  -ms-filter: 'alpha( opacity=70)';
  filter: alpha(opacity=70);
  opacity: 0.7;
}

@media screen and (max-width: 599px) {
  .btn-video-recipe {
    height: 44px;
    border-radius: 3px;
  }
}

.btn-video-recipe .ico {
  display: inline-block;
  padding: 9px 0 9px 40px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 26px auto;
}

@media screen and (max-width: 599px) {
  .btn-video-recipe .ico {
    padding: 11px 0 11px 40px;
  }
}

/* btn-cmn
---------------------------------------------------------- */
.btn-video-recipe {
  background-color: #fe0000;
}

.btn-video-recipe .ico {
  background-image: url("/common/img/icon_recipe_07.png");
}

/* box-video-recipe
---------------------------------------------------------- */
.box-video-recipe {
    padding: 0 15px;
  }

@media screen and (max-width: 1279px) {
  .box-video-recipe {
    padding: 0 15px;
  }
}

@media screen and (max-width: 959px) {
  .box-video-recipe {
    padding: 0 15px;
  }
}

@media screen and (max-width: 599px) {
  .box-video-recipe {
    padding: 0 0 20px 30px;
  }
}

/* ==========================================================
 nav-v-breadcrumb
========================================================== */
.nav-v-breadcrumb {
  overflow: hidden;
  margin: 0 auto;
  margin-top: 20px;
  text-align: left;
  margin-bottom: 10px;
}

@media screen and (max-width: 959px) {
  .nav-v-breadcrumb {
    width: 100%;
  }
}

@media screen and (max-width: 599px) {
  .nav-v-breadcrumb {
    position: relative;
    width: 100%;
    height: 17px;
    margin-top: 15px;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    font-size: 10px;
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .nav-v-breadcrumb:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 9px;
    height: 100%;
    background-color: #fff;
  }
}

@media screen and (max-width: 599px) {
  .nav-v-breadcrumb-in {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    height: 250%;
    padding: 0 9px;
  }
}

.nav-v-breadcrumb ul {
  white-space: nowrap;
}

.nav-v-breadcrumb li {
  display: inline-block;
  padding: 4px 0;
}

.nav-v-breadcrumb li:first-child {
  padding: 0;
}

.nav-v-breadcrumb li:first-child a::before {
  content: '';
}

.nav-v-breadcrumb li:last-child {
  margin-left: 15px;
}

@media screen and (max-width: 599px) {
  .nav-v-breadcrumb li {
    display: inline-block;
    padding: 0;
    margin: 0;
  }
}

.nav-v-breadcrumb a::before {
  content: '>'"\00a0";
  display: inline-block;
}

.video-border {
  margin-bottom: 22px;
  padding-bottom: 15px;
  background: url("/common/img/bg_line_01.gif") no-repeat left bottom;
}

@media screen and (max-width: 599px) {
  .video-border {
    padding-bottom: 15px;
    background: url("/common/img/bg_line_01.gif") no-repeat right bottom;
  }
}

/* スワイプの競合を減らす */
.slider-container,
.slider-track {
  touch-action: pan-y; /* 縦スクロールはOSに任せる／横は自前 */
}

.slide img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none; /* 画像がタップを奪わないように */
}

.slider-track { cursor: grab; }
.slider-track.dragging { cursor: grabbing; }