@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
:root {
  --color-black: #1f1f1f;
  --color-base: #fafafa;
  --color-red: #f00;
  --color-orange: #F96700;
  --color-yellow: #FFB802;
  --color-primary: #0DA3AC;
  --color-primary-light: #E2F1F2;
  --color-navy: #002A4E;
  --color-gray0: #e5e5e5;
  --color-gray1: #ddd;
  --color-gray2: #ccc;
  --color-gray3: #bbb;
  --color-gray4: #888;
  --color-gray5: #999;
  --color-gray6: #666;
  --color-pink: #FDDEE2;
  --color-orange-light: #fff4eb;
  --shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  --header-height: 64px;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video,input,textarea {
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  text-decoration: none;
  font-weight:normal;
  font-style:normal;
  font-size:14px;
  box-sizing:border-box;
}
body{
  font-family: "Noto Sans JP", Arial,Roboto,"Droid Sans","游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
  line-height:1.6;
  color:var(--color-black);
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing: antialiased;
  max-width: 810px;
  margin: 0 auto;
}

html,body {
  background-color: var(--color-base);
}

img{
  text-decoration:none;
  vertical-align:top;
  font-size:0px;
}

article,aside,main,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
  box-sizing:border-box
}

ol,ul{list-style:none;}

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

a{
  box-sizing:border-box;
  outline:none;
}
p{color:var(--color-black);}

button {
  vertical-align: top;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
::placeholder {
  color: #c4c4c4;
}

span {
  color: inherit;
}

/* component */
.global-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fafafa;
  width: 100%;
  height: var(--header-height);
  padding: 0 10px;
  z-index: 100;
  position: sticky;
  top: 0;
  left: 0;
}

.button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: 5px;
  height: 48px;
  padding: 0 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: var(--color-gray6);
  position: relative;
  box-shadow: var(--shadow);
  border-radius: 6px;
  border: 2px solid var(--color-gray6);
}
.button--clear-shadow {
  box-shadow: none;
}
.button--slim {
  height: 38px;
  border-radius: 4px;
}
.button--fat {
  height: 58px;
  font-size: 16px;
  border-radius: 8px;
}
.button--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.button--orange {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}
.button--red {
  background-color: #CC0033;
  border-color: #CC0033;
}
.button--white {
  background-color: #fff;
  color: var(--color-black);
  border-color: var(--color-gray2);
}
.button--next:after {
  font-family: 'Font Awesome 5 Free';
  content: '\f054';
  color: inherit;
  font-weight: bold;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 14px;
}
.button--prev:after {
  font-family: 'Font Awesome 5 Free';
  content: '\f053';
  color: inherit;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 14px;
}
.button--white:after {
  color: var(--color-gray6);
}
.button.is-disabled {
  color: var(--color-gray4);
  background-color: var(--color-gray3);
  border-color: var(--color-gray3);
  pointer-events: none;
  box-shadow: unset;
}
.button--fit {
  width: fit-content;
}
.contents {
  padding: 24px 16px;
}
.column2 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.column2__item {
  width: calc(50% - 8px);
}
.risk-button {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  line-height: 1;
  border-radius: 8px;
  position: relative;
  padding: 16px 24px;
  box-shadow: var(--shadow);
  color: #fff;
  background-color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
}
.risk-button__title {
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  margin-bottom: 10px;
}
.risk-button__number {
  font-size: 40px;
  font-weight: bold;
}
.risk-button__percent {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 5px;
  margin-left: 5px;
}
.risk-button__padding {
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  margin-bottom: 10px;
  padding-top: 12px;
}
.risk-button:after {
  font-family: 'Font Awesome 5 Free';
  content: '\f054';
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 16px;
}
.risk-button--red {
  background-color: var(--color-red);
}
.risk-button--yellow {
  background-color: var(--color-yellow);
}
.risk-button--orange {
  background-color: var(--color-orange);
}
.risk-button--gray {
  background-color: var(--color-gray6);
}
.risk-button--hide-arrow:after {
  content: '';
}
.risk-button--inactive {
	cursor: default;
	pointer-events: none;
}
.color-block {
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: var(--color-primary);
}
.color-block--slim {
  height: 15px;
}
.color-block--red {
  background-color: var(--color-red);
}
.color-block--yellow {
  background-color: var(--color-yellow);
}
.color-block--orange {
  background-color: var(--color-orange);
}
.color-block--pink {
  background-color: var(--color-pink);
}
.tip-title {
  position: relative;
  padding-left: 20px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}
.tip-title:before {
  content: '';
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  left: 0;
  top: 5px;
  background-color: var(--color-primary);
  line-height: 1.2;
}
.section-box {
  border: 1px solid var(--color-primary);
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
}
.section-box__body {
  padding: 24px 16px;
}
.section-box__header {
  background-color: var(--color-primary);
  color: #fff;
  padding: 10px 15px;
  line-height: 1.2;
}
.section-box__header--light {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.button-accordion {
  padding: 10px 15px;
  border: 2px solid var(--color-gray2);
  border-radius: 6px;
}
.button-accordion__trigger{
  display: block;
  font-size: 16px;
  text-align: center;
  position: relative;
}
.button-accordion__trigger:before {
  font-family: 'Font Awesome 5 Free';
  content: '\f078';
  color: inherit;
  font-weight: bold;
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--color-gray6);
}
.button-accordion[open] .button-accordion__trigger:before {
  content: '\f077';
}
.button-accordion__body {
  padding-top: 20px;
  margin-top: 10px;
  border-top: 1px dashed var(--color-gray2);
}
.info-table {
  width: 100%;
  border: 1px solid var(--color-gray2);
}
.info-table__head {
  color: var(--color-gray6);
  background-color: var(--color-gray1);
  text-align: center;
  font-size: 16px;
  padding: 4px 0;
}
.info-table__head-white {
  color: var(--color-white);
  background-color: var(--color-white);
  text-align: center;
  font-size: 16px;
  padding: 4px 0;
}
.info-table__head-primary {
  color: #ffffff;
  background-color: var(--color-primary);
  text-align: center;
  font-size: 16px;
  padding: 4px 0;
}
.info-table__head--border {
  border-bottom: 1px solid var(--color-gray1);
}
.info-table__data {
  font-size: 16px;
  border-bottom: 1px solid var(--color-gray1);
  padding: 4px 8px;
  vertical-align: middle;
}
.info-table__data--border-right {
  border-right: 1px solid var(--color-gray1);
}
.info-table__data--white {
  font-size: 16px;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray1);
  padding: 4px 8px;
  vertical-align: middle;
}
.info-table__data--gray {
  font-size: 16px;
  background-color: var(--color-gray1);
  border-bottom: 1px solid #ffffff;
  padding: 4px 8px;
  vertical-align: middle;
}
.info-table__data--red {
  font-size: 16px;
  background-color: var(--color-pink);
  color: var(--color-red);
  border-bottom: 1px solid #fff;
  padding: 4px 8px;
  vertical-align: middle;
}
.info-table tbody tr:last-child .info-table__data {
  border-bottom: 1px solid var(--color-gray2);
}

.modal {
  display: none;
}
.modal.is-open {
  display: block;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  z-index: 101;
}

.modal__container {
  background-color: #fff;
  padding: 25px;
  width: 340px;
  max-width: 100%;
  max-height: 100%;
  border-radius: 5px;
  position: relative;
}
.modal__close {
  position: absolute;
  right: 0;
  top: -35px;
  color: #fff;
}
.modal__header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: bold;
  padding: 15px;
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-radius: 5px 5px 0 0;
}


.modal[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.modal[aria-hidden="false"] .modal__container {
  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.modal[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.modal[aria-hidden="true"] .modal__container {
  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

@keyframes mmfadeIn {
  from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mmfadeOut {
  from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes mmslideIn {
from { transform: translateY(15%); }
  to { transform: translateY(0); }
}

@keyframes mmslideOut {
  from { transform: translateY(0); }
  to { transform: translateY(-10%); }
}

.footer {
  padding: 10px 15px;
  background-color: #fafafa;
}
.footer__copyright {
  color: var(--color-gray5);
  font-size: 12px;
}

.global-nav {
  background-color: var(--color-base);
}


.global-nav__header {
  padding: 15px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
}

.band-link {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 15px;
  font-size: 18px;
  background-color: #fff;
  color: var(--color-black);
  text-decoration: none;
  position: relative;
  border-bottom: 1px solid var(--color-gray2);
  &:after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    color: var(--color-primary);
    font-weight: bold;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 14px;
  }
  &[href]:after {
    content: '\f054';
  }
}
.band-link--primary {
  color: #fff;
  background-color: var(--color-primary);
  font-weight: bold;
  &:after {
    color: inherit;
  }
}

.text-link {
  color: var(--color-primary);
  font-weight: bold;
  font-size: 16px;
}

.select {
  width: 100%;
  position: relative;
  &:after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-gray6);
    font-size: 12px;
  }
}
.select__body {
  display: block;
  width: 100%;
  border: 1px solid var(--color-gray2);
  border-radius: 6px;
  padding: 15px 10px;
  font-size: 16px;
  appearance: none;
}

.triangle {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 24px 32px 0 32px;
  border-color: var(--color-primary) transparent transparent transparent;
  transform: rotate(0deg);
}

.vertical-border-title {
  border-top: 1px solid var(--color-gray6);
  border-bottom: 1px solid var(--color-gray6);
  text-align: center;
  padding: 10px 0;
  line-height: 1.4;
}

.tab {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  border-bottom: 1px solid var(--color-primary);
}

.tab__item {
  border: 1px solid var(--color-primary);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 18px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  position: relative;
  &.is-active {
    font-weight: bold;
    color: var(--color-primary);
    background-color: #fff;
    &:after {
      content: '';
      width: 100%;
      height: 1px;
      bottom: -1px;
      left: 0;
      position: absolute;
      background-color: #fff;
    }
  }
}

.tab-box {
  display: none;
  border: 1px solid var(--color-primary);
  border-top: 0;
  background-color: #fff;
  border-radius: 0 0 6px 6px;
  padding: 25px 15px;
}

.tab-box.is-active {
  display: block;
}
.improve-simulation {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 25px;
}
.improve-simulation__item {
  border: 1px solid var(--color-gray2);
  background-color: var(--color-base);
  border-radius: 6px;
  overflow: hidden;
  color: var(--color-gray6);
}
.improve-simulation__item-header {
  text-align: center;
  font-size: 15px;
  padding: 5px;
  line-height: 1;
  background-color: #fff;
  color: var(--color-black);
}
.improve-simulation__item-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: 5px;
  padding: 8px;
}
.improve-simulation__triangle {
  width:0;
  height:0;
  border-style:solid;
  border-width: 20px 0 20px 24px;
  border-color: transparent transparent transparent var(--color-gray2);  
}
.improve-simulation__item--primary {
  border: 1px solid var(--color-primary);
  background-color: var(--color-primary);
  color: #fff;
}
.improve-simulation__item--red {
  border: 1px solid var(--color-primary);
  background-color: var(--color-red);
  color: #fff;
}
.improve-simulation__item--orange {
  border: 1px solid var(--color-primary);
  background-color: var(--color-orange);
  color: #fff;
}
.improve-simulation__item--primary .improve-simulation__item-header {
  color: var(--color-primary);
  font-weight: bold;
}

.improve-item {
  border-radius: 6px;
  border: 1px solid var(--color-gray2);
  display: grid;
  grid-template-columns: 64px 1fr 1fr;
  align-items: center;
  padding: 8px 10px;
  line-height: 1.2;
}
.improve-item__icon {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.improve-item__title {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-primary);
  padding-left: 16px;
}
.text-input {
  display: block;
  width: 100%;
  border: 2px solid var(--color-gray2);
  padding: 15px;
  border-radius: 8px;
}
.result-data {
  display: grid;
  grid-template-columns: 43% 19% 19% 19%;
  padding: 10px 15px;
  align-items: center;
  line-height: 1.2;
} 
.result-data--header {
  background-color: var(--color-gray0);
  position: sticky;
  top: var(--header-height);
  left: 0;
  z-index: 10;
  border-bottom: 1px solid var(--color-gray1);
}
.result-accordion {
  background-color: #fff;
}
.result-accordion__header {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  position: relative;
  padding: 12px 15px;
  border-bottom: 1px solid var(--color-gray1);
}
.result-accordion__header:before {
  font-family: 'Font Awesome 5 Free';
  content: '\f078';
  color: inherit;
  font-weight: bold;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--color-primary);
}
.result-accordion[open] .result-accordion__header:before {
  content: '\f077';
}
.badge {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  background-color: var(--color-red);
  color: #fff;
  padding: 4px;
  line-height: 1;
}
.prediction-video {
  display: grid;
  grid-template-columns: 1fr 200px;
  background-color: var(--color-navy);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 15px;
  color: #fff;
  align-items: center;
}
.effort-chart {
  position: relative;
  width: 160px;
  margin: 0 auto 15px;
}
.effort-chart__data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 100px;
  text-align: center;
  line-height: 1.2;
  gap: 5px;
}

/* utility */
.u-shadow {
  box-shadow: var(--shadow);
}
.u-text-right {
  text-align: right !important;
}
.u-text-left {
  text-align: left !important;
}
.u-ml-auto {
  margin-left: auto !important;
}
.u-mr-auto {
  margin-right: auto !important;
}
.u-weight-bold {
  font-weight: 700 !important;
}
.u-weight-mid {
  font-weight: 500 !important;
}
.u-weight-normal {
  font-weight: normal !important;
}
.u-text-center {
  text-align: center !important;
}
.u-flex {
  display: flex !important;
}
.u-flex-wrap {
  flex-wrap: wrap !important;
}
.u-flex-column {
  flex-direction: column !important;
}
.u-align-self-end {
  align-self: flex-end !important;
}
.u-align-item-center {
  align-items: center !important;
}
.u-direction-column {
  flex-direction: column !important;
}
.u-justify-end {
  justify-content: flex-end !important;
}
.u-justify-center {
  justify-content: center !important;
}
.u-wh100p {
  width: 100% !important;
  height: auto !important;
}
.u-max-w100p {
  max-width: 100% !important;
  height: auto;
}
.u-w25p {
  width: 25% !important;
}
.u-color-primary {
  color: var(--color-primary) !important;
}
.u-color-red {
  color: var(--color-red) !important;
}
.u-color-yellow {
  color: var(--color-yellow) !important;
}
.u-color-orange {
  color: var(--color-orange) !important;
}
.u-color-light-gray {
  color: var(--color-gray2) !important;
}
.u-color-gray {
  color: var(--color-gray5) !important;
}
.u-color-dark-gray {
  color: var(--color-gray6) !important;
}
.u-color-black {
  color: var(--color-black) !important;
}
.u-line-height1 {
  line-height: 1 !important;
}
.u-bg-white {
  background: #fff !important;
}
.u-bg-orange {
  background: var(--color-orange-light) !important;
}
.u-border-bottom {
  border-bottom: 1px solid var(--color-black);
}
.u-round6 {
  border-radius: 6px !important;
}
.u-active-visible {
  display: none;
}
.is-active > .u-active-visible {
  display: block;
}
.is-active > .u-active-hidden {
  display: none;
}
.u-min-h100svh {
  min-height: 100svh !important;
}
.u-mt0{margin-top:0px!important}.u-mr0{margin-right:0px!important}.u-mb0{margin-bottom:0px!important}.u-ml0{margin-left:0px!important}.u-pt0{padding-top:0px!important}.u-pr0{padding-right:0px!important}.u-pb0{padding-bottom:0px!important}.u-pl0{padding-left:0px!important}.u-mt5{margin-top:5px!important}.u-mr5{margin-right:5px!important}.u-mb5{margin-bottom:5px!important}.u-ml5{margin-left:5px!important}.u-pt5{padding-top:5px!important}.u-pr5{padding-right:5px!important}.u-pb5{padding-bottom:5px!important}.u-pl5{padding-left:5px!important}.u-mt10{margin-top:10px!important}.u-mr10{margin-right:10px!important}.u-mb10{margin-bottom:10px!important}.u-ml10{margin-left:10px!important}.u-pt10{padding-top:10px!important}.u-pr10{padding-right:10px!important}.u-pb10{padding-bottom:10px!important}.u-pl10{padding-left:10px!important}.u-mt15{margin-top:15px!important}.u-mr15{margin-right:15px!important}.u-mb15{margin-bottom:15px!important}.u-ml15{margin-left:15px!important}.u-pt15{padding-top:15px!important}.u-pr15{padding-right:15px!important}.u-pb15{padding-bottom:15px!important}.u-pl15{padding-left:15px!important}.u-mt20{margin-top:20px!important}.u-mr20{margin-right:20px!important}.u-mb20{margin-bottom:20px!important}.u-ml20{margin-left:20px!important}.u-pt20{padding-top:20px!important}.u-pr20{padding-right:20px!important}.u-pb20{padding-bottom:20px!important}.u-pl20{padding-left:20px!important}.u-mt25{margin-top:25px!important}.u-mr25{margin-right:25px!important}.u-mb25{margin-bottom:25px!important}.u-ml25{margin-left:25px!important}.u-pt25{padding-top:25px!important}.u-pr25{padding-right:25px!important}.u-pb25{padding-bottom:25px!important}.u-pl25{padding-left:25px!important}.u-mt30{margin-top:30px!important}.u-mr30{margin-right:30px!important}.u-mb30{margin-bottom:30px!important}.u-ml30{margin-left:30px!important}.u-pt30{padding-top:30px!important}.u-pr30{padding-right:30px!important}.u-pb30{padding-bottom:30px!important}.u-pl30{padding-left:30px!important}.u-mt35{margin-top:35px!important}.u-mr35{margin-right:35px!important}.u-mb35{margin-bottom:35px!important}.u-ml35{margin-left:35px!important}.u-pt35{padding-top:35px!important}.u-pr35{padding-right:35px!important}.u-pb35{padding-bottom:35px!important}.u-pl35{padding-left:35px!important}.u-mt40{margin-top:40px!important}.u-mr40{margin-right:40px!important}.u-mb40{margin-bottom:40px!important}.u-ml40{margin-left:40px!important}.u-pt40{padding-top:40px!important}.u-pr40{padding-right:40px!important}.u-pb40{padding-bottom:40px!important}.u-pl40{padding-left:40px!important}.u-mt45{margin-top:45px!important}.u-mr45{margin-right:45px!important}.u-mb45{margin-bottom:45px!important}.u-ml45{margin-left:45px!important}.u-pt45{padding-top:45px!important}.u-pr45{padding-right:45px!important}.u-pb45{padding-bottom:45px!important}.u-pl45{padding-left:45px!important}.u-mt50{margin-top:50px!important}.u-mr50{margin-right:50px!important}.u-mb50{margin-bottom:50px!important}.u-ml50{margin-left:50px!important}.u-pt50{padding-top:50px!important}.u-pr50{padding-right:50px!important}.u-pb50{padding-bottom:50px!important}.u-pl50{padding-left:50px!important}.u-mt55{margin-top:55px!important}.u-mr55{margin-right:55px!important}.u-mb55{margin-bottom:55px!important}.u-ml55{margin-left:55px!important}.u-pt55{padding-top:55px!important}.u-pr55{padding-right:55px!important}.u-pb55{padding-bottom:55px!important}.u-pl55{padding-left:55px!important}.u-mt60{margin-top:60px!important}.u-mr60{margin-right:60px!important}.u-mb60{margin-bottom:60px!important}.u-ml60{margin-left:60px!important}.u-pt60{padding-top:60px!important}.u-pr60{padding-right:60px!important}.u-pb60{padding-bottom:60px!important}.u-pl60{padding-left:60px!important}.u-mt65{margin-top:65px!important}.u-mr65{margin-right:65px!important}.u-mb65{margin-bottom:65px!important}.u-ml65{margin-left:65px!important}.u-pt65{padding-top:65px!important}.u-pr65{padding-right:65px!important}.u-pb65{padding-bottom:65px!important}.u-pl65{padding-left:65px!important}.u-mt70{margin-top:70px!important}.u-mr70{margin-right:70px!important}.u-mb70{margin-bottom:70px!important}.u-ml70{margin-left:70px!important}.u-pt70{padding-top:70px!important}.u-pr70{padding-right:70px!important}.u-pb70{padding-bottom:70px!important}.u-pl70{padding-left:70px!important}.u-mt75{margin-top:75px!important}.u-mr75{margin-right:75px!important}.u-mb75{margin-bottom:75px!important}.u-ml75{margin-left:75px!important}.u-pt75{padding-top:75px!important}.u-pr75{padding-right:75px!important}.u-pb75{padding-bottom:75px!important}.u-pl75{padding-left:75px!important}.u-mt80{margin-top:80px!important}.u-mr80{margin-right:80px!important}.u-mb80{margin-bottom:80px!important}.u-ml80{margin-left:80px!important}.u-pt80{padding-top:80px!important}.u-pr80{padding-right:80px!important}.u-pb80{padding-bottom:80px!important}.u-pl80{padding-left:80px!important}.u-mt85{margin-top:85px!important}.u-mr85{margin-right:85px!important}.u-mb85{margin-bottom:85px!important}.u-ml85{margin-left:85px!important}.u-pt85{padding-top:85px!important}.u-pr85{padding-right:85px!important}.u-pb85{padding-bottom:85px!important}.u-pl85{padding-left:85px!important}.u-mt90{margin-top:90px!important}.u-mr90{margin-right:90px!important}.u-mb90{margin-bottom:90px!important}.u-ml90{margin-left:90px!important}.u-pt90{padding-top:90px!important}.u-pr90{padding-right:90px!important}.u-pb90{padding-bottom:90px!important}.u-pl90{padding-left:90px!important}.u-mt95{margin-top:95px!important}.u-mr95{margin-right:95px!important}.u-mb95{margin-bottom:95px!important}.u-ml95{margin-left:95px!important}.u-pt95{padding-top:95px!important}.u-pr95{padding-right:95px!important}.u-pb95{padding-bottom:95px!important}.u-pl95{padding-left:95px!important}.u-mt100{margin-top:100px!important}.u-mr100{margin-right:100px!important}.u-mb100{margin-bottom:100px!important}.u-ml100{margin-left:100px!important}.u-pt100{padding-top:100px!important}.u-pr100{padding-right:100px!important}.u-pb100{padding-bottom:100px!important}.u-pl100{padding-left:100px!important}.u-fz10{font-size:10px!important}.u-fz11{font-size:11px!important}.u-fz12{font-size:12px!important}.u-fz13{font-size:13px!important}.u-fz14{font-size:14px!important}.u-fz15{font-size:15px!important}.u-fz16{font-size:16px!important}.u-fz17{font-size:17px!important}.u-fz18{font-size:18px!important}.u-fz19{font-size:19px!important}.u-fz20{font-size:20px!important}.u-fz21{font-size:21px!important}.u-fz22{font-size:22px!important}.u-fz23{font-size:23px!important}.u-fz24{font-size:24px!important}.u-fz25{font-size:25px!important}.u-fz26{font-size:26px!important}.u-fz27{font-size:27px!important}.u-fz28{font-size:28px!important}.u-fz29{font-size:29px!important}.u-fz30{font-size:30px!important}.u-fz31{font-size:31px!important}.u-fz32{font-size:32px!important}.u-fz33{font-size:33px!important}.u-fz34{font-size:34px!important}.u-fz35{font-size:35px!important}.u-fz36{font-size:36px!important}.u-fz37{font-size:37px!important}.u-fz38{font-size:38px!important}.u-fz39{font-size:39px!important}.u-fz40{font-size:40px!important}.u-fz41{font-size:41px!important}.u-fz42{font-size:42px!important}.u-fz43{font-size:43px!important}.u-fz44{font-size:44px!important}.u-fz45{font-size:45px!important}.u-fz46{font-size:46px!important}.u-fz47{font-size:47px!important}.u-fz48{font-size:48px!important}.u-fz49{font-size:49px!important}.u-fz50{font-size:50px!important}
.u-pa0{padding:0!important;}.u-pa5{padding:5px!important}.u-pa10{padding:10px!important}.u-pa15{padding:15px!important}.u-pa20{padding:20px!important}.u-pa25{padding:25px!important}.u-pa30{padding:30px!important}.u-pa35{padding:35px!important}.u-pa40{padding:40px!important}.u-pa45{padding:45px!important}.u-pa50{padding:50px!important}.u-pa55{padding:55px!important}.u-pa60{padding:60px!important}.u-pa65{padding:65px!important}.u-pa70{padding:70px!important}.u-pa75{padding:75px!important}.u-pa80{padding:80px!important}.u-pa85{padding:85px!important}.u-pa90{padding:90px!important}.u-pa95{padding:95px!important}.u-pa100{padding:100px!important}
.u-gap1{gap:1px!important;}.u-gap2{gap:2px!important;}.u-gap3{gap:3px!important;}.u-gap4{gap:4px!important;}.u-gap5{gap:5px!important;}.u-gap6{gap:6px!important;}.u-gap7{gap:7px!important;}.u-gap8{gap:8px!important;}.u-gap9{gap:9px!important;}.u-gap10{gap:10px!important;}.u-gap11{gap:11px!important;}.u-gap12{gap:12px!important;}.u-gap13{gap:13px!important;}.u-gap14{gap:14px!important;}.u-gap15{gap:15px!important;}.u-gap16{gap:16px!important;}.u-gap17{gap:17px!important;}.u-gap18{gap:18px!important;}.u-gap19{gap:19px!important;}.u-gap20{gap:20px!important;}.u-gap21{gap:21px!important;}.u-gap22{gap:22px!important;}.u-gap23{gap:23px!important;}.u-gap24{gap:24px!important;}.u-gap25{gap:25px!important;}.u-gap26{gap:26px!important;}.u-gap27{gap:27px!important;}.u-gap28{gap:28px!important;}.u-gap29{gap:29px!important;}.u-gap30{gap:30px!important;}

.band-link-disable {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 15px;
  font-size: 18px;
  background-color: #fff;
  color: #949497;
  text-decoration: none;
  position: relative;
  border-bottom: 1px solid var(--color-gray2);
}

.band-link--primary-noafter {
  color: #fff;
  background-color: var(--color-primary);
  font-weight: bold;
}

.u-min-h60svh {
  min-height: 70svh !important;
}
.login-body {
  max-width: 410px;
}
div.item-center {
  text-align:center;
  display: flex;
  justify-content: center;
}
img.max-width100 {
  max-width: 100%
}
div.button-annotation {
  width: 304px;
  text-align: start;
}
.cursor-pointer {
  cursor: pointer;
}

.container {
    display: flex;
    flex-direction: column; /* 縦方向に要素を並べる */
    
    height: calc(55vh - 200px); /* 画面の高さの調整（90vhから余白分を引く） */
    background-color: #ffffff; /* 背景色の設定 */
    margin: 0; /* マージンのリセット */
    padding: 20px; /* 全体を適度にスペース確保 */
    
}

.message {
    font-size: 28px; /* 文字の大きさ */
    font-weight: bold; /* 文字の太さ */
    color: #333; /* 文字色 */
    margin: 20px 0; /* 上下のスペースを追加 */
    justify-content: center; /* 上下中央揃え */
    align-items: center; /* 左右中央揃え */
    text-align: center; /* テキストを中央揃え */
}

div.heatmap {
  overflow-y: auto;
  max-height: 85vh;
}
p.diarog-border {
  border: 1px solid;
  padding: 2px;
}
p.diarog-border-mt {
  border: 1px solid;
  padding: 2px;
  margin-top: 10px;
}
img.heatmap-img {
  max-width: 90%;
}


.u-min-h80svh {
  min-height: 80svh !important;
}
.menu-right {
  display: flex;
}
.button--slim-plus {
  height: 44px;
  border-radius: 4px;
}
.image-container {
  width: 100%;
  overflow: hidden;
}

.image-item {
  float: left;
  box-sizing: border-box;
  object-fit: cover;
  height: auto;
}
.image-item0 { /* 左上SiPロゴ */
  width: 105px;
}
.image-item1 {
  width: 210px;
}
.image-item2 {
  width: 38px;
}
.image-item3 {
  width: 203px;
}

@media (max-width: 481px) { /* 210+38+203+footerのpadding 15+15*/
  .image-item1 {
    width: 46%;
  }
  .image-item2 {
    width: 8%;
  }
  .image-item3 {
    width: 45%;
  }
}

/* ログイン画面はbodyの横幅が狭い為defautで% */
.image-item1-login {
width: 46%;
}
.image-item2-login {
width: 8%;
}
.image-item3-login {
width: 45%;
}

.msg-container {
  display:flex;
  align-items: start;
  justify-content: center;
}
.ai-image {
  width: "125px";
  /*height: "120px";*/
  margin-right: 10px; /* 画像と吹き出しの間の距離 */
}
@media (max-width: 460px) {
  .ai-image {
    width: 46%;
  }
}
.bubble {
  background-color: #f0f0f0;
  border-radius: 10px; /* 吹き出しの角丸 */
  padding: 10px; /* 吹き出し内のテキストと枠の距離 */
  border: 3px solid #ED7D31;
  display: inline-block; /* 吹き出しを横並びに */
  vertical-align: top; /* 吹き出しと画像の高さを揃える */
  position: relative; /* 吹き出しの下に三角を描く為に必要 */
  width: "300px";
}
.bubble::before {
  content: '';
  position: absolute;
  top: 40px;
  left: -15px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #ED7D31; /* 吹き出しの背景色 */
}

.start-guide {
  font-size: 24px;
  height: auto;
  margin: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
}