@charset "UTF-8";
/* ==========================================================================
   お知らせ一覧（irohacord_info.html 専用）
   ・クラス名はすべて inf- で始め、.inf-lp の中だけに効くようにしています
   ・irohacraft2.css の後に読み込んでください
   ・配色／書体は irohacord_qa.css（Q&A）とそろえています
   ========================================================================== */
.inf-lp{
  --inf-main:#4a8c83;
  --inf-main-deep:#2f6a62;
  --inf-tint:#bdd3cd;
  --inf-wash:#eaf1ef;
  --inf-ink:#1b1d1d;
  --inf-gray:#6c7372;
  --inf-line:#d6dbda;
  --inf-text2:#3b4241;
  --inf-white:#ffffff;
  --inf-en:"Jost","Futura","Helvetica Neue",Arial,sans-serif;
  --inf-jp:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  color-scheme:light;
}

/* ===== 基本 ===== */
.inf-lp{font-family:var(--inf-jp);color:var(--inf-ink);background:var(--inf-white);line-height:1.9;font-size:15px;letter-spacing:.04em;-webkit-font-smoothing:antialiased;padding-bottom:88px}
.inf-lp *,.inf-lp *::before,.inf-lp *::after{box-sizing:border-box}
.inf-lp a{color:var(--inf-main-deep);text-decoration:none}
.inf-lp a:hover{text-decoration:none}
/* サイト共通CSS（見出し・リンクの色や揃え）を打ち消す */
.inf-lp :where(p,h1,h2,h3,h4,li){text-align:inherit;color:inherit}
.inf-lp :where(p,ul,ol,li,h1,h2,h3,h4){margin:0;padding:0}
.inf-lp h1,.inf-lp h2,.inf-lp h3,.inf-lp h4{font-weight:500;text-wrap:balance;background:none;border:0}
.inf-lp ul{list-style:none}
.inf-wrap{max-width:1080px;margin:0 auto;padding-inline:20px}

/* button */
.inf-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 34px;background:var(--inf-ink);color:#fff!important;font:500 15px/1.4 var(--inf-jp);letter-spacing:.12em;border:1px solid var(--inf-ink);transition:background .25s,border-color .25s,color .25s}
.inf-btn::after{content:"";width:22px;height:1px;background:currentColor;transition:width .25s}
.inf-btn:hover{background:var(--inf-main-deep);border-color:var(--inf-main-deep)}
.inf-btn:hover::after{width:32px}
.inf-btn--line{background:var(--inf-white);color:var(--inf-ink)!important}
.inf-btn--line:hover{background:var(--inf-ink);color:#fff!important;border-color:var(--inf-ink)}
.inf-btn--sm{min-height:44px;padding:0 24px;font-size:13.5px;gap:10px}
.inf-lp a:focus-visible,.inf-lp button:focus-visible,.inf-item__head:focus-visible{outline:2px solid var(--inf-main);outline-offset:3px}

/* ===== HERO ===== */
.inf-hero{text-align:center;padding-block:64px 52px}
.inf-hero__en{font:300 clamp(36px,7vw,68px)/1 var(--inf-en);letter-spacing:.14em;text-transform:uppercase}
.inf-hero__jp{font-size:clamp(20px,3.6vw,26px);letter-spacing:.2em;line-height:1.5;margin-top:14px!important;display:inline-flex;align-items:center;gap:16px}
.inf-hero__jp::before,.inf-hero__jp::after{content:"";width:28px;height:1px;background:var(--inf-main)}
.inf-hero__sub{margin-top:26px!important;color:var(--inf-text2);font-size:14.5px;line-height:2.1}

/* ===== カテゴリバッジ ===== */
.inf-tag{display:inline-flex;align-items:center;padding:3px 10px;font-size:11.5px;line-height:1.5;letter-spacing:.08em;font-weight:500;border:1px solid;border-radius:999px;white-space:nowrap}
.inf-tag--bag    {color:#2f6a62;background:#eaf1ef;border-color:#bdd3cd}
.inf-tag--macrame{color:#8a5634;background:#f6ece4;border-color:#e3c9b6}
.inf-tag--event  {color:#76601f;background:#f6f0dd;border-color:#e2d3a6}
.inf-tag--new    {color:#9a4455;background:#f8eaed;border-color:#e8c3cb}
.inf-tag--news   {color:var(--inf-ink);background:var(--inf-white);border-color:var(--inf-ink)}

/* ===== 絞り込み ===== */
.inf-filter{border-top:1px solid var(--inf-ink);border-bottom:1px solid var(--inf-line)}
.inf-filter .inf-wrap{padding-block:14px}
.inf-filter ul{display:flex;flex-wrap:wrap;gap:6px}
.inf-filter button{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:5px 14px;font:inherit;font-size:13px;line-height:1.6;letter-spacing:.08em;color:var(--inf-ink);background:var(--inf-white);border:1px solid var(--inf-ink);border-radius:0;transition:background .2s,color .2s}
.inf-filter button:hover{background:var(--inf-wash)}
.inf-filter button[aria-pressed="true"]{background:var(--inf-ink);color:#fff}
.inf-filter__dot{width:8px;height:8px;border-radius:50%;background:var(--dot,var(--inf-ink))}
.inf-filter button[aria-pressed="true"] .inf-filter__dot{box-shadow:0 0 0 1px #fff}

/* ===== 一覧（アコーディオン） ===== */
.inf-list{margin-top:40px}
.inf-item{border-bottom:1px solid var(--inf-line);scroll-margin-top:90px}
.inf-item:first-of-type{border-top:1px solid var(--inf-ink)}
.inf-item__head{display:grid;grid-template-columns:210px minmax(0,1fr) auto;align-items:start;gap:10px 40px;padding:26px 4px;cursor:pointer;list-style:none;transition:color .2s}
.inf-item__head::-webkit-details-marker{display:none}
.inf-item__head::marker{content:""}
.inf-item__head:hover{color:var(--inf-main-deep)}
.inf-item__meta{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.inf-date{font:300 22px/1 var(--inf-en);letter-spacing:.08em;color:var(--inf-ink)}
.inf-date small{display:block;font-size:12px;letter-spacing:.2em;color:var(--inf-main);margin-bottom:6px}
.inf-tags{display:flex;flex-wrap:wrap;gap:6px}
.inf-item__title{display:block;font-size:clamp(15.5px,2.2vw,17px);font-weight:500;letter-spacing:.08em;line-height:1.75;padding-top:14px;text-wrap:balance}
.inf-item__ic{position:relative;width:18px;height:18px;margin-top:20px}
.inf-item__ic::before,.inf-item__ic::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--inf-ink);transition:transform .3s}
.inf-item__ic::after{transform:rotate(90deg)}
.inf-item[open] .inf-item__ic::after{transform:rotate(0)}
.inf-item[open] .inf-item__title{color:var(--inf-main-deep)}
.inf-item__body{margin:0 4px 28px 254px;padding:24px 26px;background:var(--inf-wash);border-radius:14px;font-size:14px;color:var(--inf-text2);line-height:1.95;animation:inf-open .35s ease}
.inf-item__body > *{max-width:68ch}
.inf-item__body p{margin:0}
.inf-item__body p + .inf-sub{margin-top:14px}
.inf-sub{font-weight:500;color:var(--inf-ink);letter-spacing:.08em}
.inf-sub::before{content:"";display:inline-block;width:14px;height:1px;background:var(--inf-main);vertical-align:middle;margin-right:10px}
.inf-item__body hr{border:0;border-top:1px dashed var(--inf-tint);margin:16px 0}
.inf-item__body a{border-bottom:1px solid var(--inf-main);padding-bottom:2px;word-break:break-all}
.inf-item__body a b,.inf-item__body a strong{font-weight:500}
.inf-item__body a.inf-btn{border-bottom:1px solid var(--inf-ink);padding-bottom:0;word-break:normal;margin-block:6px}
.inf-item__body .inf-addr{margin-top:6px;padding:14px 18px;background:var(--inf-white);border-radius:10px}
.inf-closed{display:inline-block;font-size:11.5px;letter-spacing:.1em;color:var(--inf-gray);border:1px solid var(--inf-line);background:var(--inf-white);padding:1px 10px;margin:4px 0}
@keyframes inf-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.inf-item__body{animation:none}.inf-item__ic::after{transition:none}}

.inf-empty{padding:48px 4px;text-align:center;color:var(--inf-gray);font-size:14px}
.inf-back{display:flex;justify-content:center;margin-top:64px}

/* ===== スマホ ===== */
@media (max-width:720px){
  .inf-item__head{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;padding:22px 0}
  .inf-item__meta{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px}
  .inf-date{font-size:19px}
  .inf-date small{display:inline;margin:0 6px 0 0}
  .inf-item__title{padding-top:0}
  .inf-item__ic{margin-top:8px}
  .inf-item__body{margin:0 0 22px;padding:18px 16px}
  .inf-btn{width:100%;padding:0 20px}
}