/* anchor */

.top-anchor-list{display:flex; justify-content: center; column-gap:80px; padding:35px 0;}
.top-anchor-list div{display:flex; column-gap:30px; align-items: center;  flex-wrap:wrap;}
.top-anchor-list div b{font-size:var(--text); font-weight:600;}
.top-anchor-list div b a{padding:0 0 0 32px; text-decoration:none; position:relative;}
.top-anchor-list div b a:before{content:""; width:20px; height:20px; background:url(/assets/images/_resource/pages/products/common/anchor.png) no-repeat; background-size:20px 20px; position:absolute; left:0; top:calc(50% - 10px);}
.top-anchor-list div ul{display:flex; column-gap:30px; flex-wrap:wrap;}
.top-anchor-list div ul li a{padding:0 0 0 32px; text-decoration:none; position:relative; font-size:var(--s-text); font-weight:600; text-wrap:nowrap;}
.top-anchor-list div ul li a:before{content:""; width:20px; height:20px; background:url(/assets/images/_resource/pages/products/common/anchor-grn.png) no-repeat; background-size:20px 20px; position:absolute; left:0; top:calc(50% - 10px);}

.online-banner{width:100%; max-width:1000px; margin:20px auto; overflow:hidden; border-radius: 20px; border:var(--border)}

@media (max-width:960px){
.top-anchor-list{row-gap:30px;}
.top-anchor-list div{flex-direction: column; align-items: unset;}
.top-anchor-list div ul{display:flex; column-gap:30px; align-items: unset;  flex-wrap:wrap; flex-direction: column; margin-top:10px;}
}

@media (max-width:576px){
.top-anchor-list{row-gap:30px; column-gap:0;  justify-content: space-between;}
.top-anchor-list div{flex-direction: column; align-items: unset;}
.top-anchor-list div b a{padding:0 0 0 24px;}
.top-anchor-list div b a:before{content:""; width:16px; height:16px; background-size:16px; top:calc(50% - 8px);}
.top-anchor-list div ul{display:flex; column-gap:30px; align-items: unset;  flex-wrap:wrap; flex-direction: column;}
.top-anchor-list div ul li a{padding:0 0 0 24px;}
.top-anchor-list div ul li a:before{content:""; width:16px; height:16px; background-size:16px; top:calc(50% - 8px);}

}


/* 業務用 */

.professional-block{display:flex; gap:40px}
.professional-block .photo,
.professional-block .intro{width:calc(50% - 20px);}
.professional-block .photo img{border-radius:20px; border:var(--border);}

.contents-list ul{display:flex; gap:20px; flex-wrap:wrap; margin:30px 0;}
.contents-list ul li{width:calc(50% - 10px); display:flex; flex-direction: column; justify-content: center; align-items: center;}
.contents-list ul li a{text-decoration:none; font-size:var(--s-text); display:flex; font-weight:600; flex-direction: column; justify-content: center; align-items: center; gap:10px;}
.contents-list ul li img{width:50px; height:50px; margin:0 auto;}
.contents-list ul li a p.outer-link{padding-right:20px; position:relative}
.contents-list ul li a p.outer-link:after{content:""; display:block; width:16px; height:16px; background:url(/assets/images/_resource/pages/products/common/outer-link-grn.png) no-repeat; background-size:16px; position:absolute; right:0; top:10px;}

@media (max-width:960px){
  .professional-block{display:flex; gap:40px; flex-direction: column;}
  .professional-block .photo,
  .professional-block .intro{width:100%;}
  .professional-block .photo img{border-radius:20px; border:var(--border);}

  .contents-list ul{display:flex; gap:20px; flex-wrap:wrap; margin:30px 0;}
  .contents-list ul li{width:calc(50% - 10px); display:flex; flex-direction: column; justify-content: center; align-items: center;}
  .contents-list ul li a{text-decoration:none; font-size:var(--s-text); display:flex; flex-direction: column; justify-content: center; align-items: center; gap:10px;}
  .contents-list ul li img{width:50px; height:50px; margin:0 auto;}
}

/*------- 商品情報詳細 -------*/

.products-detail{
  display:flex;
  gap:40px;
  max-width:1000px;
  margin:40px auto;
}
.products-detail div{
  width:calc((100% - 40px) / 2);
}

.products-photo figure{padding:20px; background:#fff; border-radius: 20px; border:solid 1px #c9c9c9;}
.products-info p{font-size:var(--text); line-height:1.7; color:#444; font-weight:500; margin-bottom:50px;}
.products-detail .products-link{width:100%; display:flex; flex-wrap:wrap; gap:20px; margin-bottom:25px;}
.products-link .btn-small{min-width:calc((100% - 20px) / 2); max-width:100%; width:auto;}
.products-link .btn-small a{display:block; border:solid 2px var(--new-green); border-radius:10px; background:#fff; text-align:center; padding:10px 20px; display:block; color:#333; text-decoration:none; font-weight:700; font-size:var(--text);}
.products-link .btn-large{width:100%;} 
.products-link .btn-large a{display:block; border:solid 2px var(--new-green); border-radius:10px; background:var(--new-green); color:#fff; text-align:center; text-decoration:none; padding:10px 20px; font-weight:700; font-size:var(--h4); line-height:1.5; position:relative;}
.products-link .btn-large a span{display:block; font-size:var(--text);}
.products-link .btn-large a.outer-link:after{content:""; display:block; width:16px; height:12px; background:url(/assets/images/_resource/pages/products/products/outer-link.png) no-repeat; background-size:16px 12px; position:absolute; bottom:10px; right:10px; }
.products-link .btn-small a:focus,
.products-link .btn-large a:focus{outline: 3px solid #000;outline-offset: 2px;}
.products-link .btn-small a:focus:not(:focus-visible),
.products-link .btn-large a:focus:not(:focus-visible){outline: none;}
.products-link{width:100%; max-width:480px; margin:0 auto;}
.products-detail-in{width:100%; max-width:1000px; margin:0 auto;}
.recipe-link a{text-decoration:none; display:block; width:fit-content; font-size:var(--s-text); font-weight:700; margin:0 auto; padding:2px 0 2px 24px; position:relative;}
.recipe-link a:before{content:""; width:20px; height:20px; display:block; background:url(/assets/images/_resource/pages/products/products/anchor.png) no-repeat; background-size:20px 20px; position:absolute; left:0; top:calc(50% - 10px)}
.products-detail .lineup{padding:20px; background:#f8f8f8; width:100%; border: var(--border); border-radius: 16px;;}
.products-detail .lineup p{margin-bottom:0;}

.section-title{
  margin-bottom:50px;
}
.section-title + .notification{
  font-size:var(--text);
  text-align:center;
  font-weight:700;
  margin-bottom:50px;
  margin-top:-40px;
}

.products_side_space{padding:0 40px}

@media (max-width:960px){
.products-detail{
  display:flex;
  margin:30px auto 20px;
  flex-direction: column;
  align-items: center;
}
.products-detail div{
  width:90%;
}
.products-photo figure{width:90%; margin:0 auto;}
.products-detail .products-link{gap:16px; margin-bottom:20px;}
}
@media (max-width:768px){
.section-title{
  margin-bottom:32px;
}
.section-title + .notification{
  margin-top:-30px;
}
.products-detail{
  margin:20px auto 0;
}
.products-detail div{
  width:100%;
}
.products_side_space{padding:0 25px}
}


/* CM */
.cm-block{width:90%; max-width:640px; margin:0 auto 80px; border-radius:20px; overflow: hidden;}

.spec-list{display:flex; flex-wrap:wrap; gap:40px;}
.spec-list div{width:calc((100% - 40px) / 2); display:flex; flex-direction: column; gap:10px;}
.spec-list div.full-length{width:100%;} 

/*----- spec ------*/
.spec-list div dt{color:var(--new-green); font-size:var(--text); font-weight:700;}
.spec-list div dd{border:var(--border); border-radius:10px; padding:20px 30px; font-size:var(--text); font-weight:700;}

.spec-list div dd .intro{padding:0 0 15px;}
.spec-list-in-title{font-size:var(--s-text); font-weight:700; padding-bottom:5px; color:#444;}

ul.list-items{margin:2px 0 10px;}
ul.list-items li{padding:2px 0 2px 1em; position:relative; border:none; font-size:var(--s-text);}
ul.list-items li:before{content:""; display:block; position:absolute; left:0; top:1em; width:0.2em; height:0.2em; border-radius:0.1em; background:#444;}
.caption{font-size:var(--s-text);}

.nutrition-list{display:flex; width:100%; flex-direction: row; gap:80px; flex-wrap:wrap;}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.spec-item.full {
  grid-column: 1 / -1;
}

.spec-label {
  color:var(--new-green); font-size:var(--text); font-weight:700; margin-bottom: 8px;
}

.spec-box {
  border:var(--border); border-radius:10px; padding:20px 30px; font-size:var(--text); font-weight:700;
}
.spec-box p{font-size:var(--text)}
.spec-box .note{font-weight:500; padding:30px 0 0; font-size:var(--s-text)}


.nutrition-list div{width:fit-content;}

.nutrition-table {
  border-collapse: collapse;
  min-width: 240px;
}

.nutrition-table th {
  text-align: left;
  font-weight: 600;
  padding: 2px 0 2px 1em;
  position:relative;
}
.nutrition-table th.no-point{padding:2px 0;}
.nutrition-table th:before{content:""; display:block; position:absolute; left:0; top:1em; width:0.2em; height:0.2em; border-radius:0.1em; background:#444;}
.nutrition-table th.no-point:before{display:none;}

.nutrition-table td {
  text-align: right;
  padding: 2px 0;
}

.allergen-notes{display:flex; flex-direction: column; gap:5px; margin:20px 0;}
.allergen-notes li{font-size:var(--s-text); padding-left:1.25em; text-indent:-1em; position:relative;}
.allergen-notes li:before{content:"※"; }

.reference caption {
  text-align: left;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.update{padding:35px 0 0; font-size:var(--s-text);}
.spec-list div dd .update{font-weight:500;}

@media (max-width:960px){
.spec-list div{width:100%; display:flex; flex-direction: column; gap:10px;}
.spec-list div.full-length{width:100%;} 

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.spec-item,
.spec-item.full {
  grid-column: 1 / -1;
}


.nutrition-list{display:flex; width:100%; flex-direction: row; row-gap:10px; column-gap:20px; flex-wrap:wrap; flex-direction: column;}
.nutrition-list div{width:100%;}
.nutrition-table {
  border-collapse: collapse;
  width: 100%;
  min-width:100%;
}
}
@media (max-width:768px){
.spec-list div dt{color:var(--new-green); font-size:16px; font-weight:700;}
.spec-list div dd{border:var(--border); border-radius:10px; padding:15px 24px; font-size:16px;}
.update{padding:10px 0;}

.spec-label {color:var(--new-green); font-size:var(--text);}
.spec-box {padding:15px 20px;}
}

.btn-round {width:fit-content; margin:25px auto; min-width:240px;}
.btn-round a{display:block; text-decoration: none; padding:10px 40px; border-radius: 30px; background:var(--new-green); color:#fff; font-size:var(--text); font-weight:700; text-align:center; position:relative;}
.btn-round a:after{content:""; display:block; width:11px; height:18px; background:url(/assets/images/_resource/pages/products/products/arrow-new.png) no-repeat; background-size:11px 18px; position:absolute; top:calc(50% - 9px); right:20px;}

.product-logo-block{display:flex; gap:40px;}
.product-logo-block .logo{max-width:160px;}
.product-logo-block .text{font-size:var(--text);}

@media (max-width:768px){
  .product-logo-block{display:flex; gap:40px; flex-direction: column; align-items: center;}
  .product-logo-block .logo{max-width:220px;}
}