@charset "UTF-8";

/* ===================================
   共通・ページタイトル設定
   =================================== */
.title__recipe::after {
  aspect-ratio: 1;
  -webkit-mask-image: url(/assets/images/common/icon_recipe.svg);
  mask-image: url(/assets/images/common/icon_recipe.svg);
  background-color: #ffffff;
  width: 56px;
}

.recipe__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0; /* SPでは左右パディングなし */
  box-sizing: border-box;
}
.common__btn > *{
  color:#333;
  font-weight: 500;
}
.common__btn > *::after{
  display: none;
}
.topic__path ul li {
  font-size: 12px;
}
/* ===================================
   SP（スマートフォン）スタイル
   =================================== */
.recipe__list {
  display: flex;
  flex-direction: column;
  gap: 16px; /* カード同士のマージン 16px */
  list-style: none;
  padding: 0;
  margin: 0;
}

.recipe__item {
  width: 100%;
}

.recipe__card {
  display: flex;
  flex-direction: row-reverse; /* 右に画像、左にテキスト */
  justify-content: space-between;
  width: 100%;
  max-width: 336px; /* 幅 336px */
  margin: 0 auto;
  border: 1px solid #EEEEEE; /* 線 1px #EEEEEE */
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  background-color: #ffffff;
}

.recipe__card-img {
  width: 128px;  /* 幅 128px */
  height: 128px; /* 高さ 128px */
  flex-shrink: 0;
}

.recipe__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recipe__card-body {
  width: 206px;  /* 幅 206px */
  padding: 8px;  /* 上下左右 8px パディング */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.recipe__card-title {
  font-size: 14px; /* フォントサイズ 14px */
  line-height: 1.4;
  margin: 0;
  font-weight: bold;
  color: #333333;
}

/* 詳しく見るボタン（SP調整） */
.recipe__card .topics__btn {
  margin-top: 8px;
}


/* ===================================
   PC（パソコン）スタイル (768px以上)
   =================================== */
@media screen and (min-width: 768px) {
  .recipe__inner {
    padding: 0 16px; /* PC表示時のみ左右に余白を設ける */
  }

  .recipe__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PCは横に3列並び */
    gap: 32px 24px; /* カード同士の間隔（上下32px、左右24px） */
  }

  .recipe__card {
    display: flex;
    flex-direction: column; /* 上に画像、下にテキスト */
    max-width: 100%;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .recipe__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .recipe__card-img {
    width: 100%;
    height: 200px; /* PC版の画像エリア高さ */
  }

  .recipe__card-body {
    width: 100%;
    padding: 16px;
    flex-grow: 1;
  }

  .recipe__card-title {
    font-size: 16px;
    margin-bottom: 16px;
  }
  .recipe__btn{
    font-weight: 600;
  }
  .recipe__btn span{
    display: block;
    text-align: center;
  }
}

/* ==========================================================================
   レシピ詳細ページ専用スタイル（レスポンシブ対応）
   ========================================================================== */
.title__recipe{
  display: flex;
  max-width: 1000px;
  margin: auto;
}
/* ページタイトル H1背景（#C2DCF8） */
.recipe-detail__page-title {
  background-color: #C2DCF8;
  padding: 16px;
  text-align: center;
  margin-bottom: 24px;
}

/* --- ページタイトル（H1）＆ アイコンの調整 --- */
.recipe-detail__page-title h1 span {
  font-size: 24px;
  font-weight: bold;
  color: #3A4454; /* テキスト色を変更 */
  display: inline-flex;
  align-items: center;
  margin-left: 16px;
  text-align: left;
}

/* タイトル左側のSVGアイコン設定 */
.recipe-detail__page-title .title__recipe::before {
  content: "";
  display: inline-block;
  width: 40px;
  aspect-ratio: 1;
  background-color: #3A4454; /* 指定色：3A4454 */
  -webkit-mask-image: url(/assets/images/common/icon_recipe.svg);
  mask-image: url(/assets/images/common/icon_recipe.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* コンテナ枠（SP: 幅 336px 中央寄せ） */
.recipe-detail__container {
  width: 336px;
  max-width: calc(100% - 32px); /* 320pxなど小型端末用の調整 */
  margin: 0 auto;
  box-sizing: border-box;
}

/* メイン画像・テキスト */
.recipe-detail__hero {
  margin-bottom: 24px;
}

.recipe-detail__hero-img {
  width: 100%;
  margin-bottom: 12px;
}

.recipe-detail__hero-img img {
  width: 100%;
  height: auto;
  display: block;
}
.recipe-detail__hero-text{
  margin: 24px 0;
}
.recipe-detail__hero-text p {
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
  margin: 0 0 8px 0;
}

/* 陸続きの水色背景エリア（#F0F7FF） */
.recipe-detail__ingredients-wrapper {
  background-color: #F0F7FF;
  padding: 48px 0 24px 0;
  margin-bottom: 48px;
  width: 100%;
}

/* セクション間隔（上下余白：48px） */
.recipe-detail__section {
  margin-bottom: 48px;
}

/* 青色ヘッダーバー (#315882) - Frame 3066 仕様 */
.recipe-detail__heading {
  background-color: #315882;
  color: #ffffff;
  padding: 8px 16px; /* 上下4px 左右8px */
  border-radius: 0; /* 角丸なし */
  display: flex;
  flex-direction: column; /* 上下2段組み */
  align-items: flex-start; /* 左寄せ */
  gap: 4px; /* 上段と下段の文字間隔 4px */
  /* margin-bottom: 16px; タイトルと表/リストとの余白：16px */
}

/* 上段：材料 ＋ アイコン */
.recipe-detail__heading span {
  font-size: 20px; /* フォントサイズ 20px */
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* アイコンと文字の間隔 */
}

/* シェフハットの白アイコン */
.recipe-detail__heading span::before {
  content: "";
  display: inline-block;
  width: 24px;
  aspect-ratio: 1;
  background-color: #ffffff;
  -webkit-mask-image: url(/assets/images/common/icon_recipe.svg);
  mask-image: url(/assets/images/common/icon_recipe.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* 下段：パン生地（8コ分） */
.recipe-detail__heading small {
  font-size: 14px; /* フォントサイズ 14px */
  font-weight: normal;
}

/* 材料・具材テーブル - Frame 3067 仕様 */
.recipe-detail__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: #fff;
  border-radius: 0 0 8px 8px; /* 下側の左右角のみ 8px */
  overflow: hidden;
}

/* 通常行のセルパディング（上下12px、左右16px） */
.recipe-detail__table th,
.recipe-detail__table td {
  padding: 12px 16px;
  font-size: 13px;
  color: #333333;
  border-bottom: 1px solid #D9D9D9;
  box-sizing: border-box;
}

.recipe-detail__table th {
  text-align: left;
  font-weight: normal;
  width: 65%;
}

.recipe-detail__table td {
  text-align: right;
}

/* 【A】【B】などの見出し行 */
.recipe-detail__table tr.is-heading th {
  font-weight: bold;
}

/* 括弧見出しより下の行（左端のパディングを32pxに設定） */
.recipe-detail__table tr.is-child th {
  padding: 12px 16px 12px 32px;
}

/* 一番下の行のボーダーを消去 */
.recipe-detail__table tr:last-child th,
.recipe-detail__table tr:last-child td {
  border-bottom: none;
}

/* 作り方ステップ */
.recipe-detail__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
}

.recipe-detail__steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px; /* ステップ番号とテキスト間の余白 */
  padding: 12px 16px; /* 上下12px、左右16px */
  border-bottom: 1px solid #D9D9D9;
  box-sizing: border-box;
}

.recipe-detail__steps li:last-child {
  border-bottom: none;
}

/* ステップ番号（幅22px、高さ22px） */
.recipe-detail__step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-color: #315882;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  margin-top: 1px;
}

.recipe-detail__step-text {
  font-size: 13px;
  line-height: 1.6;
  color: #333333;
}

/* ポイント */
.recipe-detail__points {
  padding-left: 18px;
  margin: 0;
}

.recipe-detail__points li {
  font-size: 13px;
  line-height: 1.6;
  color: #333333;
  margin-bottom: 6px;
}

/* 前後ナビ ＆ 戻るボタン */
.recipe-detail__nav {
  margin-top: 0;
  margin-bottom: 0;
}

/* ① recipe-detail__nav-links の上下パディング（32px） */
.recipe-detail__nav-links {
  display: flex;
  justify-content: space-between;
  padding-top: 32px;
  padding-bottom: 32px;
  margin-bottom: 0;
  font-size: 12px;
}

.recipe-detail__nav-links a {
  color: #315882;
  text-decoration: none;
  font-weight: 600;
}

.recipe-detail__nav-btn > * {
  padding: 8px;
}

.recipe-detail__nav-next {
  position: relative;
  padding-right: 28px;
}

/* 右矢印 */
.recipe-detail__nav-links .recipe-detail__nav-next::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #3A6EA5;
  border-right: 1px solid #3A6EA5;
  position: absolute;
  top: 25%;
  right: 8px;
  transform: rotate(45deg);
  transition: 0.3s;
}

.recipe-detail__nav-prev {
  position: relative;
  padding-left: 28px;
}

/* 左矢印 */
.recipe-detail__nav-links .recipe-detail__nav-prev::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #3A6EA5;
  border-right: 1px solid #3A6EA5;
  position: absolute;
  top: 25%;
  left: 8px;
  transform: rotate(-135deg);
  transition: 0.3s;
}

/* ② recipe-detail__back の上下パディング（48px） */
.recipe-detail__back {
  display: flex;
  justify-content: center;
  padding-top: 48px;
  padding-bottom: 48px;
  width: 100%;
}

/* ③ おすすめのガス機器を見る（横幅一杯・文字色・太さ・矢印設定） */
.recipe-detail__back .recipe__btn {
  width: 100%;
  box-sizing: border-box;
}

.recipe-detail__back .recipe__btn > * {
  width: 100%;
  color: #315882;
  font-weight: 600;
  box-sizing: border-box;
  padding: 16px 24px;
}


/* ==========================================================================
   PC表示 レスポンシブ (768px以上)
   ========================================================================== */
@media screen and (min-width: 768px) {
  
  /* コンテナ幅拡張（最大 800px） */
.recipe-detail__container {
width: 100%;           /* ★ SPの「width: 336px」を解除して100%可変にする */
    max-width: 800px;      /* 最大 800px まで広がる */
    padding: 0 24px;
  }

  .recipe-detail__page-title {
    padding: 20px;
    margin-bottom: 40px;
  }

  .recipe-detail__page-title h1 span {
    font-size: 40px;
  }
  
  .recipe-detail__page-title .title__recipe::before {
    width: 56px; /* PCでもサイズを変更したい場合は調整してください */
  }
  /* メイン画像を横に広げる */
  .recipe-detail__hero {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 40px;
  }

  .recipe-detail__hero-img {
    width: 45%;
    margin-bottom: 0;
  }

  .recipe-detail__hero-text {
    width: 55%;
  }

  .recipe-detail__hero-text p {
    font-size: 15px;
  }

  /* 水色エリアのパディング調整 */
  .recipe-detail__ingredients-wrapper {
    padding: 40px 0 16px 0;
    margin-bottom: 40px;
  }

  .recipe-detail__section {
    margin-bottom: 48px;
  }
  .recipe-detail__heading{
    padding: 16px 24px;
    flex-direction: row;
    align-items: flex-end;
  }
  .recipe-detail__heading span{
    font-size: 24px;
  }
  .recipe-detail__heading small{
    font-size: 16px;
    margin-left: 8px;
  }
  .recipe-detail__step-num {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }
  .recipe-detail__table th, 
  .recipe-detail__table td{
    font-size: 16px;
  }
  .recipe-detail__step-text,
  .recipe-detail__points li {
    font-size: 15px;
  }

  .recipe-detail__nav-links {
    font-size: 14px;
  }
  .recipe-detail__nav-links .recipe-detail__nav-prev::after{
    left: -8px;
  }
}