@charset "UTF-8";

:root {

  --common-main-w-s: 85.333vw; /* 320px */
  --common-main-w-m: 92vw; /* 345px */


  --base-size: 375;
  /* 基準ピクセルサイズ */


  /*
■ font-size 指定値サンプル
    font-size: clamp(var( rem = SPデザインの px -1 ),var( vw = SPデザインの px ),var( rem = PCデザインの px ));
    font-size: clamp(var(--rem12),var(--vw13),var(--rem14));
    ＊ rem vw rem とする

■ margin, padding 指定値サンプル
    margin: min(var( vw○○ = SPの px サイズ ), PCデザインの px );
    margin: min(var(--vw20), 50px) 0 0;
    margin: min((var(--vw20), 50px) auto (var(--vw24), 60px));
    ＊SP の数値が PC の数値より大きい場合は，メディアクエリーで対応
    ＊width なども同様の考えです
*/
  /*
px -> vw の変換用
*/
  --vw4: calc((4 / var(--base-size)) * 100vw);
  --vw5: calc((5 / var(--base-size)) * 100vw);
  --vw6: calc((6 / var(--base-size)) * 100vw);
  --vw7: calc((7 / var(--base-size)) * 100vw);
  --vw8: calc((8 / var(--base-size)) * 100vw);
  --vw9: calc((9 / var(--base-size)) * 100vw);
  --vw10: calc((10 / var(--base-size)) * 100vw);
  --vw11: calc((11 / var(--base-size)) * 100vw);
  --vw12: calc((12 / var(--base-size)) * 100vw);
  --vw13: calc((13 / var(--base-size)) * 100vw);
  --vw14: calc((14 / var(--base-size)) * 100vw);
  --vw15: calc((15 / var(--base-size)) * 100vw);
  --vw16: calc((16 / var(--base-size)) * 100vw);
  --vw17: calc((17 / var(--base-size)) * 100vw);
  --vw18: calc((18 / var(--base-size)) * 100vw);
  --vw19: calc((19 / var(--base-size)) * 100vw);
  --vw20: calc((20 / var(--base-size)) * 100vw);
  --vw21: calc((21 / var(--base-size)) * 100vw);
  --vw22: calc((22 / var(--base-size)) * 100vw);
  --vw23: calc((23 / var(--base-size)) * 100vw);
  --vw24: calc((24 / var(--base-size)) * 100vw);
  --vw25: calc((25 / var(--base-size)) * 100vw);
  --vw26: calc((26 / var(--base-size)) * 100vw);
  --vw27: calc((27 / var(--base-size)) * 100vw);
  --vw28: calc((28 / var(--base-size)) * 100vw);
  --vw29: calc((29 / var(--base-size)) * 100vw);
  --vw30: calc((30 / var(--base-size)) * 100vw);
  --vw31: calc((31 / var(--base-size)) * 100vw);
  --vw32: calc((32 / var(--base-size)) * 100vw);
  --vw33: calc((33 / var(--base-size)) * 100vw);
  --vw34: calc((34 / var(--base-size)) * 100vw);
  --vw35: calc((35 / var(--base-size)) * 100vw);
  --vw36: calc((36 / var(--base-size)) * 100vw);
  --vw37: calc((37 / var(--base-size)) * 100vw);
  --vw38: calc((38 / var(--base-size)) * 100vw);
  --vw39: calc((39 / var(--base-size)) * 100vw);
  --vw40: calc((40 / var(--base-size)) * 100vw);
  --vw41: calc((41 / var(--base-size)) * 100vw);
  --vw42: calc((42 / var(--base-size)) * 100vw);
  --vw43: calc((43 / var(--base-size)) * 100vw);
  --vw44: calc((44 / var(--base-size)) * 100vw);
  --vw45: calc((45 / var(--base-size)) * 100vw);
  --vw46: calc((46 / var(--base-size)) * 100vw);
  --vw47: calc((47 / var(--base-size)) * 100vw);
  --vw48: calc((48 / var(--base-size)) * 100vw);
  --vw49: calc((49 / var(--base-size)) * 100vw);
  --vw50: calc((50 / var(--base-size)) * 100vw);
  --vw51: calc((51 / var(--base-size)) * 100vw);
  --vw52: calc((52 / var(--base-size)) * 100vw);
  --vw53: calc((53 / var(--base-size)) * 100vw);
  --vw54: calc((54 / var(--base-size)) * 100vw);
  --vw55: calc((55 / var(--base-size)) * 100vw);
  --vw56: calc((56 / var(--base-size)) * 100vw);
  --vw57: calc((57 / var(--base-size)) * 100vw);
  --vw58: calc((58 / var(--base-size)) * 100vw);
  --vw59: calc((59 / var(--base-size)) * 100vw);
  --vw60: calc((60 / var(--base-size)) * 100vw);
  --vw61: calc((61 / var(--base-size)) * 100vw);
  --vw62: calc((62 / var(--base-size)) * 100vw);
  --vw63: calc((63 / var(--base-size)) * 100vw);
  --vw64: calc((64 / var(--base-size)) * 100vw);
  --vw65: calc((65 / var(--base-size)) * 100vw);
  --vw66: calc((66 / var(--base-size)) * 100vw);
  --vw67: calc((67 / var(--base-size)) * 100vw);
  --vw68: calc((68 / var(--base-size)) * 100vw);
  --vw69: calc((69 / var(--base-size)) * 100vw);
  --vw70: calc((70 / var(--base-size)) * 100vw);
  --vw71: calc((71 / var(--base-size)) * 100vw);
  --vw72: calc((72 / var(--base-size)) * 100vw);
  --vw73: calc((73 / var(--base-size)) * 100vw);
  --vw74: calc((74 / var(--base-size)) * 100vw);
  --vw75: calc((75 / var(--base-size)) * 100vw);
  --vw76: calc((76 / var(--base-size)) * 100vw);
  --vw77: calc((77 / var(--base-size)) * 100vw);
  --vw78: calc((78 / var(--base-size)) * 100vw);
  --vw79: calc((79 / var(--base-size)) * 100vw);
  --vw80: calc((80 / var(--base-size)) * 100vw);
  --vw81: calc((81 / var(--base-size)) * 100vw);
  --vw82: calc((82 / var(--base-size)) * 100vw);
  --vw83: calc((83 / var(--base-size)) * 100vw);
  --vw84: calc((84 / var(--base-size)) * 100vw);
  --vw85: calc((85 / var(--base-size)) * 100vw);
  --vw86: calc((86 / var(--base-size)) * 100vw);
  --vw87: calc((87 / var(--base-size)) * 100vw);
  --vw88: calc((88 / var(--base-size)) * 100vw);
  --vw89: calc((89 / var(--base-size)) * 100vw);
  --vw90: calc((90 / var(--base-size)) * 100vw);
  --vw91: calc((91 / var(--base-size)) * 100vw);
  --vw92: calc((92 / var(--base-size)) * 100vw);
  --vw93: calc((93 / var(--base-size)) * 100vw);
  --vw94: calc((94 / var(--base-size)) * 100vw);
  --vw95: calc((95 / var(--base-size)) * 100vw);
  --vw96: calc((96 / var(--base-size)) * 100vw);
  --vw97: calc((97 / var(--base-size)) * 100vw);
  --vw98: calc((98 / var(--base-size)) * 100vw);
  --vw99: calc((99 / var(--base-size)) * 100vw);
  --vw100: calc((100 / var(--base-size)) * 100vw);


  /*
  フォントサイズ用
  SP <-> PC で同じサイズの場合、この値だけ指定で良い
  st = static
  */
  --st4: clamp(0.5rem, calc((4 / var(--base-size)) * 100vw), 0.625rem);
  --st5: clamp(0.5rem, calc((5 / var(--base-size)) * 100vw), 0.625rem);
  --st6: clamp(0.5rem, calc((6 / var(--base-size)) * 100vw), 0.625rem);
  --st7: clamp(0.5rem, calc((7 / var(--base-size)) * 100vw), 0.625rem);
  --st8: clamp(0.5rem, calc((8 / var(--base-size)) * 100vw), 0.625rem);
  --st9: clamp(0.5rem, calc((9 / var(--base-size)) * 100vw), 0.625rem);
  --st10: clamp(0.5rem, calc((10 / var(--base-size)) * 100vw), 0.625rem);
  --st11: clamp(0.5625rem, calc((11 / var(--base-size)) * 100vw), 0.6875rem);
  --st12: clamp(0.625rem, calc((12 / var(--base-size)) * 100vw), 0.75rem);
  --st13: clamp(0.6875rem, calc((13 / var(--base-size)) * 100vw), 0.8125rem);
  --st14: clamp(0.75rem, calc((14 / var(--base-size)) * 100vw), 0.875rem);
  --st15: clamp(0.8125rem, calc((15 / var(--base-size)) * 100vw), 0.9375rem);
  --st16: clamp(0.875rem, calc((16 / var(--base-size)) * 100vw), 1rem);
  --st17: clamp(0.9375rem, calc((17 / var(--base-size)) * 100vw), 1.0625rem);
  --st18: clamp(1rem, calc((18 / var(--base-size)) * 100vw), 1.125rem);
  --st19: clamp(1.0625rem, calc((19 / var(--base-size)) * 100vw), 1.1875rem);
  --st20: clamp(1.125rem, calc((20 / var(--base-size)) * 100vw), 1.25rem);
  --st21: clamp(1.1875rem, calc((21 / var(--base-size)) * 100vw), 1.3125rem);
  --st22: clamp(1.25rem, calc((22 / var(--base-size)) * 100vw), 1.375rem);
  --st23: clamp(1.3125rem, calc((23 / var(--base-size)) * 100vw), 1.4375rem);
  --st24: clamp(1.25rem, calc((24 / var(--base-size)) * 100vw), 1.5rem);
  --st25: clamp(1.3125rem, calc((25 / var(--base-size)) * 100vw), 1.5625rem);
  --st26: clamp(1.375rem, calc((26 / var(--base-size)) * 100vw), 1.625rem);
  --st27: clamp(1.4375rem, calc((27 / var(--base-size)) * 100vw), 1.6875rem);
  --st28: clamp(1.375rem, calc((28 / var(--base-size)) * 100vw), 1.75rem);
  --st29: clamp(1.4375rem, calc((29 / var(--base-size)) * 100vw), 1.8125rem);
  --st30: clamp(1.5rem, calc((30 / var(--base-size)) * 100vw), 1.875rem);
  --st31: clamp(1.5625rem, calc((31 / var(--base-size)) * 100vw), 1.9375rem);
  --st32: clamp(1.5rem, calc((32 / var(--base-size)) * 100vw), 2rem);
  --st33: clamp(1.5625rem, calc((33 / var(--base-size)) * 100vw), 2.0625rem);
  --st34: clamp(1.625rem, calc((34 / var(--base-size)) * 100vw), 2.125rem);
  --st35: clamp(1.6875rem, calc((35 / var(--base-size)) * 100vw), 2.1875rem);
  --st36: clamp(1.625rem, calc((36 / var(--base-size)) * 100vw), 2.25rem);
  --st37: clamp(1.6875rem, calc((37 / var(--base-size)) * 100vw), 2.3125rem);
  --st38: clamp(1.75rem, calc((38 / var(--base-size)) * 100vw), 2.375rem);
  --st39: clamp(1.8125rem, calc((39 / var(--base-size)) * 100vw), 2.4375rem);
  --st40: clamp(1.75rem, calc((40 / var(--base-size)) * 100vw), 2.5rem);

  /*
rem 固定値 (フォントサイズ用)
*/
  --rem4: 0.25rem;
  --rem5: 0.3125rem;
  --rem6: 0.375rem;
  --rem7: 0.4375rem;
  --rem8: 0.5rem;
  --rem9: 0.5625rem;
  --rem10: 0.625rem;
  --rem11: 0.6875rem;
  --rem12: 0.75rem;
  --rem13: 0.8125rem;
  --rem14: 0.875rem;
  --rem15: 0.9375rem;
  --rem16: 1rem; /* 16px */
  --rem17: 1.0625rem;
  --rem18: 1.125rem;
  --rem19: 1.1875rem;
  --rem20: 1.25rem; /* 20px */
  --rem21: 1.3125rem;
  --rem22: 1.375rem;
  --rem23: 1.4375rem;
  --rem24: 1.5rem;
  --rem25: 1.5625rem;
  --rem26: 1.625rem;
  --rem27: 1.6875rem;
  --rem28: 1.75rem;
  --rem29: 1.8125rem;
  --rem30: 1.875rem; /* 30px */
  --rem31: 1.9375rem;
  --rem32: 2rem;
  --rem33: 2.0625rem;
  --rem34: 2.125rem;
  --rem35: 2.1875rem;
  --rem36: 2.25rem;
  --rem37: 2.3125rem;
  --rem38: 2.375rem;
  --rem39: 2.4375rem;
  --rem40: 2.5rem; /* 40px */
  --rem41: 2.5625rem;
  --rem42: 2.625rem;
  --rem43: 2.6875rem;
  --rem44: 2.75rem;
  --rem45: 2.8125rem;
  --rem46: 2.875rem;
  --rem47: 2.9375rem;
  --rem48: 3rem;
  --rem49: 3.0625rem;
  --rem50: 3.125rem; /* 50px */
  --rem51: 3.1875rem;
  --rem52: 3.25rem;
  --rem53: 3.3125rem;
  --rem54: 3.375rem;
  --rem55: 3.4375rem;
  --rem56: 3.5rem;
  --rem57: 3.5625rem;
  --rem58: 3.625rem;
  --rem59: 3.6875rem;
  --rem60: 3.75rem; /* 60px */
  --rem61: 3.8125rem;
  --rem62: 3.875rem;
  --rem63: 3.9375rem;
  --rem64: 4rem;
  --rem65: 4.0625rem;
  --rem66: 4.125rem;
  --rem67: 4.1875rem;
  --rem68: 4.25rem;
  --rem69: 4.3125rem;
  --rem70: 4.375rem; /* 70px */
  --rem71: 4.4375rem;
  --rem72: 4.5rem;
  --rem73: 4.5625rem;
  --rem74: 4.625rem;
  --rem75: 4.6875rem;
  --rem76: 4.75rem;
  --rem77: 4.8125rem;
  --rem78: 4.875rem;
  --rem79: 4.9375rem;
  --rem80: 5rem; /* 80px */
  --rem81: 5.0625rem;
  --rem82: 5.125rem;
  --rem83: 5.1875rem;
  --rem84: 5.25rem;
  --rem85: 5.3125rem;
  --rem86: 5.375rem;
  --rem87: 5.4375rem;
  --rem88: 5.5rem;
  --rem89: 5.5625rem;
  --rem90 :5.625rem; /* 90px */
  --rem91 :5.6875rem;
  --rem92 :5.75rem;
  --rem93 :5.8125rem;
  --rem94 :5.875rem;
  --rem95 :5.9375rem;
  --rem96 :6rem ;
  --rem97 :6.0625rem;
  --rem98 :6.125rem;
  --rem99 :6.1875rem;
  --rem100 :6.25rem;


 /* others */

  --hover-opacity-8: .8;
  --hover-opacity-6: .6;
  --hover-opacity-4: .4;
  --hover-transition: .1s;


  --semi-bold: 600;
  --medium: 500;
  --regular: 400;
  --light: 300;
  --extra-light: 200;

  --color-white: #fff;
  --color-black-main: #141414;
  --color-green-500: #007F41;
  --color-green-600: #006A3B;
  --color-gray-dark: #bbbbbb;
  --color-gray-light: #f2f2f2;
}


@media (min-width: 767px) {
  :root {
     /* 960px */
    --common-main-w-s: 50vw;
     /* 1200px */
    --common-main-w-m: 62.5vw;
  }
}