@charset "UTF-8";
/* CSS Document */

#smr_pages {
	width: 100%;
	margin: 0 auto 0 auto;
	padding-bottom:0;
	color:#000000;
	background: #FFF;
	font-size:17px;
	line-height: 2em;
	letter-spacing: 0.1em;
}

#smr_pages img { width: 100%; height: auto; display: block; }

#page_top { bottom: 77px!important; }
.pc_only {display: block;}
.sp_only {display:none;}
.mt_0 {margin-top: 0!important;}
.mb_0 {margin-bottom: 0!important;}
.bg_wrap { padding-bottom: 10%; overflow: hidden; }

/* 全体幅制約なしの100%レイアウト */
.wrapper_ { width: 100%; margin: 0 auto; }
.main_wap { width: 100%; margin: 0 auto; font-family: futura-pt, sans-serif; font-weight: 300; }

.smr_header {
	width: 93%; 
	margin: 0 auto 50px auto; 
	letter-spacing:10px;
	color: #FFF;
	position: relative;
}

.smr_header p {
	width: 40%;
	text-align: center;
	position: absolute;
	line-height: 1.2em;
    font-family: futura-pt, sans-serif;
    font-weight: 300;
	color: #ffffff;
	z-index: 9;
	box-sizing: border-box;
}

.smr_header p span {letter-spacing: 4px;}
.smr_header p.ttltxt01{ top: 20.5%; left: 56%; font-size: 20px; }
.smr_header p.ttltxt02{ top: 25%; left: 51.5%; font-size: 48px; }
.smr_header p.ttltxt03{ top: 34.5%; left: 56%; font-size: 16px; }

/* =======================================
   ★ common.css の label 影響リセット（このページ内のみ適用）
   ======================================= */
.lb_grid_wrap label,
.popup-master label {
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
}

/* =======================================
   ★ イントロテキストエリア
   ======================================= */
.intro_text_wrap {
    width: 93%;
    margin: 150px auto 150px auto;
    text-align: center;
}
.intro_ttl {
    font-size: 46px;
    font-weight: 400;
    margin-bottom: 25px; 
    color: #333;
    font-family: 'EB Garamond', "Zen Old Mincho", serif;
    letter-spacing: 0.15em;
}
.intro_sub_ttl {
    font-size: 19px; 
    font-family: 'EB Garamond', serif;
    letter-spacing: 0.15em;
    color: #555; 
    margin-bottom: 100px; 
    font-weight: 500;
    padding-right: 10px;
}
.intro_txt {
    font-size: 15px;
    line-height: 2em;
    color: #333;
    letter-spacing: 0.2em;
    font-weight: 500;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

/* =======================================
   ★ 画像グリッドレイアウト
   ======================================= */
.lb_grid_wrap {
	width: 93% !important;
	margin: 0 auto 50px auto !important; 
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important; 
    position: relative !important;
    align-items: start !important;
}

.popup-radio { display: none !important; }

.lb_dbox {
	width: 100% !important;
	margin: 0 !important;   
    position: relative !important;
    height: auto !important; 
    box-sizing: border-box !important;
}

/* サムネイルの開くボタン */
.btn-open {
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: block !important; 
  height: auto !important;
  max-height: none !important;
  position: relative !important;
}

.lb_open_wrap { position: relative; display: block; }
.lb_open_wrap img { position: relative !important; display: block !important; width: 100% !important; height: auto !important; }

.plus_wrap {
    background: transparent;
    padding: 0 5px !important;
    border: none;
    font-size: 16px;
    color: #FFF !important;
    position: absolute;
	bottom: 35px;
	right: 18px;
	z-index: 2;
}

.dli-plus {
	display: inline-block;
    vertical-align: middle;
    color: #FFF;
    line-height: 1;
    width: 2.2em;
    height: 0.07em;
    background: currentColor;
    border-radius: 0.07em;
    position: relative;
}
.dli-plus::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}

/* =======================================
   ★ ポップアップマスター（ウインドウ枠の固定化）
   ======================================= */
/* 修正: top, left, right, bottom を使って全画面に確実にフィットさせる */
.popup-master {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%; 
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  overflow: hidden; 
  overscroll-behavior: none; 
}

input[id^="popup-on"]:checked ~ .popup-master {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 修正: 背景のスクロールを完全に殺すための touch-action: none */
.popup-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
  cursor: pointer;
  z-index: 1;
  touch-action: none; 
}

/* 白いウインドウ枠組み */
.popup-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 20px));
  z-index: 10;
  width: 75vw;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

input[id^="popup-on"]:checked ~ .popup-master .popup-inner {
  transform: translate(-50%, -50%);
}

/* 修正: gridによる余分な高さ保持を解除し、相対配置に変更 */
.popup-inner-contents {
  position: relative;
  width: 100%;
  background: #f8f9fa; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.popup-inner-controls {
  position: relative;
  width: 100%;
  height: 64px; /* コントロールの高さ分確保 */
}

/* =======================================
   ★ ポップアップ中身の個別スタイル
   ======================================= */
/* 修正: grid-areaを外し、絶対配置にする。アクティブな要素だけが相対配置になって高さを決定する */
.popup-content {
  position: absolute;
  top: 0; left: 0; width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  padding: 40px;
  box-sizing: border-box;
  max-height: 75vh;
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch; 
}

.popup-controls {
  position: absolute;
  top: 0; left: 0; width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

/* ★ 修正：アクティブ時の要素を相対配置にして高さを決定させる */
#popup-on01:checked ~ .popup-master #content-01,
#popup-on01:checked ~ .popup-master #ctrl-01,
#popup-on02:checked ~ .popup-master #content-02,
#popup-on02:checked ~ .popup-master #ctrl-02,
#popup-on03:checked ~ .popup-master #content-03,
#popup-on03:checked ~ .popup-master #ctrl-03,
#popup-on04:checked ~ .popup-master #content-04,
#popup-on04:checked ~ .popup-master #ctrl-04,
#popup-on05:checked ~ .popup-master #content-05,
#popup-on05:checked ~ .popup-master #ctrl-05,
#popup-on06:checked ~ .popup-master #content-06,
#popup-on06:checked ~ .popup-master #ctrl-06,
#popup-on07:checked ~ .popup-master #content-07,
#popup-on07:checked ~ .popup-master #ctrl-07,
#popup-on08:checked ~ .popup-master #content-08,
#popup-on08:checked ~ .popup-master #ctrl-08,
#popup-on09:checked ~ .popup-master #content-09,
#popup-on09:checked ~ .popup-master #ctrl-09,
#popup-on10:checked ~ .popup-master #content-10,
#popup-on10:checked ~ .popup-master #ctrl-10,
#popup-on11:checked ~ .popup-master #content-11,
#popup-on11:checked ~ .popup-master #ctrl-11,
#popup-on12:checked ~ .popup-master #content-12,
#popup-on12:checked ~ .popup-master #ctrl-12,
#popup-on13:checked ~ .popup-master #content-13,
#popup-on13:checked ~ .popup-master #ctrl-13,
#popup-on14:checked ~ .popup-master #content-14,
#popup-on14:checked ~ .popup-master #ctrl-14,
#popup-on15:checked ~ .popup-master #content-15,
#popup-on15:checked ~ .popup-master #ctrl-15,
#popup-on16:checked ~ .popup-master #content-16,
#popup-on16:checked ~ .popup-master #ctrl-16,
#popup-on17:checked ~ .popup-master #content-17,
#popup-on17:checked ~ .popup-master #ctrl-17,
#popup-on18:checked ~ .popup-master #content-18,
#popup-on18:checked ~ .popup-master #ctrl-18,
#popup-on19:checked ~ .popup-master #content-19,
#popup-on19:checked ~ .popup-master #ctrl-19,
#popup-on20:checked ~ .popup-master #content-20,
#popup-on20:checked ~ .popup-master #ctrl-20,
#popup-on21:checked ~ .popup-master #content-21,
#popup-on21:checked ~ .popup-master #ctrl-21,
#popup-on22:checked ~ .popup-master #content-22,
#popup-on22:checked ~ .popup-master #ctrl-22,
#popup-on23:checked ~ .popup-master #content-23,
#popup-on23:checked ~ .popup-master #ctrl-23,
#popup-on24:checked ~ .popup-master #content-24,
#popup-on24:checked ~ .popup-master #ctrl-24,
#popup-on25:checked ~ .popup-master #content-25,
#popup-on25:checked ~ .popup-master #ctrl-25,
#popup-on26:checked ~ .popup-master #content-26,
#popup-on26:checked ~ .popup-master #ctrl-26,
#popup-on27:checked ~ .popup-master #content-27,
#popup-on27:checked ~ .popup-master #ctrl-27,
#popup-on28:checked ~ .popup-master #content-28,
#popup-on28:checked ~ .popup-master #ctrl-28,
#popup-on29:checked ~ .popup-master #content-29,
#popup-on29:checked ~ .popup-master #ctrl-29,
#popup-on30:checked ~ .popup-master #content-30,
#popup-on30:checked ~ .popup-master #ctrl-30,
#popup-on31:checked ~ .popup-master #content-31,
#popup-on31:checked ~ .popup-master #ctrl-31,
#popup-on32:checked ~ .popup-master #content-32,
#popup-on32:checked ~ .popup-master #ctrl-32,
#popup-on33:checked ~ .popup-master #content-33,
#popup-on33:checked ~ .popup-master #ctrl-33,
#popup-on34:checked ~ .popup-master #content-34,
#popup-on34:checked ~ .popup-master #ctrl-34,
#popup-on35:checked ~ .popup-master #content-35,
#popup-on35:checked ~ .popup-master #ctrl-35,
#popup-on36:checked ~ .popup-master #content-36,
#popup-on36:checked ~ .popup-master #ctrl-36 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  position: relative; /* 巨大な余白を防ぐ要 */
}

/* =======================================
   ★ コンテンツ内装飾
   ======================================= */
.lb_popup_lr {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

.lb_popup_l { width: 48%; margin: 0; display: flex; flex-direction: column; justify-content: center; }
.img_wrap img { display: block; width: 100%; height: auto; }

.lb_popup_r {
	width: 46%; margin: 0;
    font-family: 'Jost', "Zen Kaku Gothic New", sans-serif;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

.lb_popup_r_top {
    width: 100%;
}

.lb_popup_r_bottom {
    width: 100%;
}

.selected_items_ttl {
    font-size: 20px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 25px;
    color: #444;
    letter-spacing: 0.05em;
}

.product_item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    padding: 25px 20px; 
    margin-bottom: 15px;
    border-radius: 4px;
}

.product_img { width: 20%; margin-right: 20px; } 

.product_detail_link {
    display: block;
    flex: 1; 
    text-decoration: none; 
}

.product_detail_link:hover .product_name {
    text-decoration: underline; 
}

.product_detail_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.product_info { font-size: 13px; line-height: 1.6; letter-spacing: 0.05em; padding-right: 10px; }
.product_name { font-weight: 600; margin-bottom: 5px !important; font-size: 14px; color: #333; font-weight: 400; font-family: 'Jost', "Zen Kaku Gothic New", sans-serif;}
.product_code { color: #666; margin-bottom: 0 !important; font-size: 13px;  font-weight: 300;}

.product_price_wrap { text-align: right; white-space: nowrap; } 
.product_price { font-size: 13px; font-weight: 400; margin: 0 !important; color: #333; font-family: 'Jost', "Zen Kaku Gothic New", sans-serif;}

.popup_divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 25px 0; 
    width: 100%;
}

.model_height_text {
    text-align: left; 
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.8;
    letter-spacing: 0.05em;
    font-family: 'Jost', "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
}

/* =======================================
   ★ 複数アイテム（3つなど）を綺麗に収めるためのコンパクトモード
   ======================================= */
.compact_mode .selected_items_ttl {
    margin-bottom: 15px;
}
.compact_mode .product_item {
    padding: 12px 15px;
    margin-bottom: 10px;
}
.compact_mode .product_img {
    width: 18%; 
    margin-right: 15px;
}
.compact_mode .popup_divider {
    margin: 15px 0 10px 0;
}
.compact_mode .model_height_text {
    line-height: 1.6;
}

/* =======================================
   ★ 複数画像スライダー（一部ポップアップ用）
   ======================================= */
.popup-slider {
    position: relative;
    width: 100%;
    margin-bottom: 25px; 
}
.slider-radio { display: none !important; }

.slider-images {
    position: relative;
    width: 100%;
}

.slider-images .slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}
.slider-images .slide img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none; /* JS制御なので画像自体はイベント無視 */
}
.slider-images .slide.s1 {
    position: relative; 
}

/* ラジオボタンの状態によるフェードイン表示 */
input[id$="-1"]:checked ~ .slider-images .s1,
input[id$="-2"]:checked ~ .slider-images .s2,
input[id$="-3"]:checked ~ .slider-images .s3 {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* ドットナビゲーション */
.slider-dots {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
}
.slider-dots label {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #ccc !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
}

input[id$="-1"]:checked ~ .slider-dots label[for$="-1"],
input[id$="-2"]:checked ~ .slider-dots label[for$="-2"],
input[id$="-3"]:checked ~ .slider-dots label[for$="-3"] {
    background: #333 !important;
}

/* =======================================
   ★ コントロールボタン
   ======================================= */
.ctrl-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
}

.ctrl-btn:hover { background: #fff; }
.ctrl-btn span { display: block; transition: all 0.3s ease; }

.arrow {
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
.arrow.left { transform: rotate(-135deg); margin-left: 4px; }
.arrow.right { transform: rotate(45deg); margin-right: 4px; }

.close-x { position: relative; width: 16px; height: 16px; }
.close-x::before, .close-x::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
}
.close-x::before { transform: rotate(45deg); }
.close-x::after { transform: rotate(-45deg); }

.ctrl-btn:hover .arrow { border-color: #333; }
.ctrl-btn:hover .close-x::before, 
.ctrl-btn:hover .close-x::after { background: #333; }

/* =======================================
   ★ ボタンエリア
   ======================================= */
.btn_wrap {
    margin: 80px auto 120px auto !important; 
    text-align: center !important;
    clear: both !important;
    position: relative;
    z-index: 10;
}
.btn_box { width: 500px; max-width: 90%; margin: 0 auto; }
.btn_01 {
	display: block !important;
	position: relative !important;
	padding: 1.5em 2em !important;
	text-align: center !important;
	font-size: 16px !important;
	text-decoration: none !important;
	color: #333 !important;
	background: #FFF !important;
	border: solid 1px #333 !important;
    letter-spacing: 0.2em !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    font-family: 'Jost', "Zen Kaku Gothic New", sans-serif;
}
.btn_01:hover { opacity: 0.6; }

/* 共通ユーティリティ */
.fadein_img {animation-name: fadein;animation-duration: 2s;}
.fadein_box {animation-name: fadein;animation-duration: 1.5s;}
@keyframes fadein {
  from {opacity: 0;transform: translateY(0);}
  to {opacity: 1;transform: translateY(0);}
}

a img {border:none;}
a:link, a:visited, a:active { color: #333; text-decoration: none; }
a:hover { color: #555; text-decoration: none; }
a img:hover {opacity: 0.8;}

/* =======================================
   ★ モバイル設定 (980px以下)
   ======================================= */
@media only screen and (max-width: 980px) {
	
#smr_pages { font-size:130%; line-height: 1.5em; }
.pc_only {display:none;	}
.sp_only {display: block;}	

.smr_header {
	width: 100%;
	margin: 0 auto 30px auto;
	padding-top: 5%;
}
.smr_header p{
	width: 100%;
	margin: 0 0 0 6px;
	left: 0;	
}
.smr_header p.ttltxt01{ top: 15%; font-size:3.2vw;}
.smr_header p span { letter-spacing: 2px; }
.smr_header p.ttltxt02{ top: 19.1%; font-size:7.2vw; }
.smr_header p.ttltxt03{ top: 26.5%; font-size:3.1vw; }

/* イントロテキスト */
.intro_text_wrap {
    width: 100%;
    padding: 100px 0px;
    box-sizing: border-box;
    margin: 0 auto 40px auto;
}
.intro_ttl {
    font-size: 30px;
    margin-bottom: 20px;
}
.intro_sub_ttl {
    font-size: 13px;
    margin-bottom: 50px;
}
.intro_txt {
    font-size: 14px;
    line-height: 1.8em;
    letter-spacing: 0.15em;
    font-weight: 600;
}

/* スマホ版 2列レイアウト */
.lb_grid_wrap {
    width: 100% !important; 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 10px !important; 
    padding: 0 10px;
    box-sizing: border-box;
}

/* ★ 修正：スマホ時のポップアップ背景スクロールをさらに強力にブロック */
body:has(input[id^="popup-on"]:checked) {
    overflow: hidden; 
}

.popup-master {
    overscroll-behavior: none;
    touch-action: none; /* マスター枠でのスワイプ自体を無効化 */
}
.popup-inner { width: 95vw; }

/* ★ 修正：スクロールエリアを限定しつつ、はみ出しを防ぐ */
.popup-content { 
    padding: 20px; 
    max-height: 80vh; 
    touch-action: pan-y; /* 内部コンテンツだけ縦スクロールを許可 */
}

.lb_popup_lr { flex-direction: column; align-items: flex-start; }
.lb_popup_l, .lb_popup_r { width: 100%; }
.lb_popup_l { margin-bottom: 30px; }

.selected_items_ttl { font-size: 18px; margin-bottom: 15px; }

.product_item { padding: 15px; align-items: center; }
.product_img { width: 25%; margin-right: 15px; }

/* スマホ時のみ商品情報と価格を縦並び（2列）にする */
.product_detail_wrap {
    flex-direction: column;
    align-items: flex-start;
}

.product_name { font-size: 14px!important; }
.product_code { font-size: 13px!important; }
.product_price { font-size: 13px!important; }
    
.product_info { font-size: 12px; padding-right: 0; margin-bottom: 8px; width: 100%; }
.product_price_wrap { font-size: 13px; text-align: left; }

.popup_divider { margin: 20px 0 15px 0; }
.model_height_text { margin-top: 5px; }

.btn_wrap { margin: 50px auto 80px auto !important; }
.btn_box { width: 90%; }
.btn_01 { font-size: 14px !important; padding: 1.2em 1em !important; font-weight: 500!important;}
}