@import url('./form.css');
@import url('./module.css');

a,article,aside,audio,blockquote,body,caption,dd,div,dl,dt,figcaption,figure,footer,form,button,h1,h2,h3,h4,h5,h6,header,html,iframe,label,li,mark,menu,nav,ol,output,p,pre,ruby,section,span,table,tbody,td,tfoot,th,thead,time,tr,ul,video{margin:0;padding:0;font:inherit;border:0;vertical-align:baseline}ol,ul{list-style:none}a{text-decoration:none}i,cite{font-style:normal}img{border:none;vertical-align:top}table{border-collapse:collapse;border-spacing:0}button{background:none;display:block;cursor:pointer;}


/* default
==============================*/
:root {
  --white:       rgb(255 255 255);
  --white-main:  rgb(255 255 255 / .95);
  --white-light: rgb(255 255 255 / .87);

  --black:       rgb(0 0 0);
  --black-main:  rgb(0 0 0 / .95);
  --black-light: rgb(0 0 0 / .87);

  --primary-main:  #2194f3;
  --primary-light: #bbdefb;
  --primary-dark:  #1045a1;
  --primary-50:  #e3f2fd;
  --primary-100: #bbdefb;
  --primary-200: #90c9f9;
  --primary-300: #63b4f6;
  --primary-400: #42a4f5;
  --primary-500: #2194f3;
  --primary-600: #1f87e5;
  --primary-700: #1a75d2;
  --primary-800: #1764c0;
  --primary-900: #1045a1;

  --secondary-main:  #ffeb3b;
  --secondary-light: #fff9c4;
  --secondary-dark:  #f57f16;
  --secondary-50:  #fffde7;
  --secondary-100: #fff9c4;
  --secondary-200: #fff59d;
  --secondary-300: #fef075;
  --secondary-400: #fceb55;
  --secondary-500: #ffeb3b;
  --secondary-600: #fdd835;
  --secondary-700: #fbc02d;
  --secondary-800: #f9a825;
  --secondary-900: #f57f16;

  --txt-main:     rgb(0 0 0 / .87);
  --txt-light:    rgb(0 0 0 / .60);
  --txt-disabled: rgb(0 0 0 / .28);
  --txt-link:     rgb(41 98 255);

  --txt-contrast-main:  rgb(255 255 255 / .60);
  --txt-contrast-light: rgb(255 255 255 / .87);
  --txt-contrast-dark:  rgb(255 255 255 / .28);
  --txt-contrast-link:  rgb(62, 166, 255);

  --bg-main:     rgb(246 247 248);
  --bg-paper:    rgb(255 255 255);
  --bg-disabled: rgb(0 0 0 / .12);

  --bg-contrast-main:  rgb(0 0 0 / .60);
  --bg-contrast-light: rgb(0 0 0 / .87);
  --bg-contrast-dark:  rgb(0 0 0 / .28);

  --line-main:  rgb(0 0 0 / .23);
  --line-light: rgb(0 0 0 / .12);
  --line-dark:  rgb(0 0 0 / .42);

  --hover:       rgb(0 0 0 / .04);
  --overlay:     rgb(0 0 0 / .50);
  --shadow-main: rgb(0 0 0 / .2) 0px 3px 1px -2px, rgb(0 0 0 / .14) 0px 2px 2px 0px, rgb(0 0 0 / .12) 0px 1px 5px 0px;
  --shadow-main-hov: rgb(0 0 0 / .2) 0px 2px 4px -1px, rgb(0 0 0 / .14) 0px 4px 5px 0px, rgb(0 0 0 / .12) 0px 1px 10px 0px;
  --shadow-light: 0 1px 15px rgb(27 31 35 / .15),0 0 1px rgba(106 115 125 / .35);
  --shadow-light-hov: 0 1px 13px rgb(27 31 35 / .2),0 0 5px rgba(106 115 125 / .4);

  --margin-obj:     8px;
  --margin-item:    16px;
  --margin-group:   24px;
  --margin-unit:    32px;
  --margin-block:   40px;
  --margin-section: 64px;

  --radius-xs: 4px;
  --radius-xm: 10px;
  --radius-xl: 20px;
  --radius-round: 100vh;
  --radius-circle: 50%;

  --breakpoint-xl: 1280px;
  --breakpoint-xm: 960px;
  --breakpoint-xs: 770px;

  --typo-h1:  2rem;      /*32px*/
  --typo-h2:  1.875rem;  /*30px*/
  --typo-h3:  1.625rem;  /*26px*/
  --typo-h4:  1.5rem;    /*24px*/
  --typo-h5:  1.375rem;  /*22px*/
  --typo-h6:  1.25rem ;  /*20px*/
  --typo-art: 1.125rem;  /*18px*/
  --typo-bd:  1rem;      /*16px*/
  --typo-min: .875rem;   /*14px*/

  --info-main:     #2196F3;
  --info-light:    #64b5f6;
  --info-dark:     #0d47a1;
  --info-contrast: #0d3c61;
  --info-bg:       #e3f2fd;
  
  --success-main:     #4caf50;
  --success-light:    #81c784;
  --success-dark:     #1b5e20;
  --success-contrast: #1e4620;
  --success-bg:       #e8f5e9;
  
  --important-main:     #9c27b0;
  --important-light:    #ba68c8;
  --important-dark:     #4a148c;
  --important-contrast: #3e1046;
  --important-bg:       #f3e5f5;
  
  --warning-main:     #ff9800;
  --warning-light:    #ffb74d;
  --warning-dark:     #e65100;
  --warning-contrast: #5f2b01;
  --warning-bg:       #fff3e0;

  --error-main:     #F44336;
  --error-light:    #e57373;
  --error-dark:     #b71c1c;
  --error-contrast: #621b16;
  --error-bg:       #ffebee;
}
html {font-size: 16px;}
body {
  line-height: 1.5;
  font-size: var(--typo-bd);
  color: var(--txt-main);
  background: #f6f7f8;
}
#root {position: relative;}
a {
  text-decoration: none;
  color: inherit;
  transition: .2s;
}


/* font
==============================*/
@font-face {
  font-family: 'defo';
  src:
    local("Helvetica"),
    local("Arial"),
    local("ヒラギノ角ゴ Pro W3"),
    local("Hiragino Kaku Gothic ProN"),
    local("メイリオ"),
    local("Meiryo");
  font-weight: normal;
}
@font-face {
  font-family: 'defo';
  src:
    local("Helvetica Bold"),
    local("Arial Bold"),
    local("Meiryo Bold");
  font-weight: bold;
}
@font-face {
  /*数字のみサイズ拡張*/
  font-family: "Adjusted";
  src:
    local("Helvetica"),
    local("Arial"),
    local("ヒラギノ角ゴ Pro W3"),
    local("Hiragino Kaku Gothic ProN"),
    local("メイリオ"),
    local("Meiryo");
  size-adjust: 110%;
  unicode-range: U+30-39;
}

body,button,textarea,input,select {font-family: 'defo', sans-serif;}
.font-serif {font-family: "游明朝","Yu Mincho","ヒラギノ明朝 ProN","Hiragino Mincho ProN",serif;}
.font-mono {font-family: "Meiryo",monospace;}

/* icon
==============================*/
.ico-mui,
.ico-aft::after,
.ico-bef::before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: var(--typo-h4);
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align: middle;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
@-moz-document url-prefix() {
  .ico-mui, .ico-aft::after, .ico-bef::before {height: 1em; line-height: 1.08;}
}
.ico-mui[data-ico]::before,
.ico-aft[data-ico]::after,
.ico-bef[data-ico]::before {content: attr(data-ico);}

/* animation
==============================*/
.rubberBand {animation: rubberBand 1s linear 0s forwards normal;}
@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}

.tada {animation: tada 1s linear 0s forwards normal;}
@keyframes tada {0% {transform: scale3d(1, 1, 1);}10%, 20% {transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);}30%, 50%, 70%, 90% {transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, 3deg);}40%, 60%, 80% {transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, -3deg);}100% {transform: scale3d(1, 1, 1);}}


/* ellipsis
==============================*/
.elp {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.elps {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  align-self: baseline;
}

/* wbr
==============================*/
.wbr {word-break: keep-all; overflow-wrap: break-word;}

/* link
==============================*/
.anc {
  color: var(--txt-link);
  cursor: pointer;
}
.anc:hover {text-decoration: underline;}

/* button
==============================*/
.btn {
  width: fit-content;
  min-width: 64px;
  text-align: center;
  border-radius: var(--radius-round);
  color: var(--txt-link);
  display: block;
  cursor: pointer;
  transition: .2s;
}
.btn.min {padding: 4px 12px; font-size: .8rem;}
.btn.xs  {padding: 8px 16px; font-size: .9rem;}
.btn.xm  {padding: 10px 24px;}
.btn.xl  {padding: 12px 32px; font-size: 1.1rem;}
.btn.full {width: 100%; display: block;}

.btn.box {border-radius: var(--radius-xs);}
.btn.outline {border: 1px solid var(--txt-link);}
.btn.fill {
  background: var(--txt-link);
  color: var(--white-main);
}
.btn:hover {background: #E3F2FD;}
.btn.outline:hover {
  background: var(--txt-link);
  color: var(--white-main);
}
.btn.fill:hover {
  background: var(--txt-link);
  filter: grayscale(30%);
}
.btn.trg {color: var(--txt-light);}
.btn.trg.outline {
  border: 1px solid var(--line-main);
  background: var(--bg-paper);
}
.btn.trg.fill {
  background: #e8f0fe;
  color: var(--txt-link);
}
.btn.trg:hover {
  background: var(--hover);
  color: var(--txt-main);
}
.btn.trg.fill:hover {
  background: #c9dafc;
  color: #174ea6;
}
.btn.dsbl {
  color: var(--txt-disabled);
  pointer-events: none;
}
.btn.dsbl.outline {border-color: var(--txt-disabled);}
.btn.dsbl.fill {background-color: var(--bg-disabled);}

.btn.ico-mui {
  min-width: 0;
  padding: 8px;
  font-size: var(--typo-bd);
}
.btn.ico-mui.xs {
  width: 32px;
  height: 32px;
}
.btn.ico-mui.xm {
  width: 40px;
  height: 40px;
}
.btn.ico-mui.xl {
  width: 48px;
  height: 48px;
}
.btn.ico-mui.xs {font-size: var(--typo-bd);}
.btn.ico-mui.xm {font-size: var(--typo-h4);}
.btn.ico-mui.xl {font-size: var(--typo-h1);}

.btn.ico-mui,
.btn.ico-bef,
.btn.ico-aft {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.btn.ico-mui::before ,
.btn.ico-bef::before ,
.btn.ico-aft::after {width: 24px;}
.btn.xs.ico-mui::before ,
.btn.xs.ico-bef::before ,
.btn.xs.ico-aft::after {font-size: var(--typo-h5);}
.btn.xl.ico-mui::before ,
.btn.xl.ico-bef::before ,
.btn.xl.ico-aft::after {
  width: auto;
  height: auto;
}
.btn.ico-bef::before {margin-left: -4px;}
.btn.ico-aft::after {margin-right: -4px;}

/* card
==============================*/
.card {
  border-radius: var(--radius-xm);
  background: var(--bg-paper);
  overflow: hidden;
}
.card.xs {padding: 8px;}
.card.xm {padding: 16px;}
.card.xl {padding: 24px;}
.card.box {border-radius: var(--radius-xs);}
@media screen and (max-width: 768px) {
  .card.XS_xs {padding: 8px;}
  .card.XS_xm {padding: 16px;}
  .card.XS_xl {padding: 24px;}
}

/* center
==============================*/
.center {
  display: grid;
  place-items: center;
}

/* object-fit
==============================*/
.fit {width: 100%; height: 100%; object-fit: cover;}
.fit.contain {object-fit: contain;}

/* aspect-ratio
==============================*/
.asp-11 {aspect-ratio: 1/1;}
.asp-169 {aspect-ratio: 16/9;}
.asp-golden {aspect-ratio: 1.618/1;}
.asp-silver {aspect-ratio: 1.414/1;}

/* shadow
==============================*/
.shadow {box-shadow: var(--shadow-main);}
.shadow-light {box-shadow: var(--shadow-light);}
@media (770px < width) {
  .shadow[data-hov]:hover {box-shadow: var(--shadow-main-hov);}
  .shadow-light[data-hov]:hover {box-shadow: var(--shadow-light-hov);}
}

/* hover
==============================*/
[data-hov] {transition: .2s;}
@media (770px < width) {
  [data-hov="txt"]:hover {text-decoration: underline;}
  [data-hov="bg"]:hover {background: var(--hover);}
  [data-hov="shdw"]:hover {box-shadow: var(--shadow-main)}
}

/* scroll
==============================*/
.scrl-x, .scrl-y, .scrl-xy {-webkit-overflow-scrolling: touch;}
.scrl-x {
  overflow-y: hidden;
  overflow-x: auto;
}
.scrl-y {
  overflow-y: auto;
  overflow-x: hidden;
}
.scrl-xy {overflow: auto;}
.scrl-thin {scrollbar-width: thin;}

/* noscroll
==============================*/
.noscroll {
  width: 100%;
  overflow: hidden;
  position: fixed;
  left: 0;
}
.noscroll #root {
  scrollbar-gutter: stable;
  overflow: auto;
}
.overlay {
  width: 100%;
  height: 100%;
  background: var(--overlay);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

/* breadcrumbs
==============================*/
.breadcrumbs {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.breadcrumbs,.breadcrumbs-li {
  display: flex;
  gap: 4px;
}
.breadcrumbs-li {font-size: 0;}
.breadcrumbs-link {
  font-size: var(--typo-bd);
}
.breadcrumbs-link:hover {color: var(--txt-link);}
.breadcrumbs-li:not(:last-child):after {content: 'chevron_right';}

/* section
==============================*/
.sec-full {
  max-width: 100%;
  margin: 0 auto var(--margin-section);
  padding: 40px 0;
  background: #ddd; /*仮*/
}
.sec-full .sec {margin: 0;}
.sec {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto var(--margin-section);
}

/* Ripple Effect
==============================*/
.ripple {
  position: absolute;
  top:0; left:0; bottom:0; right:0;
  overflow: hidden;
  transform: translateZ(0);
  border-radius: inherit;
  pointer-events: none;
}
.rippleWave {
  backface-visibility: hidden;
  position: absolute;
  border-radius: var(--radius-circle);
  transform: scale(.7);
  background: rgb(255 255 255 / .5);
  opacity: .45;
  animation: ripple 1s forwards;
}
@keyframes ripple {
  to {transform: scale(24); opacity:0;}
}

/* callout
==============================*/
.callout {
  padding: 8px 12px;
  border-radius: var(--radius-xm);
  border: 1px solid #90a4ae;
  background: #eceff1;
  color: var(--black-light);
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.callout.ico-bef {padding-left: 44px;}
.callout.ico-bef::before {
  width: 24px;
  height: 24px;
  line-height: 24px;
  position: absolute;
  top: 8px;
  left: 12px;
}
.callout.inf {
  border-color: var(--info-main);
  background: var(--info-bg);
  color: var(--info-contrast);
}
.callout.suc {
  border-color: var(--success-main);
  background: var(--success-bg);
  color: var(--success-contrast);
}
.callout.imp {
  border-color: var(--important-main);
  background: var(--important-bg);
  color: var(--important-contrast);
}
.callout.war {
  border-color: var(--warning-main);
  background: var(--warning-bg);
  color: var(--warning-contrast);
}
.callout.err {
  border-color: var(--error-main);
  background: var(--error-bg);
  color: var(--error-contrast);
}
.callout.light {border-color: #cfd8dc;}
.callout.light::after {
  content: '';
  width: 100%;
  height: 100%;
  background: rgb(255 255 255 / .5);
  border-radius: var(--radius-xm);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.callout.inf.light {border-color: #bbdefb;}
.callout.suc.light {border-color: #c8e6c9;}
.callout.imp.light {border-color: #e1bee7;}
.callout.war.light {border-color: #ffe0b2;}
.callout.err.light {border-color: #ffcdd2;}
.callout.inf.ico-bef::before {
  content: "info";
  color: var(--info-main);
}
.callout.suc.ico-bef::before {
  content: "check_circle";
  color: var(--success-main);
}
.callout.imp.ico-bef::before {
  content: "label_important";
  color: var(--important-main);
}
.callout.war.ico-bef::before {
  content: "warning";
  color: var(--warning-main);
}
.callout.err.ico-bef::before {
  content: "dangerous";
  color: var(--error-main);
}
.callout.ico-bef[data-ico]::before {content: attr(data-ico);}

/* media
==============================*/
@media (1280px <= width){} /* xl */
@media (770px < width)  {} /* md */
@media (770px >= width) {} /* sm */

/* ed */