@charset "UTF-8";
/* CSS Document */

#meal #wrapper { background:url(../../meal/img/title_bg.jpg) no-repeat center top; width:950px;}
#meal #header { padding-top:70px;}
#meal #header:after { content:url(../img/gnav_img.png); position:relative; left:-30px; bottom:10px; z-index:50; }
#meal #wrapper h2 img {top:0; margin-top:-330px; height:330px;}

#meal #search_col { margin:100px 10px 0px 0; text-align: right; position:absolute; width:940px;}
#meal #search_col h2{ float:left; height:36px;}
#meal #search_col table{ float:left; margin:10px 5px; }
#meal #search_col ul{ float:left; padding-top:5px; }
#meal #search_col li{ display:inline; margin-right:15px; }

#meal #content { background:url(https://h-togen.com/meal/img/sec1_bg.jpg) no-repeat center 50px; margin-top:30px;  width:950px;}

#meal #sec1 {width:100%; text-align:center;}
#meal #lead_col,#meal #sec1 #plan_col { margin:0 auto; position:relative;text-align:left; width:950px;}
#meal #lead_col * { position:relative;}
#meal #lead_col h3 { float:right; margin-top:140px;}
#meal #lead_col p.lead { background:url(https://h-togen.com/meal/img/lead_bg.png) no-repeat left bottom; height:380px; padding:80px 0; position:absolute; right:90px; top:150px; width:400px; z-index:100; }
#meal .flexslider { float:left; padding-bottom:70px; margin-bottom:65px;  width:920px; z-index:10;}
#meal .flexslider:after { content:" "; clear:both; display:bllock; height:0; }
#meal .flexslider p { float:right; margin-top:-500px; height:323px; width:167px; z-index:12; }
#meal .slides { height:550px; width:700px;}

#meal.flex-control-nav { width:500px; }
#meal .flex-control-nav li {background:url(https://h-togen.com/appeal/img/sec4_line.png) no-repeat left bottom; display:block; margin-bottom:0; padding:8px 0; width:243px; float:right;}
#meal .flex-control-nav li:nth-child(3) { clear:both;}
#meal p.lead { height:460px; position:absolute; right:150px; top:200px; z-index:50; width:90px; }
#meal .img02 { right:150px; top:450px; z-index:100;}
#meal ol{ width:496px; height:200px;}
#meal li img.flex-active{ float:right;}


#meal #plan_col { margin: 0 auto; width:950px; padding-top:40px;}
#meal #plan_col .resp-tabs-list { margin: 0 auto; width:950px; padding-bottom:49px;}
#meal #plan_col .resp-tabs-list li { float:left; margin:0 3px 0px 3px ; display:block; height:49px; width:310px; }
#meal #plan_col .resp-tabs-list li:nth-child(3) { margin-right:0;}
#meal #plan_col .resp-tabs-list li.resp-tab-item img { float: left;}


#meal #plan_b {background:url(../../meal/img/tab_b_on.jpg) no-repeat;}
#meal #plan_c {background:url(../../meal/img/tab_c_on.jpg) no-repeat;}

#meal #plan_b  a,
#meal #plan_c  a{display: block;}

#meal #plan_b img,
#meal #plan_c img{border: none;}

#meal #plan_b a:hover,
#meal #plan_c a:hover{background: none;}

#meal #plan_b a:hover img,
#meal #plan_c a:hover img{visibility: hidden;}


#plan_a.resp-tab-active { background:url(https://h-togen.com/meal/img/tab_a_on.jpg) no-repeat;} 
#plan_b.resp-tab-active { background:url(https://h-togen.com/meal/img/tab_b_on.jpg) no-repeat;}
#plan_c.resp-tab-active { background:url(https://h-togen.com/meal/img/tab_c_on.jpg) no-repeat;}

.resp-tabs-container { background:url(../../meal/img/pl_bg.jpg) repeat ; margin:0 auto; width:950px; padding-top:-50px; }
.resp-tabs-container div { padding:5px; margin-bottom:30px;}
.resp-tabs-container div h4 { padding:30px 0 15px 0; text-align:center; }
.resp-tabs-container div p { padding:5px 0 15px 0; text-align:center; }
.resp-tabs-container .plan_list { display:inline-block; width:950px;}
.resp-tabs-container .plan_list li { float:left; margin:0 5px; width:225px; position:relative; z-index:10;}
.resp-tabs-container .plan_list li span { display:block; margin:-6px 0 -60px -5px; height:66px; width:66px; position:relative; z-index:20;}
.resp-tabs-container div div { background:url(https://h-togen.com/meal/img/pl_c_bg.jpg); display:inline-block;margin-top:20px; width:930px; }
.resp-tabs-container div div h5 { padding:5px 0;text-align:center; }
.resp-tabs-container div div p { text-align: left; margin-top:20px;}
.resp-tabs-container div .plan_img { display:block; float:left; width:600px; }


#a_col { background:url(https://h-togen.com/meal/img/a_tit_bg.png) no-repeat center 15px;  width:940px;}
#a_col h5 { background:url(https://h-togen.com/meal/img/a_pl01_bg.png) no-repeat 0px center; padding:50px 0 20px 0;}
#a_col div p { padding:0 80px 10px 220px;}
#a_col dl { float:right; padding:0 0px 10px 0; width:300px; text-align:center; }
#a_col dt { background:url(https://h-togen.com/meal/img/a_mn_bg.png) no-repeat center top; padding-top:10px; }
#a_col dd { background:url(https://h-togen.com/meal/img/a_mn_bg.png) no-repeat center bottom; padding-bottom:15px;}
#a_col dd ul { padding:10px 20px; text-align:left;}
#a_col dd li span { display:block; float:left; width:6em; }
#a_col dd li:last-child span { height:4em;} 
#a_col dd p{ float:right; font-size:11px; line-height:1; padding:10px;}


#b_col h4 { padding:10px 0 0 0;}
#b_col .plan_img { width:705px; }
#b_col .plan_img img { float:left; margin:0 5px 5px 0;}
#b_col h5 { padding-bottom:15px;}
#b_col div li { padding-bottom:10px;}


#c_col { background:url(https://h-togen.com/meal/img/c_tit_bg.png) no-repeat center 0px;}

#crab_col { margin:0 0 120px 0; width:950px;}
#crab_col dt { margin-bottom:-20px; position:relative;z-index:10; }
#crab_col dd ul { padding-left:10px; width:410px; margin-bottom: -50px; }
#crab_col dd li { float:left; margin-right:20px;position:relative;z-index:20;}

#meal #sec2_wrapper { background:#f6ebd8; margin-top:50px; width:950px; }
#meal #sec2 h3 { text-align:center;}
#meal #sec2 h3 img{ margin:-30px auto 0 auto; }
#meal #sec2 dl { font-size:18px; font-family:" 游明朝","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; float:left; margin:0 8px 60px 8px; width:220px; }
#meal #sec2 dt b { background:url(https://h-togen.com/meal/img/sec2_line.png) no-repeat center 0; display:block; margin-top:10px; padding:5px 0; text-align:center; width:100%;}
#meal #sec2 dd { background:url(https://h-togen.com/meal/img/sec2_line.png) no-repeat center 0; font-size:12px;text-align:center; }
#meal #sec2 dd span { font-size:18px; font-family:" 游明朝","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; }
#meal #sec2 dl p { text-align:left; font-size:13px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
#meal #sec2 dl:nth-child(5),
#meal #sec2 dl:nth-child(9) { margin-right:0; }
#meal #sec2 dl:nth-child(6) { clear:both;}

#meal #sec3 { background:url(https://h-togen.com/meal/img/sec3_bg.png) no-repeat right top; margin: 0 0px; padding:30px 0; width:950px; }
#meal #sec3 h3 { float:left; margin-left:0px;}
#meal #sec3 .col_img { background:url(https://h-togen.com/meal/img/sec3_itm_bg.png) no-repeat 400px top; float:right; width:600px; }
#meal #sec3 .img01 { margin:0 -60px 0 0; position:relative; z-index:20;} 
#meal #sec3 .img02 { z-index:10;} 
#meal #sec3 p { padding:40px 0 20px 20px; width:355px; }
#meal #sec3 ul { color:#900; padding:10px 20px;}

#meal #sec4 { background:#f6ead9; margin: 0 0; padding:0 0 0 0px; width:950px; }
#meal #sec4 h3 { background:url(https://h-togen.com/rakuten/meal/img/sec2_line.png) repeat-x center bottom; float:left; padding:35px 15px 10px 15px; width:300px;}
#meal #sec4 .col_img { float:right; width:580px;}
#meal #sec4 .col_img img { float:left; margin:0 0 4px 3px;}
#meal #sec4 p { float:left; padding:20px 0 15px 15px; width:350px;}

#meal #sec5 { background:url(https://h-togen.com/rakuten/meal/img/sec5_bg.png) no-repeat right top; margin:70px 0px ; width:950px;}
#meal #sec5 .col_img { float:left; margin:-10px 0 0 5px; position:relative; z-index:20;}
#meal #sec5 h3 { padding:35px 0 0 140px;}
#meal #sec5 ul { background:url(https://h-togen.com/rakuten/meal/img/sec5_bg_h.png) no-repeat right bottom; padding:20px 0 20px 140px; color:#fff; }
#meal #sec5 li:before { content:"●"; color:#fff; font-siz:13px; margin-right:5px; }

.resp-tabs-container ul:after,
.resp-tabs-container:after,
.resp-tabs-container div:after{ content:" "; clear:both; display:bllock; height:0; }







#meal .lead {
    -moz-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    _writing-mode: tb-rl;
    
 }
 
#meal #slider_col {
    position: relative;
    width: 700px;
    height:492px;
    margin: 0 auto;
}
#meal #photo1,#meal #photo2,#meal #photo3,#meal #photo4 {
    position: absolute;
    width: 700px;
    height:492px;
}
#meal #photo1 img,#meal #photo2 img,#meal #photo3 img,#meal #photo4 img {
    opacity:0;
    -moz-animation: imgTrans 18s infinite;
    -webkit-animation: imgTrans 18s infinite;
    animation: imgTrans 24s infinite;
}
#meal #photo1 img {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
#meal #photo2 img {
    -moz-animation-delay: 6s;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
#meal #photo3 img {
    -moz-animation-delay: 12s;
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}
#meal #photo4 img{
    -moz-animation-delay: 18s;
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}

#meal #frame {
    width: 700px;
    height:492px;
    position: relative;
    overflow: hidden;
}
@-webkit-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@-moz-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}


/* =========================================================
     楽天Gold用 スタイルシート
     ※他の要素に影響を与えないよう .rg-wrapper 内のみに適用
  ========================================================= */
  .rg-wrapper {
    /* サイト全体に馴染むよう一般的なフォントを指定 */
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", sans-serif;
    color: #333;
    line-height: 1.6;
    width: 950px; /* ページの幅を950pxに固定（レスポンシブ解除） */
    margin: 0 auto;
    padding: 20px 0px;
    box-sizing: border-box;
  }
  .rg-wrapper * {
    box-sizing: border-box;
  }

  /* セクション共通 */
  .rg-section {
    padding: 60px 20px; /* 上下60px, 左右20px */
    background-color: #f5ebd8; /* 全エリア共通の背景色 */
  }

  .rg-section-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #754800; /* 指定されたタイトルテキストカラー */
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #754800; /* 下線もタイトルカラーに合わせる */
  }
  .rg-section-desc {
    text-align: center;
    font-size: 15px;
    color: #555;
    margin-bottom: 40px;
    line-height: 1.8;
  }
  .rg-note {
    font-size: 13px;
    color: #d9534f; /* 注意書き用の赤 */
    display: block;
    margin-top: 5px;
  }

  /* グリッドレイアウト */
  .rg-grid {
    display: grid;
    gap: 25px;
  }
  .rg-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .rg-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* カード共通スタイル */
  .rg-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
  }
  .rg-card:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  }
  .rg-card-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #f5f5f5;
    overflow: hidden;
  }
  .rg-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .rg-card-content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .rg-card-title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0;
    line-height: 1.5;
  }
  .rg-card-price {
    font-size: 14px; /* 控えめな文字サイズ */
    font-weight: bold;
    color: #c0392b;
    margin: 0 0 10px 0;
    white-space: nowrap; /* 1行におさめる */
  }
  .rg-card-text {
    font-size: 13px;
    color: #666;
    margin: 0 0 15px 0;
    flex-grow: 1;
  }

  /* ボタン */
  #meal .rg-btn {
    display: block;
    text-align: center;
    background-color: #b34e2f; /* 指定されたボタンの色 */
    color: #fff !important;
    text-decoration: none;
    padding: 12px 10px;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: auto; /* 下部に固定 */
  }
  #meal .rg-btn:hover {
    background-color: #933f25; /* ホバー時は少し濃い色に */
  }