@charset "utf-8";

/* ===== RESET ===== */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,select,option,textarea,p,table,th,tr,td,figure,img {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-style: normal;
  list-style: none;
  font-weight: normal;
  font-size: 100%;
  border: none;
}
*, *:before, *:after {
  box-sizing: border-box;
  transition: 0.2s;
}
img {
  height: auto;
  line-height: 1em;
  vertical-align: top;
  max-width: 100%;
}
summary {
  display: block;
  cursor: pointer;
  outline: none;
}
summary::-webkit-details-marker { display: none; }

/* ===== BASE ===== */
body {
  color: #383730;
  font-size: 1.05rem;
  line-height: 2em;
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", sans-serif;
  position: relative;
  background: #fff;
}
a { text-decoration: none; color: #000; }
a:hover { opacity: 0.6; }

.mf-frame {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
.mf-inner {
  padding: 80px 20px;
}

/* ===== BUTTONS ===== */
.btn-wrap {
  display: flex;
  gap: 12px;
}
.btn-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #fcc900;
  border-radius: 100px;
  font-weight: bold;
  font-size: 0.95rem;
  width: 200px;
  height: 56px;
  position: relative;
}
.btn-link.line-btn { background: #06c755; }
.btn-link:before {
  content: "";
  border: #fff solid 1px;
  border-radius: 100px;
  position: absolute;
  top: 5px; bottom: 5px; left: 5px; right: 5px;
}
.btn-link:hover {
  opacity: 1;
  box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.btn-link.search-btn {
  background: #1e365c;
}

/* ===== HEADER ===== */
header {
  padding: 18px 24px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.header-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-logo {
  display: flex;
  align-items: center;
  line-height: 1;
}
.header-logo img {
  height: 48px;
  width: auto;
  display: block;
}
/* テキストロゴ fallback（旧ページ互換） */
.header-logo span {
  display: block;
  font-size: 0.6rem;
  font-weight: normal;
  color: #888;
  letter-spacing: 0.1em;
}

/* ===== NAV (smenu) ===== */
nav#smenu {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
nav#smenu ul {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
}
nav#smenu ul li a {
  font-size: 0.85rem;
  color: #383730;
}
nav#smenu ul li a:hover { opacity: 0.6; }

/* ===== HERO / MAINVIS ===== */
#mainvis {
  margin-top: 130px;
  background: linear-gradient(135deg, #fffdf4 0%, #fff8e1 60%, #fff 100%);
  padding: 60px 20px 50px;
  text-align: center;
}
.mainvis-inner {
  max-width: 1000px;
  margin: 0 auto;
}
.mainvis-catch {
  font-size: 2rem;
  font-weight: bold;
  color: #1e365c;
  line-height: 1.5em;
  margin-bottom: 16px;
}
.mainvis-catch em {
  font-style: normal;
  color: #fcc900;
}
.mainvis-sub {
  font-size: 1rem;
  color: #666;
  margin-bottom: 32px;
}
.mainvis-btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ===== PAGE TITLE BAND ===== */
#page-title-band {
  background: #1e365c;
  color: #fff;
  text-align: center;
  padding: 16px 20px 8px;
}
#page-title-band h1 {
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
}
#page-title-band p {
  font-size: 0.88rem;
  margin-top: 4px;
  opacity: 0.8;
}
/* パンくず・カテゴリラベルのリンクも白に統一 */
#page-title-band a {
  color: #fff;
  opacity: 0.8;
}
#page-title-band a:hover {
  opacity: 1;
}

/* ===== SECTION COMMON ===== */
.section-ttl {
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  color: #1e365c;
  margin-bottom: 48px;
  position: relative;
  padding-bottom: 16px;
}
.section-ttl:after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: #fcc900;
  margin: 12px auto 0;
  border-radius: 2px;
}

/* ===== DRUG DETAIL SECTION ===== */
/* --------------------------------------------------------
   固定ヘッダー高さ補正
   ヘッダー実高さ概算:
     padding上下: 18px × 2 = 36px
     ロゴ2行 (ESSENCE Pharmacy + サブ): 約38px
     nav#smenu (margin-top:8px + フォント): 約30px
     合計: 約104px → 余裕を持たせ110px
   --------------------------------------------------------
   旧構造ページ (index, search, achromycin等):
     <body> > <header> の直後に <div id="page-title-band">
     → #page-title-band に margin-top: 110px を設定
   新構造ページ (新規20件):
     <body> > <main id="main-content"> > <div id="page-title-band">
     → #main-content に padding-top: 110px を設定
   -------------------------------------------------------- */

/* 旧構造: <main>外のpage-title-band */
body > #page-title-band {
  margin-top: 70px;
}

/* 新構造: <main id="main-content">配下のpage-title-band
   mainにpadding-topを設定してヘッダー分オフセット */
#main-content {
  padding-top: 130px;
}

#drug-detail {
  background: #fff;
}
#drug-detail .mf-inner {
  padding: 80px 20px;
}

.drug-header {
  text-align: center;
  margin-bottom: 40px;
}
.drug-header h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1e365c;
  font-family: 'Noto Sans JP', sans-serif;
  margin-bottom: 8px;
}
.drug-header p {
  font-size: 0.9rem;
  color: #888;
}

/* 製品画像 */
.drug-photo {
  text-align: center;
  margin-bottom: 40px;
}
.drug-photo img {
  width: 100%;
  max-width: 480px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.drug-photo figcaption {
  font-size: 0.85rem;
  color: #888;
  margin-top: 8px;
}

/* 価格テーブル */
.price-table {
  margin: 0 auto 48px auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  max-width: 480px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
/* divベース（既存ページ互換）*/
.price-table-row {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.95rem;
}
.price-table-row:last-child { border-bottom: none; }
.price-table-row:nth-child(odd) { background: #fafafa; }

/* tableベース（新規ページ）*/
.price-table thead tr th {
  background: #f5f5f5;
  font-size: 0.8rem;
  color: #888;
  font-weight: normal;
  padding: 8px 24px;
  border-bottom: 1px solid #e8e8e8;
  text-align: left;
}
.price-table tbody tr {
  border-bottom: 1px solid #f0f0f0;
}
.price-table tbody tr:last-child {
  border-bottom: none;
}
.price-table tbody tr:nth-child(odd) {
  background: #fafafa;
}
.price-table tbody tr:nth-child(even) {
  background: #fff;
}
.price-table tbody th {
  padding: 14px 24px;
  font-weight: normal;
  color: #555;
  font-size: 0.95rem;
  text-align: left;
  width: 50%;
  border-right: 1px solid #f0f0f0;
  white-space: nowrap;
}
.price-table tbody td {
  padding: 14px 24px;
  font-size: 0.95rem;
  text-align: left;
}

/* 価格ラベル・値 共通 */
.price-label {
  color: #555;
  min-width: 140px;
  font-size: 0.95rem;
}
.price-value {
  font-weight: bold;
  color: #1e365c;
  font-size: 1.05rem;
}
.price-unit {
  font-size: 0.85rem;
  color: #666;
  margin-left: 2px;
}

/* 「お問い合わせ」価格ブロック */
.price-inquiry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin: 0 auto 32px auto;
  max-width: 480px;
}
.price-inquiry .price-label {
  min-width: auto;
}
.price-inquiry .price-value {
  font-size: 1rem;
  color: #1e365c;
}

/* no-image プレースホルダー */
.drug-photo-noimage {
  text-align: center;
  margin-bottom: 40px;
}
.drug-photo-noimage .noimage-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  height: 220px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8edf5 100%);
  border-radius: 8px;
  border: 2px dashed #c0cce0;
  color: #9aa8c0;
}
.drug-photo-noimage .noimage-box svg {
  width: 64px;
  height: 64px;
  opacity: 0.5;
}
.drug-photo-noimage .noimage-box span {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  font-weight: bold;
  text-transform: uppercase;
}

/* 薬品情報ブロック */
.drug-info-block {
  margin-bottom: 36px;
  padding: 28px 30px;
  background: #fafafa;
  border-radius: 10px;
  border-left: 5px solid #1e365c;
}
.drug-info-block h3 {
  font-size: 1.05rem;
  font-weight: bold;
  color: #1e365c;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.drug-info-block h3:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #fcc900;
  border-radius: 50%;
  flex-shrink: 0;
}
.drug-info-block p,
.drug-info-block li {
  font-size: 0.95rem;
  line-height: 1.9em;
  color: #444;
}
.drug-info-block ul {
  padding-left: 4px;
}
.drug-info-block ul li {
  padding: 2px 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.drug-info-block ul li:before {
  content: "・";
  color: #1e365c;
  font-weight: bold;
  flex-shrink: 0;
}
.note-block {
  border-left-color: #fcc900;
  background: #fffdf0;
}
.note-block p {
  font-size: 0.9rem;
  color: #666;
}

/* ===== mf4 style — yellow bg section ===== */
#mf4 {
  background: #FFFFEF;
  border-top: 1px solid #f5f0c0;
  border-bottom: 1px solid #f5f0c0;
}

/* ===== DRUG DETAIL WRAP ===== */
.drug-detail-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}

.drug-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #1e365c;
  border-left: 4px solid #fcc900;
  padding-left: 12px;
  margin-bottom: 20px;
}

/* ===== DRUG CTA ===== */
.drug-cta {
  text-align: center;
  background: linear-gradient(135deg, #f5f8ff 0%, #eef3ff 100%);
  border: 1px solid #d0daf0;
  border-radius: 12px;
  padding: 36px 24px;
  margin-top: 48px;
}
.drug-cta p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 20px;
}
.btn-cta-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #06c755;
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: 100px;
  margin: 6px 8px;
  box-shadow: 0 3px 10px rgba(6,199,85,0.3);
}
.btn-cta-line:hover {
  opacity: 0.85;
  color: #fff;
}
.btn-cta-contact {
  display: inline-flex;
  align-items: center;
  background: #fcc900;
  color: #1e365c;
  font-weight: bold;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: 100px;
  margin: 6px 8px;
  box-shadow: 0 3px 10px rgba(252,201,0,0.3);
}
.btn-cta-contact:hover {
  opacity: 0.85;
  color: #1e365c;
}

/* ===== FOOTER ===== */
footer {
  border-bottom: #1e365c solid 36px;
  text-align: center;
  background: #fff;
}
.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 20px 50px;
}
.footer-btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.footer-btn-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 290px;
  height: 72px;
  border-radius: 100px;
  font-weight: bold;
  font-size: 1rem;
  color: #fff;
  background: #fcc900;
  position: relative;
}
.footer-btn-link.line-btn { background: #06c755; }
.footer-btn-link:before {
  content: "";
  border: #fff solid 1px;
  border-radius: 100px;
  position: absolute;
  top: 5px; bottom: 5px; left: 5px; right: 5px;
}
.footer-btn-link:hover { opacity: 1; box-shadow: 0 0 8px rgba(0,0,0,0.2); }

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.footer-nav ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav a {
  font-size: 0.88rem;
  color: #555;
}
.footer-logo {
  font-size: 1.2rem;
  font-weight: bold;
  color: #1e365c;
  margin-bottom: 12px;
}
.footer-address {
  font-size: 0.85rem;
  color: #888;
}

/* ===== PAGE TOP ===== */
#pagetop {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  color: #fff;
  font-size: 0.7em;
  font-weight: bold;
  border-radius: 100%;
  background: rgba(0,0,0,0.45);
  line-height: 1em;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  position: fixed;
  right: 20px;
  bottom: 24px;
  cursor: pointer;
  z-index: 999;
}
#pagetop:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border: #fff solid;
  border-width: 3px 3px 0 0;
  transform: rotate(-45deg);
  margin-bottom: -4px;
}
#pagetop:hover { opacity: 0.7; }

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 768px) {
  body { font-size: 0.97rem; }
  .mainvis-catch { font-size: 1.4rem; }
  .btn-link { width: 160px; height: 48px; font-size: 0.85rem; }
  nav#smenu { display: none; }
  #page-title-band h1 { font-size: 1.3rem; }
  body > #page-title-band { margin-top: 70px; }
  #main-content { padding-top: 80px; }
  .drug-photo img { max-width: 100%; }
  .price-table { max-width: 100%; }
  .drug-info-block { padding: 20px 18px; }
  .footer-btn-link { width: 44vw; max-width: 290px; height: 56px; font-size: 0.9rem; }
  .footer-nav { display: none; }
  .mf-inner { padding: 48px 16px; }
}