/* --------------------------------------------------------------
   suppliesbank / iguazu intro page  (free page)
   01 hero  /  02 online store list  /  03 creation of value
   images are expected under /img/iguazu/
   ascii only - keep it that way so the file encoding never matters
   -------------------------------------------------------------- */

/* ---------- shared ---------- */
:root{
  --sbc-text:#111;
  --sbc-blue:#0078CB;
  --sbc-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --sbc-jp-hero:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --sbc-en:Roboto,"Helvetica Neue",Arial,sans-serif;
  --sbc-round:100px;   /* radius of the white panel that overlaps the hero */
  --sbc-lift:141px;    /* how far that panel is pulled up over the hero */

  /* space under the shigyou-gaiyou button. matches the xd file. */
  --sbc-value-pad-bottom:120px;
}

/* ---------- site footer ----------
   .ig-footer carries margin-top:140px site wide. this page ends with a
   full bleed section, so that gap reads as a mistake. this file is only
   loaded on this free page, so zeroing it here affects nothing else.
   "body" is prepended purely to outrank the original rule without
   resorting to !important. */
body .ig-footer{margin-top:0}
.sbc-br-pc{display:inline}   /* line breaks that only apply on desktop */

/* ---------- scoped reset ----------
   the free page inherits the site css (ig_common.css), so everything this
   page relies on is restated here. all selectors stay inside the three
   sections, so nothing else on the site is affected. */
.sbc-hero, .sbc-hero *,
.sbc-store, .sbc-store *,
.sbc-value, .sbc-value *{
  box-sizing:border-box;
}
.sbc-hero img, .sbc-store img, .sbc-value img{
  border:0; max-width:none;
}

/* ig_common.css colours and underlines every anchor. !important is used here
   because the site rules are more specific than these class selectors.
   every link in these sections is white text with no underline. */
.sbc-hero__circle, .sbc-hero__circle:link, .sbc-hero__circle:visited,
.sbc-hero__circle:hover, .sbc-hero__circle:active, .sbc-hero__circle:focus,
.sbc-store__card, .sbc-store__card:link, .sbc-store__card:visited,
.sbc-store__card:hover, .sbc-store__card:active, .sbc-store__card:focus,
.sbc-store__card *,
.sbc-value__btn, .sbc-value__btn:link, .sbc-value__btn:visited,
.sbc-value__btn:hover, .sbc-value__btn:active, .sbc-value__btn:focus{
  color:#fff !important;
  text-decoration:none !important;
}

/* If the free page body sits inside a fixed-width container, the three
   sections below will not reach the window edges. In that case remove the
   comment markers around the rule below. Check on staging first. */
/*
.sbc-hero, .sbc-store, .sbc-value{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
*/


/* ==========================================================
   01  HERO
   ========================================================== */
.sbc-hero{
  --sbc-hero-img: url(/img/iguazu/bnr_hero_intro.jpg);
  position:relative;
  min-height:801px;              /* natural height of the 1x photo */
  padding:203px 24px 0;
  background:var(--sbc-hero-img) no-repeat center top;
  background-size:cover;
  font-family:var(--sbc-jp-hero);
  text-align:center;
  overflow:hidden;
}
.sbc-hero__title{
  margin:0;
  font-size:50px; line-height:1.53; font-weight:700;
  letter-spacing:.07em; color:var(--sbc-text);
}
.sbc-hero__lead{
  margin:14px 0 0;
  font-size:20px; line-height:1.95; font-weight:500;
  letter-spacing:.02em; color:var(--sbc-text);
}
/* outlined paths in xd, so it ships as an svg.
   z-index keeps it above the white panel of section 02. */
.sbc-hero__en{
  position:relative; z-index:3;
  display:block; width:min(1200px,88%); height:auto;
  margin:54px auto 0;
  overflow:visible;
}
.sbc-hero__circle{
  position:absolute; z-index:4;
  top:442px; right:40px;
  width:120px; height:120px; border-radius:50%;
  background:var(--sbc-blue); color:#fff;
  font-size:14px; font-weight:500; letter-spacing:.04em;
  text-decoration:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  transition:opacity .2s;
}
.sbc-hero__circle:hover{opacity:.85}
.sbc-hero__circle:focus-visible{outline:3px solid #fff; outline-offset:3px}
.sbc-hero__circle::after{            /* arrow drawn in css to stay sjis-safe */
  content:""; width:0; height:0;
  border-style:solid; border-width:4px 0 4px 6px;
  border-color:transparent transparent transparent #fff;
}


/* ==========================================================
   02  ONLINE STORE LIST
   ========================================================== */
.sbc-store{
  position:relative; z-index:1;     /* sits over the bottom of the hero photo */
  margin-top:calc(var(--sbc-lift) * -1);
  padding:96px 0 0;
  background:#fff;
  border-radius:var(--sbc-round) var(--sbc-round) 0 0;
  font-family:var(--sbc-jp);
  text-align:center;
}
.sbc-store__eyebrow{
  margin:0;
  font-family:var(--sbc-en);
  font-size:15px; line-height:1.5; font-weight:500;
  letter-spacing:.03em; color:var(--sbc-blue);
}
.sbc-store__title{
  margin:4px 0 0;
  font-size:40px; line-height:1.4; font-weight:700;
  letter-spacing:.02em; color:var(--sbc-text);
}

.sbc-store__grid{
  display:grid;
  grid-template-columns:1fr 1fr;    /* two full-bleed cards, no gap */
  margin-top:38px;
}
.sbc-store__card{
  --sbc-veil:rgba(17,17,17,.47);          /* #111 47% : resting state */
  --sbc-veil-hover:rgba(17,17,17,.47);    /* overridden per card below */
  position:relative; z-index:0;     /* stacking context for the veil */
  display:flex; flex-direction:column; align-items:center;
  min-height:476px;
  padding:96px 40px 63px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  color:#fff; text-decoration:none;
  overflow:hidden;
}
.sbc-store__card::before{           /* photo is veiled so the text stays legible */
  content:"";
  position:absolute; z-index:-1; inset:0;
  background-color:var(--sbc-veil);
  transition:background-color .3s ease;
}
.sbc-store__card:hover::before,
.sbc-store__card:focus-visible::before{background-color:var(--sbc-veil-hover)}
.sbc-store__card:focus-visible{outline:3px solid #fff; outline-offset:-8px}

.sbc-store__card--sbc{
  background-image:url(/img/iguazu/bnr_store_suppliesbank.jpg);
  --sbc-veil-hover:rgba(238,107,43,.75);  /* #EE6B2B 75% */
}
.sbc-store__card--igris{
  background-image:url(/img/iguazu/bnr_store_igris.jpg);
  --sbc-veil-hover:rgba(2,86,145,.75);    /* #025691 75% */
}

.sbc-store__cat{
  margin:0;
  font-size:24px; line-height:1.6; font-weight:500; letter-spacing:.02em;
}
.sbc-store__name{
  margin:0;
  font-size:36px; line-height:1.4; font-weight:700; letter-spacing:.02em;
}
.sbc-store__desc{
  margin:18px 0 0;
  font-size:16px; line-height:1.85; letter-spacing:.02em;
}
.sbc-store__btn{
  margin-top:auto;                  /* pins the logo to the bottom padding */
  display:block; line-height:0;
}
.sbc-store__btn img{display:block; width:239px; height:auto}
.sbc-store__corner{                 /* white corner mark, drawn in css */
  position:absolute; z-index:1;
  right:11px; bottom:11px;
  width:0; height:0;
  border-style:solid;
  border-width:0 0 27px 29px;
  border-color:transparent transparent #fff transparent;
}


/* ==========================================================
   03  CREATION OF VALUE
   ========================================================== */
.sbc-value{
  position:relative; z-index:0;      /* stacking context for the background layer */
  padding:117px 24px var(--sbc-value-pad-bottom);
  background:#fff;
  font-family:var(--sbc-jp);
  text-align:center;
}
.sbc-value::before{                  /* gradient image at 45%, as in the xd file.
                                        smooth wash, so stretching is invisible. */
  content:"";
  position:absolute; z-index:-1; inset:0;
  background:url(/img/iguazu/bg_value.jpg) no-repeat center top;
  background-size:100% 100%;
  opacity:.45;
}
.sbc-value__eyebrow{
  margin:0;
  font-family:var(--sbc-en);
  font-size:15px; line-height:1.5; font-weight:500;
  letter-spacing:.03em; color:var(--sbc-blue);
}
.sbc-value__title{
  margin:4px 0 0;
  font-size:40px; line-height:1.4; font-weight:700;
  letter-spacing:.02em; color:var(--sbc-text);
}
.sbc-value__desc{
  margin:33px 0 0;
  font-size:16px; line-height:2.25; letter-spacing:.02em;
  color:var(--sbc-text);
}
.sbc-value__items{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:30px;
  max-width:1152px;
  margin:39px auto 0;
  padding:0;
  list-style:none;
}
.sbc-value__items img{display:block; width:100%; height:auto}
.sbc-value__btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:290px; height:47px;
  margin-top:33px;
  border-radius:999px;
  background:#071C2A;
  color:#fff; text-decoration:none;
  font-size:16px; font-weight:500; letter-spacing:.03em;
  transition:opacity .2s;
}
.sbc-value__btn:hover{opacity:.85}
.sbc-value__btn:focus-visible{outline:3px solid #071C2A; outline-offset:3px}
.sbc-value__btn::after{      /* arrow drawn in css to stay sjis-safe */
  content:"";
  position:absolute; right:15px;
  width:0; height:0;
  border-style:solid; border-width:4px 0 4px 6px;
  border-color:transparent transparent transparent #fff;
}


/* ==========================================================
   narrow desktop / tablet
   ========================================================== */
@media screen and (max-width:1279px){
  .sbc-hero{padding-top:150px}
  .sbc-hero__title{font-size:40px}
  .sbc-hero__lead{font-size:17px}
  .sbc-hero__en{margin-top:44px}
  .sbc-hero__circle{top:auto; bottom:190px; width:104px; height:104px; font-size:13px}

  .sbc-store{padding-top:72px}
  .sbc-store__title{font-size:32px}
  .sbc-store__card{padding:72px 28px 48px; min-height:420px}
  .sbc-store__cat{font-size:19px}
  .sbc-store__name{font-size:29px}
  .sbc-store__desc{font-size:14px; line-height:1.8}
  .sbc-store__btn img{width:200px}

  .sbc-value{padding-top:80px; padding-bottom:88px}
  .sbc-value__title{font-size:32px}
  .sbc-value__desc{margin-top:26px; font-size:14px; line-height:2.1}
  .sbc-value__items{gap:20px; margin-top:32px}
  .sbc-value__btn{margin-top:28px}
}


/* ==========================================================
   smartphone
   ========================================================== */
@media screen and (max-width:767px){
  :root{--sbc-round:28px; --sbc-lift:56px}
  .sbc-br-pc{display:none}

  .sbc-hero{
    min-height:520px;
    padding:76px 20px 0;
    background-position:center center;
  }
  .sbc-hero__title{font-size:26px; line-height:1.6; letter-spacing:.05em}
  .sbc-hero__lead{margin-top:10px; font-size:14px; line-height:1.9}
  .sbc-hero__en{width:92%; margin-top:26px}
  .sbc-hero__circle{
    bottom:96px; right:16px;
    width:76px; height:76px; font-size:11px; gap:5px;
  }
  .sbc-hero__circle::after{border-width:3px 0 3px 5px}

  .sbc-store{padding-top:48px}
  .sbc-store__eyebrow{font-size:12px}
  .sbc-store__title{font-size:24px}
  .sbc-store__grid{grid-template-columns:1fr; margin-top:28px}
  .sbc-store__card{min-height:0; padding:48px 24px 40px}
  .sbc-store__cat{font-size:15px; line-height:1.5}
  .sbc-store__name{font-size:24px; line-height:1.4}
  .sbc-store__desc{margin-top:12px; font-size:13px; line-height:1.9; text-align:left}
  .sbc-store__btn{margin-top:28px}
  .sbc-store__btn img{width:180px}
  .sbc-store__corner{right:8px; bottom:8px; border-width:0 0 19px 20px}

  .sbc-value{padding:56px 20px 64px}
  .sbc-value__eyebrow{font-size:12px}
  .sbc-value__title{font-size:24px; line-height:1.5}
  .sbc-value__desc{margin-top:20px; font-size:13px; line-height:2; text-align:left}
  .sbc-value__items{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:28px}
  .sbc-value__btn{width:100%; max-width:280px; height:52px; margin-top:28px; font-size:15px}
}