/*---------------------------------
 SP専用：サイズ比較セクション（画像再現・タブ版）
-----------------------------------*/
.size_compare_section {
  width: 100%;
  margin: 0 auto 30px;
  padding: 0 4%;
  box-sizing: border-box;
  font-family: 'Noto Serif JP', serif; /* 明朝体を適用 */
}

/* --- タブUI --- */
.sp_tab_radio {
  display: none;
}
.sc_tab_labels {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.sc_tab_labels label {
  width: 50%;
  text-align: center;
  padding: 10px 4px;
  font-size: 13px;
  font-weight: bold;
  color: #888888;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  cursor: pointer;
  box-sizing: border-box;
}
.sc_tab_labels label:first-of-type {
  border-radius: 4px 0 0 4px;
}
.sc_tab_labels label:last-of-type {
  border-radius: 0 4px 4px 0;
  border-left: none;
}
#tab_nigeru:checked ~ .sc_tab_labels label[for="tab_nigeru"],
#tab_ice:checked ~ .sc_tab_labels label[for="tab_ice"] {
  background-color: #3b4e76; /* タイトルバーと同じ紺色 */
  color: #ffffff;
  border-color: #3b4e76;
}

/* --- コンテンツレイアウト --- */
.size_compare_section .sc_container {
  display: block;
}
.size_compare_section .sc_card {
  display: none;
  position: relative;
  margin: 20px 0 0;
  padding: 24px 16px 16px;
  background-color: #ffffff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* 柔らかな影 */
  border-radius: 4px;
  animation: fadeIn 0.4s ease;
}
#tab_nigeru:checked ~ .sc_container #content_nigeru,
#tab_ice:checked ~ .sc_container #content_ice {
  display: block;
}

/* --- タイトルバー（紺色のピル型） --- */
.size_compare_section .sc_card_title {
  background-color: #3b4e76;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 16px;
  border-radius: 30px;
  width: 78%; /* 画像スペースを確保 */
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  letter-spacing: 1px;
}

/* --- はみ出し画像 --- */
.size_compare_section .sc_card_img {
  position: absolute;
  top: -24px; /* 上に大きくはみ出す */
  right: -8px; /* 右にも少しはみ出す */
  width: 125px; /* スマホ比率に合わせたサイズ */
  pointer-events: none;
  z-index: 2;
}
.size_compare_section .sc_card_img img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

/* --- テキストと区切り線 --- */
.size_compare_section .sc_card_body {
  margin-top: 24px;
}
.size_compare_section .sc_spec_group {
  margin-bottom: 16px;
}
.size_compare_section .sc_spec_dt {
  font-weight: bold;
  color: #000;
  font-size: 15px;
  margin-bottom: 6px;
  margin-left: -4px;
}
.size_compare_section .sc_spec_dd {
    font-size: min(4.1vw, 16px);
  color: #000;
  line-height: 1.6;
  margin-left: 8px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid #3b4e76; /* タイトルと同じ紺色の線 */
}
.size_compare_section .sc_spec_group:last-of-type .sc_spec_dd {
  border-bottom: none; /* 最後は線を消す */
  padding-bottom: 0;
}
.size_compare_section .annotation {
font-size: min(3.2vw, 14px);
  color: #333;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.items {
    background: url(//img.e87.com/selection/winter/2026images/winter-catchL-bg.jpg);
    background-size: cover;
    background-position: center;
}

.area_button a{background: #FFE7C0;color:#000!important;    border: 2px solid #FFE7C0;}

.area_btn p.btn_text::after {
    content: "";
    position: absolute;
    margin: auto;
    top: 50%;
    right: 0.75em;
    width: 7px;
    height: 7px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg) translateY(-50%);
    transition: 0.2s;
    
}

.area_btn p.btn_text{padding: 5% 3%;}

/* --------------------------------
クリスマスローズの植え方 guide
-------------------------------- */
.Guide{margin-top:12%;}
#guide{ position:relative; margin-top:-30px; padding-top:30px;padding-left: 3%;padding-right: 3%;}
#guide p, #guide img, #guide h2, #guide h3, #guide h4{ margin:0; padding:0; text-indent:0px; font-size:100%; width: unset;}
.guidecontents{ margin:0 0 30px 5px; }
#guide .block01{  }
#guide .block02{  }
#guide .box{display: flex;justify-content: space-between;padding-bottom:13px; align-items: center;}
.contents .guidance div.story span{ font-size: 13px; font-weight: bold; color: #991414; }
.contents .guidance div.story p{ float:left; background-color: #EFF6FF; border: #ccc 1px solid; padding: 10px; margin: 10px; border-radius: 3px; line-height:1.5; }
#guide h2.h2_ttl {color: #401f1f;font-size: 16px;background: content-box;padding: 5px 0 8px;margin-bottom: 10px;height: 20px;border-bottom: 3px #dad08c solid;text-align: center;}
#guide h3{clear: both;margin: 1em 0 2em;text-align: center; }
#guide h4{ text-align:right; }
#guide .textarea01 img, #guide .textarea img{ float:left; margin:2px 8px 7px 0;width: unset;}
#guide .textarea01, #guide .textarea{ font-size: 13px; line-height:1.5;width: 49%;}
#guide .photo{width: 49%;}
#guide .photo img{width: 100%;}
#guide .stepcontents{ padding:13px; background:#e6eac7; }
#guide .stepcontents img{ margin:4px 9px; }

/* -----------------------------------------------------------
 クリスマスローズ物語 poin_about
----------------------------------------------------------- */
#Point{margin-top:16%;}
.poin_about {box-sizing: border-box;font-family: kozuka-gothic-pr6n, sans-serif;background: url(//img.e87.com/selection/helleborus/2023images/about_bg.png) no-repeat top right;margin: 4% 0 0;border: 1px solid #e1d5c7;background-size: cover;position: relative;}
.poin_about dt {font-family: 'Noto Serif JP', serif;font-size: 18px;font-weight: 600;color: #c33332;margin-bottom: 3%;padding: 3% 0 0;line-height: 1.4;}
.poin_about dd {font-size: 14px;color: #633f33;line-height: 1.5;}
.poin_about dd p{padding: 0.25em 0;   line-height: 1.8;font-size: 13px;}
.flower_language {font-family: 'Noto Serif JP', serif;background: #ffa6a5;color: #fff;font-size: 15px;padding: 2px 2px 3px 8px;display: block;font-weight: 600;margin: 0.5em 0;}
.poin_about dl {margin: 4%;padding: 3%;background: rgba(255,255,255,0.9);border: 1px solid #eee;}
.poin_about dd.txt_green {color: #de1c41;padding-left: 1em;font-size: 13px;}
.poin_about dd.txt_green:before {content: "\f06a";font-family: "Font Awesome 5 Free";font-weight: 900;font-size: 16px;margin-left: -19px;padding-right: 4px;}

.banner_title::before, .banner_title::after{    width: 4%;}
.banner_title{padding:0;text-align: center;}