:root{
  --ink:#111827;
  --sub:#000000;
  --line:#e5e7eb;
  --line-strong:#cbd0d6;
  --field:#f3f4f6;
  --green:#00a35c;
  --green-soft:#e7f6ee;
  --white:#ffffff;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:-apple-system,"Meiryo","Yu Gothic UI","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:900px;margin:0 auto;padding:40px 20px 80px;}

h1{
  font-size:clamp(26px,5vw,34px);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 10px;
}
.lead{
  font-size:14px;
  color:var(--sub);
  margin:0 0 26px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.lead .credit{color:var(--green);font-weight:600;}

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.05);
}

/* currency selector row */
.selectors{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.cur{position:relative;}
.cur-btn{
  width:100%;
  display:flex;align-items:center;gap:12px;
  background:#fff;
  border:1.5px solid var(--line-strong);
  border-radius:11px;
  padding:12px 14px;
  cursor:pointer;
  text-align:left;
  transition:border-color .15s;
}
.cur-btn:hover{border-color:#9aa1aa;}
.cur-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.cur.active .cur-btn{border-color:var(--ink);}
.flag{width:30px;height:21px;border-radius:3px;flex:none;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06);}
.flag svg{display:block;width:100%;height:100%;}
.cur-name{font-weight:700;font-size:17px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cur-code{color:var(--sub);font-size:13px;font-weight:600;flex:none;}
.cur-btn .spacer{flex:1;}
.chev{flex:none;color:#9aa1aa;transition:transform .18s;}
.cur.open .chev{transform:rotate(180deg);}

/* dropdown panel */
.panel{
  position:absolute;z-index:20;top:calc(100% + 8px);left:0;right:0;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(16,24,40,.14);
  padding:8px;display:none;
}
.cur.open .panel{display:block;}
.search{
  width:100%;border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;font-size:14px;margin-bottom:6px;font-family:inherit;
}
.search:focus{outline:none;border-color:var(--green);}
.list{max-height:230px;overflow:auto;}


.opt{
  display:flex;flex-direction:column;gap:3px;
  padding:8px 10px;border-radius:8px;cursor:pointer;
}
.opt:hover{background:var(--field);}
.opt.sel{background:var(--green-soft);}

.opt-top{display:flex;align-items:center;gap:8px;}
.opt-code{font-size:14px;font-weight:800;color:var(--ink);}
.opt-name{
  font-size:14px;font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* amount row */
.amounts{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:14px;margin-top:16px;
}
.field{position:relative;}
.field input{
  width:100%;border:none;background:var(--field);
  border-radius:9px;padding:15px 46px 15px 16px;
  font-size:23px;font-weight:500;color:var(--ink);font-family:inherit;
  border-bottom:2px solid transparent;
}
.field input:focus{outline:none;}
.field.live input{
  background:#fff;
  border-bottom:2px solid var(--green);
  border-radius:9px 9px 0 0;
}
.copy{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  border:none;background:none;cursor:pointer;color:#9aa1aa;padding:4px;
  display:flex;border-radius:6px;
}
.copy:hover{color:var(--ink);}
.copy.done{color:var(--green);}

.swap{
  width:42px;height:42px;border-radius:50%;
  border:1.5px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--green);flex:none;
  transition:transform .3s,box-shadow .15s;
}
.swap:hover{box-shadow:0 2px 10px rgba(0,163,92,.25);}
.swap:active{transform:rotate(180deg);}
.swap:focus-visible{outline:2px solid var(--green);outline-offset:2px;}

.rate-line{
  margin-top:20px;font-size:14px;color:var(--sub);
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;
}
.rate-line b{color:var(--ink);font-weight:700;}

.ad-slot{padding:30px 24px 0;text-align:center;}
.ad-slot img{display:block;margin:0 auto;max-width:100%;height:auto;}

/* --- 地域グループ＋複数列ドロップダウン --- */
.panel{width:580px;max-width:92vw;}
#curFrom .panel{left:auto;right:0;}   /* 左の通貨：右端基準 → 左へ広がる */
#curTo   .panel{left:0;right:auto;}   /* 右の通貨：左端基準 → 右へ広がる */
.list{max-height:340px;}

.group-label{
  font-size:12px;font-weight:700;color:var(--sub);
  padding:10px 8px 4px;letter-spacing:.02em;
}
.group + .group .group-label{border-top:1px solid var(--line);margin-top:4px;}

.group-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:2px;
}


/* --- クイック金額ボタン --- */
.quick{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;
}
.quick-btn{
  border:1px solid var(--line-strong);
  background:#fff;color:var(--ink);
  border-radius:8px;padding:7px 14px;
  font-size:14px;font-weight:600;cursor:pointer;
  font-family:inherit;
  transition:border-color .15s,background .15s;
}
.quick-btn:hover{border-color:var(--green);background:var(--green-soft);}
.quick-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.quick-break{flex-basis:100%;height:0;}

/* --- ペアページの早見表 --- */
.rate-table-wrap{
  max-width:480px;margin:30px auto 0;
}
.rate-table-wrap h2{
  font-size:18px;font-weight:700;margin:0 0 12px;
}
.pair-table{
  width:100%;border-collapse:collapse;font-size:15px;
}
.pair-table td{
  padding:9px 12px;border-bottom:1px solid var(--line);
}
.pair-table td:last-child{
  text-align:right;font-weight:600;color:var(--ink);
}
.pair-table td:first-child{
  color:var(--sub);
}

/* --- 通貨カバレッジ・ショーケース --- */
.cov{margin-top:52px;}
.cov-hero{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding-bottom:20px;border-bottom:2px solid var(--ink);
}
.cov-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);margin:0 0 8px;
}
.cov-big{display:flex;align-items:baseline;gap:12px;line-height:.9;}
.cov-num{font-size:clamp(56px,11vw,104px);font-weight:800;letter-spacing:-.03em;color:var(--ink);}
.cov-word{font-size:clamp(20px,3vw,28px);font-weight:700;color:var(--ink);}
.cov-sub{text-align:right;color:var(--sub);font-size:14px;line-height:1.7;max-width:260px;}
.cov-sub b{color:var(--ink);font-weight:700;}

.cov-index{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 38px;}
.cov-index a{
  font-size:13px;font-weight:600;color:var(--sub);text-decoration:none;
  padding:6px 12px;border:1px solid var(--line);border-radius:999px;transition:all .15s;
}
.cov-index a:hover{color:var(--ink);border-color:var(--ink);}
.cov-index a b{color:var(--green);margin-left:5px;}

.cov-region{margin-bottom:32px;scroll-margin-top:20px;}
.cov-region-head{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;}
.cov-region-head h3{font-size:17px;font-weight:800;margin:0;letter-spacing:-.01em;}
.cov-region-head .cnt{
  font-size:12px;font-weight:700;color:var(--green);
  background:var(--green-soft);padding:2px 9px;border-radius:999px;
}
.cov-region-head .rule{flex:1;height:1px;background:var(--line);align-self:center;}

.cov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:8px;}
.cov-chip{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:transform .12s,border-color .12s,box-shadow .12s;
}
.cov-chip:hover{
  transform:translateY(-2px);border-color:var(--green);
  box-shadow:0 6px 18px rgba(0,163,92,.12);
}
.cov-chip .flag{width:34px;height:24px;border-radius:4px;flex:none;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.07);}
.cov-chip .flag svg{display:block;width:100%;height:100%;}
.cov-chip-text{display:flex;flex-direction:column;min-width:0;line-height:1.3;}
.cov-chip-code{font-size:14px;font-weight:800;color:var(--ink);}
.cov-chip-name{
  font-size:13px;font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}


@media(max-width:768px){.ad-pc{display:none;}}
@media(min-width:769px){.ad-sp{display:none;}}

@media(max-width:620px){
  .wrap{padding:24px 12px 60px;}
  .card{padding:18px 14px;border-radius:14px;}
  .ad-slot{padding:24px 0 0;}
  /* スマホは1本の縦並びにして、from通貨 → 金額 → クイック → swap → to通貨 → 結果 の順にする */
  #converter{display:flex;flex-direction:column;gap:14px;}
  #converter .selectors,
  #converter .amounts{display:contents;}

  /* 箱が消えるぶんの余白は card の gap に任せる */
  .quick{margin-top:0;}
  .rate-line{margin-top:6px;}

  #curFrom   {order:1;}
  #fieldFrom {order:2;}
  #quick     {order:3;}
  #swap      {order:4;align-self:center;}
  #curTo     {order:5;}
  #fieldTo   {order:6;}
  .rate-line {order:7;}

  .swap{margin:0 auto;transform:rotate(90deg);}
  .swap:active{transform:rotate(270deg);}
  .quick-break{display:none;}

  #curFrom .panel,
  #curTo   .panel{left:0;right:0;width:auto;max-width:none;}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;}
}


@media(max-width:600px){
  .cov-sub{text-align:left;}
  .cov-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
}

/* --- サイト全体のヘッダー・フッター・ペア関連 --- */
:root{ --page:#f6f8f9; --green-d:#00854b; }
body{ background:var(--page); }

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1000px;margin:0 auto;padding:0 24px;height:60px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.logo-mark{
  width:34px;height:34px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--green),var(--green-d));
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 2px 8px rgba(0,163,92,.3);
}
.logo-word{font-size:18px;font-weight:800;letter-spacing:-.02em;}
.logo-word .b{color:var(--green);}
.header-nav{display:flex;align-items:center;gap:22px;}
.header-nav a{font-size:14px;font-weight:600;color:var(--sub);text-decoration:none;}
.header-nav a:hover{color:var(--ink);}

.crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--sub);margin-bottom:16px;}
.crumb a{color:var(--sub);text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
.crumb a:hover{color:var(--green);}
.crumb .sep{color:var(--line);}

.related{margin-top:40px;}
.related h2{font-size:17px;font-weight:800;margin:0 0 14px;}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.rel{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;
  text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;transition:all .12s;
}
.rel:hover{border-color:var(--green);color:var(--green-d);transform:translateY(-1px);}
.rel .arr{color:#c3c8ce;}

.site-footer{border-top:1px solid var(--line);background:#fff;margin-top:60px;}
.footer-inner{
  max-width:1000px;margin:0 auto;padding:30px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:13px;color:var(--sub);
}
.footer-inner a{color:var(--sub);text-decoration:none;}
.footer-inner a:hover{color:var(--green);}
.foot-brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);}
.foot-brand .logo-mark{width:26px;height:26px;border-radius:7px;}

@media(max-width:600px){
  .header-nav{gap:14px;}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:12px;}
}

/* --- フッターのサイト一覧 --- */
.footer-sites{border-top:1px solid var(--line);}
.footer-sites-inner{
  max-width:1000px;margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.sites-label{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);margin-right:6px;
}
.footer-sites-inner a{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:7px 13px;border:1px solid var(--line);border-radius:999px;
  font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;
  transition:border-color .15s,color .15s;
}
.footer-sites-inner a:hover{border-color:var(--green);color:var(--green-d);}
.footer-sites-inner .sites-desc{
  font-size:12px;font-weight:500;color:var(--sub);
}

@media(max-width:600px){
  .footer-sites-inner{padding:16px 24px;}
  .footer-sites-inner a{width:100%;justify-content:space-between;}
}

/* --- 言語ドロップダウン --- */
.lang-menu{position:relative;margin-left:4px;}
.lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1.5px solid var(--line-strong);
  border-radius:9px;padding:7px 10px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);
  transition:border-color .15s;
}
.lang-btn:hover{border-color:#9aa1aa;}
.lang-globe{color:var(--green);flex:none;}
.lang-chev{color:#9aa1aa;transition:transform .18s;flex:none;}
.lang-menu.open .lang-chev{transform:rotate(180deg);}

.lang-panel{
  position:absolute;z-index:60;top:calc(100% + 8px);right:0;
  width:440px;max-width:92vw;
  background:#fff;
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(16,24,40,.14);
  padding:8px;display:none;
}
.lang-menu.open .lang-panel{display:block;}
.lang-search{
  width:100%;border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;font-size:14px;margin-bottom:6px;font-family:inherit;
}
.lang-search:focus{outline:none;border-color:var(--green);}
.lang-list{max-height:360px;overflow:auto;}

.lang-opt{
  display:block;
  padding:9px 11px;border-radius:8px;cursor:pointer;text-decoration:none;
}
.lang-opt:hover{background:var(--field);}
.lang-opt.active{background:var(--green-soft);}
.lang-opt-name{
  font-size:14px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lang-opt-code{font-size:12px;font-weight:700;color:var(--sub);text-transform:uppercase;}

/* --- 言語スイッチャーのグループ見出し＋複数列グリッド --- */
.lang-group{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:2px;
}
.lang-group + .lang-group{margin-top:4px;}
.lang-group-label{
  grid-column:1 / -1;   /* 見出しは1行を占める */
  font-size:11px;font-weight:700;color:var(--sub);
  letter-spacing:.08em;text-transform:uppercase;
  padding:9px 4px 4px;
}
.lang-group + .lang-group .lang-group-label{
  border-top:1px solid var(--line);margin-top:4px;
}

/* --- RTL（アラビア語・ヘブライ語など）--- */
[dir="rtl"] .lang-panel{right:auto;left:0;}
[dir="rtl"] .copy{right:auto;left:12px;}
[dir="rtl"] .field input{padding:15px 16px 15px 46px;}
[dir="rtl"] #curFrom .panel{left:0;right:auto;}
[dir="rtl"] #curTo .panel{left:auto;right:0;}
[dir="rtl"] .cov-sub{text-align:left;}
[dir="rtl"] .pair-table td:last-child{text-align:left;}
[dir="rtl"] .cov-index a b{margin-left:0;margin-right:5px;}
[dir="rtl"] .sites-label{margin-right:0;margin-left:6px;}
[dir="rtl"] .lang-menu{margin-left:0;margin-right:4px;}
[dir="rtl"] .lang-switch{padding-left:0;padding-right:14px;border-left:none;border-right:1px solid var(--line);}
[dir="rtl"] #curFrom .panel,
[dir="rtl"] #curTo   .panel{left:0;right:0;}


@media(max-width:600px){
  .lang-panel{
    left:auto;
    right:0;
    width:calc(100vw - 28px);
    max-width:none;
  }
}

@media(max-width:600px){
   [dir="rtl"] .lang-panel{left:0;right:auto;}  
  [dir="rtl"] .cov-sub{text-align:right;}
}

@media(max-width:600px){
  .header-inner{padding:0 14px;}
  .header-nav > a{display:none;}
  .logo-mark{width:30px;height:30px;}
  .logo-word{font-size:16px;}
  .lang-btn{padding:6px 9px;}
  .lang-current{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}