@charset "UTF-8";
/* ============================================
   montfrin.jp レスポンシブ対応CSS（修正版）
   実際のHTML構造・ID・class名に基づく
   ============================================ */

/* ============================================
   オーダーフォーム改善（PC/SP共通）
   ============================================ */

/* 項目名（th）を大きく */
table.mailform tr th {
  font-size: 15px;
  font-weight: bold;
  padding: 12px 8px 12px 0;
  vertical-align: top;
  line-height: 1.6em;
}

/* 入力欄まわり（td）を大きく + 上下padding */
table.mailform tr td {
  font-size: 14px;
  line-height: 1.7em;
  padding: 12px 6px;
}

/* テキスト入力・セレクト・テキストエリア */
table.mailform input[type="text"],
table.mailform input[type="email"],
table.mailform input[type="tel"],
table.mailform textarea {
  font-size: 16px;
  padding: 8px 10px;
  box-sizing: border-box;
}

table.mailform select {
  font-size: 15px;
  padding: 6px 8px;
}

/* ラベル・リスト */
table.mailform label {
  font-size: 14px;
}

table.mailform li {
  font-size: 14px;
  line-height: 2em;
}

/* 確認画面へ / リセットボタン */
table.mailform input[type="submit"],
table.mailform input[type="reset"],
table.mailform input[type="button"],
table.mailform button {
  font-size: 17px;
  font-weight: bold;
  color: #ffffff;
  background-color: #4a6a2a;
  border: 2px solid #3a5520;
  border-radius: 6px;
  padding: 14px 36px;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: background-color 0.2s ease;
  margin: 5px;
}

table.mailform input[type="submit"]:hover,
table.mailform input[type="button"]:hover {
  background-color: #3a5520;
}

table.mailform input[type="reset"] {
  background-color: #888888;
  border-color: #777777;
}

table.mailform input[type="reset"]:hover {
  background-color: #666666;
}


/* ========== スマホ（768px以下） ========== */
@media screen and (max-width: 768px) {

  /* --- 全体リセット --- */
  html {
    overflow-x: hidden;
  }

  body {
    min-width: 0 !important;
    width: 100% !important;
  }

  #wrap {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }


  /* ====== ヘッダー ====== */
  #header_wrap {
    width: 100% !important;
  }

  #header {
    width: 100% !important;
    height: auto !important;
    padding: 10px !important;
    box-sizing: border-box;
    text-align: center;
  }

  #header_left {
    float: none !important;
    width: 100% !important;
    text-align: center;
    margin-bottom: 5px;
  }

  #logo {
    margin-top: 10px;
  }

  #logo img {
    max-width: 200px !important;
  }

  #header_right {
    float: none !important;
    width: 100% !important;
    text-align: center;
  }

  #tel {
    text-align: center !important;
    margin-top: 5px;
  }

  #tel img {
    max-width: 220px !important;
  }

  #hnav {
    text-align: center !important;
    padding-top: 5px;
    font-size: 10px !important;
    line-height: 2em !important;
  }


  /* ====== グローバルナビ ====== */
  #gnav_wrap {
    height: auto !important;
    padding: 0 !important;
  }

  #gnavArea {
    width: 100% !important;
  }

  #gnav {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }

  #gnav li {
    position: static !important;
    width: 33.333% !important;
    box-sizing: border-box;
    border-bottom: 1px solid #d8d5c7;
    border-right: 1px solid #d8d5c7;
  }

  #gnav li a,
  #gnav li, #gnav a {
    height: auto !important;
    line-height: 2.5em !important;
    text-align: center;
    font-size: 12px !important;
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* 個別のleft位置指定を全リセット */
  #gnav-home,
  #gnav-montfrin,
  #gnav-petit,
  #gnav-story,
  #gnav-gifts,
  #gnav-order {
    left: auto !important;
    width: 33.333% !important;
  }


  /* ====== パンくず ====== */
  #breadcrumb_wrap {
    width: 100% !important;
  }

  #breadcrumb {
    width: 100% !important;
    height: auto !important;
    padding: 5px 10px !important;
    box-sizing: border-box;
  }

  #breadcrumb p {
    font-size: 11px !important;
    line-height: 1.8em !important;
  }


  /* ====== コンテンツエリア ====== */
  #cont_wrap {
    width: 100% !important;
  }

  #cont {
    width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box;
  }


  /* ====== 価格改定お知らせ ====== */
  .attention2 {
    margin: 15px 0 !important;
    padding: 12px 10px !important;
    box-sizing: border-box;
  }

  .attention2 h3 {
    font-size: 14px !important;
    height: auto !important;
    padding-left: 20px !important;
    margin-left: 0 !important;
    background-size: 14px auto !important;
  }

  .attention2 p {
    font-size: 12px !important;
  }

  /* 価格テーブル縦積み */
  table.price_update {
    width: 100% !important;
  }

  table.price_update th,
  table.price_update td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: left !important;
  }

  table.price_update th {
    padding: 8px 8px 2px !important;
    border-bottom: none !important;
    font-size: 12px !important;
    background-color: #f0f5e8;
  }

  table.price_update td {
    padding: 2px 8px 8px !important;
    font-size: 14px !important;
    font-weight: bold;
    border-bottom: 1px solid #d8d8d8 !important;
  }


  /* ====== お知らせブロック（休業案内等） ====== */
  .announce-block {
    padding: 15px 10px !important;
  }

  .announce-block h4 {
    float: none !important;
    width: 100% !important;
    margin-bottom: 8px;
  }

  .announce-block p {
    float: none !important;
    width: 100% !important;
  }


  /* ====== トップコピー（バナースライド） ====== */
  #top_copy {
    overflow: hidden;
  }

  #top_copy ul#top_copy_imgs {
    width: 100% !important;
    height: auto !important;
    position: static !important;
  }

  #top_copy ul#top_copy_imgs li {
    position: static !important;
    margin-bottom: 5px;
  }

  #top_copy ul#top_copy_imgs li img {
    width: 100% !important;
    height: auto !important;
  }


  /* ====== 商品グリッド（.demo + capSlide） ====== */
  #top_main {
    margin-top: 10px;
  }

  .demo {
    float: none !important;
    width: 100% !important;
    margin-bottom: 15px;
  }

  .ic_container {
    width: 100% !important;
    margin-right: 0 !important;
  }

  #capslide_img_cont1,
  #capslide_img_cont2,
  #capslide_img_cont3,
  #capslide_img_cont4,
  #capslide_img_cont5,
  #capslide_img_cont6,
  #capslide_img_cont7,
  #capslide_img_cont8 {
    margin-right: 0 !important;
  }

  .ic_container img {
    width: 100% !important;
    height: auto !important;
  }

  .ic_caption {
    position: relative !important;
    opacity: 1 !important;
    filter: none !important;
    background-color: #f6f4ee;
    padding: 8px 10px !important;
  }

  .ic_caption h3 {
    font-size: 14px !important;
  }

  .overlay {
    display: none !important;
  }

  .clearer10,
  .clearer20 {
    padding-bottom: 5px !important;
  }


  /* ====== サイドバー（下層ページ用） ====== */
  #side {
    float: none !important;
    width: 100% !important;
    margin-bottom: 15px;
  }

  #snavArea {
    width: 100% !important;
    height: auto !important;
    background-image: none !important;
  }

  #snav {
    width: 100% !important;
    height: auto !important;
    position: static !important;
  }

  #snav li {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  #snav li a,
  #snav li, #snav a {
    height: auto !important;
    width: 100% !important;
    text-indent: 0 !important;
    padding: 10px !important;
    box-sizing: border-box;
  }

  #snav-olive,
  #snav-health,
  #snav-recipes,
  #snav-press,
  #snav-contact {
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
  }

  ul.side_menu li {
    float: none !important;
    width: 100% !important;
    white-space: normal !important;
  }

  ul.side_menu li a {
    width: 100% !important;
    box-sizing: border-box;
    height: auto !important;
    padding: 8px 13px !important;
  }

  #mainArea {
    float: none !important;
    width: 100% !important;
  }

  /* front_body内のcont1 */
  #front_body .cont1 {
    width: 100% !important;
  }


  /* ====== お買い物ガイド ====== */
  #guide_wrap {
    margin-top: 20px;
  }

  #guide {
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box;
  }

  #guide1,
  #guide2,
  #guide3 {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 10px;
  }

  #guide h3 {
    height: auto !important;
    padding: 8px 10px !important;
    line-height: 1.6em !important;
    font-size: 12px !important;
  }

  #pagetop {
    float: none !important;
    text-align: center;
    margin: 15px 0;
  }

  #pagetop a {
    width: 100% !important;
    max-width: 250px;
    margin: 0 auto;
  }


  /* ====== フッター ====== */
  #footer_wrap {
    width: 100% !important;
  }

  #footer {
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box;
  }

  #fnav_area {
    width: 100% !important;
    height: auto !important;
    padding: 10px 0 !important;
  }

  #fnav p {
    text-align: center !important;
    line-height: 2.2em !important;
    font-size: 11px !important;
  }

  #footer_credit {
    float: none !important;
    text-align: center;
  }

  #credit {
    text-align: center !important;
    padding: 10px 0;
  }

  #footer_logo {
    float: none !important;
    text-align: center !important;
    margin-top: 10px;
  }

  #footer_logo img {
    max-width: 180px !important;
  }


  /* ====== テーブル全般 ====== */
  table {
    max-width: 100% !important;
    word-wrap: break-word;
  }

  /* オリーブオイル等級図表 */
  table#grade_fig {
    width: 100% !important;
    font-size: 10px !important;
  }

  /* 特商法テーブル */
  #law table {
    width: 100% !important;
  }

  #law table th {
    width: auto !important;
    display: block !important;
  }

  #law table td {
    display: block !important;
  }


  /* ====== 商品ページ用レイアウト ====== */
  .product-block {
    padding: 10px !important;
  }

  .product-left,
  .product-right {
    float: none !important;
    width: 100% !important;
    text-align: center;
    margin-bottom: 15px;
  }

  /* float系ヘルパークラスのリセット */
  .imgLeft {
    float: none !important;
    display: block;
    margin: 0 auto 10px !important;
  }

  .imgRight,
  .imgRight2 {
    float: none !important;
    display: block;
    margin: 0 auto 10px !important;
  }

  [class*="left_"] {
    float: none !important;
    width: 100% !important;
  }

  [class*="right_"] {
    float: none !important;
    width: 100% !important;
  }

  /* 固定幅クラスのリセット */
  .width500,
  .width540,
  .width600,
  .width650 {
    width: 100% !important;
  }

  .general-1box {
    width: 100% !important;
    box-sizing: border-box;
  }

  .general-2box {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;
  }


  /* ====== 初物お知らせ（primeur） ====== */
  .primeur-wrap {
    padding: 15px 10px 0 !important;
  }

  .primeur-block {
    float: none !important;
    width: 100% !important;
    padding: 10px 0 !important;
  }


  /* ====== ギフトページ ====== */
  #gift1,
  #gift2 {
    width: 100% !important;
    height: auto !important;
    padding: 15px !important;
    box-sizing: border-box;
  }

  #gift_image {
    float: none !important;
    text-align: center;
    margin-bottom: 10px;
  }

  #gift_gallery {
    float: none !important;
    width: 100% !important;
  }

  #gift_top4_1,
  #gift_top4_2,
  #gift_top4_3,
  #gift_top4_4 {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }


  /* ====== レシピ ====== */
  .recipes_130 {
    float: none !important;
    width: 100% !important;
    padding-right: 0 !important;
    text-align: center;
    margin-bottom: 10px;
  }

  #recipe_menu {
    margin-left: 20px !important;
  }


  /* ====== info_announce ====== */
  .info_announce h5 {
    float: none !important;
    width: 100% !important;
    margin-bottom: 5px;
  }

  .info_announce p {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }


  /* ====== カルーセル（スライド） ====== */
  #carouselWrap {
    width: 100% !important;
    height: auto !important;
  }

  #carouse {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
  }

  #carouselPrev,
  #carouselNext {
    display: none !important;
  }


  /* ====== メールフォーム ====== */
  table.mailform tr th {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 5px 0 !important;
  }

  table.mailform tr td {
    display: block !important;
    width: 100% !important;
  }


  /* ====== クリスマス・季節ページ ====== */
  .xmas_right {
    float: none !important;
    width: 100% !important;
  }

  .xmas .goto_order {
    float: none !important;
    margin-top: 15px;
    text-align: center;
  }


  /* ====== パートナー ====== */
  .partner1,
  .partner2 {
    height: auto !important;
  }

  #partners .imgLeft {
    float: none !important;
    display: block;
    text-align: center;
    padding-left: 0 !important;
    margin-bottom: 10px;
  }

  #partners h3 {
    margin-left: 0 !important;
  }


  /* ====== 下層ページコンテンツ幅修正 ====== */
  #front_body {
    width: 100%;
  }

  .cont1 {
    padding: 20px 0;
  }

  #table_contact {
    margin-left: 0;
    width: 100%;
    color: #333333;
  }

  form#mailform {
    width: 100% !important;
  }

  table.mailform tr td {
    padding: 10px !important;
  }


  /* ====== オーダーフォーム（SP横揺れ修正） ====== */
  table.mailform {
    width: 100% !important;
    table-layout: fixed !important;
  }

  table.mailform tr th {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 10px 8px 4px !important;
    font-size: 14px !important;
    background-color: #f0f5e8;
  }

  table.mailform tr td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  table.mailform input[type="text"],
  table.mailform input[type="email"],
  table.mailform input[type="tel"],
  table.mailform textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important;
	  border-color: #333 !important;
	  border-radius: 6px !important;
  }

	table.mailform .product-block input[type="text"] {
		width: 50% !important;
	}
	
  table.mailform select {
    max-width: 100% !important;
    font-size: 16px !important;
  }

  /* ボタン横並び→縦積み */
  table.mailform input[type="submit"],
  table.mailform input[type="reset"],
  table.mailform input[type="button"],
  table.mailform button {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 !important;
    padding: 16px 10px !important;
    font-size: 16px !important;
    box-sizing: border-box;
  }

  /* フォーム全体の横はみ出し防止 */
  form {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }
	#confirmBody {
		width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
	}
}


/* ========== タブレット（769px〜1024px） ========== */
@media screen and (min-width: 769px) and (max-width: 1024px) {

  body {
    min-width: 0 !important;
  }

  #header,
  #gnavArea,
  #gnav,
  #breadcrumb,
  #cont,
  #guide,
  #footer,
  #fnav_area {
    width: 95% !important;
    max-width: 942px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .demo .ic_container img {
    width: 100% !important;
    height: auto !important;
  }

  #top_copy ul#top_copy_imgs {
    width: 100% !important;
  }

  #top_copy ul#top_copy_imgs li img {
    width: 100% !important;
    height: auto !important;
  }
}