.simulator {
 background-color: #FAF7F7;
}
.simulator_container {
 width: 1180px;
 margin: 0 auto;
 padding: 50px 0;
 text-align: center;
 box-sizing: border-box;
}
.simulator_container h1 {
 margin: 0 auto 4%;
}
.simulator_container h1 img {
 width: 100%;
 max-width: 430px;
}
.simulator_wrapper {
 display: flex;
 justify-content: space-between;
 gap: 30px;
 margin-bottom: 55px;
}
.simulator_main {
 width: 600px;
}
.simulator_filters {
 width: 550px;
}
.simulator_filters_reset {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 550px;
}
.simulator_filters_reset img {
 width: 100%;
 max-width: 138px;
}
.simulator_filters_reset a {
 text-decoration: none;
 font-size: 16px;
}
.simulator_filters_reset a:hover {
 text-decoration: underline;
}
.simulator_monet_variation_btn span {
 font-size: 30px;
 vertical-align: sub;
}
.simulator_filters_reset button {
 margin: 0;
 padding: 0;
 border: 0px;
 line-height: 0;
 cursor: pointer;
}
.simulator_comments {
 text-align: left;
 font-size: 12px;
 margin-bottom: 10px;
}

.filters {
 display: flex;
 justify-content: start;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 20px;
}
.filter {
 display: flex;
 flex-direction: column;
 align-items: center;
}
.simulator_accordion-wrapper {
 border: 0px solid #ccc;
 border-radius: 4px;
 font-family: sans-serif;
}

.simulator_accordion-label {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: #f0f0f0;
 padding: 10px 16px;
 cursor: pointer;
 font-weight: bold;
 font-size: 14px;
}


.simulator_accordion-content {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.3s ease;
 padding: 0;
}
.filter_ttl_wrapper {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 border: 1px solid #EAE9E9;
 background-color: #fff;
}
.filter_ttl {
 background-color: #EAE9E9;
 display: block;
 width: 110px;
 font-size: 16px;
 padding: 10px;
}
.filter_choice {
 display: block;
 text-align: left;
 width: 380px;
 text-indent: 20px;
}
.filter_choice#selectedBodyLegColor {
 width: 354px;
}
.filter_choice#selectedColorName {
 width: 355px;
}
.simulator_toggle-icon {
 font-size: 18px;
 display: block;
 width: 26px;
 margin:0 16px;
 background-color: #EAE9E9;
 border-radius: 26px;
 height: 26px;
 line-height: 24px;
 cursor: pointer;
}
.simulator_accordion-content.open {
 max-height: 1000px;
}
.radio-group {
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 gap: 11px;
 justify-content: flex-start;
}
.radio-group label {
 cursor: pointer;
 width: 82px;
 padding: 0px;
 font-size: 8px;
 box-sizing: border-box;
 position: relative;
 margin: 20px 0;
}
.radio-group#bodyLegColor {
 gap: 14px;
}
.radio-group#bodyLegColor label {
 width: 50px;
}
.radio-group label img {
 width: 100%;
 background-color: #7d7d7d;
}

.radio-group span {
 width: 45px;
 margin:0;
 box-sizing: border-box;
 border: 1px solid #eee;
 display: block;
 height: 45px;
}

.bodycolor1 {
 background-color: #E7D0A9;
}

.bodycolor2 {
 background-color: #7d7d7d;
}

.bodycolor3 {
 background-color: #000000;
}

.bodycolor4 {
 background-color: #ffffff;
}

.color-options {
 display: flex;
 flex-wrap: wrap;
 gap: 3px;
 justify-content: flex-start;
 margin-top: 10px;
}
.color-option {
 display: flex;
 flex-direction: column;
 align-items: center;
 cursor: pointer;
 border: 2px solid transparent;
 padding: 5px;
 width: 66px;
 box-sizing: border-box;
}
.color-option.selected {
 border-color: #444444;
}
.color-chip {
 width: 45px;
 height: 45px;
 background-color: #f0f0f0;
 border: 1px solid #ccc;
 overflow: hidden;
}
.color-chip img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.color-label {
 margin-top: 5px;
 font-size: 10px;
}
.image-container {
 width: 100%;
 max-width: 600px;
 height: 600px;
 position: relative;
 margin-bottom: 30px;
}
.product-image {
 width: 100%;
 height: 100%;
 object-fit: contain;
 position: absolute;
 top: 0;
 left: 0;
}
.disabled {
 color: gray;
}
.simulatordisabled {
 display: none;
}

label:has(input[disabled]) > p.simulatordisabled {
 width: 117%;
 display: block;
 position: absolute;
 background-color: #FFF;
 height: 100%;
 margin: 0 auto;
 opacity: 0.8;
 top: 0;
}

.product-details {
 margin-top: 10px;
 display: flex;
 justify-content: flex-start;
 text-align: left;
}
.product-detail-wrapp {
 display: flex;
 flex-direction: column;
 gap: 16px;
 font-size: 16px;
 width: 330px;
}
.product-detail-wrapp span {
 font-weight: bold;
 width: 120px;
 display: inline-block;
}
.product-details .details-button {
 width: 200px;
 background-color: #444444;
 color: #FFFFFF;
 font-size: 16px;
 font-weight: bold;
 text-decoration: none;
 display: block;
 text-align: center;
 padding: 10px;
}
#selectedColorChip {
 vertical-align: sub;
 display: inline-flex;
}
#selectedBodyLegColorChip {
 width: 28px;
 display: inline-flex;
 height: 28px;
 vertical-align: bottom;
 border: 1px solid #eee;
}
#selectedColorChip img {
 width: 26px;
}
.radio-group input {
 display: none !important;
}
.radio-group label:has(input:checked) img {
 border: 3px solid #444444;
}
.radio-group label:has(input:checked) span.bodycolor-wrapp {
 border: 3px solid #444444;
}
span.bodycolor-wrapp {
 display: block;
 padding: 3px;
 height: 57px;
 width: 57px;
 border: 3px solid #FAF7F7;
}

/* ツールチップのスタイル */
.color-option {
 position: relative;
}

.color-option .tooltip {
 position: absolute;
 bottom: 100%;
 left: 50%;
 transform: translateX(-50%);
 background-color: #333;
 color: #fff;
 padding: 5px 10px;
 border-radius: 5px;
 font-size: 12px;
 white-space: nowrap;
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.2s ease-in-out;
 pointer-events: none;
 z-index: 10000;
}

.color-option:hover .tooltip {
 visibility: visible;
 opacity: 1;
 z-index: 10000;
}
.simulator_accordion-content:has(.color-option:hover .tooltip) {
 overflow: inherit;
}



/* ハートマークスタイル */
.monet_favorite-list {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row-reverse;
 justify-content: flex-end;
 gap: 30px;
}

.favorite-item {
 position: relative;
 width: 212px;
}

.favorite-item img {
 width: 100%;
 object-fit: cover;
 cursor: pointer;
}

.favorite-icon {
 position: absolute;
 cursor: pointer;
 bottom: -76px;
 right: 0px;
 font-size: 24px;
 cursor: pointer;
 background-color: #CECECC;
 width: 50px;
 height: 50px;
 line-height: 50px;
 border-radius: 50px;
 color: #FFF;
}
.favorite-icon:hover {
 opacity: 0.7;
}

.simulator-list-active {
 background-color: #DE864E;
 width: 50px;
 height: 50px;
 line-height: 50px;
 border-radius: 50px;
 display: block;
 color: #FFF;
 font-size: 24px;
 margin-right: 20px;
 text-align: center;
}
  
.monet_recommended-list {
 display: flex;
 gap: 15px;
 flex-wrap: wrap;
}

.recommended-item img {
 width: 150px;
 height: 150px;
 object-fit: cover;
 cursor: pointer;
}

.simulator h2 {
 text-align: left;
 font-size: 18px;
}

.monet_favorite-list .favorite-item .favorite-icon {
 position: absolute;
 cursor: pointer;
 top: 10px;
 right: 10px;
 font-size: 15px;
 cursor: pointer;
 background-color: #CECECC;
 width: 29px;
 height: 29px;
 line-height: 29px;
 border-radius: 29px;
 color: #FFF;
}
.simulator-list-active-lists {
 background-color: #DE864E;
 width: 29px;
 height: 29px;
 line-height: 29px;
 border-radius: 29px;
 display: inline-block;
 color: #FFF;
 font-size: 15px;
 margin-right: 10px;
 text-align: center;
}