@import url(common.css);

#content .first_block {
  background-image: url(../parts/ih/23129508_l.jpg);
}

.default_block .default_item {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 1em;
}
.h2_block {
  padding-bottom: 3em;
}
.h2_block li {
  font-size: 14px;
  color: var(--aside_gray);
}

/* /////////////////////////////////// */

/* 〇〇シリーズ共通 */

/* /////////////////////////////////// */

#ih_s {
  padding-top: 2em;
}

.card-container {
  padding: 3em 0;
}
.card-container h2 {
  padding: 0 0 1em 1em;
}

/* セクション枠 */
.ih-heroCard {
  margin: 0 auto 1em;
  background: #e0eee0;
  border-radius: 20px;
  overflow: clip;
  box-shadow: var(--shadow);
  border: 1px solid #f0f0f0;
}

.ih-visual {
  position: relative;
  background: #fff;
}
.ih-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9; /* ワイドで余白をつくる */
  object-fit: contain;
  display: block;
}

/* 画像左下の小プレート */
.ih-plate {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: #111a;
  color: #fff;
  backdrop-filter: blur(4px) saturate(140%);
  padding: 0.45em 0.7em;
  border-radius: 5px;
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 700;
}
.ih-plate .series {
  margin-right: 0.4em;
}
.ih-plate .model {
  font-feature-settings: "palt", "lnum";
}

/* /////////////////////////////////// */

/* 各種アイコンimg */

/* ラクッキングリル・匠加熱・エコナビ */
/* 表示位置clamp方式でレスポンシブ対応済み */

/* /////////////////////////////////// */
.pana_logo {
  position: absolute;
  left: 4%;
  top: clamp(-15px, 0vw, -5px);
  width: clamp(96px, 22vw, 200px);
  z-index: 2;
}
.ra-cooking-grill,
.grill_plate_type {
  position: absolute;
  right: clamp(8px, 4vw, 28px);
  top: clamp(-15px, 0vw, -5px);
  width: clamp(96px, 22vw, 200px);
  z-index: 2;
}
.ra-cooking-grill img,
.grill_plate_type img {
  display: block;
  width: 100%;
  height: auto;
}
.takumi-kanetsu {
  position: absolute;
  right: clamp(8px, 4vw, 28px);
  top: clamp(8px, 13vw, 95px);
  width: clamp(72px, 18vw, 120px);
  z-index: 2;
}
.takumi-kanetsu img {
  display: block;
  width: 100%;
  height: auto;
}

.econavi {
  position: absolute;
  right: clamp(8px, 4vw, 28px);
  top: clamp(12px, 5vw, 45px);
  width: clamp(80px, 24vw, 150px);
  z-index: 2;
}
.econavi img {
  display: block;
  width: 100%;
  height: auto;
}

/* /////////////////////////////////// */

/* 画像から下（説明＋金額） */
/* .ih-container */

/* /////////////////////////////////// */
.ih-container {
  padding: 1.5em 0;
  width: calc(100% - 40px);
  margin: 0 auto;
  box-sizing: border-box;
}
.ih-body {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: clamp(18px, 3vw, 28px);
}

.ih-info h3 {
  margin: 0.1em 0 0.4em;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 900;
}

.ih-badges {
  display: flex;
  gap: 8px;
  margin: 0.4em 0 1em;
}
.ih-badges span {
  display: inline-block;
  padding: 0.38em 0.66em;
  border-radius: 5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.badge-size {
  background: #ff9f1c;
  color: #fff;
}
.badge-burner {
  background: #ffd166;
  color: #5a3e00;
}

.ih-info ul {
  line-height: 1.85;
}
.ih-info ul li {
  list-style-type: unset;
  list-style-position: unset;
  color: #354;
  font-size: clamp(15px, 1.8vw, 16px);
}

/* 価格カード（右サイド） */
.ih-priceCard {
  align-self: start;
}
.price-card {
  position: sticky;
  top: 18px;
  background: #fff;
  border: 1px solid #e7efe7;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* 価格の堅牢表示 */
.price-main {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.15em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "lnum", "palt";
  line-height: 1.1;
  font-size: clamp(18px, 2.4vw, 28px);
}
.price-main .num {
  font-weight: 800;
  letter-spacing: 0.01em;
}
.price-main .yen {
  font-weight: 700;
  opacity: 0.95;
}
.price-sub {
  text-align: right;
  font-size: clamp(12px, 1.2vw, 14px);
  white-space: nowrap;
}
/* 本体＋標準工事費 */
.price-note {
  margin: 0.4em 0 0;
  font-size: 15px;
}
.price-card a {
  display: block;
  text-align: center;
  padding: 0.9em 1em;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  background: var(--main_moreorang);
  color: #fff;
}
.price_block {
  padding: 0 0 1em;
}
.price_block .large {
  font-size: clamp(35px, 1.8vw, 45px);
  padding-right: 0.2em;
  font-weight: 600;
}

/* /////////////////////////////////// */

/* 詳細をみるアコーディオン */
/* 機能・加熱範囲 */

/* /////////////////////////////////// */

.ih_accordion summary {
  cursor: pointer;
  color: #0a7f42;
  margin: 2em auto 0;
}
.grid2 {
  margin: 1.5em auto 1em;
}
.ih_accordion .card {
  padding: 1.5em 1em;
}
.ih_accordion .card h3 {
  padding-bottom: 1em;
}
.card_wap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  gap: 0.2em 0.5em;
}
.ih_accordion .card p {
  border: 1px solid #c5c5c5;
  padding: 0.5em 0.7em;
  margin-bottom: 0.5em;
  font-size: 14px;
}

/* /////////////////////////////////// */

/* カード下の注意事項リスト */
/* .notice_list */

/* /////////////////////////////////// */
.notice_list {
  padding-left: 1em;
}
.notice_list li {
  list-style-type: disc;
  list-style-position: inside;
  font-size: 15px;
  color: var(--aside_gray);
}

/* === レスポンシブ === */
/* タブレット：2段目の左右比を均等寄りに */
@media (max-width: 1024px) {
  .ih-body {
    grid-template-columns: 1.2fr 1fr;
  }
  .ih-plate {
    display: none;
  }
}

@media (max-width: 680px) {
  .ih-body {
    grid-template-columns: 1fr;
  }
  .price-card {
    position: static;
  }
}

/* /////////////////////////////////// */

/* 標準工事 */
/* section class="price_list" */

/* /////////////////////////////////// */

.price_list .card {
  padding: 1em;
}
.price_list .card h3 {
  text-align: center;
}
.price_list .card img {
  display: block;
  max-width: 100px;
  margin: 0 auto 1em;
}
/* カードの下の注意事項リスト */
.price_list .aside_gray {
  font-size: 15px;
  color: var(--aside_gray);
}

.op_container {
  padding: 4em 0;
}
.price_list .price_block .large {
  font-size: clamp(23px, 1.8vw, 25px);
  padding-right: 0.2em;
}

.op_container .card h3 {
  text-align: left;
}

/* ////////////////////////////////////////// */

/* 対応可能セクション */

/* ////////////////////////////////////////// */
.ok_section {
  padding: 8em 0 5em;
}
.ok_section h2 {
  text-align: center;
}
.ok_block {
  margin: 3em auto 0;
}
.ok_item {
  border: 1px solid var(--border_gray);
  border-radius: var(--radius);
  padding: 1em;
}
.ok_item p {
  font-weight: bold;
  text-align: center;
}
.ok_item img {
  display: block;
  width: min(100%, 250px);
  height: auto;
  margin: 1em auto 0;
}

/* ok_bottom */
.ok_bottom {
  padding: 1em 0;
}
.ok_bottom p {
  text-align: center;
}
.ok_bottom ul {
  padding-bottom: 4em;
}
.ok_bottom li {
  font-size: clamp(13px, 1.8vw, 14px);
  color: var(--aside_gray);
  text-indent: -1em;
  padding-left: 1em;
}
@media only screen and (max-width: 768x) {
  .ok_bottom p {
    text-align: left;
  }
}

/* /////////////////////////////////// */

/* 施工事例セクション */

/* common.cssに記述 */

/* /////////////////////////////////// */