/* Basic */
:root{
  --MS_blue: #006EB2;
  --MS_black: #221815;
  --MS_blue_light: #1A92DC;
  --MS_blue_dark: #23577D;
  --blue000: #F6FBFF;
  --blue100: #E6F0F7;
  --blue200: #C4DDED;
  --blue300: #84BEE2;
  --blue400: #1A92DC;
  --blue500: #006EB2;
  --blue800: #2B5A7C;
  --gray000: #FCFCFC;
  --gray020: #F5F5F5;
  --gray050: #EDEDED;
  --gray100: #DEDEDE;
  --gray200: #CCCCCC;
  --gray300: #ABABAB;
  --gray400: #999999;
  --gray500: #787878;
  --gray600: #666666;
  --gray700: #454545;
  --gray800: #333333;
  --gray900: #121212;
  --gold900: #4E341B;
  --gold800: #856220;
  --gold550: #B69200;
  --gold500: #BF923D;
  --gold400: #D7B94A;
  --gold300: #F4E683;
  --gold200: #FFFBE6;
  --gold100: #FFFCF2;
  --gold000: #FFFDF7;
  --wood000: #FAF8F6;
  --wood800: #462809;
  --wood600: #6B492E;
  --wood300: #DEB794;
  --wood200: #EFE9E3;
  --wood100: #F8F2ED;
  --wood000: #FAF8F6;
  --white: #ffffff;
}
/* ---------------------
   Frame Top page 
---------------------- */
.frame-header{
  text-align: center;
}
/* Frame Top Slider */
.frame-slider {
  text-align: center;
  padding-bottom: 48px;
  margin-bottom: 0 !important;
}
.frame-slide img {
  width: 100%;
	max-width: 1080px;
  height: auto;
}
.frame-slider .slick-slide {
  margin-left: 5px;
  margin-right: 5px;
}
.frame-slider .slick-dots {
  bottom: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
.frame-slider .slick-dots li {
  display: inline-block;
  margin: 0 2px;
}
.frame-slider .slick-dots li button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  font-size: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease;
}
.frame-slider .slick-dots li button:before {
  content: none;
}
.frame-slider .slick-dots li.slick-active button {
  background: var(--MS_blue, #0078c3);
}
.frame-slider .slick-prev, .frame-slider .slick-next{
	top: 36%;
}

@media (min-width: 834px) {
  .frame-slider {
    margin-bottom: 30px !important;
    border-bottom: 1px solid #DEDEDE;
  }
	.frame-slider .slick-dots {
  bottom: 12px;
}
	.frame-slider .slick-dots li button {
	  width: 10px;
	  height: 10px;
	}
	.frame-slider .slick-prev, .frame-slider .slick-next{
	top: 50%;
	}
}
@media (min-width: 1080px) {
    .frame-slider .slick-slide {
    margin-right: 30px;
    margin-left: 30px;
    }
}
/* Sidebar */
.filter-toggle {
    margin: 20px;
    padding: 8px 12px;
    text-align: center;
    border: 1px solid #0078c3;
    border-radius: 4px;
    display: flex;
    justify-content: center;
}
.filter-toggle button {
  background: none;
  border: none;
  color: #0078c3;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}
.filter-toggle .icon {
  margin-top: 4px;
}
.filter-list li:hover {
  background-color: #F6FBFF;
}
.filter-list li:has(.is-disabled):hover {
  background-color: transparent;
}
.filter-list li:has(.is-active){
  background-color: var(--blue000);
}
.filter-list label{
  position: relative;
  padding: 6px 0 6px 30px;
  cursor: pointer;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 18px;
  color: var(--gray800);
}
.filter-list label > input[type="checkbox"],
.filter-list label > input[type="radio"]{
  position: absolute;
  left: 0; top: 50%;
  width: 22px; height: 22px;
  transform: translateY(-50%);
  opacity: 0;
  margin: 0;
}
.filter-list label::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gray100);
  box-shadow: inset 0 0 0 6px var(--gray100);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.filter-list label::after{
  content: "";
  position: absolute;
  left: 5px; top: 50%;
  width: 8px; height: 4px;
  margin-top: -2px;
  transform: translateY(-40%) rotate(-45deg);
  border: 2px solid var(--white);
  border-top: none; border-right: none;
  opacity: .95;
  transition: border-color .12s;
}
.filter-list label:has(input[type="checkbox"]:checked)::before,
.filter-list label:has(input[type="radio"]:checked)::before{
  background: #0078C3;
  box-shadow: inset 0 0 0 5px #0078C3;
}
.filter-list label:has(input[disabled]){
    cursor: not-allowed; opacity: .5;
}
/* Filter links (taxonomy-based navigation) */
.filter-list a.filter-link {
  position: relative;
  padding: 6px 0 6px 30px;
  cursor: pointer;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 18px;
  color: var(--gray800);
  text-decoration: none;
  transition: color 0.15s;
}
.filter-list a.filter-link::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gray100);
  box-shadow: inset 0 0 0 6px var(--gray100);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.filter-list a.filter-link::after {
  content: "";
  position: absolute;
  left: 5px; top: 50%;
  width: 8px; height: 4px;
  margin-top: -2px;
  transform: translateY(-40%) rotate(-45deg);
  border: 2px solid var(--white);
  border-top: none; border-right: none;
  opacity: .95;
  transition: border-color .12s;
}
.filter-list a.filter-link:hover {
  color: var(--MS_blue);
}
.filter-list a.filter-link:hover::before {
  background: var(--blue200);
  box-shadow: inset 0 0 0 5px var(--blue200);
}
.filter-list a.filter-link.is-active::before {
  background: #0078C3;
  box-shadow: inset 0 0 0 5px #0078C3;
}

/* Disabled filter items - for unavailable filter combinations */
.filter-list .filter-link.is-disabled {
  position: relative;
  padding: 6px 0 6px 30px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  color: var(--gray500);
}
.filter-list .filter-link.is-disabled::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--gray300);
  background: var(--gray100);
  box-shadow: inset 0 0 0 6px var(--gray100);
}
.filter-list .filter-link.is-disabled::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}
.filter-list .filter-link.is-disabled:hover,
.filter-list a.filter-link.is-disabled:hover {
  color: var(--gray500) !important;
  background: transparent !important;
}
.filter-list .filter-link.is-disabled:hover::before,
.filter-list a.filter-link.is-disabled:hover::before {
  background: var(--gray100) !important;
  box-shadow: inset 0 0 0 6px var(--gray100) !important;
}

.filter-list a.filter-link.filter-clear {
  padding: 6px 0;
  padding-left: 0;
  font-size: 14px;
  color: var(--MS_blue);
  text-decoration: underline;
}
.filter-list a.filter-link.filter-clear::before,
.filter-list a.filter-link.filter-clear::after {
  display: none;
}
/* カラーで絞り込む */
.filter-list.filter-color label{
    padding: 6px 0 6px 30px;
}
.filter-list.filter-color .color-swatch{
    margin-left: 6px;
    margin-right: 6px;
    border-radius: 0;
}
/* main */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.product-card {
  position: relative;
  background: var(--white);
  text-align: center;
  font-family: sans-serif;
}
.product_new {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--gold550);
  color: var(--white);
  font-size: 12px;
  padding: 4px 8px;
  font-weight: bold;
  z-index: 999;
}
.product_image a:hover{
	filter:none;
}
.product_image a img {
  border: 1px solid var(--gray100);
	transition: 0.3s;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
}

.product_image a:hover img {
  border: 1px solid var(--MS_blue_light);
}

.product_info {
    font-size: 11px;
    color: var(--gray700);
    margin-top: 4px;
	margin-bottom: 0px;
    text-align: left;
}
.product_info .brand {
    font-weight: bold;
}
.product_info .name {
  font-weight: bold;
  font-size: 13px;
  line-height: 1.3;
}
.product_info .code {
    color: var(--gray300);
}
.lineup_memo{
    font-size: 13px;
	line-height:140%;
	font-weight:300;
    color: var(--gray500);
    margin-top: 48px;
    text-align: left;
}

@media (min-width: 834px) {
    .filter-toggle,
    #sidebar .listmenu-close{
        display: none;
    }
    #sidebar.open .listmenu{
        position: relative;
    }
    #sidebar .filter-section{
        display: block;
    }
    .product-grid {
    grid-template-columns: repeat(3, 1fr);
	gap: 24px;
    }
    .product_info {
        font-size: 14px;
		line-height: 150%;
		    margin-top: 12px;
	margin-bottom: 12px;
    }
    .product_info .name {
    font-size: 16px;
    }
}
/* --- Filter Section --- */
.filter-section {
    font-family: 'Arial', sans-serif;
    color: #333;
    font-size: 16px;
    width: 100%;
    background: #fff;
    padding: 15px;
    margin: 15px;
    width: calc(100% - 30px);
    display: block;
}
#sidebar .filter-header {
    text-align: center;
}
.result-count {
    font-size: 16px;
    margin-bottom: 10px;
    text-align: center; 
}
.result-count .title{
    display: none;
}
.result-count .numb{
    font-size: 26px;
    font-family: "DIN 2014", Arial, Helvetica, sans-serif;
}
.filter-group {
  margin: 20px 0;
}
.filter-list li {
  padding: 0;
  margin: 0;
  display: block;
}
.filter-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
  border-top: 1px solid #ccc;
  padding-top: 20px;
}
/* Accordion styles */
.filter-accordion .filter-title {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.filter-accordion .accordion-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.filter-accordion .accordion-icon::before,
.filter-accordion .accordion-icon::after {
  content: "";
  position: absolute;
  background: #333;
  transition: transform 0.3s ease;
}
.filter-accordion .accordion-icon::before {
  width: 16px;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.filter-accordion .accordion-icon::after {
  width: 2px;
  height: 16px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.filter-accordion.is-open .accordion-icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}
.filter-accordion .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.filter-accordion.is-open .accordion-content {
  max-height: none;
}
.filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid var(--gray200);
  border-radius: 50%;
}
/* Color swatch in product variation section */
.pd-var .color-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid #F0F0F0;
  box-shadow: 0 0 0 4px var(--white) inset;
	flex-grow: 0;
}

/* Product card color swatches */
.product_colors {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: -30px;
  padding: 5px 0;
  position: relative;
  z-index: 2;
}

.product_colors .color-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--gray200);
}
.product_colors .color-swatch:hover {
  transform: scale(1.2);
}
.product_colors .color-swatch.selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--MS_blue);
}

@media (min-width: 834px) {
	.product_colors {
  		margin-top: -40px;
	}	
	.product_colors .color-swatch {
	  width: 16px;
	  height: 16px;
	}
}

/* Product card image transition */
.product-card .product-thumb {
  transition:  0.3s ease;
}
.product-card .product_image {
  position: relative;
}
.color-swatch.black { background-color: #000; }
.color-swatch.brown { background-color: #6F4A22; }
.color-swatch.gold { background-color: #B69200;background-clip: unset;background-image: none; }
.color-swatch.silver { background-color: #CCCCCC; }
.color-swatch.red { background-color: #D26B6B; }
.color-swatch.blue { background-color: #5380AD; }
.color-swatch.green { background-color: #587B48; }
.color-swatch.gray { background-color: #9C9C9C; }
.color-swatch.white { background-color: #fff; border: 1px solid #ccc; }
.color-swatch.pink { background-color: #E969A5; }
.color-swatch.purple { background-color: #BA69E9; }
.color-swatch.navy { background-color: #3D4AA8; }
.color-swatch.clear { background-color: #fff; border: 1px solid #ccc; }

/* pagenation */
.pagenation {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  gap: 6px;
}
.pagenation a {
  display: inline-block;
  padding: 6px 12px;
  background: #eee;
  color: #0073C4;
  text-decoration: none;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
}
.pagenation a.active {
  background: #0073C4;
  color: var(--white);
}
@media (min-width: 834px) {
    #sidebar .filter-header {
    padding: 20px 0;
    text-align: left;
    }
    .result-count .title{
        display: inline;
    }
    #sidebar .filter-section{
        width: 100%;
        background: var(--white);
        margin: 0;
        padding: 0;
        border-top: 1px solid var(--gray200);
    }
    .pagenation{
        margin-top: 60px;
    }
}
/*  Guide Section 
#child .guide-section .title_serif {
    text-align: left;
} */
.card-grid{
  display:grid;
  gap: 18px;
  grid-template-columns:1fr;
  margin: 20px auto;
}
.card-grid.long{
    grid-template-columns:1fr;
}
.card{
  background:var(--white);
  padding:15px;
}
.card-ttl{
  font-size:19px;
  margin:2px 0 10px;
  font-weight:700;
}
.thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.guide-section .guide-box p.note{
  font-size:15px;
  color:var(--gray600);
  margin:10px 2px 0;
}
.guide-section .guide-box p.desc{
  font-size: 14px;
  color:var(--gray600);
  margin: 10px 5px 0;
  line-height:1.8;
}
.guide-section .guide-bottom-text{
  margin-top: 0;
  padding-top: 0;
  font-size: 15px;
  line-height: 1.8;
}
@media (min-width: 700px){/*
    .card-grid{grid-template-columns:repeat(2,1fr);
    }*/
    .guide-section .guide-bottom-text{
      padding-top: 20px;
    }
}/*
@media (min-width: 1024px){
  .card-grid{
    grid-template-columns:repeat(3,1fr);
    }
}*/
@media (min-width: 900px){
    .card-grid.long{
        grid-template-columns:repeat(3,1fr);
    }
}
/* ---------------------
   Brand page 
---------------------- */
.brand-section{
    padding: 20px 15px 60px;
}
.brand-section .container .title_line {
    display: flex;
    margin: 0;
}
.brand-section .ejh2 {
  text-align: center;
  border-top: 1px solid #DEDEDE;
  padding: 20px 0;
}
/* Tab */
  .brand-tabs {
    margin: 15px 15px 20px;
}
  .brand-tabs ul {
    display: flex;
    gap: 0;
    padding: 0;
    justify-content: stretch;
    border: 1px solid var(--MS_blue);
    border-radius: 14px;
  }
  .brand-tabs li {
    flex: 1 1 0;
    min-width: 0;
}
  .brand-tabs li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 33px;
    padding: 0 10px;
    color: var(--gray600);
    text-decoration: none;
    border-right: 1px solid var(--MS_blue);
    border-radius: 0;
    position: relative;
    font-size: 14px;
  }
  .brand-tabs li:last-child a {
    border-right: none;
}
  .brand-tabs li.active a {
    background: #eef6fd;
    color: var(--MS_blue);
    font-weight: bold;
  }
  .brand-tabs li:first-child.active a {
    border-radius: 14px 0 0 14px;
}
  .brand-tabs li:last-child.active a {
    border-radius: 0 14px 14px 0;
}
@media (min-width: 834px){
    .brand-tabs{
        margin: 20px 0;
    }
    .brand-tabs ul{
    display:flex; gap:28px; 
    padding:0; margin:0;
    list-style:none; justify-content:center;
    border: none;
    border-bottom: 1px solid var(--gray100);
    }
    .brand-tabs li{
        flex: none;
    }
    .brand-tabs li a{
    padding:12px 4px; color:#666; text-decoration:none;
    font-weight:600; letter-spacing:.02em; white-space:nowrap;
    position:relative;
    border-right: none;
    }
    .brand-tabs li.active a{
        color:var(--MS_blue);
        background: none;
}
    .brand-tabs li.active a::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
    background:var(--MS_blue); border-radius:3px;
    }
}
/* Grid */
.brand-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px 24px;
}
@media (min-width: 834px){
  .brand-grid{grid-template-columns:repeat(2,1fr); gap:60px 28px;}
}
@media (min-width: 1100px){
  .brand-grid{grid-template-columns:repeat(3,1fr);}
}
/* Cards */
.brand-card{
  background:var(--white);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.brand-card .thumb{
    background:#f5f5f5;
    overflow:hidden;
}
.brand-card .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.brand-head{ 
    padding:10px 20px;
    background-color: var(--gray020);
}
.brand-ttl{
  font-size:20px; font-weight:800; margin:0; line-height:1.2;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items: center;
  justify-content: center;
}
.brand-ttl small{
	display:block; 
	width: 100%;
  text-align: center;
  font-size:12px;
  color:var(--gray700);
  font-weight:400;
  letter-spacing:.04em;
}
.brand-copy{
    padding: 20px 0;
    font-weight:700;
}
.brand-desc{
  color:var(--gray700); line-height:1.9;
  font-size:14px; flex:1;
}
/* Buttons */
.brand-ctas{
  display:flex;
  gap:12px;
  padding-top:20px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 5px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  transition:.15s ease;
  white-space:nowrap;
}
.btn.ghost{
  border:1px solid var(--MS_blue); 
  color:var(--MS_blue); 
  background:var(--white);
  width: calc(50% - 12px); 
  font-weight: 400;
  position: relative;
}
.btn.ghost::after{
  content:"";
  margin-left:8px;
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  position: absolute;
    right: 15px;
}
.btn.ghost:hover{
    background: var(--blue100);
}

/* ---------------------
   Product Detail page 
---------------------- */
button{
    background:none;
    border:0;
    padding:0;
    cursor:pointer;
    font:inherit;
    color:inherit;
}
.pd{
    max-width:520px;
    margin:0 auto;
    padding: 0 12px 30px;
    color:var(--gray800);
}
.pd-h{
  font-size:20px;
  font-weight:800;
  text-align:center;
  margin:6px 0 12px;
  letter-spacing:.15em;
  border-bottom:1px solid var(--gray100);
  padding-bottom:8px;
}
.title_page .container{
  text-align: left;
}
.pd-title{
    font-size:18px;
    font-weight:800;
    margin: 0 16px 10px;
    color:var(--MS_black);
    text-align: left;
}
.pd-box {
    display: flex;
    flex-direction: column;
}
/* Pd Left */
.pd-img{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pd-media{
  position:relative;/*
  border:1px solid var(--gray100);*/
  background:var(--white);
  padding:0;
}
.pd-media img{
  width:100%;
  object-fit:contain;
}
.pd-badge{
  position:absolute;
  left:0;
  top:0; 
  background:var(--gold550);
  color:var(--white);
  font-size:12px;
  font-weight:800;
  padding:4px 8px;
}
.pd-thumbs{
  display:flex;
  gap:10px;
  overflow:auto;
  margin-top:10px;
  padding-bottom:2px;/*
    justify-content: center;*/
}
.pd-thumb{
  flex:0 0 96px;
}
.pd-thumb img{
    width:100%;
    height:auto;
    object-fit:cover;
}
.pd-thumb.is-active{
    border: 2px solid var(--MS_blue);
}
.pd-pager{
    text-align:center;
    color:var(--gray700);
    margin:0 0 14px;
    font-size:12px;
    order: 3;
}
.pd-desc{
    color:var(--gray700);
    line-height:1.9;
    font-size:14px;
    margin: 20px auto;
}
/* Pd Right */
.pd-right {
    min-width: 320px;
}
.pd-head{
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
}
.pd-box .brand-head{ 
    display: none;
}
/* カラーバリエーション */
.pd-var{
    margin-top: 20px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray100);
}
.pd-var :is(h3:where(:not([data-ms-h])), :where([data-ms-h="3"])), .pd-var .pd-var-h{ /* 2026-09-17 h3 → h2 */
    font-weight:800;
    font-size:16px;
    margin:0 0 10px;
    color:var(--gray800);
}
.pd-var ul{
  display:flex;  
  flex-wrap: wrap;
  gap:16px;
  list-style:none;
  padding:12px 0 0;
  margin:0 0 6px;
}
.pd-var ul .is-active{
    border: 1px solid #9B9B9B;
}
.pd-var ul span{
    display:flex;
    font-size:12px;
    margin-top:0px;
    color:var(--gray800);
	max-width: 96px;
    line-height: 1.3;
    padding: 4px 0;
    text-align: center;
	flex-grow: 1;
	 justify-content: center;
    align-items: center;
}
.pd-var ul li{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pd-var .var-card{
    width:96px;
    height:96px;
    border:1px solid var(--gray100);
    background:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
}
.pd-var .var-card img{
    width:100%;
    height: auto;
    object-fit:contain;
}
.pd-var .var-card.is-active{
    border: 2px solid var(--MS_blue);
}
.pd-var .dot{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid #F0F0F0;
  background:var(--c,#000);
  box-shadow:0 0 0 4px var(--white) inset;
}

/* 在庫確認ボタン */
.pd-box .btn-location {
    background: #0073C4;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    gap: 20px;
  }
/* 商品仕様 */
.pd-specs{
    margin-top:16px;
    font-size: 14px;
    padding: 20px 0 10px;
    border-top: 1px solid var(--gray100);
    border-bottom: 1px solid var(--gray100);
}
.spec{
    display:grid;
    grid-template-columns:110px 1fr;
    row-gap:10px;
    column-gap:8px;
    color:var(--gray600);
}
.single-frame_item .spec dt,
.single-sunglass_item .spec dt {
    position: relative;
}
.single-frame_item .spec dt::after,
.single-sunglass_item .spec dt::after {
    content: "：";
    position: absolute;
    right: 0;
}
.spec-help{
    margin-top:12px;
    font-size: 14px;
    text-align:right;
}
.spec-help a{
    color: #2B5A7C;
    text-decoration:none;
    position: relative;
}
.spec-help a::before{
    position: absolute;
    content: '';
    left: -22px;
    bottom: -1px;
    bottom: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    background: url(../images/icon_question.svg) no-repeat center;
    background-size: contain;
}
@media (min-width: 1024px){
    .pd{
        max-width:1240px;
        padding: 12px 0 30px;
    }
    .pd-h{
        display: none;
    }
    .pd-title{
        margin: 0 0 15px;
        font-weight: normal;
        font-size: 26px;
    }
    .pd-box {
        flex-direction: row;
    }
    .pd-left{
        flex: 1;
        min-width: 0;
        max-width: calc(100% - 420px); /* 320px for pd-right + 100px margin */
        margin-right: 100px;
    }
    .pd-img{
        flex-direction: row-reverse;
        gap: 20px;
        align-items: stretch;
    }
    .pd-thumbs{
        display:flex;
        flex-direction:column;
        order:1;
        overflow:visible;
        margin: 0;
        justify-content: space-between;
    }
    .pd-thumb{
        width: 150px;
        height: auto;
    }
    .pd-pager{
        text-align: right;
    }
    .pd-right {
      width: 320px;
    }
    .pd-head{
        flex-direction: column;
    }
    .pd-box .brand-head{ 
        display: block;
    }
    .pd-var{
        border-top: 1px solid var(--gray100);
        border-bottom: none;
        padding: 20px 0 10px;
        margin-top: 0;
    }
    .pd-specs{
        border-bottom: none;
    }
}

/* Popup */
.popup-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.3);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  align-items: flex-start;
}
.popup {
  background: #fff;
  border-radius: 10px;
  max-width: 680px;
  width: 90%;
  padding: 20px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  margin: 10px;/*
  max-height: 95vh;*/
  text-align: center;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.popup :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) {
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 18px;
  text-align: left;
}
.popup section {
  margin-bottom: 1.5rem;
  text-align: left;
}
.popup .section-title {
  border-bottom: 1px solid var(--gray300);
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 18px;
}
.popup .frame-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.popup .frame-item{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  font-weight: bold;
  font-size: 15px;
  white-space: nowrap;
}
.popup .frame-item img {
  width: 77px;
  height: auto;
}
.popup .rim-list {
  display: flex;
  gap: 10px;
  flex-direction: column;
}
.popup .rim-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-direction: column;
}
.popup .rim-item dt{
  font-size: 15px;
  font-weight: bold;
}
.popup .rim-item dd{
  font-size: 14px;
  margin-left: 2rem;
}
.popup .size-diagram {
  max-width: 100%;
  margin: 12px 0;
}
.popup .size-list{
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  flex-direction: column;
}
.popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  color: var(--MS_blue);
  font-size: 20px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  line-height: 32px;
  text-align: center;
  z-index: 1001;
  font-family: math;
}
.popup .btn-view-all-blue{
  margin: 10px auto 30px;
  width: 188px;
}
@media screen and (min-width: 834px), print {
  .popup-overlay{
    position: fixed;
    height: 100%;
    align-items: center;
  }
  .popup{
    max-width: 800px;
    margin: 10px;
  }
  .popup .frame-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 20px;
  }
  .frame-list,
  .rim-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .frame-item,
  .rim-item {
    width: 45%;
  }
  .popup .size-list{
    flex-direction: row;
  }
  .popup .size-diagram {
    max-width: 50%;
  }
}
/* pd-brand */
.pd-brand {
  padding: 1rem;
  font-family: sans-serif;
}
.pd-brand .container{
    display: flex;
    flex-direction: column;
}
.brand-visual img {
  width: 100%;
  height: auto;
}
.brand-text :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) {
  font-size: 22px;
  font-weight: bold;
  margin-top: 1rem;
  color: var(--gray800);
  display: flex;
    flex-direction: column;
  text-align: center;
}
.brand-text :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) span {
  font-size: 14px;
  margin-bottom: 1rem;
}
@media (min-width: 834px) {
  .pd-brand {
    text-align: left;
  }
  .pd-brand .container{
    flex-direction: row-reverse;
    border-top: 1px solid var(--gray100);
    padding: 40px 0;
  }
  .brand-visual {
    width: 50%;
    padding-left: 2rem;
  }
  .brand-visual img {
    max-width: 100%;
  }
  .brand-text {
    width: 50%;
}
  .brand-text :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) {
    text-align: left;
    flex-direction: row;
    gap: 10px;
  }
  .brand-text :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) span{
    font-size: 22px;
  }
  .pd-brand .btn.ghost{
    max-width: 188px;
  }
}
/* recommend */
.pd-recommend{
  margin-bottom: 30px;
}
.prod_box {
    overflow-x: auto;
}
.pd-recommend :is(h3:where(:not([data-ms-h])), :where([data-ms-h="3"])), .pd-recommend :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])).pd-rec-h { /* 2026-09-17 h3 → h2 */
    font-size: 20px;
    margin: 2rem;
    text-align: center;
        font-weight: normal;
}
.single-hearingaids_item .pd-recommend :is(h3:where(:not([data-ms-h])), :where([data-ms-h="3"])), .single-hearingaids_item .pd-recommend :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])).pd-rec-h{
  font-weight: bold;
}
.pd-recommend .view-more{
    text-align: center;
    margin: 30px 0 0;
    padding-bottom: 50px;
}
.pd-recommend .view-more.first{
  margin: 30px 0 60px;
}
.pd-recommend .view-more .btn-view-all-blue{
    width: 188px;
}
.pd-recommend .view-more.first{
    border-bottom: 1px solid var(--gray100);
}
#child .prod_box_list{
    display: flex;
    min-width: fit-content;
    border-bottom: none;
    gap: 10px;
}
#child .product_image {
    max-width: 100%;
	aspect-ratio: 1 / 1 ;
}/*
#child .product-card {
    max-width: 100%;
    flex: 0 0 calc(45% - 5px);
    width: calc(45% - 5px);
}*/
@media (min-width: 834px) {
  .pd-recommend{
    margin-bottom: 60px;
  }
    .pd-recommend :is(h3:where(:not([data-ms-h])), :where([data-ms-h="3"])), .pd-recommend :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])).pd-rec-h {
        font-weight: bold;
  }
  .pd-recommend .view-more{
    margin: 30px 0 60px;
  }
  #child .prod_box_list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    min-width: auto;
  }
  #child .product_image {
    max-width: 100%;
  }
  #child .product-card {
    min-width: auto;
    max-width: 100%;
  }
}
/* ===========================
   Product Gallery - Slick Slider
=========================== */
/* Gallery Container */
.pd-gallery {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

/* Main Image Slider */
.pd-main-wrap {
  position: relative;
  order: 1;
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
  container-name: pd-main;
}
.pd-main-wrap .product_new{
  left: 10px;
  padding: 3px 12px
}
.pd-main-slider {
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 637px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1 / 1;
  max-height: 637px;
  border: 1px solid var(--gray100);
  line-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: max-width 0.25s ease, max-height 0.25s ease;
}
@supports (width: 100cqw) {
  .pd-main-slider {
    max-width: min(637px, 100cqw);
    max-height: min(637px, 100cqw);
  }
}
/* Hide extra slides before Slick initializes */
.pd-main-slider:not(.slick-initialized) .pd-main-slide:not(:first-child) {
  display: none;
}
.pd-main-slider .slick-list {
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 0;
  transition: height 0.25s ease;
}
/* Square viewport: size follows container via CSS; Slick only handles slide motion */
.pd-main-slide {
  position: relative;
  width: 100%;
  max-width: 637px;
  max-height: 637px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  background: var(--white);
  margin: 0;
  transition: max-width 0.25s ease, max-height 0.25s ease;
}
@supports (width: 100cqw) {
  .pd-main-slide {
    max-width: min(637px, 100cqw);
    max-height: min(637px, 100cqw);
  }
}
.pd-main-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Main slider arrows - hidden on mobile */
.pd-main-arrow {
  display: none !important;
}

/* Thumbnail Slider - Mobile: horizontal 4 columns */
.pd-thumbs-wrap {
  order: 2;
  margin-top: 15px;
}
.pd-thumbs-arrow {
  display: none !important;
}
.pd-thumbs-slider {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 8px;
}
.pd-thumbs-slider::-webkit-scrollbar {
  display: none;
}
.pd-thumb-slide {
  flex: 0 0 calc(25% - 6px);
  min-width: calc(25% - 6px);
  cursor: pointer;
  box-sizing: border-box;
}
.pd-thumb-slide img {
  width: 100%;
  height: auto;  
	aspect-ratio: 1 / 1;
  display: block;
  border: 2px solid transparent;
  box-sizing: border-box;
  border: 1px solid var(--gray200);
	object-fit: contain;
}
.pd-thumb-slide.slick-current img,
.pd-thumb-slide:hover img {
  border-color: var(--MS_blue, #0066cc);
}

/* Pager */
.pd-pager {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: var(--gray600);
}

/* ===========================
   PC Styles (min-width: 1024px)
=========================== */
@media (min-width: 1024px) {
  .pd-gallery {
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    max-width: 100%;
    position: relative;
    padding-bottom: 30px;
  }

  /* Thumbnails - Left side */
  .pd-thumbs-wrap {
    order: 1;
    width: 150px;
    flex-shrink: 0;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -7px;
  }
  .pd-thumbs-wrap.has-arrows {
    margin-top: -13px;
  }
  .pd-thumbs-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
    z-index: 5;
    opacity: 0;
  }
  .pd-thumbs-wrap:hover .pd-thumbs-arrow {
    opacity: 1;
  }
  .pd-thumbs-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
  }
  .pd-thumbs-arrow span {
    width: 8px;
    height: 8px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    margin: 0 0 0 -2px;
  }
  .pd-thumbs-prev {
    margin-bottom: 18px;
  }
  .pd-thumbs-prev span {
    transform: rotate(135deg) translate(-1px, -1px);
  }
  .pd-thumbs-next {
    margin-top: -20px;
  }
  .pd-thumbs-next span {
    transform: rotate(-45deg) translate(1px, 1px);
  }
  .pd-thumbs-slider {
    width: 150px;
    margin-top: 0;
    display: block;
    flex-wrap: unset;
    overflow-x: visible;
    gap: 0;
  }
  .has-arrows .pd-thumbs-slider {
    margin-top: -39px;
  }
  .pd-thumbs-arrow {
    display: flex !important;
  }
  .pd-thumbs-slider .slick-list {
    height: auto !important;
    max-height: 637px;
    overflow: hidden;
  }
  .pd-thumbs-slider .slick-track {
    display: flex !important;
    flex-direction: column;
  }
  .pd-thumbs-slider .slick-slide {
    line-height: 0;
  }
  .pd-thumb-slide {
    padding: 5px 0;
    flex: unset;
    min-width: unset;
    width: auto;
    margin: 0;
    box-sizing: border-box;
    display: block;
  }
  .pd-thumb-slide img {
    width: 150px;
    height: auto;
    display: block;
  }
  .pd-thumb-slide.slick-current img {
    border-color: var(--MS_blue, #0066cc);
    border-width: 2px;
  }
  /* Main Image - Right side */
  .pd-main-wrap {
    order: 2;
    flex: 1;
    position: relative;
    min-width: 0; /* Prevent flex item from overflowing */
    overflow: hidden;
  }
  .pd-main-wrap {
    overflow: hidden;
  }
  .pd-main-slider,
  .pd-main-slider .slick-list {
    overflow: hidden;
  }
  .pd-main-slider {
    width: 100%;
    max-width: 637px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1 / 1;
    max-height: 637px;
  }
  @supports (width: 100cqw) {
    .pd-main-slider {
      max-width: min(637px, 100cqw);
      max-height: min(637px, 100cqw);
    }
  }
  .pd-main-slider .slick-list {
    width: 100%;
    height: 100%;
  }
  .pd-main-slide {
    width: 100%;
    max-width: 637px;
    max-height: 637px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
  }
  @supports (width: 100cqw) {
    .pd-main-slide {
      max-width: min(637px, 100cqw);
      max-height: min(637px, 100cqw);
    }
  }
  .pd-main-arrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s, opacity 0.2s;
    opacity: 0;
  }
  .pd-main-wrap:hover .pd-main-arrow:not(.is-hidden) {
    opacity: 1;
  }
  .pd-main-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
  }
  /* Hide prev on first slide / next on last (JS toggles .is-hidden; beats display:flex !important above) */
  .pd-main-arrow.is-hidden {
    display: none !important;
  }
  .pd-main-arrow span {
    width: 10px;
    height: 10px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }
  .pd-main-prev {
    left: 10px;
  }
  .pd-main-prev span {
    transform: rotate(45deg) translate(2px, -2px);
  }
  .pd-main-next {
    right: 10px;
  }
  .pd-main-next span {
    transform: rotate(-135deg) translate(2px, -2px);
  }
  .pd-pager {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 13px;
  }
}

/* ===========================
   Guide Section - Sunglasses
=========================== 
.guide-section {
  padding: 60px 20px;
}*/

.guide-section .ejh2 {
  text-align: center;
  margin-bottom: 40px;
}

.guide-section .ejh2 .en {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  font-weight: 400;
  color: #333;
  letter-spacing: 0.05em;
  order: -1;
}

.guide-section .ejh2 .jp {
  font-size: 14px;
  color: #666;
  font-weight: 400;
}

.guide-box {
  background: #ffffff;
  padding: 30px 15px;
  margin: 0 auto;
  max-width: 1100px;
}

.guide-box .title_serif {
  font-family: "Shippori Mincho", serif;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  color: var(--gold900);
  margin-bottom: 20px;
}

/* Card Grid inside guide-box 
.guide-box .card-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}*/

.guide-box .card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.guide-box .card-ttl {
  font-size: 20px;
  font-weight: bold;
  color: var(--gray900);
  margin-bottom: 0;
  margin-top: 32px;
}

.guide-box .card .thumb {
  margin: 0;
  order: 1;
}

.guide-box .card .thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.guide-box .card .note {
  font-size: 15px;
  line-height: 1.9;
  color: var(--gray600);
  order: 2;
  width: 100%;
}

/* Bottom Text */
.guide-bottom-text {
  font-size: 16px;
  line-height: 1.9;
  color: var(--gray600);
  padding-top: 30px;
  margin-top: 40px;
}

/* Desktop Styles */
@media (min-width: 834px) {
  /*.guide-section {
    padding: 80px 20px;
  }*/
  .guide-section .ejh2 {
    display: flex;
    flex-direction: column;
  }
  .guide-section .ejh2 .en {
    font-size: 36px;
  }
  .guide-section .ejh2 .jp {
    font-size: 15px;
  }
  .guide-box {
    padding: 60px 50px;
  }
  .guide-box .title_serif {
    font-size: 24px;
    margin-bottom: 20px;
  letter-spacing: 0.1em;
  }/*
  .guide-box .card-grid {
    gap: 0;
  }*/
  .guide-box .card-box {
    display: flex;
    flex-direction: row-reverse;
    gap: 20px 40px;
    align-items: start;
  }
  .guide-box .card-ttl {
    font-size: 20px;
  }
  .guide-box .card-box .thumb {
    width: 50%;
    max-width: 420px;
  }
  .guide-box .card-box .note {
    order: unset;
    font-size: 15px;
    width: 60%;
  }
  .guide-bottom-text {
    font-size: 15px;
    margin-top: 50px;
  }
}

@media (min-width: 1024px) {
  .guide-box {
    padding: 30px;
  }
  .guide-box .card {
    grid-template-columns: 1fr 45%;
  }
}

  /* ================================
     Accessory Detail Page
  ================================ */
  .acc-detail {
    padding: 20px 0 40px;
    margin-top: 20px;
  }
  .acc-detail .title_line {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .acc-detail #column .eyecatch {
    margin-top: 0;
  }
  .acc-detail #column .eyecatch img {
    margin: 0;
    border-radius: 4px;
  }
  .acc-detail #main .note {
    font-size: 12px;
    color: var(--gray500);
  }
  .acc-detail-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .acc-detail #main{
    padding: 0;
  }
  /* Banner */
  .acc-banner {
    margin-bottom: 25px;
  }
  .acc-banner img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* Lead */
  .acc-content :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
    color: var(--gray800);
    margin: 0;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 4px solid var(--MS_blue);
  }
  /* Description */
  .acc-content {
    margin-bottom: 25px;
  }
  .acc-content p {
    font-size: 14px;
    line-height: 1.9;
    color: var(--gray700);
    margin-bottom: 20px;
  }
  /* Price Box */
  .price-box {
    padding: 20px 0;
    border-top: 1px solid var(--gray200);
    margin: 20px 0;
  }
  .price-label {
    font-size: 14px;
    color: var(--gray600);
    margin-bottom: 10px;
    font-weight: bold;
  }
  .price-item {
    margin-bottom: 15px;
  }
  .price-item .size {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .price-item .price {
    font-size: 14px;
    color: var(--gold800);
  }
  .price-item .price strong {
    font-size: 32px;
    font-weight: 600;
  }
  .price-item .tax {
    font-size: 12px;
    margin-right: 5px;
    font-weight: bold;
  }
  .price-item .tax-in {
    font-size: 12px;
    margin-left: 5px;
    font-weight: bold;
  }
  .price-note {
    font-size: 12px;
    color: var(--gray600);
    margin: 15px 0;
    border-top: 1px solid var(--gray200);
    padding-top: 15px;
  }
  .btn-full {
    width: 100%;
    justify-content: center;
  }
  /* Sidebar (PC) - Hidden on Mobile */
  .acc-sidebar {
    display: none;
  }
  .acc-sidebar .price-box {
    background: #fff;
    padding: 20px;
    border: none;
    border-radius: 0;
    margin: 0;
  }
  /* Box Column (reuse from eyecare.css) */
  .acc-detail .box-column {
    border: 1px solid var(--gray200);
    border-radius: 8px;
    padding: 20px;
    background: #fff;
  }
  .acc-detail .box-column img {
    margin: 0 0 15px;
  }
  /* SP Only */
  .sp-only {
    display: block;
  }
  /* Features Section */
  .acc-features {
    margin-top: 30px;
  }
  .acc-features .sec-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--gray800);
    border-bottom: 3px solid var(--gray200);
  }
  .feature-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
  .feature-card {
    border: 1px solid var(--gray200);
    border-radius: 8px;
    padding: 20px;
    background: #fff;
  }
  .feature-card .feature-image {
    margin-bottom: 15px;
  }
  .feature-card .feature-image img {
    width: 100%;
    height: auto;
    display: block;
  }
  .feature-card .feature-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--gold900);
    margin-bottom: 10px;
    line-height: 1.5;
    text-align: center;
  }
  .feature-card .feature-text {
    font-size: 14px;
    line-height: 1.8;
    color: var(--gray700);
  }
  
  /* PC Layout */
  @media (min-width: 834px) {
    .acc-detail {
      padding: 40px 0 60px;
    }
    .acc-detail .title_line {
      font-size: 22px;
      margin-bottom: 30px;
    }
    .acc-detail-wrap {
      flex-direction: row;
      gap: 50px;
    }
    .acc-detail #main {
      flex: 1;
      max-width: calc(100% - 320px);
    }
    .acc-content :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) {
      font-size: 26px;
    }
    .acc-content p {
      font-size: 15px;
    }
    /* Hide Mobile Price */
    .sp-only {
      display: none;
    }
    /* Show Sidebar */
    .acc-sidebar {
      display: block;
      width: 320px;
      flex-shrink: 0;
    }
    .acc-sidebar .price-box {
      position: sticky;
      top: 120px;
    }
    /* Feature Grid */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 25px;
    }
    /* Box Grid */
    .acc-detail .box-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }
    .acc-detail .box-column {
      padding: 25px;
    }
    .acc-features .sec-title{
      font-size: 24px;
    }
    .feature-card .feature-title{
      font-size: 20px;
    }
  }

/* ===========================
   Detail Page Content Margin
=========================== */
.single-frame_item #content,
.single-sunglass_item #content,
.single-contact_item #content,
.single-colorcontact_item #content,
.single-hearingaids_item #content {
  margin-top: 0;
  padding: 0;
}
.frame_item-template-default .title_page{
  display: block;
  margin-top: 60px;
}/*
.title_page h1.pd-title{
  text-align: center;
  margin-top: 180px;
}*/
.frame_item-template-default #breadcrumbs{
  display: none;
}/*
@media (min-width: 1024px) {
  .title_page h1.pd-title{
    text-align: left;
  }
}*/
@media (min-width: 1200px) {/*
  .frame_item-template-default .title_page {
    margin-top: 160px;
  }*/
  .frame_item-template-default #breadcrumbs {
    display: block;
    top: 105px;
  }
}

/* Hide submenu on mobile for product detail pages */
.single-frame_item .submenu,
.single-sunglass_item .submenu,
.single-accessories_item .submenu,
.single-contact_item .submenu,
.single-colorcontact_item .submenu,
.single-hearingaids_item .submenu {
  display: none;
}
@media (min-width: 1024px) {
  .single-frame_item .submenu,
  .single-sunglass_item .submenu,
  .single-accessories_item .submenu,
  .single-contact_item .submenu,
  .single-colorcontact_item .submenu,
  .single-hearingaids_item .submenu {
    display: block;
  }
}

/* Product Recommendations - Mobile horizontal scroll (only on product detail pages) */
.single-frame_item .prod_box,
.single-sunglass_item .prod_box {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.single-frame_item .prod_box_list,
.single-sunglass_item .prod_box_list {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}
.single-frame_item .product-card,
.single-sunglass_item .product-card {
  flex: 0 0 calc(45% - 5px);
  width: calc(45% - 5px);
  max-width: calc(45% - 5px);
}
@media (min-width: 834px) {
  .single-frame_item .prod_box,
  .single-sunglass_item .prod_box {
    overflow-x: visible;
  }
  .single-frame_item .prod_box_list,
  .single-sunglass_item .prod_box_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .single-frame_item .product-card,
  .single-sunglass_item .product-card {
    flex: none;
    width: auto;
    max-width: 100%;
  }
}
/* ===========================
   reading glasses frame
=========================== */
.reading-glasses-frame {
  margin: 60px 0;
}
.title-frame{
  background: var(--wood000);
  padding: 16px;
  border-bottom: solid 3px var(--gold800);
  color: var(--gold800);
  text-align: center;
  margin: 50px auto 20px;
}
.reading-glasses-frame .title-frame :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) {
  font-size: 24px;
  font-weight: 500;
  font-family: "Shippori Mincho", serif;
  margin-bottom: 0;
}
.reading-glasses-frame .brand-text :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) span{
  font-size: 20px;
  font-weight: normal;
}
.reading-glasses-frame .brand-text p.brand-sub{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.reading-glasses-frame .brand-text p.brand-desc{
  font-size: 14px;
  line-height: 1.5;
  color: #454545;
  margin-bottom: 0;
}
.reading-glasses-frame .title-frame .lead {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold900);
}
.reading-glasses-frame .pd-brand{
  padding: 0;
}
.reading-glasses-frame .brand-text :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])){
  margin: 0;
}
.reading-glasses-frame .title-frame + .pd-brand .container{
  border: none;
  margin-top: 0;
}
.reading-glasses-frame .pd-brand .container{
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--gray300);
}
#child .reading-glasses-frame .prod_box_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 0 20px;
}
#child .reading-glasses-frame .brand-text{
  margin-top: 20px;
}
.reading-glasses-frame .product-card {
  width: 100%;
}
.reading-glasses-frame .btn-view-all-blue {
  width: 188px;
}
@media (min-width: 834px) {
  .reading-glasses-frame .title-frame :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) {
    font-size: 36px;
  }
  .reading-glasses-frame p {
    font-size: 16px;
  }
  .reading-glasses-frame .pd-brand .container {
    flex-direction: row;
    margin: 0;
    max-width: 100%;
    margin-top: 40px;
  }
  .reading-glasses-frame .brand-visual {
    padding-left: 0;
    padding-right: 2rem;
    width: calc(50% - 2rem);
  }
  #child .reading-glasses-frame .prod_box{
    margin-top: 0;
  }
  #child .reading-glasses-frame .prod_box_list {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
  }
  .reading-glasses-frame .title-frame .lead{
    font-size: 16px;
  }
}

/* ============================
    Contact archive
=============================== */
.archive-contact_item .product_info .cat-badge,
.archive-colorcontact_item .product_info .cat-badge {
  margin: 0;
}
.archive-contact_item .product_info .name,
.archive-colorcontact_item .product_info .name {
  flex-basis: 100%;
}
.archive-contact_item .product_info .code,
.archive-colorcontact_item .product_info .code {
  flex-basis: 100%;
}
.single-colorcontact_item .product_info {
  margin-top: 16px;
}
.archive-contact_item .product_info,
.archive-colorcontact_item .product_info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}
.archive-contact_item .product_info .product_info_inner,
.archive-colorcontact_item .product_info .product_info_inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.archive-contact_item .product_info .brand,
.archive-colorcontact_item .product_info .brand,
.single-contact_item .product_info .brand,
.single-colorcontact_item .product_info .brand {
  font-weight: 400;
}
/* Single contact/colorcontact recommend section */
.single-contact_item .product_info .product_info_inner,
.single-colorcontact_item .product_info .product_info_inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* Contact tabs - Mobile first (override .prod_box_tabs from common.css) */
.prod_box_tabs.contact-tabs {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 20px auto;
  max-width: 322px;
  border-bottom: none;
}
.prod_box_tabs.contact-tabs li {
  list-style: none;
  flex: 1;
  margin: 0;
  padding: 0;
  border-bottom: none;
}
.prod_box_tabs.contact-tabs li.active {
  border-bottom: none;
}
.prod_box_tabs.contact-tabs li a {
  display: block;
  text-align: center;
  padding: 8px 20px;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid var(--MS_blue_light);
  transition: all 0.3s ease;
  line-height: 1;
}
.prod_box_tabs.contact-tabs li:first-child a {
  border-radius: 8px 0 0 8px;
  border-right-width: 1px;
}
.prod_box_tabs.contact-tabs li:last-child a {
  border-radius: 0 8px 8px 0;
  border-left-width: 1px;
}
.prod_box_tabs.contact-tabs li.active a {
  background: var(--blue000);
  color: var(--MS_blue);
}
.prod_box_tabs.contact-tabs li:not(.active) a {
  background: #fff;
  color: var(--gray600);
}
.prod_box_tabs.contact-tabs li:not(.active) a:hover {
  background: #f0f7fc;
}
@media (max-width: 833px) {
  .archive-contact_item .page-header .title_line,
  .archive-colorcontact_item .page-header .title_line{
    display: none;
  }
  .filter-accordion:first-child .filter-title{
    border: none;
  }
}
@media (min-width: 834px) {
  /* Desktop: text links with underline - same as original */
  .prod_box_tabs.contact-tabs {
    justify-content: center;
    max-width: none;
    margin: 40px 0 20px;
    padding: 0 10px;
    border-bottom: 1px solid var(--gray200);
  }
  .prod_box_tabs.contact-tabs li {
    flex: none;
    margin: 0 15px;
    padding: 16px 0;
  }
  .prod_box_tabs.contact-tabs li a {
    display: inline;
    border: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--gray600);
    font-weight: normal;
    font-size: 16px;
  }
  .prod_box_tabs.contact-tabs li:first-child a,
  .prod_box_tabs.contact-tabs li:last-child a {
    border-radius: 0;
    border: none;
  }
  .prod_box_tabs.contact-tabs li.active {
    border-bottom: 4px solid var(--MS_blue);
    font-weight: bold;
  }
  .prod_box_tabs.contact-tabs li.active a {
    background: transparent;
    color: inherit;
  }
  .prod_box_tabs.contact-tabs li:not(.active) a {
    background: transparent;
  }
  .prod_box_tabs.contact-tabs li:not(.active) a:hover {
    background: transparent;
    color: var(--MS_blue);
  }
}
/* Category badge for contact products */
.product-card .cat-badge {
  display: inline-block;
  background-color: var(--wood600);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  margin-bottom: 8px;
}
#flex-content #sidebar .button-box {
  text-align: center;
}
#flex-content #sidebar .btn-view-all-blue {
  letter-spacing: 0;
}
@media (min-width: 834px) {
  #sidebar .filter-section.contact{
    border: none;
    margin-top: -24px;
  }
}
/* ============================
    Contact Products
=============================== */
/* Category badge in title_page */
.title_page .cat-badge {
  display: inline-block;
  background: var(--wood600);
  color: #fff;
  font-size: 14px;
  padding: 4px 12px;
  margin-bottom: 10px;
  margin-left: 16px;
}
.title_page .cat-badge.oneday {
  background: #c41e3a;
}
.title_page .cat-badge[class*="2week"] {
  background: #2d6a9f;
}
.title_page .pd-series-line {
  margin: -4px 16px 12px;
  font-size: 15px;
  font-weight: 600;
  color: #444;
  text-align: left;
}
/* Contact-specific: Brand box with border */
.contact-detail .pd-head{
  flex-direction: column;
  gap: 0;
  margin: 0 auto 30px;
}
.contact-detail .pd-head .brand-head {
  display: block;
  border: 1px solid #e0e0e0;
  padding: 16px;
  text-align: center;
  margin-bottom: 15px;
}
.contact-detail .pd-head .brand-head img {
  max-width: auto;
  height: 45px; 
  margin: auto;
  margin-bottom: 10px;
}
.contact-detail .pd-head .brand-head .brand-ttl {
  font-size: 14px;
  font-weight: normal;
  color: #333;
  margin: 0;
}
.contact-detail .pd-head .button-box{
  display: flex;
  flex-direction: column-reverse;
  gap: 20px;
}
@media (min-width: 834px) {
  .title_page .cat-badge {
    margin-left: 0;
  }
  .title_page .pd-series-line {
    margin-left: 0;
    margin-right: 0;
  }
  .contact-detail .pd-head .button-box{
    flex-direction: column;
  }
}
/* Contact-specific: Purchase button (gold) - NEW button */
.contact-detail .btn-purchase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gold550);
  color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.3s;
}
.contact-detail .btn-purchase:hover {
  background: #c49843;
  color: #fff;
}
.contact-detail .btn-purchase img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}
/* Contact-specific: Specs section */
.contact-detail .pd-specs{
  border-bottom: none;
}
.contact-detail .pd-specs dl{
  border-top: 1px solid var(--gray100);
  margin-top: 8px;
  padding-top: 8px;
}
.contact-detail .pd-specs .sec-h{
  color: var(--wood900);
}
.contact-detail .pd-specs .spec{
  column-gap: 0;
}
.contact-detail .pd-specs .spec dt{
  font-weight: bold;
  color: var(--grray500);
  padding-right: 8px;
  font-size: 12px;
}
.contact-detail .pd-specs .spec dt,
.contact-detail .pd-specs .spec dd{
 border-bottom: 1px solid var(--gray100);
 padding-bottom: 8px;
}
.contact-detail .pd-specs .spec dd::after {
  content: none;
}
.contact-detail .pd-view-contact{
  margin-top: 20px;
  text-align: center;
}
.single-contact_item .pd-recommend .view-more.first{
  border: none;
}
.single-contact_item .product_info .brand{
  font-weight: normal;
}

/* Contact recommend section - horizontal scroll on mobile (same as frame) */
.single-contact_item .pd-recommend .prod_box,
.single-colorcontact_item .pd-recommend .prod_box {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.single-contact_item .pd-recommend .prod_box_list,
.single-colorcontact_item .pd-recommend .prod_box_list {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}
.single-contact_item .pd-recommend .product-card,
.single-colorcontact_item .pd-recommend .product-card {
  flex: 0 0 calc(45% - 5px);
  width: calc(45% - 5px);
  max-width: calc(45% - 5px);
}

@media (min-width: 834px) {
  .single-contact_item .pd-recommend,
  .single-colorcontact_item .pd-recommend{
    border-top: 1px solid var(--gray100);
  }
  .single-hearingaids_item .contact-detail{
    border-bottom: 1px solid var(--gray100);
  }
  .contact-detail .pd-view-contact{
    margin-top: 20px;
    text-align: center;
  }
  /* Contact recommend section - grid on desktop */
  .single-contact_item .pd-recommend .prod_box,
  .single-colorcontact_item .pd-recommend .prod_box {
    overflow-x: visible;
  }
  .single-contact_item .pd-recommend .prod_box_list,
  .single-colorcontact_item .pd-recommend .prod_box_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .single-contact_item .pd-recommend .product-card,
  .single-colorcontact_item .pd-recommend .product-card {
    flex: none;
    width: auto;
    max-width: 100%;
  }
}
/* Location button uses frame's blue style via .pd-box .btn-location */
/* No override needed - uses existing blue style from line 962 */
/* Reading glasses frame: Figma alignment, 2026-09-08. */
.reading-glasses-frame .title-frame { scroll-margin-top: 170px; }
.reading-glasses-frame > .container > .lead { font-size: 16px; line-height: 1.7; margin: 0 0 48px; }
.reading-glasses-frame .title-frame { background: #f8f2ed; border-bottom: 2px solid #a08444; padding: 16px; margin: 0 0 32px; text-align: center; }
.reading-glasses-frame .title-frame :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) { font-family: "Shippori Mincho",serif; font-size: 28px; line-height: 1.5; font-weight: 600; color: #856220; margin: 0 0 8px; }
.reading-glasses-frame .title-frame .lead { font-size: 14px; line-height: 1.6; margin: 0; color: #4e341b; }
.reading-glasses-frame .pd-brand { padding: 0; margin: 0 0 32px; }
.reading-glasses-frame .pd-brand > .container { display: flex; flex-direction: column; gap: 24px; width: 100%; padding: 0; }
.reading-glasses-frame .brand-visual { width: 100%; flex: 1; }
.reading-glasses-frame .brand-visual img { display: block; width: 100%; aspect-ratio: 604 / 246; object-fit: cover; }
.reading-glasses-frame .brand-text { flex: 1; min-width: 0; }
.reading-glasses-frame .brand-text :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) { font-size: 24px; line-height: 1.5; margin: 0 0 8px; }
.reading-glasses-frame .brand-text :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) span { font-size: 18px; }
.reading-glasses-frame .brand-sub { font-size: 18px; line-height: 1.6; font-weight: 700; margin: 0 0 16px; }
.reading-glasses-frame .brand-desc { font-size: 14px; line-height: 1.9; margin: 0; }
.reading-glasses-frame .prod_box { margin: 0 0 64px; padding: 0; }
.reading-glasses-frame .prod_box_list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 16px; }
.reading-glasses-frame .product-card { width: auto; min-width: 0; margin: 0; }
.reading-glasses-frame .product_image { border: 1px solid #ccc; aspect-ratio: 1; display: flex; align-items: center; padding: 0; }
.reading-glasses-frame .product_image > a { display: block; width: 100%; }
.reading-glasses-frame .product-thumb { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.reading-glasses-frame .product_colors { display: none; }
.reading-glasses-frame .product_info .brand { font-size: 13px; }
.reading-glasses-frame .product_info .name { font-size: 16px; }
.reading-glasses-frame .view-more { margin: 32px 0 0; }
.reading-glasses-frame .view-more .btn-view-all-blue { width: 188px; min-height: 32px; padding: 4px 28px; font-size: 14px; }
@media (max-width: 833px) {
  .submenu--reading-glasses .submenu-box { overflow-x: auto; }
  .submenu--reading-glasses .submenu-box ul { display: flex; flex-wrap: nowrap; width: max-content; min-width: 100%; justify-content: flex-start; gap: 0; }
  .submenu--reading-glasses .submenu-box li { flex: 0 0 auto; width: auto; }
  .submenu--reading-glasses .submenu-box a { display: flex; align-items: center; min-height: 43px; padding: 8px 16px; white-space: nowrap; font-size: 14px; }
  .rg-frame-header .title_line { font-size: 24px; line-height: 1.6; }
  .reading-glasses-frame > .container { padding: 0 16px; }
  .reading-glasses-frame .brand-text :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) { font-size: 20px; }
  .reading-glasses-frame .brand-text :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) span { font-size: 14px; }
  .reading-glasses-frame .brand-sub { font-size: 16px; }
}
@media (min-width: 834px) {
  .reading-glasses-frame > .container { max-width: 1240px; width: calc(100% - 64px); padding: 0; }
  .reading-glasses-frame .title-frame { padding: 20px 16px; }
  .reading-glasses-frame .title-frame :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) { font-size: 36px; }
  .reading-glasses-frame .pd-brand > .container { flex-direction: row; align-items: flex-start; gap: 32px; }
  .reading-glasses-frame .prod_box_list { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; }
  .reading-glasses-frame .prod_box { margin-bottom: 72px; }
}

/* Reading glasses final responsive spacing. */
.submenu--reading-glasses .submenu-box { scrollbar-width: none; }
.submenu--reading-glasses .submenu-box::-webkit-scrollbar { display: none; }
#reading-glasses .view-all { padding-top: 0; }
#reading-glasses .reading-glasses-hero-title p { font-weight: 400; }
@media (max-width: 833px) {
  .reading-glasses-frame > .container { width: 100%; max-width: none; box-sizing: border-box; padding: 0 16px; }
  .submenu ~ .rg-frame-header { margin: 36px 0 16px; width: 100%; }
  .rg-frame-header .title_line { font-size: 18px; line-height: 26px; margin: 0; gap: 20px; font-weight: 600; }
  .reading-glasses-frame > .container > .lead { margin: 0 4px 40px; line-height: 2; font-weight: 400; }
  .reading-glasses-frame .title-frame { padding: 16px 8px; margin-bottom: 16px; }
  .reading-glasses-frame .title-frame :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) { font-size: 24px; line-height: 35px; }
  .reading-glasses-frame .title-frame .lead { font-size: 12px; line-height: 1.4; }
  .reading-glasses-frame .brand-desc { font-size: 16px; line-height: 2; }
  #reading-glasses .reading-glasses-hero-title { background: #fcfcfc; padding-top: 20px; }
  #reading-glasses .reading-glasses-hero-title :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) { width: calc(100% + 8px); margin-bottom: 16px; line-height: 36px; }
}
@media (min-width: 834px) {
  .submenu ~ .page-header.rg-top-header,
  .submenu ~ .page-header.rg-frame-header { margin: 24px auto 32px; }
  .rg-top-header .title_line,
  .rg-frame-header .title_line { margin: 0; font-size: 28px; line-height: 38px; }
  .submenu ~ #content.reading-glasses-frame { margin-top: 0; }
  .reading-glasses-frame .title-frame { padding: 16px 8px; }
  .reading-glasses-frame .title-frame :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])) { line-height: 52px; }
  .reading-glasses-frame .title-frame .lead { font-size: 16px; line-height: 19px; }
}

@media (max-width: 833px) {
  main#content.reading-glasses-frame { padding-left: 0; padding-right: 0; }
}

/* 2026-09-17 見出し順序の修正: h3 だった小見出しを h2 にしたので、h2 の共通スタイル（20px・下余白20px）が当たらないよう h3 時の見た目に固定 */
.pd-specs .sec-h, .pd-specs :is(h2:where(:not([data-ms-h])), :where([data-ms-h="2"])).sec-h{
  font-size: 1.17em;
  font-weight: 700;
  margin: 0;
}
/* 2026-09-17 商品詳細のカテゴリ名 .pd-h を h2 → p にしたため、共通の .title_page p { padding:20px } が当たるようになった。h2 だった時の余白に固定 */
.title_page p.pd-h{
  padding: 0 0 8px;
}