*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  margin: 0;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  /*overflow-x: hidden;*/
}

main {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
}

.card-on {
    margin-bottom: 0.5rem;
    border-color: blue;
    border-width: 5px;
    background-color: white;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
}

.card-off {
    margin-bottom: 0.5rem;
    border-color: deeppink;
    border-width: 5px;
    background-color: white;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
}

.card-header-on {
    background-color: blue;
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
}

.card-header-off {
    background-color: deeppink;
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
}

.card-body {
    background-color: white;
    padding: 1rem;
}

.card-time {
    font-size: Large;
    margin: 5px 0;
}

.card-normal {
    margin: 5px 0;
}

.details-summary {
	cursor: pointer;
	transition: 0.2s;
	padding: 6px;
	border-radius: 6px;
    font-size: x-Large;

	/* ホバー時のスタイル */
	&:hover {
		cursor: pointer;
		background-color: #bee1de;
	}

	/* タブフォーカス時のスタイル */
	&:focus-visible {
		outline: dashed #00a5a0;
	}
}