/* ------------------------------
 * カラムレイアウト割付
 * レイアウト：親 .flex + 子 .col-2 ~ .col-6
 * 既存のユーティリティ（ w70perなど ）使用する場合は .nowrap 併用
 * ------------------------------ */
/* 親：flex + 固定gap */
#index .flex {
  display: flex;
  flex-wrap: wrap;
  gap: 32px ; 
}
#index .flex > * {
  box-sizing: border-box;
}
/* 等分カラム */
#index .col-2 { width: calc( calc(100% - calc(32px * 1)) /2); }
#index .col-3 { width: calc( calc(100% - calc(32px * 2)) /3); }
#index .col-4 { width: calc( calc(100% - calc(32px * 3)) /4); }
#index .col-5 { width: calc( calc(100% - calc(32px * 4)) /5); }
#index .col-6 { width: calc( calc(100% - calc(32px * 5)) /6); }
#index .col-7 { width: calc( calc(100% - calc(32px * 6)) /7); }
#index .col-8 { width: calc( calc(100% - calc(32px * 7)) /8); }
/* 等分カラム */
#index .flex.nowrap,
#index .flex.pc_nowrap {
  flex-wrap: nowrap;
}
/* ===== ベースのテキストスタイル ===== */
#index p.comment,
#topicsmainfull ul,
#index summary {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  text-align: left;
  margin-top: 8px;
}
#index h2,
#index h3,
#index h4{padding: unset; margin: unset;border: unset;text-align: left;}
#topicsmainfull h1{font-size: 28px;text-align: left;font-weight: 100;margin-top: 16px;}
#index h2{font-size: 20px;}
#index h3{font-size: 18px;margin-bottom: 10px;}
#index h4{font-size: 20px;}
#index small{font-size: 75%;} 

/* ------------------------------
 * ボタン .btn-*
 * ------------------------------ */
/* ボタン基本CSS */
#index [class^="btn"] {
  position: relative;
  color: #333333;
  max-width: 100%;
  width: 700px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px;
  font-size: 15px;
  border-radius: .5rem;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  margin: auto;
}
#index [class^="btn"]::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 23px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  box-sizing: border-box;
}

/* ボタン：優先度高 */
#index .btn-primary {
  background: #70C13F;
  color: #fff;
}
#index .btn-primary:hover{ border-bottom: 1px solid #569131;box-sizing: border-box; }

/* ボタン：優先度中 */
#index .btn-common {
  background: #707070;
  color: #fff;
}
#index .btn-common:hover{ border-bottom: 1px solid #666666;box-sizing: border-box; }

/* hover,activeの挙動 */
#index [class^="btn"]:hover{ transform: translateY(-1px); opacity: 0.9; }
#index [class^="btn"]:active{ transform: translateY(0);border-bottom:1px solid transparent; }

/* ------------------------------
 * リスト
 * ------------------------------ */
#index ul.list {
  text-align: left;
  padding-left: 14px;
  font-size: 15px;
}
#index ul.list > li {
  list-style-type: disc;
  line-height: 1.6;
}
#index ul.list li::marker {
  font-size: 0.8em;
  color:#333333;
}
#index ul.list li + li {
  margin-block-start: 8px;
}

/* ------------------------------
 * 全体
 * ------------------------------ */
div#index {
    width: 100%;
    max-width: none;
}
#indexheader{
	max-width: 1200px;
	margin: 0px auto;
    min-width: 850px;
}
#index img{
	height: auto;
}
#index red {
    color: #e60012;
}
#index section {
	width: 100%;
}
#index section + section {
    margin-top: 32px;
}
#index section > .wrapper{
	width: 1200px;
    margin: 0 auto;
}
#index .main_erea {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 margin-top: 16px;
}
#index .order0 {
 width: 35%;
}
#index .order1 {
 width: 61%;
}

/* ------------------------------
 * 左カラム
 * ------------------------------ */
.subbox {
	display: grid;
    grid-template-columns: 1fr 70px;
	gap: 8px;
}
.subbox > img {order: 1;}
.subbox > .spec_img_box{order: 12;}

#index .spec_img_box ul{
	display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.mainbox {
    background-color: #f9f9f9;
    padding: 20px 28px 32px;
    border-radius: 8px;
    margin-top: 16px;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
}
p.specText {
    font-size: 16px;
    text-align: left;
    color: #333;
    font-weight: 600;
    position: relative;
    padding-left: 24px;
    margin-top: 16px;
}
p.specText:before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    background-color: #3ba4a9;
    border: 3px solid #3ba4a9;
    border-radius: 3px;
    box-sizing: border-box;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.spec > div {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    font-size: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
}
.spec > div dt {
    text-align: left;
    flex-shrink: 0;
    font-weight: 600;
}
.spec > div dd {
    text-align: right;
}

/* ------------------------------
 * 売価部分
 * ------------------------------ */
.productblock {display: none;}
.productblock_in,.productblock_detail{padding: 0;}
.productblock_detail > p{display: none;}
.productblock_detail > p.productblock_priceblock{display: block;}
.productblock_pricel{font-size: 32px;}
.mainbox .price {
    display: grid;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-end;
	margin: 16px 0 0;
	font-size: 16px;
    font-weight: 600;
    grid-template-columns: auto auto;
}
#ResultBtn {grid-column: 1 / span 2;}
#ResultBtn .btn-primary{width: 70%;}

/* ------------------------------
 * 右カラム
 * ------------------------------ */
 .fieldset {
    margin-top: 18px;
}
.lb_button{
	display: flex;
	gap: 32px;
}
.lb_button .label {
	width: calc(calc(100% - calc(32px * 1)) / 2);
	position: relative;
}
.radio-input{
	appearance: none;
    position: absolute;
}
.radio-text {
	cursor: pointer;
	position: relative;
    display: flex;
    align-items: center;
	padding: 16px;
    border: 3px solid #F0F0F0;
	border-radius: 3px;
	box-sizing: border-box;
}
.radio-text span{
	width: calc(100% - 16px);
	font-size: 15px;
}
.radio-text::before {
	content: ''; 
	display: block; 
	width: 16px;
	height: 16px;
	border-radius: 3px;
    border: 3px solid #F0F0F0;
	box-sizing: border-box;
}
.radio-input:checked+.radio-text {
    border: 3px solid #3db9be;
	box-sizing: border-box;
}
.radio-input:checked+.radio-text::after {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	position: absolute;
	background-color: #3db9be;
    border: 3px solid #3db9be;
	border-radius: 3px;
	box-sizing: border-box;
}
/* 吹き出し */
.compare-text {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: -10px;
    background-color: #696969;
    padding: 4px 8px;
    width: fit-content;
    box-sizing: border-box;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.8px;
	border-radius: 3px;
}
.compare-text::before {
    content: "";
    border: 5px solid transparent;
    border-top: 5px solid #696969;
    margin-left: -5px;
    top: 100%;
    left: 50%;
    position: absolute;
}
.radio-input:checked+.radio-text+.compare-text {background-color: #38a2a7;}
.radio-input:checked+.radio-text+.compare-text::before {border-top: 5px solid #38a2a7;}

.mainbox .price.priceFixed {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    z-index: 99999;
    background-color: #f5f5f5;
    margin: 0 !important;
    padding: 16px 200px 16px 16px;
    box-sizing: border-box;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
    grid-template-columns: auto auto auto;
    justify-content: end;
    gap: 16px;
    min-width: 850px;
}
.mainbox .price.priceFixed #ResultBtn{ grid-column: unset;}
.mainbox .price.priceFixed #ResultBtn .btn-primary{font-size: 14px;font-weight: 100;width: 100%; padding: 8px;}
.mainbox .price.priceFixed #ResultBtn .btn-primary::after{display: none;}