/* Page-level look matched to the saved reference site. Loaded after site.css, so it overrides it.
   Palette: text #666, borders #ddd, mint accent #6ccaab, green #00915d, closed days #ff8892. */
:root {--green:#00915d;--mint:#6ccaab;--ink:#666;--muted:#999;--line:#ddd;--paper:#fff;
  font-family:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-size:14px;line-height:1.6}
body {color:#666;font-size:14px;line-height:1.6;background:#fff;overflow-x:hidden}
a {color:var(--green)}
main {max-width:1040px;padding:30px 20px 60px}
.notice {background:#fff8e1;color:#665a2e;font-size:16px;line-height:1.7;text-align:center;padding:8px 20px;border-bottom:1px solid #f0e2b0}
h1 {font-size:24px;font-weight:700;color:#666;margin:0 0 20px;line-height:1.5}
h2 {color:#666}
.eyebrow {color:#999;font-size:12px;letter-spacing:.04em;font-weight:400;margin:0}
.button {background:var(--mint);color:#fff;border-radius:5px}
.button:disabled {background:#ddd;color:#999}

/* ---- Product cards (listing pages and home) ---- */
.grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.card.item-info {display:flex;flex-direction:column;position:relative;border:2px solid #ddd;border-radius:5px;background:#fff;overflow:hidden;box-shadow:none;text-decoration:none;color:#666}
.card.item-info:hover {border-color:var(--mint);box-shadow:none}
.card.item-info[hidden] {display:none}
.item-image {display:block}
.item-info .card-image {display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff}
.item-info .placeholder.small {aspect-ratio:1;border:0;border-radius:0}
.item-info .caption {position:relative;flex:1;display:flex;flex-direction:column;border-top:1px solid #ddd;padding:15px}
.item-info .item-title {display:block;font-size:14px;font-weight:700;line-height:1.5;color:#666;text-decoration:none;margin-bottom:20px;padding-right:0}
.item-info .item-title:hover {color:var(--green)}
.item-info .item-price {font-size:12px;font-weight:400;line-height:1.7;margin:0 0 5px;color:#666}
.item-info .item-price small {font-size:10px;color:#999;margin-left:.3em}
.item-info .item-delivery-date {align-self:flex-start;margin:auto 0 0;font-size:10px;line-height:1.5;background:#f7f7f7;padding:5px 10px;color:#666}
.item-info .item-delivery-date small {font-size:10px;color:#999}
.item-info .fav-btn {position:absolute;right:15px;bottom:15px;pointer-events:none;opacity:.7}
.item-info .fav-btn img {display:block;width:24px;height:auto}

/* ---- Home page ---- */
.page-home main {max-width:none;padding:0;min-height:0}
.contents-inner {max-width:1040px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.parts {padding:60px 0}
.line-tit {display:flex;align-items:center;margin:0 0 30px;font-size:28px;font-weight:500;color:#666;line-height:1.4}
.line-tit:before,.line-tit:after {content:"";flex:1 1 auto;height:1px;background:#444}
.line-tit .inner {display:inline-block;padding:0 45px;text-align:center}
.line-tit .eng {display:inline-block;padding-left:20px;font-size:13px;font-weight:700;color:#b9b9b9}
.line-tit.is-plain:before,.line-tit.is-plain:after {display:none}
.line-tit.is-plain .inner {padding:0;text-align:left;font-size:30px}
.line-tit.is-plain .eng {padding-left:15px}

/* Banner slider */
.home-slider {max-width:1300px;margin:0 auto;padding:70px 0 30px;border-bottom:1px solid #eee}
.hs-viewport {position:relative;overflow:hidden}
.hs-track {display:flex;transition:transform .8s ease}
.hs-slide {display:block;flex:0 0 80%;min-width:0}
.hs-slide img {display:block;width:100%;height:auto}
.hs-thumbs {display:flex;gap:12px;max-width:1012px;margin:10px auto 0;padding:0 6px;box-sizing:border-box}
.hs-thumbs button {flex:1 1 0;min-width:0;padding:0;border:0;background:none;cursor:pointer;opacity:.55;transition:opacity .2s}
.hs-thumbs button[aria-current=true],.hs-thumbs button:hover {opacity:1}
.hs-thumbs img {display:block;width:100%;height:auto}
.hs-arrow {position:absolute;top:50%;z-index:2;width:40px;height:40px;margin-top:-20px;border:0;border-radius:50%;background:#0006;color:#fff;font-size:26px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s}
.hs-arrow[data-carousel-prev] {left:11%}
.hs-arrow[data-carousel-next] {right:11%}
.hs-viewport:hover .hs-arrow,.hs-arrow:focus-visible {opacity:1}

/* Important news */
.news-bar {position:relative;display:flex;align-items:stretch;border:1px solid #ddd;border-radius:5px;overflow:hidden}
.news-title {flex:0 0 200px;display:flex;align-items:center;justify-content:center;margin:-1px 0 -1px -1px;border:2px solid #ff4040;border-radius:5px;background:#fff;color:#ff4040;font-size:17px;font-weight:700;padding:15px 20px}
.news-list {flex:1;margin:0;padding:0;list-style:none}
.news-list li {display:flex;padding:15px 40px;font-size:14px;line-height:1.6}
.news-list li+li {padding-top:0}
.news-list .date {flex:0 0 130px;color:#666}
.news-list .text {padding-left:35px;font-weight:700;color:#ff4040}
.news-list .text a {color:#ff4040;text-decoration:none}

.parts-news {padding:40px 0 0}
.parts-news+.parts {padding-top:50px}

.news-more {margin:10px 0 0;text-align:right;font-size:13px}
.news-more a {color:#666;text-decoration:none;font-weight:700}
.news-index {margin:0;padding:0;list-style:none;font-size:14px;font-weight:700}
.news-index li {display:flex;gap:20px;padding:16px 0;border-bottom:1px solid #ddd}
.news-index b {flex:0 0 90px;color:#c0c0c0}
.news-index a {color:#666;text-decoration:none}
.news-index a:hover {color:var(--green)}
.news-article {max-width:760px}
.news-article .news-date {margin:0 0 4px;color:#999;font-size:13px}
.news-article p {line-height:1.9}
.notice a {color:inherit;font-weight:700;margin-left:.5em}

/* Category tiles */
.category-tiles {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:0;padding:0;list-style:none}
.category-tiles a,.category-tiles .is-pending {display:flex;align-items:center;height:60px;border:2px solid #ddd;border-radius:5px;color:#666;font-size:14px;font-weight:700;text-decoration:none;box-sizing:border-box;background:#fff}
.category-tiles a:hover {border-color:var(--mint)}
.category-tiles .is-pending {color:#bbb}
.category-tiles img {flex:0 0 46px;width:46px;height:46px;margin:0 12px;object-fit:contain}
.category-tiles .placeholder-icon {flex:0 0 46px;height:46px;margin:0 12px}
.category-tiles p {margin:0;padding-right:12px;line-height:1.25}

.parts-top-bnr {padding:0 0 60px}
.parts-top-bnr a {display:block;width:calc(100% - 30px);max-width:680px;margin:auto}
.parts-top-bnr img {display:block;width:100%;height:auto}

#new-items {background:#f7f7f7}
#new-items .more {margin:20px 0 0;text-align:right}
#new-items .more a {color:#666;font-size:23px;font-weight:700;text-decoration:none}

/* Business calendar */
.page-home .business-calendar {display:flex;align-items:center;gap:30px;width:auto;max-width:1000px;margin:0 auto;padding:35px 80px 35px 35px;border:2px solid #ddd;border-radius:5px;background:#fff;box-sizing:border-box}
.business-calendar .calendar-title {flex:0 0 28%;text-align:center}
.business-calendar .calendar-title h2 {margin:0 0 10px;font-size:18px;font-weight:700}
.business-calendar .holiday {position:relative;display:inline-block;margin:0;padding-left:40px;font-size:10px;font-weight:700;line-height:1.4;text-align:left}
.business-calendar .holiday:before {content:"";position:absolute;top:0;bottom:0;left:0;width:30px;background:#ff8892}
.business-calendar .calendar-note {margin:10px 0 0;font-size:10px;color:#999;line-height:1.5}
.business-calendar .calendar-months {flex:1;display:flex;gap:30px}
.business-calendar .calendar-month {flex:1 1 0;max-width:273px;padding:0;border:0;border-radius:0;background:none}
.business-calendar .calendar-month h3 {margin:0 0 6px;padding-bottom:5px;border-bottom:1px solid #ddd;font-size:14px;font-weight:700;text-align:center}
.business-calendar .calendar-month th {padding:6px 2px;border:1px solid #ddd;background:#fff;font-size:12px;font-weight:700}
.business-calendar .calendar-month td {height:auto;padding:6px 2px;border:1px solid #ddd;font-size:12px}
.business-calendar .calendar-month td.is-closed {background:#ff8892;color:#fff}
.business-calendar .calendar-month td.is-today {outline:2px solid #666;outline-offset:-3px}
.business-calendar .calendar-month td.calendar-empty {background:#fff}
.business-calendar .calendar-warning {flex-basis:100%;margin:0;color:#c0392b;font-size:12px}

/* ---- Listing, category and theme pages ---- */
.intro {padding:0 0 10px}
.search-bar {max-width:none;margin:10px 0 24px}
.search-bar input {border:2px solid #ccc;border-radius:5px;padding:10px 14px}
.category-title {padding:0;border:0;font-size:28px;font-weight:400;margin:0 0 24px}
.subcategory-nav {gap:10px;margin:0 0 24px}
.subcategory-nav a {padding:8px 20px;border:1px solid var(--mint);border-radius:20px;color:var(--mint);font-size:14px;font-weight:700}
.subcategory-nav a:hover,.subcategory-nav a[aria-current=page] {background:var(--mint);border-color:var(--mint);color:#fff}
.back {color:#999;font-size:12px}
.category-tile,.genre-tile {border:2px solid #ddd;border-radius:5px}
a.category-tile:hover,.genre-tile:hover {border-color:var(--mint);box-shadow:none;background:#fff}
.category-copy h2 {font-size:16px}

/* ---- Product page ---- */
.breadcrumb {display:flex;flex-wrap:wrap;margin:0 0 24px;padding:0;list-style:none;font-size:12px;color:#999}
.breadcrumb a {color:var(--mint);text-decoration:none}
.breadcrumb li+li:before {content:">";padding:0 .7em;color:#ccc}
.product-heading h1 {font-size:24px}
.product-heading .eyebrow {margin-bottom:6px}
.variation-select {margin:0 0 16px}
.variation-select label {display:block;margin:0 0 6px;font-size:12px;font-weight:700;color:#666}
.variation-select select {width:100%;max-width:100%;padding:10px 36px 10px 12px;border:2px solid #ccc;border-radius:5px;background:#fff;color:#666;font:inherit;font-size:14px;cursor:pointer;box-sizing:border-box}
.variation-select select:focus-visible {outline:3px solid var(--mint);outline-offset:2px;border-color:var(--mint)}
.variation-select noscript ul {margin:8px 0 0;padding-left:1.2em;font-size:12px}
.category-list {display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.category-list a {padding:2px 12px;border:1px solid #ddd;border-radius:3px;background:#f7f7f7;color:#999;font-size:12px;text-decoration:none}
.category-list a:hover {border-color:var(--mint);color:var(--mint)}
.product-heading .deadline-tool {margin:0 0 20px;display:flex;flex-wrap:wrap;align-items:stretch;gap:10px 14px}
.deadline-tool>p {margin:0;padding:9px 14px;background:#ffd6d6;font-weight:700;color:#666;display:flex;align-items:center}
.deadline-open {border:1px solid #ccc;background:#fff;color:#666;border-radius:5px;padding:8px 14px;font-weight:700}
.deadline-open:hover {border-color:var(--mint);color:var(--mint)}
.product-description {font-size:14px;line-height:1.9;color:#666}
.enquiry {margin-top:24px;padding:0;background:none;border-radius:0}
.enquiry h2 {font-size:14px;margin:0 0 6px}
.enquiry p {font-size:12px;color:#999}
.enquiry .button {display:block;width:100%;box-sizing:border-box;text-align:center;padding:16px;font-size:18px;border-radius:5px;margin-top:12px}
.gallery-main {border:0;border-radius:0}
.gallery-thumbs {grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.gallery-thumbs a {border:2px solid transparent;border-radius:0}
.gallery-thumbs a[aria-current=true] {border-color:var(--mint)}
.specifications>h2,.product-layout~section>h2 {padding:0 0 8px;border:0;border-bottom:2px solid var(--mint);font-size:20px;font-weight:500;color:#666;margin:48px 0 20px}
.specifications table {font-size:14px}
.specifications th,.specifications td {border:1px solid #ddd;padding:8px 16px}
.specifications th {width:200px;background:#fff;text-align:center;font-weight:400;color:#666}
.specifications tr:nth-child(even) th,.specifications tr:nth-child(even) td {background:#f5f5f5}
.variations a {border:1px solid #ddd;border-radius:5px}
.variations a[aria-current] {border-color:var(--mint);background:#fff}

/* ---- Price table (価格表) ---- */
.price-notes {font-size:13px;line-height:1.8;margin:0 0 10px}
.price-notes p {margin:0}
.price-caption {margin:32px 0 12px;padding-left:10px;border-left:3px solid var(--mint);font-size:18px;font-weight:500;color:#666}
.table-wrap {overflow-x:auto;margin:0 0 8px;-webkit-overflow-scrolling:touch}
.table-wrap:focus-visible {outline:3px solid var(--mint);outline-offset:2px}
.price-table {border-collapse:collapse;min-width:100%;font-size:12px;line-height:1.5;background:#fff}
.price-table th,.price-table td {border:1px solid #ddd;padding:8px 12px;text-align:center;white-space:nowrap}
.price-table thead th {background:var(--mint);color:#fff;font-weight:700}
.price-table tbody th {position:sticky;left:0;z-index:1;background:#fff;font-weight:400;text-align:left}
.price-table thead th.th-key {position:sticky;left:0;z-index:2}
.price-table tbody tr:nth-child(even) th,.price-table tbody tr:nth-child(even) td {background:#f5f5f5}
.price-table tbody tr.is-current th {box-shadow:inset 3px 0 0 var(--mint);font-weight:700}
.price-table tbody tr.is-current td {background:#e9f7f2}

/* ---- Template downloads and manuscript flow ---- */
.product-summary .button-template {display:block;margin-top:14px;padding:12px;background:#fc7f86;color:#fff;border-radius:5px;text-align:center;font-weight:700;font-size:14px;line-height:1.5;text-decoration:none}
.product-summary .button-template:hover {background:#f26a72}
.button-template-icon {display:block;font-size:20px;line-height:1}
.template-table {border-collapse:collapse;width:100%;font-size:14px;background:#fff}
.template-table th,.template-table td {border:1px solid #ddd;padding:10px 16px;text-align:center}
.template-table thead th {background:var(--mint);color:#fff;font-weight:700}
.template-table tbody td:first-child {text-align:left}
.template-table tbody tr:nth-child(even) td {background:#f5f5f5}
.download {display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:#3d8bd6;border-radius:50%}
.download:hover,.download:focus-visible {background:#e8f1fb}
.pending-download {color:#999;font-size:12px}
.notes {margin:10px 0 0;padding:0;list-style:none;font-size:13px}
.manuscript-flow {margin:0 auto;padding:0;max-width:760px;list-style:none}
.manuscript-flow li {position:relative;margin:0 0 26px;padding:18px 24px;background:#4c6073;color:#fff;font-weight:700;text-align:center;line-height:1.7}
.manuscript-flow li:not(:last-child):after {content:"";position:absolute;left:50%;top:100%;margin-left:-12px;border:12px solid transparent;border-top-color:#4c6073}

/* ---- Tablet / phone ---- */
@media(max-width:991px){
  .grid,.category-tiles {grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-home .business-calendar {flex-direction:column;padding:25px}
  .business-calendar .calendar-title {flex-basis:auto}
  .business-calendar .calendar-months {width:100%;justify-content:center}
}
@media(max-width:767px){
  main {padding:20px 15px 50px}
  h1 {font-size:20px}
  .parts {padding:40px 0}
  .contents-inner {padding:0 20px}
  .line-tit {font-size:22px}
  .line-tit .inner {padding:0 18px}
  .line-tit.is-plain .inner {font-size:20px}
  .line-tit .eng {display:block;padding:0;font-size:11px}
  .home-slider {padding:20px 0 20px}
  .hs-slide {flex-basis:88%}
  .hs-thumbs,.hs-arrow {display:none}
  .grid,.category-tiles {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .item-info .caption {padding:10px}
  .item-info .item-title {font-size:12px;margin-bottom:8px}
  .item-info .item-price {font-size:10px}
  .item-info .fav-btn {right:10px;bottom:10px}
  .item-info .fav-btn img {width:20px}
  .site-header .header-inner {flex-direction:row;justify-content:flex-start;align-items:center;padding:0}
  /* Category tiles become picture tiles with a dark overlay and centred white text, as on the live site. */
  .category-tiles {grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
  .category-tiles a,.category-tiles .is-pending {position:relative;height:100px;overflow:hidden;border:0;border-radius:0;justify-content:center;text-align:center;color:#fff;font-size:13px}
  .category-tiles a:before {content:"";position:absolute;inset:0;z-index:1;background:rgba(68,68,68,.65)}
  .category-tiles img {position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0;object-fit:cover}
  .category-tiles p {position:relative;z-index:2;padding:0 6px}
  .news-bar {display:block}
  .news-title {display:block;margin:0;border-radius:5px 5px 0 0;font-size:12px;text-align:left;padding:7px 20px}
  .news-list li {display:block;padding:10px 20px}
  .news-list .date {font-size:10px}
  .news-list .text {display:block;padding:0;font-size:12px}
  #new-items .more a {font-size:20px}
  .business-calendar .calendar-months {flex-direction:column;gap:20px}
  .business-calendar .calendar-month {max-width:none}
  .product-layout {grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.hs-track{transition:none}}

/* Manuscript-notes parts (parts.csv): the old site's 原稿作成時の注意 blocks, rebuilt without their own <style>. */
.manuscript-parts { margin: 32px 0; }
.manuscript-parts .part { margin-bottom: 32px; }
.manuscript-parts h3 { margin: 18px 0 12px; padding: 8px 12px; font-size: 1.25rem; background: #6ccaab; color: #fff; }
.manuscript-parts h4 { margin: 20px 0; padding-bottom: 5px; border-bottom: solid 2px #6ccaab; font-size: 1.1rem; }
.manuscript-parts .row::after, .manuscript-parts .mb20::after { content: ""; display: block; clear: both; }
.manuscript-parts .clear { clear: both; }
.manuscript-parts [class*="col-sm-"] { box-sizing: border-box; padding: 0 8px; margin-bottom: 12px; }
.manuscript-parts img { max-width: 100%; height: auto; }
.manuscript-parts .boxHeadExplan { padding: 0 8px 10px; line-height: 1.6; color: #473f33; }
.manuscript-parts .colorRed { color: #df3f86; }
.manuscript-parts .fontSize09 { font-size: 9px; }
.manuscript-parts .fontSize12 { font-size: 12px; }
.manuscript-parts .fontSize14 { font-size: 14px; }
.manuscript-parts .fontSize15 { font-size: 15px; }
.manuscript-parts .fontSize16 { font-size: 16px; }
.manuscript-parts .fontSize17 { font-size: 17px; }
.manuscript-parts .fontSize18 { font-size: 18px; }
.manuscript-parts .fontSize19 { font-size: 19px; }
.manuscript-parts .fontSize20 { font-size: 20px; }
.manuscript-parts .lead { font-size: 1.15em; font-weight: bold; }
.manuscript-parts .mt15 { margin-top: 15px; }
.manuscript-parts .mt20 { margin-top: 20px; }
.manuscript-parts .mL10 { margin-left: 10px; }
.manuscript-parts table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.manuscript-parts th, .manuscript-parts td { border: 1px solid #ddd; padding: 6px 10px; text-align: left; }
.manuscript-parts th { background: #f3fbf8; }
.manuscript-parts ul, .manuscript-parts ol { padding-left: 1.4em; line-height: 1.7; }
@media (min-width: 768px) {
  .manuscript-parts .col-sm-3 { float: left; width: 25%; }
  .manuscript-parts .col-sm-4 { float: left; width: 33.333%; }
  .manuscript-parts .col-sm-8 { float: left; width: 66.666%; }
  .manuscript-parts .col-sm-9 { float: left; width: 75%; }
  .manuscript-parts .col-sm-12 { float: none; width: 100%; }
}

/* Information pages (ご利用の流れ, よくあるご質問, ...): imported from the old site by scripts/import_info_pages.py.
   Each page's own <style> is scoped to .info-<code> in its HTML; these are the shared defaults. */
.info-page { margin: 0 0 40px; line-height: 1.8; color: #666; }
.info-page h2 { margin: 28px 0 14px; font-size: 1.4rem; }
.info-page h3 { margin: 18px 0 12px; padding: 8px 12px; font-size: 1.25rem; background: #6ccaab; color: #fff; }
.info-page h4 { margin: 20px 0; padding-bottom: 5px; border-bottom: solid 2px #6ccaab; font-size: 1.1rem; }
.info-page h5 { font-size: 1.05rem; margin: 16px 0 8px; }
.info-page img { max-width: 100%; height: auto; }
.info-page table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.info-page th, .info-page td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; vertical-align: top; }
.info-page th { background: #f3fbf8; }
.info-page ul, .info-page ol { padding-left: 1.4em; }
.info-page dt { font-weight: 700; margin-top: 12px; }
.info-page a { color: #00915d; }
.info-page .colorRed { color: #df3f86; }

/* Bootstrap-style grid used by the imported pages. Floated columns are contained by .row / .section / the article
   itself, and every heading and full-width column clears them, so a run of columns can never run into what follows
   (the old pages relied on Bootstrap's clearfix and often had no .row wrapper). Pages that need more than this
   (see pages/manual_acrylic.html) carry their own scoped layout. */
.info-page::after, .info-page .row::after, .info-page .section::after, .info-page .mb20::after { content: ""; display: block; clear: both; }
.info-page h2, .info-page h3, .info-page h4, .info-page h5, .info-page hr { clear: both; }
.info-page .clear { clear: both; }
.info-page [class*="col-"] { box-sizing: border-box; padding: 0 8px; margin-bottom: 12px; }
.info-page [class*="col-"] img { max-width: 100%; height: auto; }
/* Phone width (Bootstrap xs): every column is a full-width block. */
.info-page [class*="col-"] { float: none; width: 100%; }
@media (min-width: 768px) {
  .info-page .col-sm-2, .info-page .col-md-2 { float: left; width: 16.666%; }
  .info-page .col-sm-3, .info-page .col-md-3 { float: left; width: 25%; }
  .info-page .col-sm-4, .info-page .col-md-4 { float: left; width: 33.333%; }
  .info-page .col-sm-5, .info-page .col-md-5 { float: left; width: 41.666%; }
  .info-page .col-sm-6, .info-page .col-md-6 { float: left; width: 50%; }
  .info-page .col-sm-7, .info-page .col-md-7 { float: left; width: 58.333%; }
  .info-page .col-sm-8, .info-page .col-md-8 { float: left; width: 66.666%; }
  .info-page .col-sm-9, .info-page .col-md-9 { float: left; width: 75%; }
  .info-page .col-sm-10, .info-page .col-md-10 { float: left; width: 83.333%; }
  .info-page .col-sm-12, .info-page .col-md-12 { float: none; clear: both; width: 100%; }
}

/* Leftover Bootstrap / WordPress helpers used by the imported information pages. */
.info-page .text-center, .info-page .centered, .info-page .center, .info-page .alignCenter { text-align: center; }
.info-page .text-right { text-align: right; }
.info-page .center-block, .info-page img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.info-page .img-responsive { display: block; max-width: 100%; height: auto; }
.info-page img.alignnone { display: inline-block; max-width: 100%; height: auto; }
.info-page .table-wrap { overflow-x: auto; }
.info-page .clearfix::after { content: ""; display: block; clear: both; }

/* Panels (e.g. the boxed headings on designservice). */
.info-page .panel { margin: 16px 0; border: 1px solid #ddd; border-radius: 4px; }
.info-page .panel-heading { padding: 8px 14px; background: #f3fbf8; border-bottom: 1px solid #ddd; font-weight: 700; }
.info-page .panel-body { padding: 12px 14px; }

/* ご利用の流れ (userguide): the saved page relied on the old site's stylesheet for these. */
/* The "ORDER PROCESS" heading sits in a .panel-heading; on the old site that was an unstyled wrapper, not a boxed panel. */
.info-userguide .panel-heading { padding: 0; background: none; border: 0; font-weight: inherit; }
.info-userguide h2.line-tit { margin: 30px 0; font-size: 28px; font-weight: 500; line-height: 1.4; color: #666; }
.info-userguide h2.line-tit .inner { padding: 0 45px; }
.info-userguide .stepsTopRow { display: flex; align-items: flex-start; justify-content: center; }
/* Match the archived user guide: an open, centered order heading and three aligned columns per step. */
.info-page.info-userguide .panel-heading { padding: 0; background: none; border: 0; font-weight: inherit; }
.info-page.info-userguide h2.line-tit { display: flex; align-items: center; gap: 24px; margin: 30px 0; font-size: 28px; font-weight: 500; line-height: 1.4; color: #666; }
.info-page.info-userguide h2.line-tit::before,
.info-page.info-userguide h2.line-tit::after { content: ""; flex: 1 1 auto; border-top: 1px solid #777; }
.info-page.info-userguide h2.line-tit .inner { display: flex; align-items: center; flex: 0 0 auto; padding: 0; }
.info-page.info-userguide h2.line-tit .jpn { white-space: nowrap; }
.info-page.info-userguide #orderProcess > .row { display: grid; grid-template-columns: 16.666% 25% 58.334%; position: relative; padding-bottom: 44px; }
.info-page.info-userguide #orderProcess > .row > .col-sm-2 { grid-column: 1; grid-row: 1; float: none; width: auto; }
.info-page.info-userguide #orderProcess > .row > .col-sm-3 { grid-column: 2; float: none; width: auto; }
.info-page.info-userguide #orderProcess > .row > .col-sm-7 { grid-column: 3; float: none; width: auto; }
.info-page.info-userguide #orderProcess > .row > .col-sm-2 .arrow-down { position: absolute; left: 0; bottom: 0; width: 16.666%; }
@media (min-width: 768px) {
  .info-page.info-userguide #orderProcess > .row > .col-sm-2 .stepNo { max-width: 90px; margin: 0 auto 10px; }
}
@media (max-width: 767px) {
  /* Bootstrap xs: the step name (4/12) and description (8/12) stay side by side on phones. */
  .info-userguide .col-xs-4 { float: left; width: 33.333%; }
  .info-userguide .col-xs-8 { float: left; width: 66.666%; }
  .info-userguide .col-xs-12 { float: none; width: 100%; }
  .info-userguide .stepsTopRow { display: block; }
}

/* Icon tile list at the top of print_type: Bootstrap "list-group flex-wrap" as a wrapping row of tiles. */
.info-page .list-group { margin: 16px 0; padding: 0; list-style: none; }
.info-page .list-group.flex-wrap { display: flex; flex-wrap: wrap; gap: 12px; }
.info-page .list-group-item { list-style: none; }
.info-page .list-group.flex-wrap .list-group-item { flex: 0 0 calc(20% - 10px); min-width: 120px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; background: #fff; }
.info-page .list-group.flex-wrap .list-group-item a { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; box-sizing: border-box; padding: 12px 8px; text-align: center; text-decoration: none; border-bottom: 0; }
.info-page .list-group.flex-wrap .list-group-item a:hover { background: #f3fbf8; }
.info-page .list-group.flex-wrap .list-group-item p { margin: 0; font-size: .9rem; line-height: 1.4; }
.info-page .category-icon { display: block; width: 100%; max-width: 200px; height: auto; }
/* print_type: the section anchors sat 190px above each heading to clear the old site's fixed header; a small offset is enough here. */
.info-page.info-print_type h4 span { top: -16px; }
@media (max-width: 767px) {
  .info-page .list-group.flex-wrap .list-group-item { flex-basis: calc(50% - 6px); }
}

/* Buttons (Bootstrap .btn). Colours follow the site's mint green. */
.info-page .btn { display: inline-block; padding: 10px 22px; border: 1px solid #00915d; border-radius: 4px; background: #00915d; color: #fff; font-weight: 700; text-align: center; text-decoration: none; }
.info-page .btn:hover { background: #007a4e; }
.info-page .btn-lg { padding: 14px 28px; font-size: 1.1rem; }

/* Old-site in-page anchors were empty <span id> inside headings, pushed up 190px to clear a fixed header. This header
   is not fixed, so keep them in place and leave a little room above the target. */
.info-page h4 > span[id]:empty, .info-page h5 > span[id]:empty { position: static; top: auto; scroll-margin-top: 16px; }
.info-page h4[id], .info-page h5[id] { scroll-margin-top: 16px; }