:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;color:#222;background:#f5f6f4}
*{box-sizing:border-box}body{margin:0}header{background:#fff;border-bottom:1px solid #d8ddd6}.wrap{max-width:1120px;margin:auto;padding:18px}
.brand{font-size:1.25rem;font-weight:700;color:#163b23;text-decoration:none}.nav{margin:4px 0 14px;display:flex;gap:14px;flex-wrap:wrap}
.card{background:#fff;border:1px solid #d8ddd6;border-radius:10px;padding:22px;margin:18px 0;box-shadow:0 2px 8px rgba(0,0,0,.04)}
h1{font-size:1.55rem;margin:0 0 18px}h2{font-size:1.15rem}label{display:block;font-weight:600;margin:14px 0 5px}
input[type=text],input[type=password],input[type=url],input[type=number],select,textarea{width:100%;padding:10px;border:1px solid #aeb8ad;border-radius:6px;font-size:1rem;background:#fff}
button,.button{display:inline-block;border:0;border-radius:6px;padding:11px 18px;background:#21653a;color:#fff;font-weight:700;text-decoration:none;cursor:pointer}
.button.secondary,button.secondary{background:#5e6861}.button.danger,button.danger{background:#9a3030}.notice{padding:12px;border-radius:6px;background:#eef6ee;margin:12px 0}.error{background:#fff0f0;color:#8a1f1f}
table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:10px;border-bottom:1px solid #ddd;text-align:left;vertical-align:top}th{background:#eef2ed}
.price{text-align:right;white-space:nowrap}.muted{color:#667}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.product{background:#fff;border:1px solid #d8ddd6;border-radius:8px;padding:16px}.product h3{margin:0 0 6px}.genre{font-size:.85rem;color:#617065}
.qty{display:flex;align-items:center;gap:6px}.qty input{width:76px;text-align:center}.qty button{padding:8px 12px}
.total{font-size:1.2rem;font-weight:700;text-align:right}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#e7eee8;font-size:.85rem}
@media(max-width:700px){.wrap{padding:12px}.card{padding:15px}table.responsive thead{display:none}table.responsive tr{display:block;border-bottom:2px solid #ddd;padding:10px}table.responsive td{display:block;border:0;padding:4px 0}.grid{grid-template-columns:1fr}}


/* Ver.1.0 公開版 */
.selection-card{max-width:760px;margin:30px auto}
.search-row{display:flex;gap:8px;align-items:stretch}
.search-row input{flex:1}
.school-list,.department-list{display:grid;gap:10px;margin-top:16px}
.school-choice{display:block;padding:14px 16px;border:1px solid #c9d2c8;border-radius:8px;background:#fff;color:#163b23;text-decoration:none;font-weight:700}
.school-choice:hover{background:#f0f6f1;border-color:#6f9378}
.selected-school{padding:16px;border-radius:8px;background:#eef6ee;font-size:1.15rem;margin-bottom:18px}
.step-label{margin-bottom:6px;color:#667}
.department-list form{margin:0}
.department-choice{width:100%;display:flex;justify-content:flex-start;align-items:center;text-align:left;padding:15px 16px}
.top-change-link{margin-bottom:18px}
.recent-selection{margin-bottom:20px}
.recent-selection-box{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;border:1px solid #b8cbb9;border-radius:9px;background:#eef6ee}
.recent-selection-box strong{display:block;font-size:1.12rem}
.recent-change{margin:10px 0 0}
.grade-group{margin-top:26px}
.grade-group h2{margin:0 0 10px;padding:9px 12px;border-left:6px solid #206b3d;background:#eef6ee;font-size:1.12rem}
.grade-group summary{margin:0;padding:12px 14px;border-left:6px solid #206b3d;background:#eef6ee;font-size:1.12rem;font-weight:700;cursor:pointer;list-style-position:inside}
.grade-group[open] summary{margin-bottom:10px}
.inline-form{display:inline-block;margin:0}
.order-summary-destination{display:grid;gap:4px;padding:14px 16px;margin:14px 0;background:#eef7fc;border:1px solid #8fc4df;border-radius:8px}
.history-order{margin:14px 0;border:1px solid #cfdde5;border-radius:8px;background:#fff}
.history-order summary{padding:14px 16px;cursor:pointer;background:#eef7fc;color:#075f94}
.history-order-body{padding:16px}
.copy-destination-list{display:grid;gap:10px;margin:18px 0}
.copy-destination-choice{display:flex;align-items:center;gap:12px;margin:0;padding:14px 16px;border:1px solid #cfdde5;border-radius:8px;background:#fff;cursor:pointer}
.copy-destination-choice:hover{background:#eef7fc;border-color:#8fc4df}
.copy-destination-choice input{width:1.2rem;height:1.2rem;flex:0 0 auto}
.destination-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.order-destination{display:flex;justify-content:space-between;align-items:center;gap:18px;border:2px solid #93b69a;background:#f4faf5}
.destination-info{flex:1 1 auto}
.destination-cart-link{flex:0 0 auto;font-size:1.1rem;font-weight:700;white-space:nowrap;text-align:center}
.order-destination strong{display:block;font-size:1.25rem}
.order-destination span{display:block;margin-top:4px;font-size:1.05rem}
.checkout-destination{border-width:3px}
.product-filter{display:grid;grid-template-columns:minmax(220px,2fr) minmax(180px,1fr);gap:14px;align-items:end}
.product-filter .filter-actions{grid-column:1 / -1;display:flex;gap:10px;align-items:center}

@media(max-width:700px){
  .search-row{display:block}
  .search-row button{width:100%;margin-top:8px}
  .recent-selection-box{display:block}
  .recent-selection-box .button{display:block;margin-top:12px;text-align:center}
  .order-destination{display:block}
  .order-destination .button{display:block;margin-top:14px;text-align:center}
  .destination-cart-link{display:block;margin-top:14px;text-align:center}
  .destination-actions{display:block}
  .product-filter{display:block}
  .product-filter>div{margin-bottom:12px}
  .product-filter .filter-actions{display:block}
  .product-filter .filter-actions .button,
  .product-filter .filter-actions button{display:block;width:100%;margin-top:8px;text-align:center}
}


/* 商品一覧：ジャンル・商品グループ単位のプルダウン表示 */
.catalog-genre-heading{
  margin:28px 0 12px;
  padding:10px 14px;
  border-left:7px solid #206b3d;
  background:#eef6ee;
  font-size:1.25rem;
}
.group-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;
}
.product-group-card{
  border:1px solid #d1d8d1;
  border-radius:9px;
  background:#fff;
  padding:16px;
}
.product-group-card h3{
  margin:7px 0 15px;
  font-size:1.15rem;
}
.group-order-form select{
  width:100%;
}
.selected-product-detail{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #e1e5e1;
}
.selected-product-price{
  margin:0 0 12px;
  font-size:1.08rem;
}
.dynamic-variation,
.dynamic-input{
  margin-bottom:12px;
}
@media(max-width:700px){
  .group-grid{grid-template-columns:1fr}
}


/* 注文先の学校名と会計区分を横並び表示 */
.destination-line{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.destination-line strong{margin:0}
.department-badge{
  display:inline-block !important;
  margin:0 !important;
  padding:4px 10px;
  border:1px solid #7cae88;
  border-radius:7px;
  background:#eef8f0;
  font-size:0.95rem !important;
  font-weight:700;
  line-height:1.3;
}
.product-group-card h3{margin-top:0}


/* =========================================================
   麒麟書店ブランド版：配色のみ青系へ変更
   既存のレイアウト・プルダウン・カード構造は変更しません。
   ========================================================= */
:root{
  --kirin-blue:#0878b8;
  --kirin-blue-dark:#075f94;
  --kirin-blue-soft:#eef7fc;
  --kirin-blue-border:#8fc4df;
  --kirin-blue-text:#075f94;
}

header{
  background:#fff;
  border-bottom:1px solid #d7e7f0;
}
.brand-header{
  display:flex;
  align-items:center;
  gap:18px;
  padding-top:14px;
  padding-bottom:14px;
}
.brand-logo-link{
  display:block;
  line-height:0;
}
.brand-logo{
  display:block;
  width:min(390px,55vw);
  height:auto;
  max-height:82px;
  object-fit:contain;
  object-position:left center;
}
.brand-system-title{
  padding-left:18px;
  border-left:1px solid #9ac7df;
  color:var(--kirin-blue-dark);
  font-size:1.35rem;
  font-weight:700;
  white-space:nowrap;
}

a{color:var(--kirin-blue-dark)}
button,.button{
  background:var(--kirin-blue-dark);
  border-color:var(--kirin-blue-dark);
}
button:hover,.button:hover{
  background:#064f7b;
}
button.secondary,.button.secondary{
  background:#66747b;
  border-color:#66747b;
}

input:focus,select:focus,textarea:focus{
  border-color:var(--kirin-blue);
  outline:2px solid rgba(8,120,184,.18);
}

.notice{
  border-color:var(--kirin-blue-border);
  background:var(--kirin-blue-soft);
  color:#17445b;
}

.order-destination{
  border-color:var(--kirin-blue-border);
  background:#f5fbfe;
}
.department-badge{
  border-color:var(--kirin-blue-border);
  background:var(--kirin-blue-soft);
  color:var(--kirin-blue-dark);
}

.catalog-genre-heading,
.grade-group h2,
.grade-group summary{
  border-left-color:var(--kirin-blue);
  background:var(--kirin-blue-soft);
  color:var(--kirin-blue-dark);
}

.school-choice:hover{
  background:var(--kirin-blue-soft);
  border-color:var(--kirin-blue-border);
}
.selected-school,
.recent-selection-box{
  background:var(--kirin-blue-soft);
  border-color:var(--kirin-blue-border);
}
.product-group-card{
  border-color:#cfdde5;
}

.nav a{
  color:var(--kirin-blue-dark);
}

@media(max-width:700px){
  .brand-header{
    gap:10px;
    padding-top:10px;
    padding-bottom:10px;
  }
  .brand-logo{
    width:min(270px,62vw);
    max-height:62px;
  }
  .brand-system-title{
    padding-left:10px;
    font-size:.95rem;
    white-space:normal;
    line-height:1.3;
  }
}


/* =========================================================
   PC表示修正：横長ロゴ・青配色の強制適用
   UI構造やプルダウン表示は変更しません。
   ========================================================= */

.brand-header{
  min-height:74px;
  padding-top:10px !important;
  padding-bottom:10px !important;
}

.brand-logo{
  width:auto !important;
  height:auto !important;
  max-width:520px !important;
  max-height:64px !important;
  object-fit:contain !important;
  object-position:left center !important;
}

.brand-system-title{
  color:#075f94 !important;
  border-left-color:#9ac7df !important;
  font-size:1.2rem !important;
}

/* 主要ボタン */
button,
.button,
input[type="submit"]{
  background:#0878b8 !important;
  border-color:#0878b8 !important;
  color:#fff !important;
}

button:hover,
.button:hover,
input[type="submit"]:hover{
  background:#075f94 !important;
  border-color:#075f94 !important;
}

button.secondary,
.button.secondary{
  background:#66747b !important;
  border-color:#66747b !important;
  color:#fff !important;
}

/* 注文先・学校選択・会計区分 */
.order-destination{
  background:#f4faff !important;
  border-color:#8fc4df !important;
}

.department-badge{
  background:#eef7fc !important;
  border-color:#8fc4df !important;
  color:#075f94 !important;
}

.selected-school,
.recent-selection-box{
  background:#eef7fc !important;
  border-color:#8fc4df !important;
}

.school-choice:hover{
  background:#eef7fc !important;
  border-color:#8fc4df !important;
}

/* ジャンル・学年見出し */
.catalog-genre-heading,
.grade-group h2,
.grade-group summary{
  background:#eef7fc !important;
  border-left-color:#0878b8 !important;
  color:#075f94 !important;
}

/* 入力フォーカス */
input:focus,
select:focus,
textarea:focus{
  border-color:#0878b8 !important;
  outline-color:rgba(8,120,184,.18) !important;
}

/* リンク */
.nav a,
a{
  color:#075f94;
}

/* お知らせ */
.notice{
  background:#eef7fc !important;
  border-color:#8fc4df !important;
  color:#17445b !important;
}

@media(max-width:700px){
  .brand-header{
    min-height:auto;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  .brand-logo{
    width:auto !important;
    max-width:65vw !important;
    max-height:58px !important;
  }

  .brand-system-title{
    font-size:.95rem !important;
    line-height:1.3 !important;
  }
}


/* Ver.1.01：長いジャンル名の折り返し */
.catalog-genre-heading{
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.45;
}
@media(max-width:700px){
  .catalog-genre-heading{
    font-size:1.05rem;
    padding:10px 12px;
  }
}


/* Ver.1.01：掲載外商品入力欄 */
.special-request{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid #d4e2ea;
}
.special-request h2,
.notice h2{
  margin:0 0 8px;
  font-size:1.1rem;
}
.special-request textarea{
  width:100%;
}


/* Ver.1.01 完成版：最終UI調整 */
.brand-logo{cursor:default !important;user-select:none}
.qty-add-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qty-add-row .qty{margin:0}
.add-cart-button{margin:0 !important;white-space:nowrap}
@media(max-width:700px){
  .qty-add-row{gap:10px}
  .add-cart-button{min-height:44px}
}


/* 先生向けヘルプ */
.header-help-link{
  margin-left:auto;
  padding:8px 13px;
  border:1px solid var(--kirin-blue-border);
  border-radius:7px;
  background:var(--kirin-blue-soft);
  color:var(--kirin-blue-dark);
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.header-help-link:hover{
  background:#dceff9;
}
.help-intro{
  font-size:1.05rem;
  line-height:1.8;
}
.help-steps{
  display:grid;
  gap:12px;
  margin:18px 0;
  padding:0;
  list-style:none;
  counter-reset:help-step;
}
.help-steps li{
  counter-increment:help-step;
  position:relative;
  min-height:54px;
  padding:12px 14px 12px 62px;
  border:1px solid #cfdde5;
  border-radius:8px;
  background:#fff;
  line-height:1.65;
}
.help-steps li::before{
  content:counter(help-step);
  position:absolute;
  left:14px;
  top:12px;
  display:flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--kirin-blue-dark);
  color:#fff;
  font-weight:700;
}
.help-steps strong{display:block;color:var(--kirin-blue-dark)}
.help-faq{margin:0}
.help-faq dt{margin-top:16px;font-weight:700;color:var(--kirin-blue-dark)}
.help-faq dd{margin:5px 0 0;line-height:1.7}
@media(max-width:700px){
  .brand-header{gap:9px}
  .header-help-link{padding:7px 10px;font-size:.9rem}
}