@charset "utf-8";/* カフェ開業備品特集・ベーカリー・レストラン開業備品特集 */.genre_oc .openingcafe_top{background-image: url(/img/lp/opening-supplies/openingcafe_bg.png);background-size: cover;background-position: center;height: 500px;max-width: 100%;position: relative;display: flex;justify-content: center;align-items: center;text-align: center;margin-bottom:2rem;overflow: hidden;}.genre_oc .openingbakery_top{background-image: url(/img/lp/opening-supplies/openingbakery_bg.png);background-size: cover;background-position: center;height: 500px;max-width: 100%;position: relative;display: flex;justify-content: center;align-items: center;text-align: center;margin-bottom:2rem;overflow: hidden;}.genre_oc .openingcafe_top::before,.genre_oc .openingbakery_top::before {/* 半透明の長方形を重ねる */content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 80%;height: 70%;padding: 20px 0;background: rgba(255, 255, 255, 0.8);/* 白半透明 */z-index: 0;}.genre_oc .openingcafe_title_back,.genre_oc .openingbakery_title_back {position: relative;/* テキストを前面に */max-width: 80%;color: #333;z-index: 1;/* 背景より上に */}.genre_oc .openingcafe_title_area h1,.genre_oc .openingbakery_title_area h1 {font-size: 40px;font-weight: bold;color: #552f1d;}.genre_oc .openingcafe_txt_area .openingcafe_subtitle,.genre_oc .openingcafe_txt_area .openingbakery_subtitle {font-size: 25px;font-weight: bold;color: #552f1d;}.genre_oc .openingcafe_txt_area .openingcafe_txt_main,.genre_oc .openingcafe_txt_area .openingbakery_txt_main {color: #000000;font-size: 15px;margin: 10px auto;line-height: 1.7;}.genre_oc .openingcafe_txt_area .openingcafe_txt_btn,.genre_oc .openingcafe_txt_area .openingbakery_txt_btn {color: #552f1d;font-size: 17px;}.genre_oc .openingcafe_txt_area a ,.genre_oc .openingbakery_txt_area a{display: inline-flex;justify-content: center;align-items: center;margin-top: 15px;padding: .9em 2em;border: none;border-radius: 40px;background-color: #552f1d;color: #fff;font-weight: 600;font-size: 1.2em;text-decoration: none;}.genre_oc .openingcafe_txt_area a::after,.genre_oc .openingbakery_txt_area a::after {transform: rotate(45deg);width: 5px;height: 5px;margin-left: 10px;border-top: 2px solid #fff;border-right: 2px solid #fff;content: '';}.genre_oc .openingcafe_txt_area a:hover,.genre_oc .openingbakery_txt_area a:hover {opacity: 0.7;}@media screen and (max-width: 768px) {/* 背景エリア */.genre_oc .openingcafe_top,.genre_oc .openingbakery_top {height: auto;/* ← 可変にして中身に合わせる */padding: 60px 0;/* ← 上下の余白で“はみ出し防止” */position: relative;display: flex;justify-content: center;align-items: center;text-align: center;}/* 白い中央ボックス */.genre_oc .openingcafe_top::before,.genre_oc .openingbakery_top::before {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 90%;/* ← スマホ幅に最適化 */background: rgba(255, 255, 255, 0.8);/* 中のテキスト量に追従させる！ */padding: 20px;min-height: calc(100% - 40px);/* ← 上下padding分を引いた高さ */box-sizing: border-box;z-index: 0;}/* 中身（テキスト&ボタン）を中央に固定 */.genre_oc .openingcafe_title_back,.genre_oc .openingbakery_title_back {width: 90%;margin: 0 auto;position: relative;z-index: 1;/* ← 白ボックスより前面 */padding: 0 10px;box-sizing: border-box;}/* h1 */.genre_oc .openingcafe_title_area h1,.genre_oc .openingbakery_title_area h1 {font-size: 24px;line-height: 1.4;}/* h2 */.genre_oc .openingcafe_txt_area .openingcafe_subtitle,.genre_oc .openingbakery_txt_area .openingbakery_subtitle {font-size: 18px;line-height: 1.5;}/* 説明文 */.genre_oc .openingcafe_txt_area .openingcafe_txt_main,.genre_oc .openingbakery_txt_area .openingbakery_txt_main {font-size: 14px;line-height: 1.8;margin: 10px 0;}/* ボタン上のキャッチ */.genre_oc .openingcafe_txt_area .openingcafe_txt_btn,.genre_oc .openingbakery_txt_area .openingbakery_txt_btn {font-size: 14px;}/* ボタン */.genre_oc .openingcafe_txt_area a,.genre_oc .openingbakery_txt_area a {width: 100%;max-width: 260px;font-size: 1em;padding: 0.8em 1.2em;}}