@charset "UTF-8";

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  -webkit-text-size-adjust: none;
  max-height: 999999px;
}
body {line-height: 1;}

h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-size: 100%;
  font-weight: normal;
  overflow: hidden;
  line-height: 140%;
}
ol, ul , li {list-style: none;}

blockquote {quotes: none;}

blockquote:before, blockquote:after {
  content: '';
  content: none;
}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

th{font-weight: normal;}

a img {border: none;}

a {
  text-decoration: none;
  outline: none;
}

img{vertical-align: bottom;}

.clearfix {width:100%; margin: 0;}
.clearfix:after{
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  }
     
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  }
  
  
  
  
  
  
/*------------------------------------
  Tokens
------------------------------------*/
:root {
  /*------------------------------------
    Spacing Tokens (min)  based on ~1200
  ------------------------------------*/
  --space-4:   min(.33vw, 4px);
  --space-5:   min(.42vw, 5px);
  --space-6:   min(.5vw,  6px);
  --space-7:   min(.58vw, 7px);
  --space-8:   min(.67vw, 8px);
  --space-10:  min(.83vw, 10px);
  --space-12:  min(1vw,   12px);
  --space-13:  min(1.1vw, 13px);
  --space-14:  min(1.17vw,14px);
  --space-15:  min(1.25vw,15px);
  --space-16:  min(1.33vw,16px);
  --space-17:  min(1.42vw,17px);
  --space-18:  min(1.5vw, 18px);
  --space-20:  min(1.67vw,20px);
  --space-22:  min(1.83vw,22px);
  --space-23:  min(1.9vw, 23px);
  --space-24:  min(2vw,   24px);
  --space-25:  min(2.08vw,25px);
  --space-26:  min(2.17vw,26px);
  --space-27:  min(2.25vw,27px);
  --space-28:  min(2.33vw,28px);
  --space-29:  min(2.42vw,29px);
  --space-30:  min(2.5vw, 30px);
  --space-32:  min(2.67vw,32px);
  --space-34:  min(2.83vw,34px);
  --space-35:  min(2.92vw,35px);
  --space-36:  min(3vw,   36px);
  --space-38:  min(3.17vw,38px);
  --space-40:  min(3.33vw,40px);
  --space-42:  min(3.5vw, 42px);
  --space-44:  min(3.67vw,44px);
  --space-45:  min(3.75vw,45px);
  --space-48:  min(4vw,   48px);
  --space-50:  min(4.17vw,50px);
  --space-54:  min(4.5vw, 54px);
  --space-55:  min(4.58vw,55px);
  --space-58:  min(4.83vw,58px);
  --space-60:  min(5vw,   60px);
  --space-65:  min(5.42vw,65px);
  --space-70:  min(5.83vw,70px);
  --space-75:  min(6.25vw,75px);
  --space-80:  min(6.67vw,80px);
  --space-84:  min(7vw,   84px);
  --space-85:  min(7.08vw,85px);
  --space-90:  min(7.5vw, 90px);
  --space-92:  min(7.67vw,92px);
  --space-95:  min(7.92vw,95px);
  --space-100: min(8.33vw,100px);
  --space-105: min(8.75vw,105px);
  --space-110: min(9.17vw,110px);
  --space-120: min(10vw,  120px);
  --space-130: min(10.83vw,130px);
  --space-140: min(11.67vw,140px);
  --space-150: min(12.5vw,150px);
  --space-160: min(13.33vw,160px);
  --space-170: min(14.17vw,170px);
  --space-180: min(15vw,  180px);
  --space-200: min(16.67vw,200px);
  --space-230: min(19.17vw,230px);
  --space-300: min(25vw,  300px);

  /*------------------------------------
    Font Size Tokens (clamp)  可読性優先
    ※ 中央値は vw、上限は “いままでのpx” を踏襲
    ※ 下限は読みやすさのため少し高めにしている（好みで調整OK）
  ------------------------------------*/
  --font-12: clamp(12px, 1vw, 12px);
  --font-13: clamp(13px, 1.1vw, 13px);
  --font-14: clamp(14px, 1.17vw, 14px);
  --font-15: clamp(15px, 1.25vw, 15px);
  --font-16: clamp(16px, 1.33vw, 16px);
  --font-17: clamp(17px, 1.42vw, 17px);
  --font-18: clamp(18px, 1.5vw, 18px);
  --font-20: clamp(20px, 1.67vw, 20px);
  --font-22: clamp(22px, 1.83vw, 22px);
  --font-24: clamp(24px, 2vw, 24px);
  --font-26: clamp(26px, 2.17vw, 26px);
  --font-28: clamp(28px, 2.33vw, 28px);
  --font-30: clamp(30px, 2.5vw, 30px);
  --font-32: clamp(32px, 2.67vw, 32px);
  --font-34: clamp(34px, 2.83vw, 34px);
  --font-36: clamp(36px, 3vw, 36px);
  --font-40: clamp(40px, 3.33vw, 40px);
  --font-44: clamp(44px, 3.67vw, 44px);
  --font-48: clamp(48px, 4vw, 48px);
  --font-50: clamp(50px, 4.17vw, 50px);
  --font-54: clamp(54px, 4.5vw, 54px);
  --font-60: clamp(60px, 5vw, 60px);
  --font-70: clamp(70px, 5.83vw, 70px);
  --font-80: clamp(80px, 6.67vw, 80px);
  --font-90: clamp(90px, 7.5vw, 90px);
  --font-100: clamp(100px, 8.33vw, 100px);
}

/*------------------------------------
  Tokens : Mobile (max-width: 768px)
  spacingはあなたのSP用minをそのまま移植
  fontはSPで「下限だけ少し上げる」方針（必要なものだけ上書き）
------------------------------------*/
@media screen and (max-width: 768px) {
  :root {
    /* spacing (min) */
    --space-4:   min(0.52vw, 4px);
    --space-5:   min(0.65vw, 5px);
    --space-6:   min(0.78vw, 6px);
    --space-7:   min(0.9vw,  7px);
    --space-8:   min(1.04vw, 8px);
    --space-10:  min(1.30vw, 10px);
    --space-12:  min(1.56vw, 12px);
    --space-13:  min(1.7vw,  13px);
    --space-14:  min(1.82vw, 14px);
    --space-15:  min(1.95vw, 15px);
    --space-16:  min(2.08vw, 16px);
    --space-17:  min(2.21vw, 17px);
    --space-18:  min(2.34vw, 18px);
    --space-20:  min(2.60vw, 20px);
    --space-22:  min(2.86vw, 22px);
    --space-23:  min(3vw,    23px);
    --space-24:  min(3.125vw,24px);
    --space-25:  min(3.26vw, 25px);
    --space-26:  min(3.4vw,  26px);
    --space-27:  min(3.5vw,  27px);
    --space-28:  min(3.65vw, 28px);
    --space-29:  min(3.77vw, 29px);
    --space-30:  min(3.91vw, 30px);
    --space-32:  min(4.17vw, 32px);
    --space-34:  min(4.43vw, 34px);
    --space-35:  min(4.56vw, 35px);
    --space-36:  min(4.69vw, 36px);
    --space-38:  min(4.95vw, 38px);
    --space-40:  min(5.21vw, 40px);
    --space-42:  min(5.47vw, 42px);
    --space-44:  min(5.7vw,  44px);
    --space-45:  min(5.9vw,  45px);
    --space-48:  min(6.25vw, 48px);
    --space-50:  min(6.51vw, 50px);
    --space-54:  min(7vw,    54px);
    --space-55:  min(7.16vw, 55px);
    --space-58:  min(7.55vw, 58px);
    --space-60:  min(7.81vw, 60px);
    --space-65:  min(8.46vw, 65px);
    --space-70:  min(9.11vw, 70px);
    --space-75:  min(9.76vw, 75px);
    --space-80:  min(10.42vw,80px);
    --space-84:  min(10.93vw,84px);
    --space-85:  min(11.07vw,85px);
    --space-90:  min(11.7vw, 90px);
    --space-92:  min(11.98vw,92px);
    --space-95:  min(12.37vw,95px);
    --space-100: min(13.02vw,100px);
    --space-105: min(13.7vw, 105px);
    --space-110: min(14.32vw,110px);
    --space-120: min(15.63vw,120px);
    --space-130: min(16.93vw,130px);
    --space-140: min(18.23vw,140px);
    --space-150: min(19.53vw,150px);
    --space-160: min(20.83vw,160px);
    --space-170: min(22.13vw,170px);
    --space-180: min(23.44vw,180px);
    --space-200: min(26.04vw,200px);
    --space-230: min(29.94vw,230px);
    --space-300: min(39vw,  300px);

    /* font (clamp) - SPは最低サイズを確保したいものだけ上書き */
    --font-12: clamp(12px, 3.2vw, 12px);
    --font-13: clamp(13px, 3.4vw, 13px);
    --font-14: clamp(14px, 3.6vw, 14px);
    --font-15: clamp(15px, 3.9vw, 15px);
    --font-16: clamp(16px, 4.1vw, 16px);
  }
}