@charset "UTF-8";
:root{
  --color-bg-black: #31313a;
  --color-white: #fff;
  --color-gray: #707070;
  --color-text: #000;
  --color-graph-text: #1d1d1d;
  --color-graph-border: #D9D9D9;
  --color-red: #f82c2c;
  --color-turquoise-blue: #5decde;
  --color-purple: #6d69d6;
  --color-yellowgreen: #6ec533;
  --color-green: #608b8f;
  --color-orange: #f3a329;
  --color-pink: #ec61c7;
  --color-lightblue: #29A7F3;
  --color-operator-management: #DB8539;
  --color-project-management: #40468F;
  --color-viewer: #3B883B;
  --color-eva-a: #5493E6;
  --color-eva-b: #4EB860;
  --color-eva-c: #F2E533;
  --color-eva-d: #FFB521;
  --color-eva-e: #F10E0E;
  --has-btn-td-width: 98px;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.5;
  font-family: 'Noto Sans JP', sans-serif;
}
html,body{
  font-size: 1rem;
  width: 100%;
  height: 100%;
}
html{
  scroll-behavior: smooth;
}
body{
  background: #fff;
  color: var(--color-text);
  display: block;
  font-size: 1rem;
}
h1,h2,h3,h4,h5,h6{
  font-size: 1rem;
  font-weight: normal;
}
h1,h2{
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 32px;
}
h1 span{
  font-size: 20px;
  margin-left: 10px;
}
ul,li{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
a{
  text-decoration: none;
}
img{
  vertical-align: bottom;
}
.main{
  background: var(--color-bg);
  padding-top: var(--header-height-pc);
  padding-bottom: 3.75rem;
}
.inner{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  min-height: fit-content;
  margin: 0 auto;
  padding: 48px;
}
.box{
  position: relative;
  width: 100%;
  padding: 32px;
  border: 1px solid var(--color-gray);
  border-radius: 16px;
}
button{
  cursor: pointer;
  border: none;
}
.btn-s, .btn-l{
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-gray);
  color: var(--color-white);
  line-height: 1.2;
  padding: 8px 16px;
  border-radius: 6px;
  box-shadow: 0px 3px 6px #00000029;
}
.btn-s.disabled, .btn-l.disabled{
  pointer-events: none;
  opacity: .3;
  box-shadow: none;
}
.btn-s{
  font-size: 16px;
  width: fit-content;
  min-height: 48px;
}
.btn-l{
  font-size: 24px;
  width: 100%;
  max-width: 296px;
  min-height: 60px;
  margin-top: 48px;
}
.btn-l:nth-child(1){
  margin-top: 0;
}
.btn-bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  border-radius: 0 6px 0 0;
  z-index: 9999;
}
.btn-dl{
  margin-left: auto;
}
.select{
  cursor: pointer;
  position: relative;
}
.select::after{
  position: absolute;
  content: '';
  top: 50%;
  right: 16px;
  transform: translate(0, -50%);
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top: 9px solid var(--color-text);
  border-bottom: none;
}
select{
  cursor: pointer;
  appearance: none;
  min-height: 48px;
  padding: 8px calc(16px + 10px + 16px) 8px 16px;
  border: 1px solid #888;
  border-radius: 6px;
  box-shadow: 0px 3px 6px #00000029;
}
input{
  cursor: pointer;
}
input[type="checkbox"]{
  display: none;
}
.checkbox span{
  position: relative;
  width: 20px;
  height: 20px;
}
.checkbox span::before,
.checkbox span::after{
  position: absolute;
  content: '';
  transition: .3s;
}
.checkbox span::before{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: var(--color-white);
  border: 2px solid #a8a8a8;
  border-radius: 2px;
}
.checkbox span::after{
  top: 25%;
  left: 20%;
  transform: rotate(-45deg);
  width: 10px;
  height: 5px;
  border: 2px solid #bbb;
  border-top: none;
  border-right: none;
  opacity: 0;
}
.checkbox:has(:checked) span::before{
  width: 100%;
  height: 100%;
  background: var(--color-white);
  border: none;
}
.checkbox:has(:checked) span::after{
  opacity: 1;
}
.d-none{
  display: none !important;
}
/*
* ログイン画面 #page-login
*/
#page-login{
  background: var(--color-bg-black);
}
#page-login.viewer{
  background: var(--color-viewer);
}
#page-login.operator-management{
  background: var(--color-operator-management);
}
#page-login.project-management{
  background: var(--color-project-management);
}
#page-login .inner{
  align-items: center;
}
.login-card{
  background: var(--color-white);
  width: 100%;
  max-width: 528px;
  margin: 0 auto;
  padding: 86px 64px 64px;
  border-radius: 16px;
}
.login-card h1{
  margin-bottom: 60px;
}
.login-card h1:has(span){
  margin-bottom: 20px;
}
.login-card h1 img{
  display: block;
  margin: 0 auto;
}
#page-login h1 span{
  display: block;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-top: 4px;
}
#page-login.viewer h1 span{
  color: var(--color-viewer);
}
#page-login.operator-management h1 span{
  color: var(--color-operator-management);
}
#page-login.project-management h1 span{
  color: var(--color-project-management);
}
.login-form label{
  display: block;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
}
.login-form input{
  width: 100%;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 48px;
  padding: 2px 8px 5px;
  border: 1px solid var(--color-gray);
}
#page-login button{
  margin: 16px auto 0;
}
.error-message{
  color: var(--color-red);
  font-size: 14px;
  text-align: center;
  margin-top: 5px;
}

/*
* ホーム画面 #page-home
*/
#page-home .inner{
  align-items: center;
}
#page-home .box{
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 634px;
  padding: 86px 32px;
}


/* 一覧 */
.box.list{
  max-width: 785px;
}
table{
  table-layout: fixed;
  width: 100%;
  border-spacing: 0;
}
.box.list table{
  margin-top: 32px;
}
th, td{
  text-align: left;
  border: 1px solid var(--color-gray);
}
th:has([class*="btn-"]),
td:has([class*="btn-"]){
  width: fit-content;
}
.box.list th{
  font-weight: bold;
  padding: 2px 16px 4px;
}
.box.list td{
  height: 62px;
  padding: 6px 16px 8px;
}
td:has([class*="btn-"]){
  width: var(--has-btn-td-width);
  padding: 6px 16px;
}
.list-top{
  position: absolute;
  top: 26px;
  right: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 16px;
}
.list-top [class*="btn-"]{
  width: 100%;
}
.list-bottom{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 32px;
}
.list-pagination{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}
.page-select,
.select-wrap, .btn-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
#page-top .btn-group{
  display: flex;
  gap: 30px;
}
#page-top .system-btn{
  width: 270px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  line-height: 1.2;
  padding: 14px 0px;
  border-radius: 6px;
  box-shadow: 0px 3px 6px #00000029;
}
.phr-btn{
  background: #6BA9C2;
}
.other-btn{
  background: var(--color-gray);
}
.vertical-line {
  width: 1px;
  height: 48px;
  background-color: var(--color-gray);
}
#page-top .modal-wrap {
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  overflow-y: auto;
}
#page-top .modal{
  display: flex !important;
  justify-content: center;
  align-items: center;
}
#page-top .modal-content{
  font-size: 24px;
  text-align: center;
}
#page-top .modal-btn-close::before,
#page-top .modal-btn-close::after {
  content: none !important;
}
#page-top .modal-btn-close {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55px;
  height: 55px;
  cursor: pointer;
}
#page-top .modal-btn-close span {
  position: absolute;
  display: block;
  width: 35px;
  height: 3px;
  background-color: #6BA9C2;
  border-radius: 2px;
}
#page-top .modal-btn-close span:first-child {
  transform: rotate(45deg);
}
#page-top .modal-btn-close span:last-child {
  transform: rotate(-45deg);
}
#page-top .modal-btn-close:hover span {
  opacity: 0.7;
}
.select-wrap{
  gap: 8px;
}
table .completed,
table .processing,
table .unprocessed,
table .analysis-error{
  font-weight: bold;
  color: var(--color-white);
}
table .completed{
  background: #58C55C;
}
table .processing{
  background: #209cff;
}
table .unprocessed{
  background: #FFB521;
  color: var(--color-graph-text);
}
table .analysis-error{
  background: var(--color-red);
}
/* 削除ボタン */
/* table:has(.delete) th:nth-child(1),
table:has(.delete) th:nth-child(2),
table:has(.delete) td:nth-child(1),
table:has(.delete) td:nth-child(2){
  width: 200px;
}
table:has(.delete) th:nth-child(3),
table:has(.delete) td:nth-child(3){
  width: calc(100% - 200px - 200px - var(--has-btn-td-width));
} */
table .delete{
  background: var(--color-red);
}

/* モーダル */
.modal-wrap{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000bf;
  z-index: 9999;
}
.modal{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 634px;
  height: 340px;
  background: #fff;
  padding: 32px;
  border-radius: 16px;
  animation: show .3s;
}
@keyframes show{
  0%{
    top: calc(50% - 20px);
    opacity: 0;
  }
  100%{
    top: 50%;
    opacity: 1;
  }
}
.modal form{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
}
.modal-content:has(.content-center){
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
}
.modal-content .content-center{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.modal-content .content-flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.modal-content .content-flex:nth-child(1),
.modal-content .content-flex .content-flex{
  margin-top: 0;
}
.modal-btn-close{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 20px;
  height: 20px;
  background: transparent;
}
.modal-btn-close::before,
.modal-btn-close::after{
  content: '';
  position: absolute;
  top: 40%;
  left: -10%;
  width: 26px;
  height: 2px;
  background: var(--color-text);
}
.modal-btn-close::before{
  transform: rotate(45deg);
}
.modal-btn-close::after{
  transform: rotate(-45deg);
}
.modal-title{
  font-weight: bold;
  margin: 16px 0 8px;
}
.modal-title:nth-child(1){
  margin-top: 0;
}
.modal-content .content-flex .modal-title{
  margin: 0;
}
.modal input[type="text"],
.modal input[type="number"]{
  width: 100%;
  font-size: 16px;
  padding: 16px;
  border: 1px solid var(--color-gray);
  border-radius: 8px;
}
.modal-content .issue-id-num input{
  width: 85%;
}
.modal-content .remaining-issue-id-num,
.modal-content .total-issue-id-num{
  justify-content: flex-start;
  gap: 8px;
}
.modal-content .add-issue-id-num input{
  width: 80%;
}
.modal-content .content-flex .content-flex{
  width: calc((100% - 8px) / 2);
}
.modal-content .content-flex:has(.content-flex){
  gap: 8px;
}
.modal-bottom{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

/*
* 事業者一覧 #page-business-operator-list
*/
#page-business-operator-list h1{
  margin-bottom: 65px;
}
#page-business-operator-list th:nth-child(1),
#page-business-operator-list td:nth-child(1){
  width: calc(100% - 115px - 115px - var(--has-btn-td-width) - var(--has-btn-td-width));
}
#page-business-operator-list th:nth-child(2),
#page-business-operator-list td:nth-child(2),
#page-business-operator-list th:nth-child(3),
#page-business-operator-list td:nth-child(3){
  width: 115px;
}
#page-business-operator-list th:nth-child(4){
  width: calc(var(--has-btn-td-width) * 2);
}

/*
* プロジェクト一覧 #page-project-list
*/
/* #page-project-list h1{
  margin-bottom: 65px;
}
#page-project-list th:nth-child(1),
#page-project-list td:nth-child(1){
  width: 27%;
}
#page-project-list th:nth-child(2),
#page-project-list td:nth-child(2){
  width: calc(100% - 27% - 90px - var(--has-btn-td-width));
} */
/*
* プロジェクト一覧(事業者) #page-project-list-editor
*/
#page-project-list-editor th:nth-child(1),
#page-project-list-editor td:nth-child(1){
  width: calc(100% - 90px - var(--has-btn-td-width) - var(--has-btn-td-width));
}
#page-project-list-editor th:nth-child(2),
#page-project-list-editor td:nth-child(2){
  width: 90px;
}
#page-project-list-editor th:nth-child(3){
  width: calc(var(--has-btn-td-width) * 2);
}
.issue-id-wrap{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
}
.issue-id-wrap .total-issue-id-num,
.issue-id-wrap .remaining-issue-id-num{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.issue-id-wrap .issue-id-title{
  font-weight: bold;
}

/*
* プロジェクト詳細 #page-project-detail
*/
#page-project-detail th:nth-child(1),
#page-project-detail td:nth-child(1),
#page-project-detail th:nth-child(2),
#page-project-detail td:nth-child(2){
  width: calc((100% - 115px - var(--has-btn-td-width) - var(--has-btn-td-width)) / 2);
}
#page-project-detail th:nth-child(3),
#page-project-detail td:nth-child(3){
  width: 115px;
}
#page-project-detail th:nth-child(4){
  width: calc(var(--has-btn-td-width) * 2);
}
.viewer-data{
  width: calc(100% - 115px - var(--has-btn-td-width) - var(--has-btn-td-width));
}

/*
* プロジェクト詳細(閲覧者) #page-project-detail-viewer
*/
#page-project-detail-viewer th:nth-child(1),
#page-project-detail-viewer td:nth-child(1){
  width: calc(100% - 185px - var(--has-btn-td-width));
}
#page-project-detail-viewer th:nth-child(2),
#page-project-detail-viewer td:nth-child(2){
  width: 185px;
}
#page-project-detail-viewer th:nth-child(3){
  width: calc(var(--has-btn-td-width));
}

/*
* グラフ表示共通
*/
#page-top .inner,
#page-detail .inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px 38px;
}
.weekly,
.emo-detail,
.result-advice-wrap{
  grid-column: 1;
  width: 470px;
}
.weekly{
  grid-row: 1;
}
.emo-detail,
.result-advice-wrap{
  grid-row: 2;
}
.result-advice-wrap{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 24px;
}
.box-wrap-right,
#page-detail .box.graph{
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 1315px;
}
#page-top h1,
#page-detail h1{
  margin-bottom: 16px;
}
.weekly-top .h1-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.h1-wrap{
  position: relative;
}
.box-top{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
/* .weekly 週間評価 */
.sleepwell-apnea,
#analysis-label{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 113px;
  height: 44px;
  color: var(--color-white);
  text-align: center;
  padding-bottom: 2px;
}
.sleepwell-apnea{
  background: var(--color-purple);
}
#analysis-label[data-analysis="completed"]{
  background: #58C55C;
}
#analysis-label[data-analysis="processing"]{
  background: #209cff;
}
#analysis-label[data-analysis="unprocessed"]{
  background: #FFB521;
  color: var(--color-graph-text);
}
#analysis-label[data-analysis="analysis-error"]{
  background: var(--color-red);
}
#page-top .weekly-explanation-table h1{
  font-size: 18px;
}
#page-top .weekly-explanation-table table{
  width: 100%;
  border-collapse: collapse;
}
#page-top .weekly-explanation-table th,
#page-top .weekly-explanation-table td{
  border: none;
  border-bottom: 1px solid var(--color-gray);
  padding: 8px;
  text-align: center;
}
#page-top .weekly-explanation-table tr:first-child th,
#page-top .weekly-explanation-table tr:first-child td{
  border-top: 1px solid var(--color-gray);
}
#page-top .weekly-explanation-table td:last-child {
  border-right: 1px solid var(--color-gray);
}
#page-top .weekly-explanation-table th{
  width: 122px;
  border-right: 1px solid var(--color-gray);
  border-left: 1px solid var(--color-gray);
  font-size: 16px;
  color: var(--color-text);
  font-weight: normal;
}
#page-top .weekly-explanation-table td{
  font-size: 14px;
}
/* 薬機法対応: 項目名の背景は3項目全て白・黒字 */
#page-top .weekly-explanation-table .weekly-table-apnea th,
#page-top .weekly-explanation-table .weekly-table-relax th,
#page-top .weekly-explanation-table .weekly-table-sleep th{
  background-color: var(--color-white);
}
#page-top .weekly-table-list{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
#page-top .weekly-table-list li{
  box-sizing: border-box;
  text-align: left;
}
#page-top .weekly-table-apnea ul{
  gap: 0 3px;
}
#page-top .weekly-table-relax li,
#page-top .weekly-table-sleep li {
  width: auto;
}
#page-top .weekly-table-list li {
  position: relative;
  padding-left: 25px; /* アイコンが入るスペース */
  white-space: nowrap; /* 文言の途中で折り返さない */
}
#page-top .weekly-table-list li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 10px;
}
#page-top .weekly-table-apnea li:nth-child(1)::before {
  background: var(--color-eva-b);
}
#page-top .weekly-table-apnea li:nth-child(2)::before {
  background: var(--color-eva-c);
}
#page-top .weekly-table-apnea li:nth-child(3)::before {
  background: var(--color-eva-d);
}
#page-top .weekly-table-apnea li:nth-child(4)::before {
  background: var(--color-eva-e);
}
#page-top .weekly-table-relax li:nth-child(1)::before {
  background: var(--color-eva-a);
}
#page-top .weekly-table-relax li:nth-child(2)::before {
  background: var(--color-eva-b);
}
#page-top .weekly-table-relax li:nth-child(3)::before {
  background: var(--color-eva-c);
}
#page-top .weekly-table-relax li:nth-child(4)::before {
  background: var(--color-eva-d);
}
#page-top .weekly-table-relax li:nth-child(5)::before {
  background: var(--color-eva-e);
}
#page-top .weekly-table-sleep li:nth-child(1)::before {
  background: var(--color-eva-a);
}
#page-top .weekly-table-sleep li:nth-child(2)::before {
  background: var(--color-eva-b);
}
#page-top .weekly-table-sleep li:nth-child(3)::before {
  background: var(--color-eva-c);
}
#page-top .weekly-table-sleep li:nth-child(4)::before {
  background: var(--color-eva-d);
}
#page-top .weekly-table-sleep li:nth-child(5)::before {
  background: var(--color-eva-e);
}
.radar-chart-wrap{
  position: relative;
}
#radar-chart{
  width: 100% !important;
  height: 290px !important;
  margin: 0 auto;
}
.radar-chart-wrap #radar-legend{
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0, -50%);
}
.radar-chart-wrap #radar-legend .legend-item{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}
.radar-chart-wrap #radar-legend span{
  display: block;
  width: 25px;
  height: 2px;
}
.radar-chart-wrap #radar-legend .label-name{
  font-size: 16px;
  font-weight: bold;
  color: var(--color-text);
}
.graph-note{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 32px 0 16px;
}
/* 週間評価: 「睡眠」ボタン削除後も測定日・IDを右寄せに保つ */
#page-top .graph-note{
  justify-content: flex-end;
}
.graph-note p{
  text-align: right;
  margin-top: 10px;
}
.graph-note p:nth-child(1){
  margin-top: 0;
}
/* .advice 快眠アドバイス */
.advice{
  position: relative;
}
.advice::before,
.advice::after{
  content: '';
  position: absolute;
  top: -18px;
  left: 65px;
  width: 0;
  height: 0;
  border: 18px solid var(--color-gray);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 4px 0 0 0;
  transform: scaleX(0.55) rotate(45deg);
}
.advice::before{
  border-radius: 8px 0 0 0;
}
.advice::after{
  border-radius: 6px 0 0 0;
  top: -16px;
  border-color: var(--color-white);
}

/* .graph グラフ */
.graph .box-top{
  gap: 24px 48px;
  margin-top: 32px;
}
.graph .h1-wrap{
  margin-bottom: 102px;
}
.graph .box-top .btn-wrap{
  position: relative;
}
.graph .box-top .btn-wrap::before{
  content: '';
  position: absolute;
  top: 50%;
  left: calc(-48px / 2);
  transform: translate(0, -50%);
  width: 1px;
  height: 100%;
  background: var(--color-gray);
}
.graph .checkbox-wrap{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 35px;
}
.graph .checkbox-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 500px;
  padding: 15px 8px;
}
.graph .group-title{
  font-weight: bold;
}
.graph .sleep-group{
  background: #E7E6FF;
}
.graph .sleep-group .group-title{
  color: #332F8B;
}
.graph .day-group{
  background: #FFEED4;
}
.graph .day-group .group-title{
  color: #92631B;
}
.graph .checkbox-list .btn-group-inner{
  display: flex;
  gap: 15px;
}
.graph .checkbox{
  gap: 8px;
  background: #e1e1e1;
  color: var(--color-text);
}
.graph .checkbox:has(:checked){
  color: var(--color-white);
}
.graph .checkbox:has(.sleep:checked){ /* 睡眠 */
  background: var(--color-purple);
}
.graph .checkbox:has(.sleep:checked) span::after{
  border-color: var(--color-purple);
}
.graph .checkbox:has(.apnea:checked){ /* 無呼吸 */
  background: var(--color-yellowgreen);
}
.graph .checkbox:has(.apnea:checked) span::after{
  border-color: var(--color-yellowgreen);
}
.graph .checkbox:has(.relax:checked){ /* リラックス */
  background: var(--color-lightblue);
}
.graph .checkbox:has(.relax:checked) span::after{
  border-color: var(--color-lightblue);
}
.graph .checkbox:has(.step:checked){ /* 歩数 */
  background: var(--color-green);
}
.graph .checkbox:has(.step:checked) span::after{
  border-color: var(--color-green);
}
.graph .checkbox:has(.stress:checked){ /* ストレス */
  background: var(--color-orange);
}
.graph .checkbox:has(.stress:checked) span::after{
  border-color: var(--color-orange);
}
.graph .checkbox:has(.emotion:checked){ /* 感情 */
  background: var(--color-pink);
}
.graph .checkbox:has(.emotion:checked) span::after{
  border-color: var(--color-pink);
}
.graph-list-time-wrap{
  position: sticky;
  top: 0;
  margin-top: 30px;
  margin-bottom: 12px;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  z-index: 1;
}
.graph-list-time-wrap::-webkit-scrollbar{
  display: none;
}
.graph-list-time{
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  width: fit-content;
}
.graph-list-time div{
  position: relative;
  width: 68px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 2px 10px 4px;
}
.graph-list-time div::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--color-graph-border);
}
.graph-list-time div:nth-child(1)::before{
  content: none;
}
.graph-list-time .time-am{
  background: #ffe7a7;
  color: var(--color-text);
}
.graph-list-time .time-pm{
  background: #6669c7;
  color: var(--color-white);
}
.graph-list-day{
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  width: fit-content;
}
.graph-list-day span{
  width: calc(68px * 12);
  font-size: 14px;
  line-height: 1;
  padding: 2px 10px 4px;
}
.graph-list-day #graph-day-current{
  background: #E1E1E1;
  color: var(--color-text);
}
.graph-list-day #graph-day-next{
  background: var(--color-gray);
  color: var(--color-white);
  border-left: 1px solid #E1E1E1;
}
.graph-list-wrap{
  color: var(--color-graph-text);
}
.graph-list-item{
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}
.graph-content-wrap{
  position: relative;
}
.graph-content{
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  height: 100%;
}
.graph-content::-webkit-scrollbar{
  display: none;
}
.graph-content-inner{
  height: 100%;
}
.graph-content-inner canvas{
  display: block;
  width: 100%;
}
.y-axis-wrap{
  position: absolute;
  top: 0;
  left: 0;
  width: 75px;
  height: 100%;
  z-index: 1;
}
.y-axis-wrap::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  background: var(--color-white);
  border-right:  1px solid var(--color-graph-border);
}
.graph-no-data{
  position: relative;
  top: 0;
  left: -32px;
  width: calc(100% + 32px * 2);
  height: 16px;
  color: var(--color-gray);
  margin: -8px 0 calc(-16px - 5px);
  border-top: 4px dashed var(--color-gray);
}
.graph-no-data::before,
.graph-no-data::after{
  position: absolute;
  top: -2px;
  transform: translate(0, -50%);
}
.graph-no-data::before{
  content: '';
  left: calc((216px - (12px * 7)) / 2 + 32px);
  background: var(--color-white);
  width: calc(12px * 7);
  height: 4px;
}
.graph-no-data::after{
  content: '（データなし）';
  left: 32px;
  width: 216px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}
/* .legend グラフ凡例 */
#page-top .box.legend{
  grid-row: 3;
  grid-column: 2;
  width: fit-content;
  margin-top: 24px;
  margin-left: auto;
  display: flex;
  gap: 40px;
}
#page-top .legend-detail-list-item{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
#page-top .legend-box-1{
  width: 28.5%;
}
#page-top .legend-box-1 .btn-ad{
  margin-top: 20px;
}
#page-top .legend-box-2{
  width: calc(100% - 28.5% - 40px);
}

#page-top .box.legend h1{
  margin-bottom: 32px;
}
#page-top .box.legend table{
  width: 100%;
  border-right: 1px solid var(--color-gray);
}
#page-top .box.legend th,
#page-top .box.legend td{
  border: none;
  border-bottom: 1px solid var(--color-gray);
}
#page-top .box.legend tr{
  display: none;
}
#page-top .box.legend tr.show{
  display: table-row;
}
#page-top .box.legend tr:nth-child(1) th,
#page-top .box.legend tr:nth-child(1) td{
  border-top: 1px solid var(--color-gray);
}
#page-top .box.legend th{
  width: calc(18px * 6 + 15px * 2 + 2px);
  color: var(--color-white);
  font-size: 18px;
  font-weight: normal;
  padding: 3px 12px 4px;
  border-right: 1px solid var(--color-gray);
  border-left: 1px solid var(--color-gray);
}
#page-top .box.legend .legend-sleep th{
  background: var(--color-purple);
}
#page-top .box.legend .legend-apnea th{
  background: var(--color-yellowgreen);
}
#page-top .box.legend .legend-relax th{
  background: var(--color-lightblue);
}
#page-top .box.legend .legend-step th{
  background: var(--color-green);
}
#page-top .box.legend .legend-stress th{
  background: var(--color-orange);
}
#page-top .box.legend .legend-emotion th{
  background: var(--color-pink);
}
#page-top .box.legend td{
  position: relative;
  width: calc(100% - ((18px * 6 + 14px * 2 + 2px) * 5));
  width: auto;
  font-size: 14px;
  white-space: nowrap; /* 文言の途中で折り返さない */
  padding: 3px 0 4px calc(26px + 16px + 4px);
}
#page-top .box.legend td::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 26px;
  transform: translate(0, -50%);
  width: 16px;
  height: 10px;
  box-sizing: border-box;
}
#page-top .box.legend .legend-sleep td:nth-child(2)::before{
  background: #002060;
}
#page-top .box.legend .legend-sleep td:nth-child(3)::before{
  background: #4ABCEE;
}
#page-top .box.legend .legend-sleep td:nth-child(4)::before{
  background: #FF9900;
}
#page-top .box.legend .legend-sleep td:nth-child(5)::before{
  background: #F10E0E;
}
#page-top .box.legend .legend-apnea td:nth-child(2)::before{
  background: #58C55C;
}
#page-top .box.legend .legend-apnea td:nth-child(3)::before{
  background: #F6DE00;
}
#page-top .box.legend .legend-apnea td:nth-child(4)::before{
  background: #FF9900;
}
#page-top .box.legend .legend-apnea td:nth-child(5)::before{
  background: #F10E0E;
}
#page-top .box.legend .legend-relax td:nth-child(2)::before{
  background: #4ABCEE;
}
#page-top .box.legend .legend-relax td:nth-child(3)::before{
  background: #58C55C;
}
#page-top .box.legend .legend-relax td:nth-child(4)::before{
  background: #F6DE00;
}
#page-top .box.legend .legend-relax td:nth-child(5)::before{
  background: #FF9900;
}
#page-top .box.legend .legend-relax td:nth-child(6)::before{
  background: #F10E0E;
}
#page-top .box.legend .legend-step td:nth-child(2)::before{
  background: #DDEEB6;
}
#page-top .box.legend .legend-step td:nth-child(3)::before{
  background: #B0D18F;
}
#page-top .box.legend .legend-step td:nth-child(4)::before{
  background: #58C55C;
}
#page-top .box.legend .legend-step td:nth-child(5)::before{
  background: #1BA15A;
}
#page-top .box.legend .legend-step td:nth-child(6)::before{
  background: #035733;
}
#page-top .box.legend .legend-stress td:nth-child(2)::before{
  background: #4ABCEE;
}
#page-top .box.legend .legend-stress td:nth-child(3)::before{
  background: #58C55C;
}
#page-top .box.legend .legend-stress td:nth-child(4)::before{
  background: #F6DE00;
}
#page-top .box.legend .legend-stress td:nth-child(5)::before{
  background: #FF9900;
}
#page-top .box.legend .legend-stress td:nth-child(6)::before{
  background: #F10E0E;
}
#page-top .box.legend .legend-emotion td:nth-child(2)::before{
  background: #F6DE00;
}
#page-top .box.legend .legend-emotion td:nth-child(3)::before{
  background: #F10E0E;
}
#page-top .box.legend .legend-emotion td:nth-child(4)::before{
  background: #9D82BC;
}
#page-top .box.legend .legend-emotion td:nth-child(5)::before{
  background: #4ABCEE;
}

/*
* TOP #page-top
*/
#page-top .weekly{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 24px;
}
.evaluation-bar-group>div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #888;
}
.evaluation-bar-group>div:nth-child(1){
  border-top: 1px solid #888;
}
.evaluation-bar-wrap{
  width: 73%;
  margin-top: 10px;
  border: 1px solid #888;
  border-top: none;
}
/* ▼マーカー: 3指標統一の黒、値の位置を指す */
.evaluation-bar-marker{
  position: relative;
  height: 20px;
}
.evaluation-bar-marker .eva-marker{
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 20px;
  line-height: 1;
  color: var(--color-bg-black);
  transition: left .3s;
}
.evaluation-bar{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.evaluation-bar span{
  display: block;
  height: 8px;
  border-left: 1px solid #888;
}
.evaluation-bar span:nth-child(1){
  border-left: none;
}
.evaluation-bar .eva-a{
  background: var(--color-eva-e);
}
.evaluation-bar .eva-b{
  background: var(--color-eva-d);
}
.evaluation-bar .eva-c{
  background: var(--color-eva-c);
}
.evaluation-bar .eva-d{
  background: var(--color-eva-b);
}
.evaluation-bar .eva-e{
  background: var(--color-eva-a);
}
#apnea-eva .evaluation-bar span{
  width: 25%;
}
#relaxation-eva .evaluation-bar span{
  width: 20%;
}
#sleep-eva .evaluation-bar span{
  width: 20%;
}
#page-top .graph{
  margin-top: 24px;
}
#page-top .graph-list-time-wrap{
  margin-left: calc(216px + 100px);
  width: calc(100% - 216px - 100px - 120px);
}
#page-top .graph-list-wrap{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 16px;
}
#page-top .graph-list-item{
  height: 120px;
  box-shadow: 0px 0px 3px #00000029;
}
#page-top .graph-content{
  width: calc(100% - 216px - 100px - 120px);
}
#page-top .graph-content-inner{
  width: calc(68px * 24);
}
#page-top .graph-content-inner>div{
  display: none;
  height: 20px;
}
#page-top .graph-content-inner>div.show{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#page-top .graph-content-inner canvas{
  height: 20px;
}
.graph-day{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 216px;
  font-size: 18px;
  font-weight: bold;
  padding: 0 0 2px 16px;
}
.unit{
  font-size: 12px;
}
.graph-item div{
  display: none;
  justify-content: flex-start;
  align-items: center;
  width: 100px;
  color: var(--color-white);
  font-size: 14px;
  line-height: 1;
  padding: 2px 8px 4px;
}
.graph-item div.show{
  display: flex;
}
.graph-item [data-graph="sleep"]{
  background: var(--color-purple);
}
.graph-item [data-graph="apnea"]{
  background: var(--color-yellowgreen);
}
.graph-item [data-graph="relax"]{
  background: var(--color-lightblue);
}
.graph-item [data-graph="step"]{
  background: var(--color-green);
}
.graph-item [data-graph="stress"]{
  background: var(--color-orange);
}
.graph-item [data-graph="emotion"]{
  background: var(--color-pink);
}
.graph-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
}
.graph-btn .btn-s{
  padding: 8px 20px;
}
/* 注釈 */
.note{
  grid-row: 2;
  font-size: 14px;
  text-align: right;
  margin-top: 24px;
}

/* .ad 広告ページ誘導 */
#page-top .box.ad{
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
#page-top .ad-list-item{
  width: calc(100% - 300px - 20px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#page-top .btn-ad{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #58C55C;
  border-radius: 16px;
  box-shadow: 0px 3px 6px #00000029;
  width: 100%;
  padding: 20px 30px;
  font-size: 24px;
  font-weight: bold;
  text-align: left;
  gap: 30px;
  color: var(--color-white);
}
 #page-top .ad .btn-ad{
  width: 300px;
 }
/* .article コラム */
 #page-top .box.article{
  margin-top: 24px;
}
#page-top .box.article .article-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
#page-top .article-list-item{
  width: calc(100% - 300px - 20px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#page-top .article-list-item p{
  width: 100%;
}
#page-top .btn-article{
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-white);
  border: 3px solid #58C55C;
  border-radius: 16px;
  box-shadow: 0px 3px 6px #00000029;
  font-size: 24px;
  font-weight: bold;
  color: #58C55C;
  text-align: center;
  flex-direction: column;
  gap: 12px;
  padding: 15px 20px;
}
#page-top .btn-arrow{
  height: 27px;
  width: auto;
  transition: transform 0.3s ease;
  display: inline-block;
}
#page-top .btn-arrow.rotate {
  transform: rotate(180deg);
}
#page-top .accordion-number{
  font-size: 36px;
  margin-top: -12px;
  padding-right: 20px;
  font-weight: bold;
  color: #58C55C;
}
#page-top .accordion-article {
  height: 0;
  overflow: hidden;
  transition: height .5s;
}
#page-top .accordion-article-inner{
  padding: 20px 40px 10px;
}
#page-top .accordion-text h2{
  margin-bottom: 16px;
}
#page-top .article-detail{
  margin-top: 50px;
  display: flex;
}


/*
* 詳細 #page-detail
*/
.date-change{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 32px 0;
}
.date-change #date-current{
  font-size: 20px;
  font-weight: bold;
}
.date-change #date-change-prev{
  background: #E1E1E1;
  color: var(--color-text);
}
.total-eva-wrap{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 32px;
  margin-top: 32px;
}
.total-eva{
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}
.total-eva>div{
  width: 42%;
  font-size: 24px;
  padding: 8px 15px 10px;
  border: 1px solid var(--color-gray);
}
#total-eva-result{
  width: calc(100% - 42%);
  color: var(--color-white);
  font-weight: bold;
  text-align: center;
}
#total-eva-result[data-result="a"]{
  background: var(--color-eva-a);
}
#total-eva-result[data-result="b"]{
  background: var(--color-eva-b);
}
#total-eva-result[data-result="c"]{
  background: var(--color-eva-c);
  color: var(--color-text);
}
#total-eva-result[data-result="d"]{
  background: var(--color-eva-d);
}
#total-eva-result[data-result="e"]{
  background: var(--color-eva-e);
}
.weekly .table{
  width: 100%;
}
.weekly .table-col>div{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.weekly .table-col>div>div{
  min-height: 46px;
  font-weight: normal;
  text-align: center;
  padding: 9px 16px 11px;
  border: 1px solid var(--color-gray);
}
.weekly .table-col>div>div:nth-child(1){
  width: 210px;
  text-align: left;
}
.weekly .table-col>div>div:nth-child(2){
  width: calc(100% - 210px - 70px);
}
.weekly .table-col>div>div:nth-child(3){
  width: 70px;
  font-weight: bold;
}
#page-detail .graph-list-time-wrap{
  margin-left: calc(157px + 100px + 75px);
  width: calc(100% - 100px - 157px - 75px);
}
#page-detail .graph-list-wrap{
  box-shadow: 0px 0px 3px #00000029;
}
#page-detail .graph{
  margin-top: 24px;
}
#page-detail .btn-group{
  display: flex;
  justify-content: space-between;
}
#page-detail .system-btn{
  width: 600px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  line-height: 1.2;
  padding: 14px 0px;
  border-radius: 6px;
  box-shadow: 0px 3px 6px #00000029;
}
#page-detail .graph-list-item{
  display: flex;
  height: 168px;
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
}
#page-detail .graph-list-item.show{
  opacity: 1;
  visibility: visible;
  height: 168px;
  overflow: auto;
  border-top: 1px solid var(--color-graph-border);
}
#page-detail .graph-list-item:nth-child(1){
  border-top: none;
}
#page-detail .graph-content-inner{
  width: calc(75px + 68px * 24);
}
#page-detail .graph-title{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100px;
  color: var(--color-white);
  font-size: 14px;
  padding-left: 8px;
}
#page-detail .graph-overview{
  width: 157px;
  font-size: 14px;
  font-weight: bold;
  padding: 24px;
}
#page-detail .overview-name{
  font-size: 13px;
  /* font-size: 14px; */
}
#page-detail .overview-num{
  font-size: 15px;
  /* font-size: 20px; */
}
#page-detail .graph-content-wrap{
  width: calc(100% - 100px - 157px);
  overflow: hidden;

}
/* 睡眠 */
#page-detail [data-graph="sleep"] .graph-title{
  background: var(--color-purple);
}
#page-detail [data-graph="sleep"] .graph-overview{
  background: #c5c3f5;
  padding: 24px 10px;
}
#page-detail [data-graph="sleep"] .graph-overview>div{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  width: fit-content;
  height: 100%;
  margin: 0 auto;
}
#page-detail [data-graph="sleep"] .graph-overview>div>div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
/* 無呼吸 */
#page-detail [data-graph="apnea"] .graph-title{
  background: var(--color-yellowgreen);
}
#page-detail [data-graph="apnea"] .graph-overview{
  background: #bbe3a0;
  padding-right: 0;
}
#page-detail [data-graph="apnea"] .overview-name{
  margin-bottom: 20px;
}
#page-detail [data-graph="apnea"] .overview-num,
#page-detail [data-graph="step"] .overview-num{
  font-size: 24px;
}
#page-detail [data-graph="apnea"] .overview-num{
  text-align: center;
  padding-right: 24px;
}
/* 歩数 */
#page-detail [data-graph="step"] .graph-title{
  background: var(--color-green);
}
#page-detail [data-graph="step"] .graph-overview{
  background: #bdd5d8;
}
#page-detail [data-graph="step"] .overview-num{
  text-align: right;
}
/* リラックス */
#page-detail [data-graph="relax"] .graph-title{
  background: var(--color-lightblue);
}
#page-detail [data-graph="relax"] .graph-overview{
  background: #BFDFF2;
}
#page-detail [data-graph="relax"] .overview-num-wrap span{
  display: block;
}
/* ストレス */
#page-detail [data-graph="stress"] .graph-title{
  background: var(--color-orange);
}
#page-detail [data-graph="stress"] .graph-overview{
  background: #ffd99f;
}
#page-detail [data-graph="stress"] .overview-name{
  margin-bottom: 14px;
}
#page-detail [data-graph="stress"] .overview-num-wrap{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(10px + 10px + 1px);
  text-align: center;
}
#page-detail [data-graph="stress"] .overview-num-wrap::before{
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translate(-50%);
  width: .5px;
  height: 25px;
  background: var(--color-graph-text);
}
#page-detail [data-graph="stress"] .overview-num-wrap span{
  display: block;
}
/* 感情 */
#page-detail [data-graph="emotion"] .graph-title{
  background: var(--color-pink);
}
#page-detail [data-graph="emotion"] .graph-overview{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffbeee;
  padding: 5px 0 5px 5px;
}
#page-detail [data-graph="emotion"] .graph-overview table{
  table-layout: auto;
  width: fit-content;
}
#page-detail [data-graph="emotion"] .graph-overview th,
#page-detail [data-graph="emotion"] .graph-overview td{
  border: none;
}
#page-detail [data-graph="emotion"] .graph-overview th,
#page-detail [data-graph="emotion"] .graph-overview tr:nth-child(1) td{
  font-size: 14px;
  text-align: center;
  padding: 0;
}
#page-detail [data-graph="emotion"] .graph-overview td{
  font-size: 20px;
  text-align: right;
  padding: 0 5px;
}
#page-detail [data-graph="emotion"] .graph-overview tr:not(:nth-child(1)) td:nth-child(3){
  border-left: 1px solid var(--color-graph-text);
}
#page-detail #emotion-legend{
  position: absolute;
  right: 16px;
  bottom: 3px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}
#page-detail #emotion-legend .legend-item{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: bold;
}
#page-detail #emotion-legend span{
  display: block;
  width: 30px;
  height: 2px;
}
.timeslider-wrap{
  position: relative;
  top: calc(-100% + 2px);
  left: 75px;
  width: 100%;
  width: calc(68px * 24);
  height: calc(100% - 2px - 24px);
  z-index: 1;
}
.timeslider{
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - (100% / 144));
  height: 100%;
  background: transparent;
}
.timeslider::-webkit-slider-thumb{
  appearance: none;
  width: 1px;
  height: 100%;
  background: transparent;
  cursor: pointer;
}
.timeslider-indicator{
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 10px;
  height: 100%;
  background: transparent;
  transition: left .1s;
}
.timeslider-indicator::before,
.timeslider-indicator::after{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}
.timeslider-indicator::before{
  width: 2px;
  height: 100%;
  background: var(--color-pink);
  border-radius: 0 0 5px 0;
}
.timeslider-indicator::after{
  top: 0;
  width: 14px;
  height: 14px;
  background: transparent url(../../img/timeslider-arrow.svg) no-repeat center center / contain;
}
#emotion-scatter-time{
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  min-width: 300px;
  background: var(--color-text);
  color: var(--color-white);
  font-size: 30px;
  font-weight: bold;
  margin: 0 auto 16px;
  padding: 8px 40px 12px;
  border-radius: 30px;
}
#emotion-scatter-time .icon{
  display: block;
  width: 24px;
  height: 24px;
  background: transparent url(../../img/icon-clock.svg) no-repeat center center / contain;
  margin: 4px 10px 0 0;
}
#emotion-choice-time{
  line-height: 1;
}
.emotion-scatter-wrap{
  position: relative;
  width: 100%;
  height: 100%;
}
#emotion-scatter-chart{
  background: transparent url(../../img/bg-scatter.jpg) no-repeat center center / 390px;
  width: 404px !important;
  height: 404px !important;
}
.emotion-scatter-legend{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}
.emotion-scatter-legend div{
  position: absolute;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}
.emotion-scatter-legend div:nth-child(1){
  color: #F05239;
  top: 0;
  left: 0;
}
.emotion-scatter-legend div:nth-child(2){
  color: #EF9C1F;
  top: 0;
  right: 0;
}
.emotion-scatter-legend div:nth-child(3){
  color: #6682E6;
  bottom: 0;
  left: 0;
}
.emotion-scatter-legend div:nth-child(4){
  color: #4DC84D;
  bottom: 0;
  right: 0;
}
.emotion-scatter-legend div .num{
  color: var(--color-text);
  font-size: 14px;
  font-weight: normal;
}
.emotion-scatter-legend div .num span{
  font-size: 20px;
}
/*
* 広告ページ　#page-advertisement
*/
#page-advertisement{
  width: 100%;
  background-image: url(../../img/ad-top-mv.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
.advertisement1{
  background-color: #FFD8D8;
}
.advertisement2{
  background-color: #C2E9ED;
}
#page-advertisement .ad-top-logo-img{
  padding: 30px 0 0 30px;
  width: fit-content;
}
#page-advertisement .ad-fade-ready {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}
#page-advertisement .ad-fade-ready.is-visible{
  opacity: 1;
  transform: translateY(0);
}
/* page-advertisement　header */
#ad-main-header{
  position: fixed;
  width: 100%;
  top: -70px;
  left: 0;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  border-radius: 0 0 20px 20px;
  transition: top 0.4s ease-in-out;
  z-index: 9999;
}
#ad-main-header.is-show {
  top: 0;
}
#ad-main-header .ad-header-inner{
  width: 100%;
}
#ad-main-header .ad-header-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 35px;
}
#ad-main-header .ad-header-logo a{
  display: inline-block;
}
#ad-main-header .ad-header-logo img{
  height: 30px;
}
#ad-main-header .ad-full-menu{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  width: 100%;
}
#ad-main-header .ad-sp-only{
  display: none;
}
#ad-main-header .ad-header-sp-text{
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  padding: 10px 0;
}
#ad-main-header ul{
  display: flex;
  gap: 90px;
  justify-content: center;
  padding: 20px 20px 40px 20px;
}
#ad-main-header ul li{
  max-width: 500px;
  width: 100%;
  text-align: center;
}
#ad-main-header .ad-menu-links-1 a{
  background-color: #48A1A4;
}
#ad-main-header .ad-menu-links-2 a{
  background-color: #E8902B;
}
#ad-main-header .ad-menu-links-3 a{
  background-color: #E97777;
}

#ad-main-header ul li a{
  text-decoration: none;
  color: var(--color-white);
  font-weight: bold;
  display: block;
  padding: 20px 0;
  border-radius: 100px;
  font-size: 30px;
  transition: 0.3s;
}
#ad-main-header ul li a:hover {
  opacity: 0.9;
}
/* ハンバーガー */
#ad-main-header .ad-hamburger {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
#ad-main-header .ad-hamburger span {
  margin: 0 !important;
  display: block;
  width: 40px;
  height: 5px;
  background-color: #DA3231;
  transition: all 0.3s;
  transform-origin: center;
  border-radius: 5px;
}
/* 開いた時 */
#ad-main-header.is-open .ad-full-menu{
  max-height: 200px;
}
#ad-main-header.is-open .ad-hamburger span:nth-child(1) {
  transform: translateY(15px) rotate(45deg);
}
#ad-main-header.is-open .ad-hamburger span:nth-child(2) {
  opacity: 0;
}
#ad-main-header.is-open .ad-hamburger span:nth-child(3) {
  transform: translateY(-15px) rotate(-45deg);
}
/* ------ */
#page-advertisement .inner{
  flex-direction: column;
  max-width: 1500px;
  padding: 0 50px;
}
.advertisement1 .ad-about1{
  padding-top: 200px;
  padding-bottom: 500px;
  text-align: left;
}
#page-advertisement .ad-about2{
  padding-top: 100px;
  padding-bottom: 150px;
  text-align: left;
}
#page-advertisement .page-advertisement-title{
  font-size: 60px;
  color: #094448;
  filter: drop-shadow(0px 3px 6px #00000029);
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#page-advertisement .page-advertisement-title .bg{
  font-size: 60px;
  background-color: var(--color-white);
  padding: 0 20px;
  margin-left: 0;
  padding-bottom: 5px;
}
#page-advertisement .page-advertisement-title .text-red{
  color: #E85047;
  font-size: 60px;
  margin-left: 0;
}
#page-advertisement .page-advertisement-top-text-box{
  position: relative;
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 20px 20px rgba(255, 255, 255, 0.4);
  margin: 20px;
}
#page-advertisement .page-advertisement-top-text-box::before{
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: 30px;  /* L字の横幅 */
  height: 30px; /* L字の縦幅 */
  border-top: 2px solid #48A1A4;   /* 上の線 */
  border-left: 2px solid #48A1A4;  /* 左の線 */
  border-top-left-radius: 2px;
}
#page-advertisement .page-advertisement-top-text-box::after {
  content: "";
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 30px;
  height: 30px;
  border-bottom: 2px solid #48A1A4; /* 下の線 */
  border-right: 2px solid #48A1A4;  /* 右の線 */
}
#page-advertisement .ad-sp-only{
  display: none;
}
#page-advertisement .page-advertisement-top-text{
  font-size: 16px;
  color: #094448;
  line-height: 2;
}
#page-advertisement .ad-button-area-title{
  margin-bottom: 60px;
  position: relative;
  font-weight: bold;
}
#page-advertisement .ad-button-area-title{
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  font-size: 29px;;
  margin: 0;
  margin-bottom: 30px;
  padding: 0 40px;
}
#page-advertisement .ad-button-area-back{
  width: 100%;
  padding: 0 70px;
  margin: 0 auto;
  margin-bottom: 200px;
}
#page-advertisement .ad-button-area{
  width: 100%;
  display: block;
  text-align: center;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0px 0px 6px #00000029;
  backdrop-filter: blur(4px) brightness(1.07);
  padding: 40px 55px;
  border-radius: 70px;
}
#page-advertisement .ad-button-area-btn ul{
  display: flex;
  justify-content: space-between;
}
#page-advertisement .ad-top-btn{
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  border-radius: 100px;
  box-shadow: 0px 3px 6px #00000029;
  width: 47%;
  height: auto;
}
#page-advertisement .ad-top-btn-bedding{
  background-color: #55ADB4;
}
#page-advertisement .ad-top-btn-supplement{
  background-color: #E8902B;
}
#page-advertisement .ad-top-btn-clinic{
  background-color: #E97777;
}
#page-advertisement .btn-ad-top{
  padding: 30px 40px;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  font-weight: bold;
  color:var(--color-white);
  text-align: center;
  background: none;
  flex-direction: column;
  gap: 12px;
}
#page-advertisement .ad-box-wrap{
  width: 100%;
  background-color: #F6FEFFE6;
  border-radius: 20px;
  box-shadow: 0px 0px 8px #00000029;
  padding: 100px 70px 0 70px;
}
#page-advertisement .ad-box-wrap > div{
  scroll-margin-top: 250px;
  padding-bottom: 190px;
  width: 100%;
}
#page-advertisement .ad-link-wrap{
  text-decoration: none;
  color: var(--color-bg-black);
  transition: opacity 0.3s;
}
#page-advertisement .ad-link-wrap:hover{
  opacity: 0.8;
}
#page-advertisement .ad-box-wrap > div ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  gap: 45px;
}
#page-advertisement .ad-box-wrap > div ul li{
  display: flex;
  flex-direction: column;
  width: calc((100% - 88px) / 2);
  background-color: var(--color-white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 8px #00000029;
}
#page-advertisement .ad-title{
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 45px;
}
#page-advertisement > div img {
  width: 100%;
  height: auto;
}
#page-advertisement > div ul li p{
  background-color: var(--color-white);
  padding: 10px 15px;
  font-size: 20px;
}
#page-advertisement .ad-title-span{
  width: 300px;
  text-align: center;
  padding: 15px 0;
  border-radius: 100px;
  font-size: 27px;
  color: var(--color-white);
  flex-shrink: 0;
  margin-right: 45px;
}
#bedding .ad-title-span{
  background: #55ADB4;
}
#supplement .ad-title-span{
  background: #E8902B;
}
#clinic .ad-title-span{
  background: #E97777;
}
#page-advertisement .ad-title::after{
  content: '';
  flex-grow: 1;
  height: 1px;
}
#bedding .ad-title::after{
  background: #55ADB4;
}
#supplement .ad-title::after{
  background: #E8902B;
}
#clinic .ad-title::after{
  background: #E97777;
}
#ad-footer{
  margin-top: 90px;
  padding: 25px 0;
  width: 100%;
  background-color: var(--color-white);
  border-radius: 20px 20px 0 0;
  justify-content: center;
  text-align: center;
}
#page-advertisement .ad-footer-box a{
  display: inline-block;
}
#page-advertisement .ad-footer-box img{
  height: 27px;
}
#page-advertisement .ad-footer-box p{
  font-size: 14px;
  padding-top: 10px;
}

/*
* #page-advertisement レスポンシブ
*/
@media screen and (max-width: 1400px){
  #ad-main-header ul{
    gap: 50px;
  }
  #ad-main-header ul li{
    max-width: 300px;
    width: 100%;
  }
  #ad-main-header ul a{
    font-size: 25px;
   }
  #page-advertisement .ad-button-area-title{
    font-size: 18px;
  }
  #page-advertisement .btn-ad-top{
    padding: 25px 25px;
    font-size: 20px;
    font-weight: bold;
  }
}
@media screen and (max-width: 1000px) {
  #ad-main-header ul li{
    max-width: 250px;
    width: 100%;
    font-size: 20px;
  }
  #page-advertisement .ad-box-wrap > div ul{
    gap: 30px;
  }
  #page-advertisement .ad-box-wrap > div ul li{
    width: calc((100% - 40px) / 2);
  }
}
@media screen and (max-width: 768px) {
  #page-advertisement{
    background-image: url(../../img/ad-top-mv-sp.png);
    background-attachment: scroll;
    background-size: min(100%, 375px);
  }
  #page-advertisement .ad-about1{
    padding: 90px 0 390px 0;
  }
  #page-advertisement .ad-about2{
    padding: 90px 0 350px 0;
  }
  /* ヘッダー */
  #ad-main-header{
    position: fixed !important;
    top: 0 !important;
    left: 0;
  }
  #ad-main-header .ad-header-logo img{
    height: 17px;
  }
  #ad-main-header .ad-header-bar{
    height: 50px;
    padding: 0 20px;
  }
  #ad-main-header .ad-hamburger{
    width: 50px;
    height: 50px;
    gap: 8px;
  }
  #ad-main-header .ad-hamburger span{
    height: 2px;
    width: 25px;
  }
  #ad-main-header.is-open .ad-hamburger span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
  }
  #ad-main-header.is-open .ad-hamburger span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }
  #ad-main-header ul{
    gap: 5px;
    padding: 0 20px 30px 20px;
  }
  #page-advertisement #ad-main-header ul li a{
    font-size: 12px;
    padding: 10px 0;
  }
  #ad-main-header .ad-sp-only{
    display: block !important;
  }
  /* ----- */
  #page-advertisement .inner{
    padding: 50px 20px 0 20px;
  }
  #page-advertisement .ad-pc-only{
    display: none !important;
  }
  #page-advertisement .ad-sp-only{
    display: block !important;
  }
  #page-advertisement .ad-box-wrap > div{
    scroll-margin-top: 130px;
    padding-bottom: 100px;
  }
  #page-advertisement .ad-box-wrap{
    padding: 25px 10px 0 10px;
    border-radius: 5px;
  }
  #page-advertisement .page-advertisement-title{
    font-size: 30px;
  }
  #page-advertisement .page-advertisement-title .bg{
    font-size: 30px;
    padding: 0 10px;
  }
  #page-advertisement .page-advertisement-title .text-red{
    font-size: 30px
  }
  #page-advertisement .page-advertisement-title-span{
    width: 150px;
    margin-right: 10px;
  }
  #page-advertisement .page-advertisement-top-text{
    font-size: 13px;
  }
  #page-advertisement .ad-button-area-btn ul{
    gap: 35px;
  }
  #page-advertisement .ad-button-area-title{
    padding: 0 20px;
  }
  #page-advertisement .ad-button-area-title > span{
    font-size: 16px;
    padding: 0 5px;
  }
  #page-advertisement .ad-title span{
    font-size: 16px;
  }
  #page-advertisement .ad-title-span{
    width: 150px;
    margin-right: 10px;
    padding: 8px 0;
  }
  #page-advertisement .ad-box-wrap > div ul{
    gap: 30px;
  }
  #page-advertisement .ad-box-wrap > div ul li{
    width: 100%;
  }
  #page-advertisement .ad-box-wrap > div ul li p{
    padding-top: 5px;
    font-size: 13px;
  }
  #page-advertisement .ad-button-area-btn ul{
    flex-direction: column;
    justify-content: center;
  }
  #page-advertisement .ad-top-btn{
    width: 100%;
  }
  #page-advertisement .btn-ad-top{
    font-size: 24px;
    padding: 18px 0;
  }
  #ad-footer{
    margin-top: 70px;
    padding: 15px 0;
    border-radius: 10px 10px 0 0;
  }
  #page-advertisement .ad-footer-box img{
    height: 16px;
  }
  #page-advertisement .ad-footer-box p{
    font-size: 8px;
    padding-top: 5px;
  }
}

/*
* 印刷表示
*/
@media print{
  @page{
    size: auto; /* ユーザーが選択した用紙サイズに合わせる */
    /* padding: 10mm; */
  }
  canvas:not(.y-axis){
    width: 100% !important;
    /* height: auto !important; */
    /* max-width: 100% !important; */
  }
  /* 非表示 */
  .box.graph .h1-wrap,
  .btn-wrap,
  #page-detail .btn-group,
  .analysis-label,
  .graph-btn,
  .btn-bottom,
  #analysis-label,
  .timeslider-indicator,
  .box.emo-detail{
    display: none;
  }
  /* 共通 */
  html{
    font-size: 4mm;
  }
  p{
    font-size: 4mm;
  }
  #page-top, #page-detail{
    width: 100%;
  }
  #page-top h1,
  #page-detail h1,
  #page-top .box.legend h1{
    font-size: 5mm;
    margin-bottom: 2mm;
  }
  #page-top .inner,
  #page-detail .inner{
    width: 100%;
    /* max-width: 1123px; */
    display: flex;
    flex-direction: column;
    padding: 3mm 3.125mm;
  }
  .box-wrap-right,
  #page-detail .box.graph,
  .weekly,
  .result-advice-wrap{
    grid-column: auto;
    grid-row: auto;
  }
  .box{
    padding: 4mm;
  }
  .weekly{
    order: 1;
  }
  .weekly-explanation-table{
    width: 85mm;
  }
  #page-top .weekly-explanation-table th{
    width: 90px;
    font-size: 3mm;
    font-weight: normal;
  }
  #page-top .weekly-explanation-table h1{
    font-size: 3mm;
  }
  #page-top .weekly-explanation-table td{
    font-size: 2.5mm;
  }
  #page-top .weekly{
    gap: calc(8mm + 4mm + 1px);
  }
  .box-wrap-right,
  #page-top .box.graph,
  #page-detail .box.graph{
    width: 100%;
    padding: 0;
    border: none;
    order: 2;
  }
  #page-detail .overview-name{
    font-size: 13px;
    /* font-size: 14px; */
  }
  #page-detail .overview-num{
    font-size: 15px;
    /* font-size: 20px; */
  }
  .result-advice-wrap{
    order: 3;
    width: 100%;
    gap: 4mm;
  }
  #page-top .box.legend{
    order: 4;
    margin: 4mm auto 0 0;
  }
  #page-top .box.legend th{
    width: calc(2.5mm * 4 + 4mm * 2 + 2px);
    font-size: 2.5mm;
    padding: .125mm 4mm;
  }
  #page-top .box.legend td{
    width: 20mm;
    font-size: 2.25mm;
    padding: .125mm 0 .125mm calc(4mm + 2.25mm + .25mm);
  }
  #page-top .box.legend td::before{
    left: 3.5mm;
    width: 2.25mm;
    height: 1.75mm;
  }
  .graph-list-time-wrap{
    margin: 0 0 1mm;
  }
  #page-top .graph-content-inner,
  .graph-list-day,
  .graph-list-time{
    width: 100%;
  }
  .graph-list-day span{
    width: 50%;
    font-size: 2.5mm;
    padding: .125mm .5mm 0;
  }
  .graph-list-time div{
    width: calc(100% / 24);
    font-size: 2.5mm;
    padding: .125mm .5mm 0;
  }
  .graph-day{
    font-size: 2.5mm;
    width: 10%;
    padding-left: .75mm;
  }
  .unit{
    font-size: 2mm;
  }
  .graph-item{
    width: 5%;
  }
  .graph-item div{
    width: 100%;
    font-size: 2mm;
    padding: .125mm .5mm;
  }
  .weekly-top{
    position: relative;
  }
  .box-top{
    gap: 2mm;
  }
  .graph-note{
    margin: 0 0 2mm;
  }
  .sleepwell-apnea{
    width: 20mm;
    height: 7mm;
    font-size: 2.5mm;
  }
  .result p,
  .advice p{
    font-size: 2.5mm;
  }
  .advice::before,
  .advice::after{
    top: -3mm;
    left: 4.5mm;
    border-width: 3mm;
  }
  .advice::after{
    top: -2.5mm;
  }
  /* TOP */
  #page-top .inner{
    gap: 8mm;
  }
  #page-top .weekly{
    width: fit-content;
    flex-direction: row;
    align-items: center;
    gap: calc(8mm + 4mm + 1px);
  }
  #page-top .weekly-top{
    width: 102mm;
  }
  #page-top .weekly-top::after{
    content: '';
    position: absolute;
    top: 0;
    right: calc(-1px - 110mm);
    width: 1px;
    height: 100%;
    background: var(--color-gray);
  }
   /* #page-top .weekly-explanation-table::after{
    content: '';
    position: absolute;
    top: 0;
    right: 110mm;
    width: 1px;
    height: 100%;
    background: var(--color-gray);
   } */
  .measured-id-wrap{
    position: absolute;
    top: 0;
    right: 0;
  }
  .evaluation-bar-group{
    margin: -2mm 0;
  }
  .evaluation-bar-group>div{
    padding: 2mm 0;
    border-top: 1px solid #888;
    border-bottom: none;
  }
  .evaluation-bar-group>div:nth-child(1){
    border: none;
  }
  .radar-chart-wrap{
    margin: -12mm 0;
    width: 110mm;
    scale: .75;
  }
  .radar-chart-wrap #radar-legend{
    right: 0;
  }
  .radar-chart-wrap #radar-legend span{
    width: 4mm;
  }
  .radar-chart-wrap #radar-legend .label-name{
    font-size: 2.5mm;
  }
  #page-top .graph-content,
  #page-top .graph-list-time-wrap{
    width: calc(100% - 10% - 5%);
  }
  #page-top .graph-list-time-wrap{
    margin-left: calc(10% + 5%);
  }
  #page-top .graph-list-wrap{
    gap: 2.5mm;
  }
  #page-top .graph-list-item{
    height: fit-content;
  }
  /* 詳細 */
  #page-detail .inner{
    gap: 4mm;
  }
  #page-detail .weekly{
    width: 100%;
  }
  #page-detail h1 span{
    font-size: 4mm;
  }
  #page-detail .measured-id-wrap p{
    margin: 0;
  }
  #page-detail .measured-id-wrap p:nth-child(1){
    display: none;
  }
  .weekly .table{
    width: 75%;
  }
  .weekly .table{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10mm;
  }
  .weekly .table-col{
    width: calc((100% - 10mm) / 2);
  }
  .weekly .table-col>div>div{
    min-height: unset;
    font-size: 3.25mm;
    padding: 1.75mm 4mm 2mm;
  }
  .weekly .table-col>div>div:nth-child(1){
    width: 50%;
  }
  .weekly .table-col>div>div:nth-child(2){
    width: 30%;
  }
  .weekly .table-col>div>div:nth-child(3){
    width: 20%;
  }
  .total-eva-wrap{
    flex-direction: row-reverse;
    margin-top: 2mm;
  }
  .total-eva{
    align-items: flex-end;
  }
  .total-eva>div{
    width: auto;
    font-size: 5mm;
    padding: 2.5mm 4mm 2.75mm;
  }
  #total-eva-result{
    width: auto;
    padding: 2.5mm 8mm 2.75mm;
  }
  #page-detail .graph-list-item.show{
    height: 24mm !important;
  }
  #page-detail .graph-title,
  #page-detail .overview-name{
    font-size: 2mm;
  }
  #page-detail .graph-title{
    width: 4%;
    padding: 0 1.25mm;
  }
  #page-detail .graph-overview{
    width: 8%;
    font-size: 3mm;
    padding: 3mm 2mm;
  }
  #page-detail [data-graph="sleep"] .graph-overview{
    padding: 2mm 1mm;
  }
  #page-detail [data-graph="sleep"] .graph-overview>div>div{
    gap: 0.8mm;
  }
  #page-detail .overview-name{
    font-size: 1.5mm;
    /* font-size: 14px; */
  }
  #page-detail .overview-num{
    font-size: 2.5mm;
  }
  #page-detail [data-graph="apnea"] .overview-name{
    margin-bottom: 3mm;
  }
  #page-detail [data-graph="apnea"] .overview-num,
  #page-detail [data-graph="step"] .overview-num{
    font-size: 4mm;
  }
  #page-detail [data-graph="apnea"] .overview-num{
    padding-right: 3mm;
  }
  #page-detail [data-graph="stress"] .overview-name{
    margin-bottom: 3mm;
  }
  #page-detail [data-graph="stress"] .overview-num-wrap{
    font-size: 2mm;
    gap: calc(2mm + 2mm + 1px);
  }
  #page-detail [data-graph="emotion"] .graph-overview{
    padding: 3mm 0 4.5mm;
  }
  #page-detail [data-graph="emotion"] .graph-overview th,
  #page-detail [data-graph="emotion"] .graph-overview tr:nth-child(1) td{
    font-size: 2mm;
  }
  #page-detail [data-graph="emotion"] .graph-overview td{
    font-size: 3mm;
    line-height: 1.2;
    padding: 0 1mm;
  }
  #page-detail .graph-list-time-wrap{
    width: calc(100% - 4% - 8% - 12mm);
    margin-left: calc(4% + 8% + 12mm);
  }
  #page-detail .graph-content-wrap{
    width: calc(100% - 4% - 8%);
  }
  #page-detail .graph-content-inner{
    width: 100%;
  }
  #page-detail .graph-content-inner canvas{
    height: 24mm !important;
  }
  #page-detail #emotion-legend .legend-item{
    font-size: 2mm;
    margin-bottom: -.5mm;
  }
  #page-detail #emotion-legend span{
    position: relative;
    top: 1px;
    left: 0;
    height: .5mm;
  }
  /* 注釈 */
  .note{
    font-size: 2mm;
    margin-top: 2mm;
  }
}
/* 非表示設定 */
#page-top .legend-box-1, /* 各指標の見方 */
/*#page-top .box.ad,  あなたの”これから”に向けて */
#page-top .box.article{ /* 自分の「眠りのかたち」を知ることから、健康の第一歩が始まります */
  display: none;
}
#page-top .box.legend{
  width: 75%;
}
#page-top .legend-box-2{
  width: fit-content;
}