@charset utf-8;
/* hidden element */

::-webkit-datetime-edit-year-field {color:#38f;}
::-webkit-datetime-edit-month-field {color:#26d2ff;}
::-webkit-datetime-edit-day-field {color:#04BE02;}
::-webkit-inner-spin-button {visibility:hidden;}
::-webkit-calendar-picker-indicator {background-color:#eee;background-image:0;border:1px solid rgba(125,125,125,0.25);border-radius:0.25rem;box-shadow:inset 0 1px # fff,0 1px #eee;color:#666;}
/* The color of the scroll bar groove, you can also set the border properties */
/* hidden element */
/* The color of the scroll bar groove, you can also set the border properties */
::-webkit-file-upload-button {-webkit-appearance:button;font:inherit;}
@media (min-width:576px) {::-webkit-scrollbar-track-piece {background-color:#f8f8f8;}
/* Scroll bar width */
::-webkit-scrollbar {width:.5rem;height:.5rem;}
/* Scroll bar settings */
::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,0.5);background-clip:padding-box;min-height:1rem;border-radius:0.5rem;}
}
/* === global variables === */
/* * Instructions for use * _ stands for itself * -x stands for wireframe * - Pseudo class name indicates control of pseudo class, for example: table-hover * - Number indicates style 1, style 2*/
:root {
  /* === Color variable === */
  /* base color */
  --color_red:#FF0036;
  --color_orange:#fca216;
  --color_yellow:#fcca16;
  --color_green:#09BB07;
  --color_cyan:#26d2ff;
  --color_blue:#38f;
  --color_purple:#7f39e8;
  --color_black:#373737;
  --color_white:#fff;
  --color_grey:#6a737d;
  --color_light:#F9F9F9;
  --color_dark:#666;
  /* theme color */
  --color_error:#FF0036;
  --color_error_b:#d10000;
  --color_error_h:#ff3237;
  --color_warning:#fca216;
  --color_warning_b:#ff8200;
  --color_warning_h:#fca248;
  --color_success:#09BB07;
  --color_success_b:#2F9833;
  --color_success_h:#3bbb39;
  --color_info:#26d2ff;
  --color_info_b:#15baf8;
  --color_info_h:#58e6ff;
  --color_primary:#38f;
  --color_primary_b:#317EF3;
  --color_primary_h:#51a6ff;
  --color_default:#666;
  --color_default_b:#444;
  --color_default_h:#999;
  /* scene color */
  --color_base:#373737;
  --color_title:#000;
  --color_subtitle:#373737;
  --color_describe:#555;
  --color_paragraph:#666;
  --color_tip:#6a737d;
  --color_border:#dfe2e5;
  --color_mask:rgba(0,0,0,0.6);
  --color_shadow:rgba(7,17,27,0.1);
  --bg_black:#24292e;
  --bg_grey:#efeff4;
  --bg_white:#FDFDFD;
  /* === other === */
  /* transparency */
  --opacity_disabled:0.7;
  /* gradient */
  --line_red:linear-gradient(135deg,#FF5A6A 0%,#f12f04 100%);
  --line_yellow:linear-gradient(135deg,rgb(252,207,49) 10%,rgb(245,85,85) 100% );
  --line_green:linear-gradient(135deg,rgb(255,247,32) 10%,rgb(60,213,0) 100%);
  --line_blue:linear-gradient(135deg,rgb(94,252,232) 10%,rgb( 115,110,254) 100%);
  --line_purple:linear-gradient(135deg,#EE9AE5 10%,#5961F9 100%);
  --line_red-1:linear-gradient(135deg,#fffddc 0%,#ff4c4c 20%,# fa2aa4 100%);
  --line_red-2:linear-gradient(135deg,#ffe7dc 0%,#ff7a4c 20%,#fa2a7d 100%);
  --line_yellow-1:linear-gradient(135deg,#ffe4dc 0%, #faa02a 20%, #ff4c5d 100%);
  --line_yellow-2:linear-gradient(135deg,#fffadc 0%,#faf32a 20%,#ff7f4c 100%);
  --line_green-1:linear-gradient(135deg ,#dcf9ff 0%,#e8ff4c 20%,#2afac2 100%);
  --line_green-2:linear-gradient(135deg,#fff7dc 0%,#4cff6e 20%,#46c4fe 100%);
  --line_blue-1 :linear-gradient(135deg, #dcfff9 0%, #2afadf 20%, #4c83ff 100%);
  --line_blue-2:linear-gradient(135deg, #dcffe0 0%, #2accfa 20%, #b14cff 100%);
  --line_purple-1:linear-gradient(135deg,#ffe8dc 0%, #ff4cb5 20%, #cc2afa 100%);
  --line_purple-2:linear-gradient(135deg, #ffe8dc 0%, #ec4cff 20%, #652afa 100%);
  /* === font style === */
  --font_family_number:"Helvetica Neue",helvetica;
  --font_family_text:arial,sans-serif;
  /* === size === */
  /* Common size */
  --font_mini:0.75rem;
  --font_small:0.875rem;
  --font_base:1rem;
  --font_big:1.25rem;
  --font_larger:1.5rem;
  --font_huge:1.75rem;
  /* scene size */
  --font_title:1.25rem;
  --font_subtitle:1rem;
  --font_describe:1rem;
  --font_paragraph:1rem;
  --font_tip:0.75rem;
  /* size of the picture */
  --img_size_mini:1.5rem;
  --img_size_small:2rem;
  --img_size_base:3.5rem;
  --img_size_big:4.5rem;
  --img_size_larger:6rem;
  --img_size_huge:8rem;
  /* rounded corners */
  --radius_small:0.25rem;
  --radius_base:0.5rem;
  --radius_big:1rem;
  --radius_circle:50%;
  /* high */
  --height_mini:1rem;
  --height_small:1.5rem;
  --height_base:2rem;
  --height_big:2.5rem;
  --height_larger:3rem;
  /* === interval === */
  /* horizontal spacing */
  --row_mini:0.25rem;
  --row_small:0.5rem;
  --row_base:1rem;
  --row_big:1.25rem;
  --row_larger:1.5rem;
  /* vertical spacing */
  --col_mini:0.25rem;
  --col_small:0.5rem;
  --col_base:1rem;
  --col_big:1.25rem;
  --col_larger:1.5rem;
  /* padding */
  --padding_mini:0.25rem;
  --padding_small:0.5rem;
  --padding_base:1rem;
  --padding_big:1.25rem;
  --padding_larger:1.5rem;
  --padding_huge:2rem;
  /* margins */
  --margin_mini:0.25rem;
  --margin_small:0.5rem;
  --margin_base:1rem;
  --margin_big:1.25rem;
  --margin_larger:1.5rem;
  --margin_huge:2rem;
  }
:focus {outline:0 auto 0;}
::-webkit-scrollbar-thumb:hover {background-color:rgba(0,0,0,0.25);}

/* === base style === */
@font-face {font-family:"Helvetica Neue";font-style:normal;font-weight:400;src:url(../fonts/HelveticaNeue.eot) format(embedded-opentype),url(../fonts/HelveticaNeue.woff2) format(woff2),url(../fonts/HelveticaNeue.woff) format(woff),url(../fonts/HelveticaNeue.ttf) format(truetype),url(../fonts/HelveticaNeue.svg) format(svg);}
* {margin:0;padding:0;-webkit-overflow-scrolling:touch;}
*,::before,::after {-webkit-box-sizing:border-box;box-sizing:border-box;}
html {height:100%;overflow:hidden;font-family:"Helvetica Neue",helvetica,arial,sans-serif;line-height:1;}
body {height:100vh;color:var(--color_base);overflow:hidden;-webkit-text-size-adjust: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}

/** invisible elements **/
[type=search] {-webkit-appearance:none;outline-offset:-2px;}
[type=search]::-webkit-search-decoration {-webkit-appearance:none;}
[hidden],.hidden {display:none !important;}
[tabindex=-1]:focus:not(:focus-visible) {outline:0 !important;}

/* === layout label === */
article {overflow:hidden;}
article>header {text-align:center;}
blockquote {margin:0 0 var(--margin_base);padding:0 var(--padding_base);color:var(--color_grey);border-left:3px solid var(--color_border);}
address {font-style:normal;line-height:inherit;}
section {position:relative;}
main {position:relative;}
address,article,aside,code,figcaption,hgroup,main,nav,section,iframe,frame,form,pre {display:block;}
header::before,header::after,footer::before,footer::after,frame::before,frame::after,iframe::before,iframe::after,code::before,code::after,address::before,address::after,section::before,section::after {clear:both;content:"";display:block;}
article::before,article::after {content:"";display:block;clear:both;}
form::before,form::after {content:"";display:block;clear:both;}
code {padding:var(--padding_small);}
table {border:1px solid var(--color_border);border-collapse:collapse;border-radius:var(--radius_small);width:100%;border-spacing:0;}
nav {white-space:nowrap;}

/* === form class === */
input,input::after,input::before {box-sizing:border-box;}
input,textarea {outline:none;}
input[type=color] {height:1.5rem;border:1px solid var(--color_border);border-radius:var(--radius_small);margin-top:0.25rem;margin-bottom:0.25rem;}
input[type=range] {margin-top:0.75rem;margin-bottom:0.875rem;
  outline:none;-webkit-appearance:none;background:var(--color_border);
  height:3px;
}
input[type=range]:-webkit-slider-thumb,input[type=range]:-moz-range-thumb,input[type=range]:-ms-thumb {-webkit-appearance:none;width:1rem;height:1rem;border-radius:50%;background:var(--color_info);cursor:pointer;margin-top:-0.875rem;}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=password],input[type=url],input[type=date],input[type=datetime],input[type=time],input[type=datetime-local],input[type=month],input[type=week] {border-radius:var(--radius_small);border:1px solid var(--color_border);padding-left:var(--padding_small);min-height:var(--height_base);}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=password],input[type=url] {padding-right:var(--padding_small);}
input[type=date],input[type=datetime],input[type=time],input[type=datetime-local],input[type=month],input[type=week] {-webkit-appearance:listbox;padding-right:var(--padding_mini);}
input[type=radio],input[type=checkbox] {box-sizing:border-box;padding:0;}
input[type=datetime-local] {background:#fff;letter-spacing:-1px;}

/* illegal selector */
button,select {text-transform:none;cursor:pointer;border:1px solid var(--color_border);padding:var(--padding_mini) var(--padding_small);border-radius:var(--radius_small);}
button {-webkit-appearance:button;display:inline-block;padding: 0.5rem 1rem;}
[type=button],[type=reset],[type=submit] {-webkit-appearance:button;}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {border-style:none;padding:0;}
button:focus {outline:none;}
select {padding-left:var(--padding_small);min-width:3rem;word-wrap:normal;text-align:center;}
select[multiple] {background:none;}
textarea {overflow-x:hidden;overflow-y:auto;resize:vertical;padding:var(--padding_small);border:1px solid var(--color_border);border-radius:var(--radius_small);font-family: inherit;/* min-width:13.25rem; */}
form textarea {width:100%;}
.pc .multiple,.pc select[multiple],.pc select[size] {height:auto;}
form label~label {margin-left:var(--margin_base);}
optgroup {line-height:inherit;}
fieldset {border:0;min-width:0;}
input:focus,select:focus,button:focus {z-index:20;}
caption {caption-side:bottom;padding-bottom:var(--padding_small);padding-top:var(--padding_small);text-align:left;}

/* === List class === */
dt {display:block;clear:left;float:left;font-weight:400;padding:var(--padding_small);min-width:7rem;position:relative;}
dt>span,dd>span {line-height:var(--height_base);}
dd {display:block;padding:var(--padding_small);float:left;}
li {position:relative;}
ul {display:block;padding-left:1.25rem;}
dl {display:block;}
dl::before,dl::after,ul::before,ul::after,ol::before,ol::after {content:"";display:block;float:none;clear:both;}
ol {padding-left:1.25rem;padding-right:var(--padding_base);}
th {border:1px solid var(--color_border);padding:var(--padding_small) .75rem;text-align:inherit;}
thead th>span {line-height:var(--height_base);}
thead th {border-bottom:2px solid var(--color_border);vertical-align:bottom;}
td {border:1px solid var(--color_border);padding:var(--padding_small) .75rem;white-space:nowrap;}

/* === Content Tags === */
sub,sup {line-height:0;position:relative;vertical-align:baseline;}
sub {bottom:-0.25em;}
sup {top:-0.5em;}
hr {box-sizing:content-box;height:0;overflow:visible;}
svg {overflow:hidden;vertical-align:middle;}
output {display:inline-block;}
summary {cursor:pointer;}
template {display:none;}
abbr[title],abbr[data-original-title] {border-bottom:0;cursor:help;text-decoration:underline dotted;text-decoration-skip-ink:none;}

/* === font size === */
h1,.h1 {font-size:var(--font_huge);}
h2,.h2 {font-size:var(--font_larger);}
h3,.h3 {font-size:var(--font_big);}
h4,.h4 {font-size:var(--font_base);}
h5,.h5 {font-size:var(--font_small);}
h6,.h6 {font-size:var(--font_mini);}
.p { font-weight: 400; }
h1,.h1,h2,.h2 {font-weight:600;}
h3,.h3,h4,.h4,h5,.h5,h6,.h6 {font-weight:550;}
small,.font-sm {font-size:75% !important;}
big,.font-bg {font-size:125% !important;}

/* === media tag === */
/* picture */
img {border:none;vertical-align:middle;}
/* Picture frame */
figure {position:relative;overflow:hidden;display:block;background:center center no-repeat;background-size:100%;}
figure img {width:100%;display:block;}
/* image description */
figcaption {display:block;}
figure~div {overflow:hidden;}
/* Link */
a {background-color:transparent;color:inherit;cursor:pointer;text-decoration:none;}
nav>a {display:inline-block;}
a:hover,a:not([href]) {text-decoration:none;}
/* article spacing */
section h1,section h2,section h3,section h4,section h5 {margin-top:1rem;margin-bottom:.5rem;}
section p,section blockquote {margin-bottom:1rem;}
section blockquote>* {margin-bottom:0;}
section h1,section h2,section h3 {padding-bottom:.25rem;border-bottom:1px solid var(--color_border);}

input,button,select,textarea {
  font-size: 0.875rem;
}
input[type=time] {
  max-width: 7rem;
}
input[type=date] {
  max-width: 8.75rem;
}

.required { position: relative; z-index: 1; }
.required::before {content: "*"; color:var(--color_error);position: absolute;top: 50%;left: -0.5rem;transform: translate(0, -32%); z-index: 3; line-height: 1;}
.form_required input:invalid, .form_required textarea:invalid {border-color:var(--color_error);}