#spin {
	z-index: 200;
	background-color: #00000066;
}

#spin-circle {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;  
}

#spin-focus {
	width: 60px;
	height: 60px;
	border: 6px #ddd solid;
	border-top: 6px #2edb0f solid;
	border-radius: 50%;
	animation: spin-animation 1.5s infinite linear;
}

@keyframes spin-animation {
	100% { transform: rotate(360deg); }
}

.expandable-button-wrapper {
	background-color: #f8f8f8;
    border-radius: 16px;	
}

.expandable-button {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0 !important;
	background: none;
	border: none;
	box-shadow: none;
	color: #000000;
	max-width: 100%;
	cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
}

.expandable-button:after {
	content: " ";
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid #2eda0e;
	border-left: 0;
	border-bottom: 0;
	margin-left: 10px;
	box-sizing: border-box;
}

.expandable-button.collapsed:after {
	transform: translateY(-30%) rotate(135deg);
}

.expandable-button.expanded:after {
	transform: translateY(30%) rotate(-45deg);
}

.expandable-child {
	background-color: #f8f8f8;
}

.pulldown-button {
	position: relative;
	padding: 0 !important;
}

.pulldown-button button, .pulldown-button_soklin-league select {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 8px 0;
	appearance: none;
	width: 100%;
	min-width: fit-content;
	color: inherit;
	font-weight: inherit;
	max-width: 100%;
  	text-align: left;
	padding: 10px 45px 10px 10px;
}

.pulldown-button select {
	display: none;
}

.pulldown-button ul, .pulldown-button_soklin-league ul {
	display: none;
	position: absolute;
	list-style: none;
	font-weight: normal;
	padding: 0;
    width: 100%;
    left: 0;
    background-color: #ffffff;
    color: #000000;
    top: 0;
    transform: translateY(-50%);
	border-radius: 8px;
	box-shadow: 2px 2px 6px 0 rgb(0 0 0 / 25%);
	text-align: left;
}

.pulldown-button ul.shown, .pulldown-button_soklin-league ul.show {
	display: block;
	z-index: 5;
	position: absolute;
    /* top: 145px; */
	min-width: 250px;
    transform: translateX(-50%);
    left: 50%;
}

.pulldown-button li, .pulldown-button_soklin-league li {
	position: relative;
	cursor: pointer;
	line-height: 125%;
    padding: 8px 16px;
	display: flex;
	align-items: flex-start;
	border-bottom: 0.1px solid #a3a3a366;
}

.pulldown-button li:hover, .pulldown-button_soklin-league li:hover {
	background-color: #eeeeee;
}

/* .pulldown-button button::before {
	border-bottom: 6px solid #ffffff;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	content: "";
	position: absolute;
	right: 15px;
	top: 15px;
	width: 0;
} */

.pulldown-button button::after {
	content: "";
	display: inline-block;
	width: 32px;
	min-width: 32x;
	height: 32px;
	min-height: 32px;
	background: linear-gradient(#0A3F03 0 0), linear-gradient(#0A3F03 0 0);
	background-position: 3px 3px;
	background-size: 30% 2px, 2px 30%;
	background-repeat: no-repeat;
	margin-top: -2px;
	margin-left: 8px;
	transform: translateY(-90%) rotate(225deg);
	position: absolute;
	top: 50%;
	right: 20px;
}

.pulldown-button_soklin-league::after  {
	content: "";
	display: inline-block;
	width: 32px;
	min-width: 32x;
	height: 32px;
	min-height: 32px;
	background: linear-gradient(#333 0 0), linear-gradient(#333 0 0);
	background-position: 3px 3px;
	background-size: 30% 2px, 2px 30%;
	background-repeat: no-repeat;
	margin-top: -2px;
	margin-left: 8px;
	transform: translateY(-90%) rotate(225deg);
	position: absolute;
	top: 50%;
	right: 20px;
}

/* .pulldown-button button::after {
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 6px solid #ffffff;
	content: "";
	position: absolute;
	right: 15px;
	top: 25px;
	width: 0;
} */

.pulldown-button .pulldown-button-check, .pulldown-button_soklin-league .pulldown-button-check {
	margin-right: 12px;
	width: 0.5rem;
    display: inline-block;
}

.pulldown-button .pulldown-button-text, .pulldown-button_soklin-league .pulldown-button-text {
	flex-grow: 1;
}

.select-wrapper {
	border: #228D0F solid 1px;
	color: #0A3F03;
	background-color: #DEFEDD;
	border-radius: 16px;
	width: fit-content;
	width: 100%;
	border-radius: 16px;
	position: relative;
}

.select-wrapper select {
	-webkit-appearance: none;
	appearance: none;
	width: fit-content;
	background: #DEFEDD;
	color: #0A3F03;
	border: none;
	outline: 0;
	padding: 12px 16px;
	width: 100%;
	border-radius: 16px;
}

.select-wrapper div {
	display: inline;
	width: 100%;
}

.select-wrapper div::before {
	content: " ";
	position: absolute;
	right: 15px;
	top: 50%;
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid #000;
    border-left: 0;
    border-bottom: 0;
    margin-left: 10px;
    box-sizing: border-box;
    transform: translateY(-50%) rotate(135deg);
}

/* .select-wrapper div::after {
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 6px solid #ff7d00;
	content: "";
	position: absolute;
	right: 15px;
	top: 18px;
	width: 0;
} */

.select-wrapper.cool {
	border: none;
	background-color: #22cf3d;
}

.select-wrapper.cool select {
	background-color: #22cf3d;
	color: #ffffff;
}

.select-wrapper.white div::before {
	border-bottom-color: #ffffff;
}

.select-wrapper.white div::after {
	border-top-color: #ffffff;
}

.switch-wrapper {
	width: 100%;
}

.switch-wrapper .label {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;    
}

.switch-wrapper .switch-box {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	cursor: pointer;
	/* margin-left: 16px; */
}

.switch-wrapper input {
	display: none;
}

.switch-wrapper .switch-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #cccccc;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	border-radius: 34px;
	min-width: 60px;
}

.switch-wrapper .switch-slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: #ffffff;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	border-radius: 50%;
}

.switch-wrapper input:checked + .switch-slider {
	background-color: #22ce3c;
}
  
.switch-wrapper input:focus + .switch-slider {
	box-shadow: 0 0 1px #22ce3c;
}
  
.switch-wrapper input:checked + .switch-slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

.body-part-wrapper {
	color: #0A3F03;
}

.segment-wrapper {
	background: #E6E6E6;
	width: 100%;
	max-width: 640px;
	text-align: center;
	margin: 0 16px 10px;
	/* border: #1c5e20 solid 2px; */
	border-radius: 12px;
	display: flex;
	justify-content: space-around;
	padding: 2px;
	color: #1A1A1A;
	font-weight: bold;
	height: 40px;
}

.tab-wrapper input[type="radio"] {
	display: none;
}

.tab-wrapper .tab-label {
	display: block;
	padding: 8px 16px;
	border-top-left-radius: 12px;
    border-top-right-radius: 12px;
	margin: 0 4px;
}

.tab-wrapper input[type="radio"] + .tab-label {
/* 	background-color: #007100;
	color: #ffffff; */
	display: block;
	margin: 2px;
	cursor: pointer;
	color: #1A1A1A;
	padding: 6px;
}

.tab-wrapper input[type="radio"]:checked + .tab-label {
/* 		background-color: #ffffff;
	color: #000000; */
  	color: #ffffff;
	background-color: #22CF3C;
	border-radius: 11px;
	box-shadow: 0px 2px 2px 0 rgb(0 0 0 / 25%);
	padding: 5px;
	height: 30px;
  	border: none;
}

.slider-wrapper {
	width: 100%;
}

.slider-wrapper input[type='range'] {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 7px;
	border-radius: 10px;
	background: #b7b7b7;
	background-image: linear-gradient(#22ce3c, #22ce3c);
	background-repeat: no-repeat;
	margin: 10px 0;
	max-width: 100%;
}

.slider-wrapper input[type='range']:focus {
	border: none;
}
  
.slider-wrapper input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	cursor: ew-resize;
	background: #22ce3c;
}

.slider-wrapper input[type='range']::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	box-shadow: none;
	border: none;
	background: transparent;
}

.icon-button {
	border: none;
	padding: 2px 6px !important;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	/* margin-left: 8px; */
	font-weight: normal;
}

.segment-wrapper label {
	width: 100%;
}

.segment-wrapper input[type='radio'] {
	display: none;
}

.segment-wrapper .segment-label {
	display: block;
	margin: 2px;
	cursor: pointer;
	color: #1A1A1A;
	padding: 6px;
}

.segment-wrapper input:checked + .segment-label {
	color: #1A1A1A;
	background-color: #22CF3C;
	border-radius: 11px;
	box-shadow: 0px 2px 2px 0 rgb(0 0 0 / 25%);
	padding: 5px;
	height: 30px;
}

.daily_health_records input:checked + .segment-label {
	color: #ffffff;
	background-color: #22CF3C;
	border-radius: 11px;
	box-shadow: 0px 2px 2px 0 rgb(0 0 0 / 25%);
	padding: 5px;
	height: 30px;
}

.segment-wrapper.rect {
	border-radius: 8px;
}

.segment-wrapper.filled {
	background-color: #ffffff;
	border: none;
	padding: 3px;
}

.segment-wrapper.filled .segment-label {
	color: #000000;
	padding: 4px;
}

.segment-wrapper input:checked + .segment-label.warm {
	color: #ffffff;
	background-color: #ff7d01;
	border-radius: 8px;
}

.segment-wrapper input:checked + .segment-label.cool {
	color: #ffffff;
	border-radius: 8px;
}

.sequential-radio {
    display: flex;
    justify-content: center;
}

.sequential-radio input[type=radio] {
    display: none;
}

.sequential-radio input[type=radio]:checked ~ .sequential-radio-num {
    background-color: #00df00;
    color: #ffffff;
    border: none;
}

.sequential-radio input[type=radio]:checked:disabled ~ .sequential-radio-num {
    background-color: #a3a3a3;
    color: #ffffff;
    border: none;
}

.sequential-radio input[type=radio]:checked ~ .sequential-radio-label {
    color: #007100;
}

.sequential-radio input[type=radio]:checked:disabled ~ .sequential-radio-label {
    color: #888888;
}

.sequential-radio label {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: linear-gradient(#8f8f8f, #8f8f8f);
    background-size: 100% 1.5px;
    background-repeat: no-repeat;
    background-position: 0px 25px;
}

.sequential-radio label:first-of-type {
    background-position: 60px 25px;
}

.sequential-radio label:last-of-type {
    background-position: -60px 25px;
}

.sequential-radio .sequential-radio-num {
    width: 50px;
    height: 50px;
    border: 2px solid #8f8f8f;
    border-radius: 50%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    line-height: 100%;
    background-color: #ffffff;
    color: #8f8f8f;
    font-size: 1.5rem;
    align-items: center;
    box-shadow: 0 2px 5px #8f8f8f;
    cursor: pointer;
}

button.custom {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 12px 0;
	appearance: none;
	display: inline-flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
	width: 100%;
	min-width: fit-content;
	max-width: 350px;
}

button.round {
	border-radius: 20px;
}

button.rect {
	border-radius: 12px;
}

button.rect_new {
	border-radius: 16px;
}

button.text {
	width: fit-content;
	box-shadow: none;
	color: #5a5a5a;
	padding: 0px;
}

button.text.white {
	width: fit-content;
	box-shadow: none;
	color: #ffffff;
	padding: 0px;
	background-color: transparent;
}

button.text.cool {
	color: #22cf3d;
	background-color: #ffffff;
}

button.text.black {
	color: #333333;
}

button.custom.back {
	width: fit-content;
	padding: 0;
}

button.custom.expand {
	width: 100%;
}

button.custom.expandable, button.custom.collapsible {
	position: relative;
	display: block;
}

button.custom.expandable:after, button.custom.collapsible:after {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(0, -50%);
	font-size: 1.2rem;
	width: 20px;
}

button.custom.expandable:after {
	content: "＋";
}

button.custom.collapsible:after {
	content: "−";
}

button.custom.back:before {
	content: " ";
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid #5a5a5a;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: rotate(-135deg);
}

button.custom.plain {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	color: #000000;
	max-width: 100%;
}

button.custom.plain.small {
	padding: 0;
}

button.plain:after {
	content: " ";
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 1px solid #5a5a5a;
	border-left: 0;
	border-bottom: 0;
	margin-left: 10px;
	box-sizing: border-box;
	transform: translateY(25%) rotate(45deg);
}

.custom.right-arrow:after {
	content: "";
	display: inline-block;
	width: 32px;
	min-width: 32x;
	height: 32px;
	min-height: 32px;
	background: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
	background-position: 6px 6px;
	background-size: 30% 2px,2px 30%;
	background-repeat: no-repeat;
	margin-top: -2px;
	margin-left: 8px;
	transform: rotate(135deg);
}

/* .custom.right-arrow:after {
	content: "";
	display: inline-block;
	width: 16px;
	min-width: 16px;
	height: 16px;
	min-height: 16px;
	background: linear-gradient(#22cf3d 0 0), linear-gradient(#22cf3d 0 0), #ffffff;
	background-position: 6px 6px;
	background-size: 30% 1px,1px 30%;
	background-repeat: no-repeat;
	border-radius: 50%;
	margin-top: -2px;
	margin-left: 8px;
	transform: rotate(135deg);
} */

.custom.right-arrow.blue:after {
	content: "";
	display: inline-block;
	width: 32px;
	min-width: 32x;
	height: 32px;
	min-height: 32px;
	background: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
	background-position: 6px 6px;
	background-size: 30% 2px,2px 30%;
	background-repeat: no-repeat;
	margin-top: -2px;
	margin-left: 8px;
	transform: rotate(135deg);
}

/* .custom.right-arrow.blue:after {
	content: "";
	display: inline-block;
	width: 16px;
	min-width: 16px;
	height: 16px;
	min-height: 16px;
	background: linear-gradient(#002fff 0 0), linear-gradient(#002fff 0 0), #ffffff;
	background-position: 6px 6px;
	background-size: 30% 1px,1px 30%;
	background-repeat: no-repeat;
	border-radius: 50%;
	margin-top: -2px;
	margin-left: 8px;
	transform: rotate(135deg);
} */


button.slim {
	padding: 4px 0;
	font-size: 0.9rem;
}

button.small {
	padding: 4px 32px;
	font-size: 0.9rem;
}

button.large {
	font-size: 1.1rem;
}

button.huge {
	font-size: 1.25rem;
}

button.fit {
	width: fit-content;
	padding: 8px 32px;
}

button.short {
	width: fit-content;
}

button.expand {
	width: 100%;
	max-width: 100%;
}

button.cool {
	color: #021D01;
	background-color: #22CF3C;
}

button.cool_border {
	color: #228D0F;
	border: 1px solid #25AC0D;
}

button.cool_move {
    background: #22CF3C;
    color: #021D01;
    padding: 12px;
    max-width: 350px;
    font-weight: bold;
    border: 1px solid #25AC0D;
  	border-radius: 16px;
}

button.cool.gradient {
	color: #ffffff;
	background: #22CF3C;
}

button.cool.gradient span.large.bold {
	padding-left: 5px;
}

button.cool.blue.gradient {
	color: #ffffff;
	background: #0022b0;
  	padding: 1px 10px !important;
}

/* button.cool.gradient {
	color: #ffffff;
	background: linear-gradient(45deg, #22cf3d, 80%, #d6ff00);
	border: white solid 1px;
} */

/* button.cool.blue.gradient {
	color: #ffffff;
	background: linear-gradient(45deg, #0022b0, #5eccff 99%, #5eccff);
	border: white solid 1px;
  	padding: 8px !important;
} */

button.cool.pale {
	color: #000000;
	background-color: #8ce183;
}

button.warm {
	color: #000000;
	background-color: #ffb14c;
}

button.warm.gradient {
	color: #ffffff;
	background: linear-gradient(to right, #ff7d00, #ffb14c 75%, #ff7d00);
}

button.white {
	background-color: #ffffff;
}

button.white.cool {
	color: #22ce3c;
	border: #22ce3c solid 1px;
	background-color: #ffffff;
}

button.white.warm {
	color: #ff7d00;
	border: #ff7d00 solid 1px;
	background-color: #ffffff;
}

button.gray {
	color: #5a5a5a;
	background-color: #c6c6c6;
}

button.gray.black {
    color: #000000;
}

button.blue {
	color: #ffffff;
	background-color: #002fff;
  	border-radius: 12px;
}

#health-top button.blue .small {
  	font-size: 0.61rem;
}

.circle-mark:before {
	content: "●";
	color: #27cbe1;
	margin-right: 8px;
}

.circle-mark.cool:before {
	color: #22ce3c;
}

.circle-mark.cool.dark:before {
	color: #007100;
}

.circle-mark.warm:before {
	color: #ffb14c;
}

.text.white {
	color: #ffffff;
}

.text.black {
	color: #000000;
}

.text.gray800 {
	color: #333333;
}

.text.gray {
	color: #5a5a5a;
}

.text.light {
	color: #8f8f8f;
}

.text.pale {
	color: #bebebe;
}

.text.warm {
	color: #ff7d01;
}

.text.cool {
	color: #007100;
}

.text.cool.helf {
	color: #00a700;
}

.text.cool.light {
	color: #25AC0D;
}

.text.cool.pale {
	color: #b4f0ba;
}

.text.base {
	color: #0A3F03;
}

.text.gray50 {
	color: #F2F2F2;
}

.text.gray100 {
	color: #E6E6E6;
}

.text.gray200 {
	color: #CCCCCC;
}

.text.gray300 {
	color: #B3B3B3;
}

.text.gray400 {
	color: #999999;
}

.text.gray420 {
	color: #949494;
}

.text.gray500 {
	color: #7F7F7F;
}

.text.gray536 {
	color: #767676;
}

.text.gray600 {
	color: #666666;
}

.text.gray700 {
	color: #4D4D4D;
}

.text.gray800 {
	color: #333333;
}

.text.gray800 {
	color: #1A1A1A;
}


.filled {
	border-radius: 16px;
	padding: 16px;
	max-width: 640px;
	width: 100%;
}

.filled_new {
	border-radius: 12px;
	padding: 20px;
	max-width: 640px;
	width: 100%;
	background: #fff;
}

.filled_new_small {
	border-radius: 12px;
	padding: 13px;
	max-width: 640px;
	width: 100%;
	background: #fff;
}

.filled_Lv {
	border-radius: 24px;
	max-width: 640px;
	width: 100%;
  	background: #fff;
}

.filled.square {
	border-radius: 0 !important;
}

.filled.narrow {
	padding: 0 12px;
	max-width: 640px;
	border-radius: 8px;
}

.filled.thin {
	padding: 8px 12px;
}

.filled.box {
	max-width: 480px;
}

.filled.fixed {
	width: fit-content;
	max-width: 480px;
	width: 100%;
}

.filled.round {
	text-align: center;
	border-radius: 20px;
	padding: 2px 32px;
}

.filled.white {
	background-color: #ffffff;
	color: #000000;
}

.filled.white.policy_iframe_wrap {
	width: 90%;
}

.filled.gray {
	background-color: #c8c8c8;
	color: #000000;
}

.filled.gray.light {
	background-color: #f2f2f2;
	color: #000000;
}

.filled.warm {
	background-color: #ffdaad;
	color: #000000;
}

.filled.cool {
	background-color: #22cf3d;
	color: #ffffff;
}

.filled.cool.light {
	background-color: #2edc0e;
	color: #ffffff;
}

.filled.cool.dark {
	background-color: #007100;
	color: #ffffff;
}

.filled.cool.black {
	color: #000000;
}

.filled.black {
	background-color: rgba(0,0,0,0.7);
	color: #ffffff;
}

.filled.blur {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.filled.expand {
	max-width: 100%;
}

.filled.border {
	border-width: 1px;
	border-style: solid;
}

.filled.border.gray {
	border-color: #5e5e5e;
	background-color: #ffffff;
}

#guide .filled {
	padding: 14px;
}

.bordered {
	border-radius: 16px;
	border-style: solid;
	border-width: 2px;
	padding: 8px 16px;
	/* min-width: 300px; */
	max-width: fit-content;
	border-color: #888888;
}

.bordered.warm {
	background-color: #ffffff;
	border-color: #ff7d01;
}

.bordered.cool {
	background-color: #ffffff;
	border-color: #22cf3d;
	color: #000000;
}

.bordered.thick {
	border-width: 4px;
}

.popup {
	z-index: 210;
}

.popup-box {
	width: fit-content;
	height: fit-content;
	bottom: 64px;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	padding: 8px;
	max-width: 80%;
	box-shadow: #f2f2f2 0 0 2px 2px;
}

.dialog-box {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	z-index: 120;
	background-color: #00000066;
}

.dialog-body {
	background-color: #007100;
	color: #ffffff;
	width: 100%;
	padding: 24px 0;
	text-align: center;
}

.info-box {
	position: fixed;
    top: 0;
    left: 0;
	padding: 20px;
	background-color: rgba(0,0,0,0.4);
	display: flex;
	margin: auto;
	align-items: center;
	z-index: 100;
	height: 100%;
  	width: 100%;
}

.info-caption {
	text-align: center;
	font-weight: bold;
	padding-bottom: 16px;
	border-bottom: #cccccc solid 1px;
}

.sheet-box {
	background-color: #00000066;
	z-index: 100;
	height: 100%;
}

.symbol {
	position: relative;
	width: 15px;
}

.symbol.large {
	line-height: 50%;
	width: 25px;
}

.symbol.huge {
	font-size: 2.5rem;
	line-height: 50%;
	/*width: 20px;     */
}

.symbol.up, .symbol.down {
	line-height: 100%;
}

.symbol.arrow:after {
	border-color: transparent;
	border-style: solid;
	border-width: 7px;
	content: "";
	position: absolute;
	width: 0;
}

.symbol.arrow.large:after {
	border-width: 10px;
}

.symbol.arrow.huge:after {
	border-width: 12px;
}

.symbol.arrow.left:after {
	right: 7px;
	top: 7px;
}

.symbol.arrow.right:after {
	right: -5px;
	top: 7px;
}

.arrow.left.large:after {
	left: 4px;
	top: -7px;
}

.arrow.right.large:after {
	right: 4px;
	top: -7px;
	position: absolute;
}

.symbol.arrow.up:after, .symbol.arrow.down:after {
	top: 14px;
	right: -8px;
	line-height: 100%;
}

.symbol.arrow.right.white:after {
	border-left-color: #ffffff;
}

.symbol.arrow.left.white:after {
	border-right-color: #ffffff;
}

.arrow.right.orange:after {
    border: 2px solid #8E3D00;
    border-left: 0;
    border-bottom: 0;
	content: " ";
    display: inline-block;
    width: 15px;
    height: 15px;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: rotate(45deg);
    margin-top: 35px;
}

.arrow.left.orange:after {
    border: 2px solid #8E3D00;
    border-left: 0;
    border-bottom: 0;
	content: " ";
    display: inline-block;
    width: 15px;
    height: 15px;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: 50px;
}

.arrow.right.green:after {
    border: 2px solid #166508;
    border-left: 0;
    border-bottom: 0;
	content: " ";
    display: inline-block;
    width: 15px;
    height: 15px;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: rotate(45deg);
    margin-bottom: 4px;
    margin-left: 2px;
}

.arrow.left.green:after {
    border: 2px solid #166508;
    border-left: 0;
    border-bottom: 0;
	content: " ";
    display: inline-block;
    width: 15px;
    height: 15px;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-bottom: 4px;
    margin-left: 2px;
}

.arrow.right.yellow:after {
    border: 2px solid #8D7700;
    border-left: 0;
    border-bottom: 0;
	content: " ";
    display: inline-block;
    width: 15px;
    height: 15px;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: rotate(45deg);
    margin-bottom: 4px;
    margin-left: 2px;
}

.arrow.left.yellow:after {
    border: 2px solid #8D7700;
    border-left: 0;
    border-bottom: 0;
	content: " ";
    display: inline-block;
    width: 15px;
    height: 15px;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-bottom: 4px;
    margin-left: 2px;
}

.symbol.arrow.up.black:after {
	border-bottom-color: #000000;
}

.symbol.arrow.down.black:after {
	border-top-color: #000000;
}

.symbol.arrow.right.orange:after {
	border-left-color: #ff7d00;
}

.symbol.arrow.left.orange:after {
	border-right-color: #ff7d00;
}

.symbol.arrow.up.orange:after {
	border-bottom-color: #ff7d00;
}

.symbol.arrow.down.orange:after {
	border-top-color: #ff7d00;
}

.symbol.arrow.right.green:after {
	border-left-color: #2eda0e;
}

.symbol.arrow.left.green:after {
	border-right-color: #2eda0e;
}

.symbol.arrow.up.green:after {
	border-bottom-color: #2eda0e;
}

.symbol.arrow.down.green:after {
	border-top-color: #2eda0e;
}

/* .symbol.arrow.circle {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	width: 21px;
	height: 21px;
	background: #5a5a5a;
	border-radius: 50%;
	transform: rotate(90deg);
} */

.symbol.arrow.circle:before {
    content: "";
    width: 25px;
    height: 25px;
    background-color: 5a5a5a;
    position: absolute;
    border-radius: 50%;
    top: 2px;
}

.symbol.arrow.circle.left:before {
    left: -17px;
}

.symbol.arrow.circle.right:before {
    left: -14px;
}

/* .symbol.arrow.circle:after {
	border-color: transparent;
	border-style: solid;
	border-width: 8px;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	border: 6px solid transparent;
	border-bottom: 6px solid #ffffff;
	transform: translateX(-50%) translateY(-85%);
}

.symbol.arrow.circle.left:after {
	border-right-color: #5a5a5a;
}

.symbol.arrow.circle.right:after {
	border-left-color: #5a5a5a;
}

.symbol.arrow.circle.left {
	transform: rotate(-90deg);
} */

.symbol.back:before {
	content: " ";
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 2px solid #5a5a5a;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: rotate(-135deg);
	margin-bottom: 4px;
	margin-left: 2px;
}

.symbol.back.cool:before {
	border: 2px solid #25AC0D;
    border-left: 0;
    border-bottom: 0;
}

.symbol.back.white:before {
	border: 2px solid #FFFFFF;
    border-left: 0;
    border-bottom: 0;
}

.top-sokuiku-button-wrap {
	margin-top: 0;
	width:100%;
  	max-width: 640px;
  	margin:	5px auto 24px;
  	display: grid;
    grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
  	gap: 12px;
}

.top-sokuiku-button {
	width: 100%;
}

.top-sokuiku-button button, .top-record-button-images-wrap button {
	padding: 0;
}

.top-sokuiku-button-images {
	width: 100%;
}

.top-record-button-images-wrap {
  	margin:	0 auto;
  	width:100%;
    flex-direction: column;
  	max-width: 660px;
	padding-top: 0;
    gap: 16px 0;
}


/*----------------------
岡田 追加
----------------------*/

.page.page--no-scroll {
	overflow: hidden;
}

/*----------------------
岡田 追加 コンポーネントクラス
----------------------*/

/*----------------------
ヘッダー コンポーネンツ
----------------------*/

/*----------------------
ヘッダー フロ-ティング
----------------------*/
.c-header--fixed {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index:20;
}

/*----------------------
ヘッダー の種類
----------------------*/
.c-header--sokuiku {
	height: 72px;
}

.c-header--breath {
	background: linear-gradient(70deg, #2596FF 29.61%, #5CC4FF 76.67%, #65E3FF 93.15%);
}

.c-header--walk {
    background: linear-gradient(70deg, #FF790B 20.5%, #FFAA29 56.83%, #FFCD4B 93.15%);
}

.c-header--toes {
    background: linear-gradient(70deg, #FFC700 29.61%, #FFDE20 55.2%, #FFF743 83.34%, #FCFF68 93.15%);
}

.c-header--fast {
    background: linear-gradient(70deg, #22CF3C 29.61%, #16FF39 78.62%, #A7FC73 93.15%);
}

.c-header--records, .c-header--group {
    height: 72px;
    background: #E9EFE9;
}

.c-header--settings {
    height: 72px;
    background: #fff;
}

.c-header__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}

.c-header__wrap--records, .c-header__wrap--group  {
    gap: 0 8px;
}

.c-header__wrap--settings {
    gap: 0 8px;
}

.c-header-title--sokuiku {
	font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.96px;
}

.c-header-title--records, .c-header-title--group {
	font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.96px;
    color: #0A3F03;
    margin: 0;
}

.c-header-title--settings {
	font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.96px;
    color: #0A3F03;
    margin: 0;
}

.c-header__title--breath {
	color: #001126;
}

.c-header__title--walk {
	color: #2B0E00;
}

.c-header__title--toes {
	color: #2B2400;
}

.c-header__title--fast {
	color: #021D01;
}

.c-header__img--breath {
    width: 27px;
    height: 23px;
    margin-top: 4px;
}

.c-header__img--walk {
    width: 30px;
    height: 30px;
    margin-top: 4px;
}

.c-header__img--toes {
    width: 47px;
    height: 47px;
}

.c-header__img--fast {
    width: 34px;
    height: 32px;
}

.c-header__img--records {
    width: 20px;
    height: 20px;
    margin-top: 4px;
}

.c-header__img--group {
    width: 32px;
    margin-top: 4px;
}

/*----------------------
ヘッダー 左上 戻るボタン
----------------------*/

.c-back-btn {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: none;
    border: none;
    padding: 0;
}

.c-back-btn__arrow {
    position: relative;
    display: block;
    width: 7.5px;
    height: 13.5px;
    transform: translateX(-25%);
}

.c-back-btn__arrow::before, .c-back-btn__arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.75px);
    left: 0;
    width: 10px;
    height: 1.5px;
    border-radius: 9999px;
    transform-origin: 0.75px 50%;
}

.c-back-btn--black .c-back-btn__arrow::before, .c-back-btn--black .c-back-btn__arrow::after {
    background-color: #333;
}

.c-back-btn__arrow::before {
    transform: rotate(45deg);
}

.c-back-btn__arrow::after {
    transform: rotate(-45deg);
}

.c-back-btn__text {
    display: block;
    font-size: 14px;
}

.c-back-btn--black .c-back-btn__text {
    color: #333;
}

/*----------------------
ヘッダー 右上 終了するボタン
----------------------*/
.c-end-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: none;
    border: none;
    padding: 0;
}

.c-end-btn__arrow {
    position: relative;
    display: block;
    width: 7.5px;
    height: 13.5px;
    transform: translateX(-25%);
}

.c-end-btn__arrow::before, .c-end-btn__arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.75px);
    right: 0;
    width: 10px;
    height: 1.5px;
    border-radius: 9999px;
    transform-origin: calc(100% - 0.75px) 50%;
}

.c-end-btn--black .c-end-btn__arrow::before, .c-end-btn--black .c-end-btn__arrow::after {
    background-color: #333;
}

.c-end-btn__arrow::before {
    transform: rotate(45deg);
}

.c-end-btn__arrow::after {
    transform: rotate(-45deg);
}

.c-end-btn__text {
    display: block;
    font-size: 14px;
}

.c-end-btn--black .c-end-btn__text {
    color: #333;
}

/*----------------------
説明をみるボタン
----------------------*/

.c-help-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    width: max-content;
    gap: 4px;
    border: none;
    padding: 0;
    background-color: inherit;
}
.c-help-btn__text {
    display: block;
    color: #25AC0D;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 2%;
}
.c-help-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: #F6FFEF;
    border: 1px solid #25AC0D;
    font-family: "din-2014", sans-serif;
    font-weight: bold;
    font-size: 36px;
    color: #25AC0D;
}
.c-help-btn--breath .c-help-btn__text {
    color: #0071C6;
}

.c-help-btn--walk .c-help-btn__text {
    color: #EA6900;
}

.c-help-btn--toes .c-help-btn__text {
    color: #AF9300;
}

.c-help-btn--breath .c-help-btn__icon {
    background-color: #E9EEFF;
    border: 1px solid #0071C6;
    color: #0071C6;
}

.c-help-btn--walk .c-help-btn__icon {
    background-color: #FFF6F3;
    border: 1px solid #EA6900;
    color: #EA6900;
}

.c-help-btn--toes .c-help-btn__icon {
    background-color: #FFFAE0;
    border: 1px solid #AF9300;
    color: #AF9300;
}

/*----------------------
ソクイク系 ボタン
----------------------*/
.c-sokuiku-btn {
    display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
    max-width: 358px;
    font-weight: 700;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

.c-sokuiku-btn--shadow {
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.30), 0px 2px 8px 1px rgba(0, 0, 0, 0.10);
}

.c-sokuiku-btn--sm {
	height: 53px;
    font-size: 18px;
    border-radius: 12px;
}

.c-sokuiku-btn--md {
	height: 63px;
    font-size: 21px;
    border-radius: 16px;
}

.c-sokuiku-btn--bg-breath-main {
    border: 1px solid #004E8C;
    background: #BCF9FF;
    color: #002E56;
}

.c-sokuiku-btn--bg-walk-main {
    background-color: #FFE9BF;
    border: 1px solid #C55700;
    color: #5A2400;
}

.c-sokuiku-btn--bg-toes-main {
    background-color: #FFFFBB;
    border: 1px solid #AF9300;
    color: #504300;
    position: relative;
}

.c-sokuiku-btn--bg-fast-main {
    background-color: #E2FFC1;
    border: 1px solid #228D0F;
    color: #0A3F03;
    position: relative;
}

.c-sokuiku-btn--bg-breath-primary {
    border: 1px solid #004E8C;
    background: #0EC3FF;
    color: #002E56;
}

.c-sokuiku-btn--bg-walk-primary {
    border: 1px solid #EA6900;
    background: #FF790B;
    color: #000000;
    gap: 0 8px;
}

.c-sokuiku-btn--bg-toes-primary {
    border: 1px solid #DFBB00;
    background: #FFD600;
    color: #2B2400;
    gap: 0 8px;
}

.c-sokuiku-btn--bg-fast-primary {
    border: 1px solid #25AC0D;
    background: #22CF3C;
    color: #021D01;
    gap: 0 8px;
}

.c-sokuiku-btn--sokuho-link {
    background-color: #22CF3C;
    border: 1px solid #25AC0D;
    color: #000;
}

.c-sokuiku-btn--breath-link {
    background-color: #0EC3FF;
    border: 1px solid #004E8C;
    color: #000;
    gap: 0 8px;
}

/*----------------------
ソクイク系  戻るボタン
----------------------*/
.c-content-back-btn {
    background-color: inherit;
}

.c-content-back-btn--breath {
    border: 1.5px solid #004E8C;
    color: #002E56;
}

.c-content-back-btn--walk {
    border: 1.5px solid #FF790B;
    color: #C55700;
}

.c-content-back-btn--toes {
    border: 1.5px solid #AF9300;
    color: #2B2400;
}

.c-content-back-btn--fast {
    border: 1.5px solid #25AC0D;
    color: #228D0F;
}

/*---------------------
ユーティリティクラス
----------------------*/
/*---------------------
マージン系
----------------------*/
.u-mb-8 {
	margin-bottom: 8px !important;
}

.u-mb-16 {
	margin-bottom: 16px !important;
}

.u-mb-24 {
	margin-bottom: 24px !important;
}

.u-mb-32 {
	margin-bottom: 32px !important;
}

.u-mb-40 {
	margin-bottom: 40px !important;
}

.u-mt-8 {
	margin-top: 8px !important;
}

.u-mt-16 {
	margin-top: 16px !important;
}

.u-mt-24 {
	margin-top: 24px !important;
}

.u-mt-32 {
	margin-top: 32px !important;
}

.u-mt-40 {
	margin-top: 40px !important;
}

/*---------------------
パディング系
----------------------*/
.u-pb-8 {
	padding-bottom: 8px !important;
}

.u-pb-16 {
	padding-bottom: 16px !important;
}

.u-pb-24 {
	padding-bottom: 24px !important;
}

.u-pb-32 {
	padding-bottom: 32px !important;
}

.u-pb-40 {
	padding-bottom: 40px !important;
}

.u-pb-48 {
	padding-bottom: 48px !important;
}

.u-pb-56 {
	padding-bottom: 56px !important;
}

.u-pt-8 {
	padding-top: 8px !important;
}

.u-pt-16 {
	padding-top: 16px !important;
}

.u-pt-24 {
	padding-top: 24px !important;
}

.u-pt-32 {
	padding-top: 32px !important;
}

.u-pt-40 {
	padding-top: 40px !important;
}

.u-pt-48 {
	padding-top: 48px !important;
}

.u-pt-56 {
	padding-top: 56px !important;
}

.u-pt-64 {
	padding-top: 64px !important;
}

.u-pt-72 {
	padding-top: 72px !important;
}