/* ============================================================
   岡田商店 駄菓子図鑑 公開CSS
   File: /catalog/assets/css/catalog.css
============================================================ */

/* ============================================================
   base
============================================================ */

.catalog-page .catalog-inner{
  width:min(1260px, calc(100% - 32px));
  margin:0 auto;
}

.catalog-lead{
  margin:28px 0 20px;
  padding-bottom:16px;
}

.catalog-lead h1{
  margin:0 0 6px;
  color:#68472F;
  font-size:1.55rem;
}

.catalog-lead p{
  margin:0;
  line-height:1.7;
}

/* ============================================================
   breadcrumb
============================================================ */

.catalog-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0 30px;
  color:#68472F;
  font-size:.92rem;
}

.catalog-breadcrumb a{
  color:#68472F;
  text-decoration:none;
}

.catalog-breadcrumb a:hover{
  text-decoration:underline;
}

.catalog-breadcrumb span{
  color:#625449;
}

/* ============================================================
   search
============================================================ */

.catalog-search-box{
  margin:16px 0 14px;
  border:1px solid #FAA551;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}

.catalog-search-box summary{
  cursor:pointer;
  padding:12px 16px;
  font-weight:bold;
  color:#885826;
  background:#ffdb51;
}

.catalog-search-body{
  padding:16px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}

.catalog-search-row label{
  display:block;
  margin-bottom:5px;
  font-weight:bold;
  color:#68472F;
  font-size:.9rem;
}

.catalog-search-row input,
.catalog-search-row select{
  width:100%;
  box-sizing:border-box;
  padding:9px 10px;
  border:1px solid #c9a46a;
  border-radius:6px;
  background:#fff;
  font-size:.95rem;
}

.catalog-search-actions{
  grid-column:1 / -1;
}

.catalog-search-actions button{
  padding:8px 18px;
  border:1px solid #68472F;
  border-radius:999px;
  background:#fff;
  color:#68472F;
  font-weight:bold;
  cursor:pointer;
}

.catalog-search-actions button:hover{
  background:#68472F;
  color:#fff;
}

.catalog-result-info{
  margin:12px 0 22px;
  color:#68472F;
}

/* ============================================================
   index page：ジャンル・メーカー入口
============================================================ */

.catalog-index-block{
  margin:34px 0 60px;
}

.catalog-index-block h2{
  margin:0 0 18px;
  padding-bottom:10px;
  border-bottom:1px solid #68472F;
  color:#68472F;
  font-size:1.45rem;
}

.catalog-icon-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}

.catalog-icon-card{
  display:grid;
  grid-template-columns:1fr 42px;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:14px 16px;
  border:1px solid #FAA551;
  border-radius:12px;
  background:#fff;
  color:#4c2912;
  text-decoration:none;
  box-sizing:border-box;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.catalog-icon-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(104,71,47,.16);
}

.catalog-icon-mark{
  display:none;
}

.catalog-icon-title{
  font-weight:bold;
  line-height:1.35;
}

.catalog-icon-count{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#F8982D;
  color:#fff;
  font-size:.82rem;
  font-weight:bold;
  white-space:nowrap;
}

/* genre buttons */

.catalog-genre-grid{
  display:flex;
  flex-wrap:wrap;
  gap:14px 12px;
  margin-top:30px;
}

.catalog-genre-grid .catalog-icon-card{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:120px;
  max-width:100%;
  min-height:58px;
  padding:8px 28px;
  border:none;
  border-radius:999px;
  background:#2c8bbb;
  color:#fff;
  box-shadow:none;
}

.catalog-genre-grid .catalog-icon-card:hover{
  background:#16678f;
  transform:translateY(-2px);
}

.catalog-genre-grid .catalog-icon-count,
.catalog-genre-grid .catalog-icon-mark{
  display:none;
}

.catalog-genre-grid .catalog-icon-title{
  color:#fff;
  font-size:1.05rem;
  font-weight:bold;
  text-align:center;
}

/* maker accordion */

.catalog-maker-index-block{
  margin-bottom:160px;
}

.catalog-maker-note{
  display:flex;
  align-items:center;
  gap:.4em;
  margin:10px 0 22px;
  color:#8a6a4a;
  font-size:.9rem;
  line-height:1.6;
}

.catalog-maker-note-dot{
  color:#F8982D;
  font-size:1.6rem;
  line-height:1;
}

.catalog-maker-accordion{
  margin:14px 0;
  border:3px solid #c5e425;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

.catalog-maker-accordion summary{
  cursor:pointer;
  padding:14px 18px;
  color:#68472F;
  font-size:1.1rem;
  font-weight:bold;
  background:#feffd2;
  list-style:none;
}

.catalog-maker-accordion summary::-webkit-details-marker{
  display:none;
}

.catalog-maker-accordion summary::before{
  content:"▶";
  display:inline-block;
  margin-right:8px;
  color:#F8982D;
  transition:transform .15s ease;
}

.catalog-maker-accordion[open] summary::before{
  transform:rotate(90deg);
}

.catalog-maker-accordion .catalog-maker-grid{
  padding:16px;
}

.catalog-maker-grid .catalog-icon-card{
  grid-template-columns:1fr 42px;
}

.catalog-maker-grid .catalog-icon-count{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#F8982D;
  color:#fff;
  font-size:.82rem;
}

/* ============================================================
   list page：見出し
============================================================ */

/*
.catalog-list-page{
  padding-bottom:160px;
}
  */

.catalog-back-link{
  margin:0 0 18px;
  text-align:right;
}

.catalog-back-link a{
  color:#8a6a4a;
  font-weight:bold;
  font-size:.92rem;
}

.catalog-selected-heading{
  margin:40px 0 22px;
  padding-top:50px;
  border-top:1px solid #68472F;
}

.catalog-selected-heading p{
  margin:0 0 6px;
  color:#8a6a4a;
  font-weight:bold;
  font-size:1rem;
}

.catalog-selected-heading h2{
  margin:0 0 10px;
  color:#68472F;
  font-size:1.5rem;
}

/* ============================================================
   product grid / card
============================================================ */

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  margin-bottom:160px;
}

.catalog-card{
  min-width:0;
}

.catalog-card-button{
  display:block;
  width:100%;
  height:100%;
  min-height:370px;
  box-sizing:border-box;
  padding:16px 14px 18px;
  border:1px solid #FAA551;
  border-radius:10px;
  background:#fff;
  color:#4c2912;
  text-align:left;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease;
}

.catalog-card-button:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(104,71,47,.16);
}

.catalog-card-no{
  display:block;
  margin:0 0 10px;
  text-align:right;
  color:#68472F;
  font-size:.95rem;
}

.catalog-card-image{
  display:flex;
  align-items:center;
  justify-content:center;
  height:170px;
  margin-bottom:8px;
}

.catalog-card-image img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.catalog-card-labels{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:28px;
  margin:4px 0 10px;
  flex-wrap:wrap;
}

.catalog-status-label{
  display:inline-block;
  padding:2px 8px;
  border:1px solid #d33;
  border-radius:999px;
  background:#fff;
  color:#d33;
  font-size:.78rem;
  line-height:1.4;
}

.catalog-status-not_handled{
  border-color:#68472F;
  color:#68472F;
}

.catalog-status-distributor_changed{
  border-color:#2276aa;
  color:#2276aa;
}

.catalog-card-text{
  display:block;
  line-height:1.55;
}

.catalog-card-name,
.catalog-card-maker,
.catalog-card-quantity{
  display:block;
}

.catalog-card-name{
  min-height:3.1em;
  font-weight:bold;
  font-size:1.02rem;
}

.catalog-card-maker,
.catalog-card-quantity{
  font-size:.95rem;
}

/* ============================================================
   empty
============================================================ */

.catalog-no-result{
  padding:24px;
  background:#fff;
  border:1px solid #FAA551;
  border-radius:10px;
  text-align:center;
}

/* ============================================================
   modal
============================================================ */

.catalog-modal[hidden]{
  display:none;
}

.catalog-modal{
  position:fixed;
  inset:0;
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;
  box-sizing:border-box;
}

.catalog-modal-bg{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.72);
}

.catalog-modal-panel{
  position:relative;
  z-index:2;
  width:min(720px, 92vw);
  max-height:86vh;
  overflow:auto;
  margin:0;
  padding:24px;
  background:#fff;
  border:6px solid #F8982D;
  border-radius:12px;
  box-shadow:0 14px 34px rgba(104,71,47,.28);
}

.catalog-modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:3px solid #F8982D;
  background:#fff;
  color:#F8982D;
  font-size:1.4rem;
  font-weight:bold;
  line-height:1;
  cursor:pointer;
}

.catalog-modal-close:hover{
  background:#F8982D;
  color:#fff;
}

.catalog-modal-image{
  text-align:center;
  margin:10px 0 18px;
}

.catalog-modal-image img{
  max-width:100%;
  max-height:480px;
  object-fit:contain;
}

.catalog-modal-no{
  margin:0 0 6px;
  color:#8a6a4a;
}

.catalog-modal-panel h2{
  margin:0 0 14px;
  color:#68472F;
}

.catalog-modal-detail{
  margin:0;
}

.catalog-modal-detail div{
  display:grid;
  grid-template-columns:7em 1fr;
  gap:10px;
  padding:7px 0;
  border-bottom:1px dotted #d7bc87;
}

.catalog-modal-detail div[hidden]{
  display:none !important;
}

.catalog-modal-detail dt{
  font-weight:bold;
  color:#68472F;
}

.catalog-modal-detail dd{
  margin:0;
}

.catalog-modal-notes section{
  margin-top:16px;
  padding:14px;
  background:#fff8e8;
  border:1px solid #F8E857;
  border-radius:10px;
}

.catalog-modal-notes h3{
  margin:0 0 8px;
  color:#68472F;
  font-size:1rem;
}

.catalog-modal-notes p{
  margin:0;
  line-height:1.7;
  white-space:pre-wrap;
}

body.catalog-modal-open{
  overflow:hidden;
}

/* ============================================================
   responsive
============================================================ */

@media screen and (max-width:1100px){

  .catalog-icon-grid{
    grid-template-columns:repeat(3, 1fr);
  }

  .catalog-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
  }

}

@media screen and (max-width:900px){

  .catalog-search-body{
    grid-template-columns:1fr 1fr;
  }

}

@media screen and (max-width:688px){

  .catalog-page .catalog-inner{
    width:94%;
  }

  .catalog-lead{
    margin:20px 0 18px;
  }

  .catalog-lead h1{
    font-size:1.35rem;
  }

  .catalog-lead p{
    font-size:.92rem;
  }

  .catalog-breadcrumb{
    flex-wrap:wrap;
    gap:6px;
    margin:14px 0 22px;
    font-size:.82rem;
  }

  .catalog-search-box summary{
    padding:10px 13px;
    font-size:.92rem;
  }

  .catalog-search-body{
    grid-template-columns:1fr;
    padding:12px;
    gap:11px;
  }

  .catalog-index-block{
    margin:24px 0 32px;
  }

  .catalog-index-block h2{
    margin-bottom:14px;
    padding-bottom:8px;
    font-size:1.15rem;
  }

  .catalog-icon-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }

  .catalog-icon-card{
    grid-template-columns:1fr 32px;
    gap:8px;
    min-height:52px;
    padding:9px 10px;
  }

  .catalog-icon-title{
    font-size:.84rem;
    line-height:1.35;
  }

  .catalog-icon-count{
    width:32px;
    height:32px;
    font-size:.72rem;
  }

  .catalog-genre-grid{
    gap:8px 6px;
    margin-top:16px;
  }

  .catalog-genre-grid .catalog-icon-card{
    min-width:auto;
    min-height:42px;
    padding:6px 14px;
  }

  .catalog-genre-grid .catalog-icon-title{
    font-size:.84rem;
  }

  .catalog-maker-note{
    margin:6px 0 16px;
    font-size:.82rem;
  }

  .catalog-maker-note-dot{
    font-size:1.2rem;
  }

  .catalog-maker-accordion{
    margin:10px 0;
    border-width:2px;
  }

  .catalog-maker-accordion summary{
    padding:11px 14px;
    font-size:.98rem;
  }

  .catalog-maker-accordion .catalog-maker-grid{
    padding:12px;
  }

  .catalog-maker-grid .catalog-icon-card{
    grid-template-columns:1fr 28px;
    min-height:46px;
    padding:8px 10px;
  }

  .catalog-maker-grid .catalog-icon-title{
    font-size:.84rem;
  }

  .catalog-maker-grid .catalog-icon-count{
    width:28px;
    height:28px;
    font-size:.68rem;
  }

  .catalog-back-link{
    margin-bottom:12px;
  }

  .catalog-selected-heading{
    margin:30px 0 18px;
    padding-top:34px;
  }

  .catalog-selected-heading h2{
    font-size:1.25rem;
  }

  .catalog-selected-heading p,
  .catalog-result-info{
    font-size:.9rem;
  }

  .catalog-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
    margin-bottom:120px;
  }

  .catalog-card-button{
    min-height:300px;
    padding:10px 8px 12px;
  }

  .catalog-card-no{
    font-size:.8rem;
  }

  .catalog-card-image{
    height:120px;
  }

  .catalog-card-labels{
    min-height:24px;
  }

  .catalog-status-label{
    padding:1px 6px;
    font-size:.68rem;
  }

  .catalog-card-name{
    font-size:.98rem;
  }

  .catalog-card-maker,
  .catalog-card-quantity{
    font-size:.78rem;
  }

  .catalog-modal-panel{
    width:90vw;
    max-height:84vh;
    margin:5vh auto;
    padding:18px 14px;
    border-width:5px;
  }

  .catalog-modal-close{
    width:34px;
    height:34px;
    font-size:1.25rem;
  }

  .catalog-modal-image img{
    max-height:360px;
  }

  .catalog-maker-index-block{
    margin-bottom:160px;
  }

}

@media screen and (max-width:430px){

  .catalog-page .catalog-inner{
    width:92%;
  }

  .catalog-icon-grid{
    grid-template-columns:1fr;
  }

  .catalog-genre-grid{
    display:flex;
  }

  .catalog-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .catalog-card-button{
    min-height:280px;
  }

  .catalog-card-image{
    height:108px;
  }

  .catalog-list-page{
  padding-bottom:30px;
  }

}

/* list.php SP補正 */
@media screen and (max-width:688px){

  .catalog-list-page .catalog-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .catalog-list-page .catalog-card{
    min-width:0;
  }

  .catalog-list-page .catalog-card-button{
    min-height:285px;
    padding:9px 20px 20px;
  }

  .catalog-list-page .catalog-card-image{
    height:110px;
  }

  .catalog-list-page .catalog-card-name{
    min-height:3.4em;
    font-size:.78rem;
    line-height:1.35;
  }

  .catalog-list-page .catalog-card-maker,
  .catalog-list-page .catalog-card-quantity{
    font-size:.74rem;
    line-height:1.35;
  }
}

@media screen and (max-width:380px){

  .catalog-list-page .catalog-grid{
    grid-template-columns:1fr;
  }

  .catalog-list-page .catalog-card-button{
    min-height:auto;
  }

}

@media screen and (max-width:688px){

  .catalog-search-row input,
  .catalog-search-row select{
    font-size:16px;
  }

  .catalog-search-row select option{
    font-size:14px;
  }

}