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

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

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

/* ===== HERO ===== */
.icl-hero{text-align:center;padding-block:64px 52px}
.icl-hero__en{font:300 clamp(40px,7vw,68px)/1 var(--icl-en);letter-spacing:.14em;text-transform:uppercase}
.icl-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}
.icl-hero__jp::before,.icl-hero__jp::after{content:"";width:28px;height:1px;background:var(--icl-main)}
.icl-hero__sub{margin-top:26px!important;color:var(--icl-text2);font-size:14.5px;line-height:2.1}
.icl-hero__note{margin-top:10px!important;font-size:12px;color:var(--icl-gray)}
.icl-hero__entry{margin-top:22px!important}

/* ===== エリアナビ ===== */
.icl-areas{border-top:1px solid var(--icl-ink);border-bottom:1px solid var(--icl-line)}
.icl-areas .icl-wrap{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;padding-block:12px}
.icl-areas ul{display:flex;flex-wrap:wrap;gap:4px}
.icl-areas li>*{display:inline-block;padding:5px 11px;font-size:13px;line-height:1.6;letter-spacing:.1em}
.icl-areas a{color:var(--icl-ink)!important;border:1px solid var(--icl-ink);transition:background .2s,color .2s}
.icl-areas a:hover{background:var(--icl-ink);color:#fff!important}
.icl-areas span{color:#b9bfbe;border:1px solid transparent}
.icl-areas__note{font-size:11px;color:var(--icl-gray);margin-left:auto!important}

/* ===== エリア ===== */
.icl-area{padding-top:64px;scroll-margin-top:90px}
.icl-area__head{display:flex;align-items:baseline;gap:18px;padding-bottom:14px;border-bottom:1px solid var(--icl-ink)}
.icl-area__head h3{font-size:22px;letter-spacing:.2em;line-height:1.4}
.icl-area__head span{font:400 11px/1 var(--icl-en);letter-spacing:.26em;text-transform:uppercase;color:var(--icl-main)}
.icl-list{display:flex;flex-direction:column}

/* ===== 教室カード ===== */
.icl-card{display:grid;grid-template-columns:240px minmax(0,1fr);gap:36px;padding-block:36px;border-bottom:1px solid var(--icl-line)}
.icl-card__fig{aspect-ratio:1/1;max-width:100%;border-radius:14px;overflow:hidden;background:var(--icl-mist)}
.icl-card__fig img{width:100%;height:100%;object-fit:cover}

/* 画像なし：コードのマス目＋頭文字 */
.icl-noimg{position:relative;width:100%;height:100%;background:var(--icl-wash);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;padding:16px;text-align:center}
.icl-noimg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--icl-tint) 1px,transparent 1px),linear-gradient(90deg,var(--icl-tint) 1px,transparent 1px);background-size:16px 16px;opacity:.6}
.icl-noimg>*{position:relative}
.icl-noimg__ch{width:84px;height:84px;border-radius:50%;background:var(--icl-white);border:1px solid var(--icl-main);display:flex;align-items:center;justify-content:center;font:300 38px/1 var(--icl-en);color:var(--icl-main-deep)}
.icl-noimg__n{font:400 11px/1.5 var(--icl-en);letter-spacing:.18em;color:var(--icl-main-deep);max-width:90%}

.icl-card__body{display:flex;flex-direction:column;gap:14px;min-width:0}
.icl-card__pref{font-size:12px;letter-spacing:.2em;color:var(--icl-main-deep);display:flex;align-items:center;gap:10px}
.icl-card__pref::before{content:"";width:18px;height:1px;background:var(--icl-main)}
.icl-card__name{font-size:clamp(22px,3vw,28px);letter-spacing:.08em;line-height:1.4;margin-top:-6px!important}
.icl-card__sub{font-size:13px;color:var(--icl-gray);margin-top:-10px!important;letter-spacing:.08em}
.icl-card__place{display:flex;gap:8px;font-size:13.5px;color:var(--icl-text2);line-height:1.7}
.icl-card__place svg{flex:none;width:17px;height:17px;margin-top:3px;fill:none;stroke:var(--icl-main);stroke-width:1.5}

.icl-card__meta{display:grid;grid-template-columns:auto auto;justify-content:start;gap:12px 36px;border-top:1px solid var(--icl-line);border-bottom:1px solid var(--icl-line);padding-block:14px}
.icl-meta{display:flex;flex-direction:column;gap:8px}
.icl-meta__k{font:400 10.5px/1 var(--icl-en);letter-spacing:.26em;text-transform:uppercase;color:var(--icl-gray)}
.icl-items,.icl-modes{display:flex;flex-wrap:wrap;gap:6px}
.icl-items li{font-size:12.5px;padding:5px 11px;border:1px solid var(--icl-ink);line-height:1.4;letter-spacing:.06em}
.icl-items li.is-on{background:var(--icl-ink);color:#fff}
.icl-items li.is-off{border-color:var(--icl-line);color:var(--icl-off);text-decoration:line-through;text-decoration-color:#cfd4d3}

/* 対面／オンライン */
.icl-mode{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;padding:4px 12px 4px 8px;border:1px solid var(--icl-main);color:var(--icl-main-deep);border-radius:999px;line-height:1.4}
.icl-mode svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icl-mode.is-on{background:var(--icl-wash)}
.icl-mode.is-off{border-color:var(--icl-line);color:var(--icl-off);border-style:dashed}
.icl-mode.is-off span{text-decoration:line-through}

/* インストラクター講座 */
.icl-instr{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--icl-main-deep);background:linear-gradient(transparent 62%,var(--icl-tint) 62%);padding-inline:2px}
.icl-instr svg{width:20px;height:20px;fill:none;stroke:var(--icl-main);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.icl-com{display:flex;flex-direction:column;gap:.6em;font-size:14px;color:var(--icl-text2);line-height:1.95;max-width:62ch}
.icl-con{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:2px!important}
.icl-con a{font:500 12px/1 var(--icl-en);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--icl-main);padding-bottom:4px;display:inline-block}
.icl-con a:hover{color:var(--icl-ink)}

/* ===== 掲載申込 ===== */
.icl-entry{margin-top:88px;border:1px solid var(--icl-ink);padding:40px clamp(20px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 48px;scroll-margin-top:90px}
.icl-entry__en{font:300 clamp(34px,4.6vw,48px)/1 var(--icl-en);letter-spacing:.04em}
.icl-entry__jp{font-size:16px;letter-spacing:.14em;color:var(--icl-main-deep);margin-top:12px!important;line-height:1.7}
.icl-entry__jp small{display:block;font-size:12px;color:var(--icl-gray);letter-spacing:.08em}
.icl-entry__body{display:flex;flex-direction:column;gap:1em;font-size:14px;color:var(--icl-text2)}
.icl-entry__cta{margin-top:8px!important}
.icl-entry__note{font-size:12.5px;color:var(--icl-gray);border-top:1px solid var(--icl-line);padding-top:16px;margin-top:8px!important}
.icl-entry__note a{word-break:break-all}

.icl-more{margin-top:56px;text-align:center}
.icl-more__t{display:inline-flex;align-items:center;gap:14px;font-size:16px;letter-spacing:.16em;margin-bottom:18px!important}
.icl-more__t::before,.icl-more__t::after{content:"";width:28px;height:1px;background:var(--icl-main)}
.icl-more__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

/* ===== レッスン内容で絞り込み ===== */
.icl-lp [hidden]{display:none!important}
.icl-crafts{border-top:1px solid var(--icl-ink)}
.icl-crafts .icl-wrap{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding-block:14px}
.icl-crafts__k{font:500 11px/1 var(--icl-en);letter-spacing:.26em;text-transform:uppercase;color:var(--icl-main);min-width:5.2em}
.icl-crafts ul{display:flex;flex-wrap:wrap;gap:6px}
.icl-crafts button{appearance:none;cursor:pointer;padding:6px 18px;font:500 13.5px/1.6 var(--icl-jp);letter-spacing:.1em;color:var(--icl-ink);background:var(--icl-white);border:1px solid var(--icl-ink);border-radius:999px;transition:background .2s,color .2s}
.icl-crafts button:hover{background:var(--icl-wash)}
.icl-crafts button[aria-pressed="true"]{background:var(--icl-ink);color:#fff}
.icl-crafts button:focus-visible{outline:2px solid var(--icl-main);outline-offset:2px}
.icl-crafts + .icl-areas{border-top:1px solid var(--icl-line)}
.icl-areas a.is-empty{color:#b9bfbe!important;border-color:transparent;pointer-events:none}
.icl-empty{padding:56px 0;text-align:center;color:var(--icl-gray);font-size:14px}

/* ===== スマホ ===== */
@media (max-width:720px){
  .icl-card{grid-template-columns:1fr;gap:20px;padding-block:32px}
  .icl-card__fig{aspect-ratio:4/3}
  .icl-card__meta{grid-template-columns:1fr}
  .icl-entry{grid-template-columns:1fr}
  .icl-btn{width:100%;padding:0 20px}
}