@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --font-family-primary: "Roboto", "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

  --color-dellblue: #0672CB; /*-- Blue 600 --*/
  --default-text: #0E0E0E; /*-- Gray 900 --*/
  --helper-text: #636363; /*-- Gray 800 --*/
  --error-text: #BB2A33; /*-- Red 700 --*/
  --default-link: #0672CB; /*-- Blue 600 --*/

  /* Neutrals */
  --color-Black: #000000;
  --color-Cosmos: #1D2C3B; /*-- Slate 700 --*/
  --color-Raven: #40586D; /*-- Slate 500 --*/
  --color-Mist: #C5D4E3; /*-- Slate 200 --*/
  --color-White: #FFFFFF; /*--  --*/
  --color-Quartz: #F0F0F0; /*-- Gray 200 --*/
  --color-Titanium: #D2D2D2; /*-- Gray 400 --*/
  --color-Steel: #B6B6B6; /*-- Gray 500 --*/

  /* Colors */
  /* オーシャン、ミッドナイト、フォレスト、ティール、プラム、ダスクはテキストには使用できません。 */
  --color-Ocean: #00468B; /*-- Blue 800 --*/
  --color-Midnight: #0D2155;
  --color-Forest: #0B7C84; /*-- Teal 800 --*/
  --color-Teal: #044E52; /*-- Teal 900 --*/
  --color-Plum: #66278F; /*-- Purple 800 --*/
  --color-Dusk: #40155C; /*-- Purple 900 --*/
  
  --color-blue100: #D9F5FD;
  --color-blue200: #94DCF7;
  --color-blue300: #5CC1EE;
  --color-blue400: #31A2E3;
  --color-blue500: #1282D6;
  --color-blue700: #0063B8;
  --color-blue800: #00468B;
  --color-blue900: #002A58;

  --color-gray100: #F5F6F7; /*-- background --*/
  --color-gray200: #F0F0F0;
  --color-gray300: #E1E1E1;
  --color-gray400: #D2D2D2;
  --color-gray500: #B6B6B6;
  --color-gray600: #7E7E7E;
  --color-gray700: #6E6E6E;
  --color-gray800: #636363;
  --color-gray900: #0E0E0E;

  --color-slate100: #EBF1F6;
  --color-slate200: #C5D4E3;
  --color-slate300: #A4B8CD;
  --color-slate400: #839DB4;
  --color-slate500: #40586d;
  --color-slate600: #293B4D;
  --color-slate700: #1D2C3B;
  --color-slate800: #141D28;
  --color-slate900: #0A0E14;

  --secondary-yellow100: #FEEFCB;
  --secondary-yellow200: #F5CD6F;
  --secondary-yellow300: #E6AC28;
  --secondary-yellow400: #CE8D00;
  --secondary-yellow500: #B36F00;
  --secondary-yellow600: #A36100;
  --secondary-yellow700: #925400;
  --secondary-yellow800: #6D3A00;
  --secondary-yellow900: #442200;

  --secondary-red100: #FFECEE;
  --secondary-red200: #FFC3C9;
  --secondary-red300: #FF99A1;
  --secondary-red400: #FE6873;
  --secondary-red500: #E4424D;
  --secondary-red600: #D0353F;
  --secondary-red700: #BB2A33;
  --secondary-red800: #8C161F;
  --secondary-red900: #590A0F;

  --secondary-green100: #E9F5CE;
  --secondary-green200: #C0DD78;
  --secondary-green300: #9BC438;
  --secondary-green400: #7AA809;
  --secondary-green500: #5D8C00;
  --secondary-green600: #4F7D00;
  --secondary-green700: #436F00;
  --secondary-green800: #2C5000;
  --secondary-green900: #193100;

  --accent-lightBlue100: #DAF5FD;
  --accent-lightBlue200: #97DCF4;
  --accent-lightBlue300: #61C1EB;
  --accent-lightBlue400: #36A2E0;
  --accent-lightBlue500: #1885C3;
  --accent-lightBlue600: #0D76B2;
  --accent-lightBlue700: #0468A1;
  --accent-lightBlue800: #004A77;
  --accent-lightBlue900: #002D4B;

  -accent-purple100: #FBEBFF;
  -accent-purple200: #ECC4FF;
  -accent-purple300: #DB9EFF;
  -accent-purple400: #C47AF4;
  -accent-purple500: #A95ADC;
  -accent-purple600: #994CCC;
  -accent-purple700: #8A3FBA;
  -accent-purple800: #66278F;
  -accent-purple900: #40155C;

  -accent-berry100: #FFEBF5;
  -accent-berry200: #FFC0DF;
  -accent-berry300: #F69AC6;
  -accent-berry400: #E574AA;
  -accent-berry500: #CB548D;
  -accent-berry600: #BA467D;
  -accent-berry700: #A8396F;
  -accent-berry800: #7F234F;
  -accent-berry900: #511230;

  -accent-orange100: #FFEED2;
  -accent-orange200: #FEC97A;
  -accent-orange300: #F8A433;
  -accent-orange400: #E67F01;
  -accent-orange500: #C96100;
  -accent-orange600: #B85200;
  -accent-orange700: #A64600;
  -accent-orange800: #7D2E00;
  -accent-orange900: #4F1A00;
}

/*-------------------------------------------------------------------------
 base setting
--------------------------------------------------------------------------*/
html {
	box-sizing: border-box;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}

body, input, textarea, select, option, button {
  background: #fff;
  font-family:  var(--font-family-primary);
  font-optical-sizing: auto;
  line-height: 1.6;
  color: var(--default-text);
  font-size: 16px;
}
body {
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  body {
    min-width: inherit;
    min-width: auto;
    line-height: 1.6;
    font-size: 14px;
  }
  body, input, textarea, select, option, button{
	  font-size: 14px;
  }
}

a {
  color: var(--default-link);
  text-decoration: none;
  transition: all 0.2s ease;
}
a:link,
a:visited {
  color: var(--color-dellblue);
  text-decoration: underline;
}
a:active,
a:hover {
  color: var(--color-gray500);
}
a[href^="http"]:empty::before {
  content: attr(href);
}

p {
  margin-top: 0;
  word-wrap: break-word;
}

ul, ol, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}