@charset "UTF-8";
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
*:focus {
  outline: none;
}

body {
  color: #333;
  background-color: #f4f4f4;
  font-size: 14px;
  font-family: "Meiryo UI", "メイリオ", Verdana, sans-serif;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  width: 860px;
  margin: auto !important;
}

header {
  font-size: 140%;
  font-weight: bold;
  text-align: center;
  margin: 1rem 0;
}
header > .title {
  margin: 1em 0;
}
header > .title::after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  border: none;
  margin-top: 1rem;
  background: linear-gradient(to right, rgba(0, 253, 245, 0) 0%, rgba(0, 253, 245, 0.6666666667) 10%, rgba(255, 50, 167, 0.6666666667) 90%, rgba(255, 50, 167, 0) 100%);
}

main .wrapper {
  width: 860px;
  margin: 1rem auto;
}
main .wrapper .links_buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 1em auto;
  gap: 0.5rem;
}
main .wrapper .links_buttons a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25%;
  padding: 3px 0;
  text-decoration: none;
  border-radius: 5px;
}
main .wrapper .links_buttons a > .icon {
  margin-right: 0.25rem;
}
main .wrapper .links_buttons a.btn_corail {
  border: 2px solid #fe4647;
  background-color: #fe4647;
  color: black;
  transition: 0.25s;
}
main .wrapper .links_buttons a.btn_corail:hover {
  background-color: rgb(253.8258064516, 37.7741935484, 38.9483870968);
}
main .wrapper .links_buttons a.btn_corail_transparent {
  background-color: transparent;
  border: 2px solid #fe4647;
  color: #fe4647;
  transition: 0.25s;
}
main .wrapper .links_buttons a.btn_corail_transparent:hover {
  background-color: #fe4647;
  color: #fff;
}
main .wrapper .links_buttons a.btn_cyan {
  border: 2px solid #51c8dd;
  background-color: #51c8dd;
  color: white;
  transition: 0.25s;
}
main .wrapper .links_buttons a.btn_cyan:hover {
  background-color: rgb(55.7365384615, 192.0144230769, 216.0634615385);
}
main .wrapper .links_buttons a.btn_cyan_transparent {
  background-color: transparent;
  border: 2px solid #51c8dd;
  color: #51c8dd;
  transition: 0.25s;
}
main .wrapper .links_buttons a.btn_cyan_transparent:hover {
  background-color: #51c8dd;
  color: #fff;
}
main .wrapper .links_buttons a.btn_dark {
  border: 2px solid #444444;
  background-color: #444444;
  color: black;
  transition: 0.25s;
}
main .wrapper .links_buttons a.btn_dark:hover {
  background-color: rgb(61.2, 61.2, 61.2);
}
main .wrapper .links_buttons a.btn_dark_transparent {
  background-color: transparent;
  border: 2px solid #444444;
  color: #444444;
  transition: 0.25s;
}
main .wrapper .links_buttons a.btn_dark_transparent:hover {
  background-color: #444444;
  color: #fff;
}
main .wrapper .links_buttons a.btn_gray {
  border: 2px solid #888888;
  background-color: #888888;
  color: white;
  transition: 0.25s;
}
main .wrapper .links_buttons a.btn_gray:hover {
  background-color: rgb(122.4, 122.4, 122.4);
}
main .wrapper .links_buttons a.btn_gray_transparent {
  background-color: transparent;
  border: 2px solid #888888;
  color: #888888;
  transition: 0.25s;
}
main .wrapper .links_buttons a.btn_gray_transparent:hover {
  background-color: #888888;
  color: #fff;
}
main .wrapper .container {
  background-color: #FFFFFF;
  width: 100%;
  padding: 1rem;
  border-radius: 0.25rem;
  margin: 1rem 0;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}
main .wrapper h3.content_title {
  position: relative;
  display: block;
  font-size: 120%;
  padding: 0.2em 0 0.1em 3ch;
  font-weight: bold;
  margin-bottom: 1rem;
  border-bottom: 3px double #D0D0D0;
}
main .wrapper h3.content_title::before {
  position: absolute;
  top: 0.3em;
  left: 3px;
  display: block;
  font-size: 110%;
  content: "";
  width: 0.5em;
  height: 0.5em;
  background: rgba(0, 253, 245, 0.5019607843);
  box-shadow: 0 0.6em 0 rgba(255, 50, 167, 0.5019607843), 0.6em 0 0 rgba(255, 50, 167, 0.5019607843), 0.6em 0.6em 0 rgba(0, 253, 245, 0.5019607843);
}

footer {
  display: block;
  font-size: 0.75rem;
  word-break: keep-all;
  text-align: center;
}

.button {
  text-align: center;
  padding: 0.25rem 1rem;
  margin: auto;
  font-weight: bold;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border-radius: 15px;
  background: transparent;
  cursor: pointer;
  box-shadow: 1px 1px 3px #aaa;
  transition: 0.25s;
  -webkit-transition: 0.25s;
  text-decoration: none;
}
.button.disabled {
  pointer-events: none;
  opacity: 0.6;
}
.button.btn_corail {
  background-color: #fe4647;
  border: 1px solid #fe4647;
  color: black;
}
.button.btn_corail:hover {
  background-color: rgb(254.2, 107, 107.8);
}
.button.btn_corail_transparent {
  background-color: transparent;
  border: 2px solid #fe4647;
  color: #fe4647;
}
.button.btn_corail_transparent:hover {
  background-color: #fe4647;
  color: white;
}
.button.btn_cyan {
  background-color: #51c8dd;
  border: 1px solid #51c8dd;
  color: white;
}
.button.btn_cyan:hover {
  background-color: rgb(115.8, 211, 227.8);
}
.button.btn_cyan_transparent {
  background-color: transparent;
  border: 2px solid #51c8dd;
  color: #51c8dd;
}
.button.btn_cyan_transparent:hover {
  background-color: #51c8dd;
  color: black;
}
.button.btn_dark {
  background-color: #444444;
  border: 1px solid #444444;
  color: black;
}
.button.btn_dark:hover {
  background-color: rgb(105.4, 105.4, 105.4);
}
.button.btn_dark_transparent {
  background-color: transparent;
  border: 2px solid #444444;
  color: #444444;
}
.button.btn_dark_transparent:hover {
  background-color: #444444;
  color: white;
}
.button.btn_gray {
  background-color: #888888;
  border: 1px solid #888888;
  color: white;
}
.button.btn_gray:hover {
  background-color: rgb(159.8, 159.8, 159.8);
}
.button.btn_gray_transparent {
  background-color: transparent;
  border: 2px solid #888888;
  color: #888888;
}
.button.btn_gray_transparent:hover {
  background-color: #888888;
  color: black;
}

div.error_message {
  border: solid 2px #ff3f3f;
  border-top: none;
  padding: 0.2rem 0.5rem;
  position: relative;
  margin: 2.25rem 0 1rem;
  width: 100%;
}
div.error_message::before {
  content: "エラー";
  display: flex;
  align-items: center;
  background-color: #ff3f3f;
  color: #ffffff;
  font-weight: bold;
  position: absolute;
  bottom: 100%;
  left: -2px;
  width: calc(100% + 4px);
  height: 1.25rem;
  padding-left: 0.5rem;
}
div.error_message > li {
  list-style: none;
  padding: 0 0.25rem;
}
div.error_message > li:not(:first-child) {
  border-top: 1px solid #ccc;
}

div.response_message {
  border: solid 2px #5ef474;
  border-top: none;
  padding: 0.2rem 0.5rem;
  position: relative;
  margin: 2.25rem 0 1rem;
  width: 100%;
}
div.response_message::before {
  content: "メッセージ";
  display: flex;
  align-items: center;
  background-color: #5ef474;
  color: #fff;
  font-weight: bold;
  position: absolute;
  bottom: 100%;
  left: -2px;
  width: calc(100% + 4px);
  height: 1.25rem;
  padding-left: 0.5rem;
}
div.response_message > li {
  list-style: none;
  padding: 0 0.25rem;
}
div.response_message > li:not(:first-child) {
  border-top: 1px solid #ccc;
}

div.section_box {
  border: 2px solid #51c8dd;
  border-radius: 0 0 5px 5px;
  padding: 1rem;
  position: relative;
  margin: 2.75rem 0 1rem;
  width: 100%;
}
div.section_box > h4.section_title {
  display: flex;
  align-items: center;
  background-color: rgb(168, 227.5, 238);
  border: 2px solid #51c8dd;
  color: #333;
  font-weight: bold;
  position: absolute;
  bottom: 100%;
  left: -2px;
  width: calc(100% + 4px);
  padding: 0.25rem 0.5rem;
  border-radius: 5px 5px 0 0;
  height: 1.75rem;
}

input[type=checkbox].btn_toggle {
  --size: 24px;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  outline: none;
  display: inline-block;
  width: calc(var(--size) * 1.62);
  height: var(--size);
  border-radius: calc(var(--size) * 0.5);
  vertical-align: middle;
  background-color: #666;
  transition: 0.1s;
}
input[type=checkbox].btn_toggle::before {
  content: "";
  display: block;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  transform: scale(0.85);
  background-color: #fff;
  transition: inherit;
}
input[type=checkbox]:checked.btn_toggle {
  background-color: #3d5;
}
input[type=checkbox]:checked.btn_toggle::before {
  transform: translateX(calc(var(--size) * 0.62)) scale(0.85);
}

.lang_switch {
  font-weight: bold;
  font-size: 1rem;
  padding: 0.5rem 0;
}
.lang_switch > b {
  color: #777;
}

.pagetop {
  position: fixed;
  bottom: 40px;
  right: -200px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 10px 0 0 10px;
  background-color: rgba(0, 0, 0, 0.6666666667);
  letter-spacing: 0.1rem;
  color: #fff;
  font-family: "kurobara-cinderella";
  font-weight: bolder;
  text-decoration: none;
  transition: right 0.5s ease-in-out;
  width: 120px;
}
.pagetop_show {
  right: 0;
}

.accordion_toggle {
  display: none;
}
.accordion_label {
  display: flex;
  align-items: center;
  position: relative;
  padding: 1rem;
  color: #333;
  background-color: #d3f2f8;
  border: 3px solid #a8e4ee;
  border-radius: 5px;
}
.accordion_label::before {
  font-family: "FontAwesome";
  content: "\f138";
  width: 24px;
  font-size: 24px;
  position: absolute;
  right: 20px;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}
.accordion_body {
  height: 0;
  margin-bottom: 10px;
  padding: 0 20px;
  overflow: hidden;
}
.accordion_body, .accordion_label {
  backface-visibility: hidden;
  transform: translateZ(0);
}
.accordion_toggle:checked + .accordion_label + .accordion_body {
  height: auto;
  padding: 20px;
}
.accordion_toggle:checked + .accordion_label::before {
  transform: rotate(-90deg);
}

.content_mypage .mypage_profile {
  list-style: none;
  width: 90%;
  margin: auto;
  padding: 0;
}
.content_mypage .mypage_profile::after {
  content: "";
  clear: both;
  display: block;
}
.content_mypage .mypage_profile_col {
  display: block;
  float: left;
  width: 50%;
  margin-bottom: 1rem;
}
.content_mypage .mypage_profile_col::after {
  content: "";
  width: 95%;
  display: block;
  height: 1px;
  background-color: #333;
  margin: auto;
}
.content_mypage .mypage_profile_col_label {
  display: inline-block;
  width: 10em;
  padding-left: 1rem;
}
.content_mypage .mypage_profile_col_label::before {
  font-family: "FontAwesome";
  content: "\f138";
  margin-right: 0.25rem;
  color: #444444;
}
.content_mypage .mypage_profile_col_body {
  display: inline-block;
  font-weight: bold;
  font-size: 1.125rem;
}
.content_mypage .mypage_rival {
  width: 90%;
  margin: auto;
}
.content_mypage .mypage_rival_list {
  list-style: none;
  margin-bottom: 1.5rem;
  padding: 0;
}
.content_mypage .mypage_rival_list_col {
  display: flex;
  position: relative;
  padding: 0.5rem 0;
}
.content_mypage .mypage_rival_list_col > * {
  flex: 1;
  padding-left: 0.25rem;
}
.content_mypage .mypage_rival_list_col:not(:first-child)::after {
  content: "";
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 1px;
  background-color: #333;
}
.content_mypage .mypage_rival_list_col:first-child {
  font-weight: bold;
  background-color: #444444;
  color: #fff;
}
.content_mypage .mypage_rival_list_col:first-child > *::before {
  font-family: "FontAwesome";
  content: "\f138";
  margin-right: 0.25rem;
  color: #888888;
}
.content_mypage .mypage_rival_button {
  margin: 1rem auto;
  text-align: center;
}
.content_mypage .mypage_score {
  width: 90%;
  margin: auto;
}
.content_mypage .mypage_score_toggle_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
}
.content_mypage .mypage_score_toggle_btn > button {
  margin: 0 0.5rem;
}
.content_mypage .mypage_score > p {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
.content_mypage .mypage_score_list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.content_mypage .mypage_score_list_col {
  display: flex;
  padding: 0.25rem 0;
  border-bottom: 1px solid #333;
}
.content_mypage .mypage_score_list_col:first-child {
  border-top: 1px solid #333;
}
.content_mypage .mypage_score_list_col .music_info {
  padding: 0.25rem 0.5rem;
  flex: 1;
  overflow: hidden;
}
.content_mypage .mypage_score_list_col .music_info_badge {
  margin-bottom: 0.25rem;
}
.content_mypage .mypage_score_list_col .music_info_badge > * {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.375rem;
}
.content_mypage .mypage_score_list_col .music_info_badge_level {
  background-color: #333;
  color: #fff;
}
.content_mypage .mypage_score_list_col .music_info_badge_difficult[data-value=nov] {
  background-color: #5a49fb;
  color: white;
}
.content_mypage .mypage_score_list_col .music_info_badge_difficult[data-value=adv] {
  background-color: #fbb649;
  color: black;
}
.content_mypage .mypage_score_list_col .music_info_badge_difficult[data-value=exh] {
  background-color: #fb494c;
  color: white;
}
.content_mypage .mypage_score_list_col .music_info_badge_difficult[data-value=mxm] {
  background-color: #acacac;
  color: black;
}
.content_mypage .mypage_score_list_col .music_info_badge_difficult[data-value=inf] {
  background-color: #ee65e5;
  color: black;
}
.content_mypage .mypage_score_list_col .music_info_badge_difficult[data-value=grv] {
  background-color: #fb8f49;
  color: black;
}
.content_mypage .mypage_score_list_col .music_info_badge_difficult[data-value=hvn] {
  background-color: #49c9fb;
  color: black;
}
.content_mypage .mypage_score_list_col .music_info_badge_difficult[data-value=vvd] {
  background-color: #ff59cd;
  color: black;
}
.content_mypage .mypage_score_list_col .music_info_badge_difficult[data-value=xcd] {
  background-color: #187fff;
  color: white;
}
.content_mypage .mypage_score_list_col .music_info_badge_difficult[data-value=ult] {
  background-color: #ffe34c;
  color: black;
}
.content_mypage .mypage_score_list_col .music_info_title {
  color: #000;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5rem;
  position: relative;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content_mypage .mypage_score_list_col .music_info_title_level {
  font-size: 0.8rem;
  padding-left: 0.25rem;
}
.content_mypage .mypage_score_list_col .music_info_artist {
  color: #a3a2a2;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content_mypage .mypage_score_list_col .score_info {
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: center;
  width: 9rem;
  padding: 0.25rem 0.5rem;
}
.content_mypage .mypage_score_list_col .score_info_badge {
  margin: 0.25rem 0;
}
.content_mypage .mypage_score_list_col .score_info_badge_clear_type {
  display: inline-block;
  padding: 0.5em 0.75em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.375rem;
}
.content_mypage .mypage_score_list_col .score_info_badge_clear_type[data-value=unachieved] {
  background-color: #cccccc;
  color: black;
}
.content_mypage .mypage_score_list_col .score_info_badge_clear_type[data-value=played] {
  background-color: #239e5b;
  color: white;
}
.content_mypage .mypage_score_list_col .score_info_badge_clear_type[data-value=comp] {
  background-color: #46ee9a;
  color: black;
}
.content_mypage .mypage_score_list_col .score_info_badge_clear_type[data-value=ex_comp] {
  background-color: #e09010;
  color: black;
}
.content_mypage .mypage_score_list_col .score_info_badge_clear_type[data-value=max_comp] {
  background-color: #babfcb;
  color: black;
}
.content_mypage .mypage_score_list_col .score_info_badge_clear_type[data-value=uc] {
  background-color: #f93ba5;
  color: white;
}
.content_mypage .mypage_score_list_col .score_info_badge_clear_type[data-value=puc] {
  background-color: #fdfd39;
  color: black;
}
.content_mypage .mypage_score_list_col .score_info_diff_value {
  color: red;
  font-size: 0.9rem;
  line-height: 1;
}
.content_mypage .mypage_score_list_col .score_info_diff_value::before {
  content: "+";
  margin-right: 0.125rem;
}
.content_mypage .mypage_score_list_col .score_info_score_value {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
}
.content_mypage .mypage_score_list_col .score_info_score_value p.ex_diff {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: normal;
}
.content_mypage .mypage_score_button {
  margin: 1rem auto;
  text-align: center;
}
.content_mypage .mypage_setting {
  list-style: none;
  width: 90%;
  margin: auto;
  padding: 0;
}
.content_mypage .mypage_setting::after {
  content: "";
  clear: both;
  display: block;
}
.content_mypage .mypage_setting_col {
  display: block;
  float: left;
  width: 50%;
  margin-bottom: 1rem;
  overflow: hidden;
}
.content_mypage .mypage_setting_col::after {
  content: "";
  width: 95%;
  display: block;
  height: 1px;
  background-color: #333;
  margin: auto;
}
.content_mypage .mypage_setting_col_label {
  display: inline-block;
  width: 12em;
  padding-left: 1rem;
}
.content_mypage .mypage_setting_col_label::before {
  font-family: "FontAwesome";
  content: "\f138";
  margin-right: 0.25rem;
  color: #444444;
}
.content_mypage .mypage_setting_col_body {
  display: inline-block;
  font-weight: bold;
  font-size: 1.125rem;
}
.content_mypage .mypage_setting_button {
  margin: 1rem auto;
  text-align: center;
}

.content_mypage_rival .mypage_rival_regist {
  max-width: 420px;
  margin: auto;
}
.content_mypage_rival .mypage_rival_regist p {
  margin-bottom: 0.5rem;
}
.content_mypage_rival .mypage_rival_regist .input:first-of-type {
  margin-bottom: 1rem;
}
.content_mypage_rival .mypage_rival_regist .input.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content_mypage_rival .mypage_rival_regist input {
  height: 28px;
  line-height: 28px;
  text-align: left;
  padding-left: 10px;
  border-radius: 15px;
  background-color: #fcfcfc;
  width: 100%;
  border: 1px solid #ccc;
}
.content_mypage_rival .mypage_rival_list {
  width: 90%;
  margin: auto;
  list-style: none;
  padding: 0;
}
.content_mypage_rival .mypage_rival_list_col {
  display: flex;
  position: relative;
  padding: 0.5rem 0;
}
.content_mypage_rival .mypage_rival_list_col > * {
  flex: 1;
  padding-left: 0.25rem;
}
.content_mypage_rival .mypage_rival_list_col:not(:first-child)::after {
  content: "";
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 1px;
  background-color: #333;
}
.content_mypage_rival .mypage_rival_list_col:first-child {
  font-weight: bold;
  background-color: #444444;
  color: #fff;
}
.content_mypage_rival .mypage_rival_list_col:first-child > *::before {
  font-family: "FontAwesome";
  content: "\f138";
  margin-right: 0.25rem;
  color: #888888;
}
.content_mypage_rival .mypage_rival_list_button {
  margin: 1rem auto;
  text-align: center;
}

.content_mypage_setting .mypage_setting_token {
  text-align: center;
}
.content_mypage_setting .mypage_setting_token > p {
  margin-bottom: 1rem;
}
.content_mypage_setting .mypage_setting_token > p > strong {
  color: red;
}
.content_mypage_setting .mypage_setting_token .token_body {
  width: 90%;
  margin: auto;
}
.content_mypage_setting .mypage_setting_token .token_body > input {
  height: 28px;
  line-height: 1;
  text-align: left;
  padding-left: 10px;
  border-radius: 15px;
  background-color: #fcfcfc;
  border: 1px solid #ccc;
  width: 24rem;
}
.content_mypage_setting .mypage_setting_playerid {
  text-align: center;
}
.content_mypage_setting .mypage_setting_playerid > p {
  margin-bottom: 1rem;
}
.content_mypage_setting .mypage_setting_playerid .playerid_body {
  display: inline-flex;
  align-items: center;
  margin: auto;
}
.content_mypage_setting .mypage_setting_playerid .playerid_body .playerid_value {
  margin-left: 1rem;
  font-weight: bold;
  font-size: 1.25rem;
  padding: 0.25rem 1rem;
  border-radius: 15px;
  background-color: #fcfcfc;
  border: 1px solid #ccc;
}
.content_mypage_setting .mypage_setting_list {
  list-style: none;
  padding: 0;
}
.content_mypage_setting .mypage_setting_list_col {
  width: 90%;
  padding: 0.5rem 1rem;
  margin: auto;
  border-bottom: 1px solid #333;
}
.content_mypage_setting .mypage_setting_list_col:first-child {
  border-top: 1px solid #333;
}
.content_mypage_setting .mypage_setting_list_col_body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1;
}
.content_mypage_setting .mypage_setting_list_col_body > label {
  font-weight: 700;
}
.content_mypage_setting .mypage_setting_list_col_description {
  color: #a3a2a2;
}
.content_mypage_setting .center {
  text-align: center;
}

.content_login {
  max-width: 420px;
  margin: auto;
}
.content_login .input {
  margin: 1rem 0;
}
.content_login .input.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content_login input[type=text],
.content_login input[type=password] {
  height: 28px;
  line-height: 28px;
  text-align: left;
  padding-left: 10px;
  border-radius: 15px;
  background-color: #fcfcfc;
  width: 100%;
  border: 1px solid #ccc;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.content {
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.collapsible-section {
  margin-top: 30px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.collapsible-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 5px 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.3s ease;
}

.collapsible-header:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.collapsible-arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.collapsible-content {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  background-color: #f9f9f9;
}

.collapsible-content.expanded {
  max-height: 5000px;
  padding: 20px;
}

.collapsible-content p {
  margin-bottom: 15px;
  line-height: 1.8;
}

span#command {
  background-color: #ddd;
}

h1 {
  color: #333;
  margin-bottom: 20px;
  font-size: 2.2em;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.intro {
  font-size: 1.1em;
  line-height: 1.8;
  color: #555;
  margin-bottom: 20px;
}

.hidden {
  display: none;
}

.content_about img {
  margin: 0.5rem 0.25rem;
  border: 1px solid #777;
}