/* fan-old/app/assets/system.css.scss から移行 */

/*******************************************************************************
 Copyright (C) 2015 by Future Architect, Inc. Japan
 Use is subject to license terms.

 system.css システム共通CSS（PC・スマートフォン問わず全てで使用する定義）
*******************************************************************************/

/*******************************************************************************
 Common Styles
*******************************************************************************/

/* 検索パネル ボタンエリア */
.action-buttons {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 0.5rem;
}

.action-buttons .btn {
  min-width: 10em;
}

.text-sm {
  font-size: 0.875em;
}

.spinner {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #000;
  /* background: image-url(/spinner.gif) 50% 50% no-repeat #000000; */
}

.preloader {
  background: image-url(/loader.gif) center center no-repeat;
}

/* .msg-notice {
  color: green;
  font-size: 14px;
  font-weight: bold;
  margin: 10px 5px;
} */

.alert {
  word-break: break-word;
}

.msg-alert {
  color: red;
  font-size: 14px;
  font-weight: bold;
  margin-left: 5px;
}
.msg-alert-no-margin {
  color: red;
  font-size: 14px;
  font-weight: bold;
}
.msg-alert-slim {
  color: red;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 15px;
}
.msg-confirm-text {
  font-size: 18px;
  font-weight: bold;
}
.alert > ul {
  padding-left: 15px;
  text-align: left;
}

div.total-count, div.last-updated-on {
  float: right;
  margin-top: -12px;
  margin-left: 5px;
}

div.button-area {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-right: 10px;
}
div.button-area button.clear {
  float: none;
}
@media (max-width: 767px) {
  div.button-area {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
  div.button-area input[type="submit"], div.button-area button, div.button-area a.btn {
    width: 45%;
    margin-right: 5px;
  }
}

div.pagination {
  width: 100%;
  margin: 0px;
  text-align: center;
}

div.photo_container {
  display:inline-block;
  width:auto;
  background-color:#000;
  margin-bottom:10px;
}

img.photo {
  width: 100%;
  margin-bottom: 5px;
}

div.overlay-header {
  background-color: #000;
  opacity: 0.7;
  color: #FFF;
  z-index: 2;
  text-align: center;
}

span.label-space {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

span.label-left-space {
  margin-left: 0.5em;
}

span.label-right-space {
  margin-right: 0.5em;
}

p.important,
span.important {
  color: #fd0002;
}

div.description span {
  color: #000;
}
@media (max-width: 767px) {
  div.description {
    display: none;
  }
}

.image-button-link {
  padding-right: 30px;
}

.image-button {
  float: left;
  margin-right: 3px;
}

.center {
  text-align: center;
}

.iframe-container {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.iframe {
  border: none;
  display: block;
}

div.badge_or div.badge {
  font-size: 14px !important;
}
@media (max-width: 767px) {
  div.badge_or {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .mobile_center {
    text-align: center;
  }
}

.error-message {
  color: #FFF;
}
.error-description {
  margin-top: 50px;
  margin-bottom: 50px;
}
.backtrace {
  margin-top: 50px;
  color: #FFF;
}
.modal-container {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
/*******************************************************************************
 Tables
*******************************************************************************/
td.link {
  text-align: center;
  vertical-align: middle;
}

td.center {
  text-align: center;
}

td.right {
  text-align: right;
}

table.thin th, table.thin td {
  padding: 3px;
}

/*******************************************************************************
 Forms
*******************************************************************************/
label.margin {
  margin-right: 5px;
}

.btn-group label.margin {
  padding-left: 20px;
  padding-right: 20px;
  margin-right: 0px;
}
@media (max-width: 767px) {
  .btn-group label.margin {
    padding-left: 5px;
    padding-right: 5px;
  }
}

input.save, input.search, button.clear, button.back, button.cancel, a.destroy, .btn-md {
  width: auto;
}
@media (min-width: 768px) {
  input.save, input.search, button.clear, button.back, button.cancel, a.destroy, .btn-md {
    width: 140px;
  }
}

input.btn-double-width {
  width: auto;
}

@media (min-width: 768px) {
  input.btn-double-width {
    width: 285px;
  }
}
span.required {
  float: right;
}

div.sort-order-link {
  margin-bottom: 4px;
}
.sort-order-link > .btn > .glyphicon-arrow-down {
  margin-left: 1px;
  margin-right: -1px;
}
.sort-order-cell {
  text-align: center;
  vertical-align: middle;
}

div.confirm-text {
  word-break: break-all;
}

.clear-both {
  clear: both;
}

@media (max-width: 767px) {
  .picker__select--year {
    font-size: 12pt;
    width: 32%;
  }
  .picker__select--month {
    font-size: 12pt;
    width: 30%;
  }
}

@media (max-width: 767px) {
  div.radio-field div.btn-group {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
  }
  div.radio-field div.btn-group > .btn {
    float: none;
    display: table-cell;
    width: 1%;
  }
}

div.backtrace textarea {
  color: #000;
}

.erasable {
  width: 100%;
}
.erasable > .clear-button {
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  height: 16px;
  margin: auto;
  font-size: 16px;
  cursor: pointer;
  color: #ccc;
}
.calendar-clear-button {
  position: absolute;
  right: 36px;
  top: 0;
  bottom: 0;
  height: 16px;
  margin: auto;
  font-size: 16px;
  cursor: pointer;
  color: #ccc;
  z-index: 900;
}
.erasable > .search-icon {
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  height: 14px;
  margin: auto;
  font-size: 14px;
  color: #ccc;
}
.erasable > .search-icon + .search-text-field {
  padding-left: 30px;
  width: inherit;
}

.btn > .button-icon {
  max-height: 32px;
  max-width:  32px;
}
.btn-inner-icon {
  padding: 2px;
}
.btn-inner-icon-lg {
  padding: 4px;
}
.btn-inner-icon-sm {
  padding: 2px;
}
.btn-inner-icon > img {
  float: left;
  display: inline-block;
  max-height:  44px;
  max-width:   44px;
  margin-left: 10px;
}
.btn-inner-icon-lg > img {
  float: left;
  display: inline-block;
  max-height:  68px;
  max-width:   68px;
  margin-left: 10px;
}
.btn-inner-icon-sm > img {
  float: left;
  display: inline-block;
  max-height:  40px;
  max-width:   40px;
  margin-left: 5px;
}
.panel-heading .btn {
  padding: 4px 12px;
}
.btn-full-width {
  width: 100%;
}
.btn-half-width {
  width: 48%;
}
.btn-auto-width {
  width: auto;
}
.btn-inner-icon > span.image-link-button-text {
  margin-top: 7px;
  font-size: 16pt;
  display: block;
}
.btn-inner-icon-lg > span.image-link-button-text {
  margin-top: 17px;
  font-size: 20pt;
  display: block;
}
.btn-inner-icon-sm > span.image-link-button-text {
  margin-top: 7px;
  font-size: 12pt;
  display: block;
}
div.disabled, a.disabled {
  opacity: 0.4;
}
div.disabled a, a.disabled {
  pointer-events: none;
}
.full-width {
  width: 100% !important;
}
.auto-width {
  width: auto !important;
}
.btn-menu:after {
  content: ">";
  float: right;
}

.disabled {
  pointer-events: none !important;
  opacity: 0.4;
}
.disabled * {
  pointer-events: none !important;
}

/*******************************************************************************
 Override bootstrap Styles
*******************************************************************************/
span.prefix {
  padding: 0px 8px 0px 0px;
  display: table-cell;
  vertical-align: middle;
}
.lg > .suffix {
  font-size: 18px;
}

.input-group-btn {
  width: auto;
}

.children-options {
  display: none;
}

.hour-minute {
  display: table-cell;
}
.hour-minute.input-sm {
  min-width: 60px;
}
.hour-minute.input-md {
  min-width: 72px;
}
.hour-minute.input-lg {
  min-width: 80px;
}

.hourminute-from-to > .from-to-sep,
.hour-and-minute-from-to > .from-to-sep {
  padding: 0px 8px;
  display: table-cell;
  vertical-align: middle;
}

.hourminute-select,
.hour-and-minute-select,
.month-day-select,
.year-month-day-select,
.hourminute-from-to,
.hour-and-minute-from-to,
.number-select {
  display: table;
}
.month-day-select > .ymd,
.year-month-day-select > .ymd {
  display: table-cell;
}
.hourminute-select > .suffix,
.hour-and-minute-select > .suffix,
.hourminute-from-to > .suffix,
.hour-and-minute-from-to > .suffix,
.month-day-select > .suffix,
.year-month-day-select > .suffix,
.number-select > .suffix {
  padding: 0px 4px;
  display: table-cell;
  vertical-align: middle;
}

.year-month-day-select.add-on {
  display: block;
}
.year-month-day-select.add-on > .ymd {
  margin-right: 10px;
  float: left;
  display: table;
}
.year-month-day-select.add-on > .year {
  width: 110px;
}
.year-month-day-select.add-on > .month,
.year-month-day-select.add-on > .day {
  width: 100px;
}

.memorial-days > hr {
  margin-top: 6px;
  margin-bottom: 6px;
}
.memorial-day-fields > input {
  max-width: 374px;
}
.memorial-day-fields > .month-day-select {
  margin-top: 8px;
}

.calendar-fields > .input-group-btn > .btn-md {
  min-width: 0px;
  max-width: 38px;
}
.calendar-fields > .form-control[readonly] {
  cursor: pointer;
}

.with-prev-next > .input-group-btn > .btn-calendar {
  border-radius: 0px;
}

.inline-row {
  clear: both;
  padding-top: 5px;
}

.tel-fields.xs,
.tel-fields.sm,
.zip-fields.xs,
.zip-fields.sm {
  max-width: 292px;
  min-width: 260px;
}

.card-fields.xs,
.card-fields.sm {
  max-width: 300px;
  min-width: 292px;
}
.card-fields.md,
.tel-fields.md,
.zip-fields.md {
  max-width: 312px;
  min-width: 312px;
}
.card-fields.lg,
.tel-fields.lg,
.zip-fields.lg {
  max-width: 424px;
  min-width: 424px;
}
.zip-fields.sm > .input-group-btn > .btn {
  height: 30px;
}

.datetime-from-to {
  display: table;
}
.datetime-from-to > .from-field,
.datetime-from-to > .to-field,
.datetime-from-to > .from-to-sep {
  display:table-cell;
}
.datetime-from-to > .from-to-sep {
  vertical-align: middle;
  float: none;
  padding: 0px 8px;
}

.break-field .datetime-from-to > .from-field,
.break-field .datetime-from-to > .to-field,
.break-field .datetime-from-to > .from-to-sep {
  display:inline-block;
}

.device-links {
  margin-top: 20px;
}
.device-links a.active {
  color: silver;
}
.device-links a.active:hover {
  color: white;
}

.tabs-left > .nav-tabs {
  height: 448px;
  width: 120px;
  overflow: auto;
  overflow-x: hidden;
  border-bottom: 0;
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}
.tab-content > .active,
.pill-content > .active {
  display: block;
}
.tabs-left > .nav-tabs > li {
  float: none;
}
.tabs-left > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}
.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}
.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}
.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eee #ddd #eee #eee;
}
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  border-right-color: #fff;
}

.panel-non-upper {
  border-top: none;
  border-radius: 0 0 4px 4px;
}
.panel-non-upper > .panel-heading {
  border-top-right-radius: 0;
  border-top-left-radius:  0;
}
#confirmation_dialog {
  margin-left: auto;
  margin-right: auto;
  top: 80px;
}
#confirmation_dialog .modal-dialog {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
#confirmation_dialog .modal-body {
  color: #000;
}
#confirmation_dialog .modal-header {
  padding: 7px 15px;
}
#confirmation_dialog .btn {
  min-width: 9em;
}
#networkerror .modal-body {
  color: #000;
}
.separate-field + .separate-field,
.label-suggest-search-field + .label-suggest-search-field {
  margin-top: 3px;
}

/*******************************************************************************
 Modal/Popup
*******************************************************************************/
div#modal_content {
  margin-top: 10px;
}
div#modal_content h1 {
  display: none;
}
div#modal_content input.save,
div#modal_content input.search,
div#modal_content button.clear,
div#modal_content button.cancel {
  height: 24px;
  min-width: 100px;
  padding: 0;
}

div#modal_content .table td, div#modal_content .table th {
  padding: 3px;
}

div.modal-iframe {
  min-height: 600px;
  padding: 0px;
  -webkit-overflow-scrolling: touch;
}

div#modal_content .panel {
  margin-bottom: 10px;
}

div#modal_content .panel-heading {
  padding: 5px 15px;
}

div#modal_content ul.pagination {
  margin: 3px 0px;
}
/* 会員種別　背景色　文字色 */
/* 共通 */
.member_status_style{
  padding: 2px 4px;
  min-width: 87px;
  font-size: 10px;
  white-space: nowrap;
}
/* プラチナ会員 */
.member_platinum{
  background: #D5E4F0;
  color: #424242;
}
/* ゴールド会員 */
.member_gold{
  background: #D0B86A;
  color: #00235F;
}
/* レギュラー会員 */
.member_regular{
  background: #0085CE;
  color: white;
}
/* キッズ会員 */
.member_kids{
  background: #BF0122;
  color: white;
}
/* 燕征会員 */
.member_ensei{
  background: #48ABE2;
  color: white;
}
/* ライト会員 */
.member_light{
  background: #00A051;
  color: white;
}
/* スワローズID会員 */
.member_swallows_id{
  background: #F0F3F5;
  color: #424242;
}

/* ファンクラブ会員入会コース選択 コース色 */
input[type="checkbox"]:checked ~ .member_platinum_entry,
input[type="radio"]:checked ~ .member_platinum_entry {
  background: #0085CE;
  color: white!important;
}

input[type="checkbox"]:checked ~ .member_gold_entry,
input[type="radio"]:checked ~ .member_gold_entry {
  background: #0085CE;
  color: white!important;
}

input[type="checkbox"]:checked ~ .member_regular_entry,
input[type="radio"]:checked ~ .member_regular_entry {
  background: #0085CE;
  color: white!important;
}

input[type="checkbox"]:checked ~ .member_kids_entry,
input[type="radio"]:checked ~ .member_kids_entry {
  background: #0085CE;
  color: white!important;
}

input[type="checkbox"]:checked ~ .member_ensei_entry,
input[type="radio"]:checked ~ .member_ensei_entry {
  background: #0085CE;
  color: white!important;
}

input[type="checkbox"]:checked ~ .member_light_entry,
input[type="radio"]:checked ~ .member_light_entry {
  background: #0085CE;
  color: white!important;
}

.cant_entry {
  background: #666 !important;
  color: #000 !important;
}

/* ステップ表示 */
.steps{
  display: flex;
  align-items: center;
  gap: 16px;
}
.step{
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
  border: 3px solid;
  border-radius: 5px;
  border-color: #BCBCBC;
  overflow: hidden;
}
.step_text{
  padding-left: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #BCBCBC;
}
.step_number{
  display: flex;
  align-items: center;
  position: relative;
  padding: 5px;
  background: #BCBCBC;
}.step_number .step_number_text{
  position: relative;
  font-weight: bold;
  color: white;
  z-index: 1;
}.step_number .rhomboid{
  display: block;
  z-index: 0;
}.step_number .rhomboid::after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: -12px;
  width: 24px;
  height: 24px;
  background: #BCBCBC;
  border-radius: 5px;
  transform: translateY(-50%) rotate(45deg) skew(20deg,20deg);
}
.step__active{
  border-color: #0081CC;
}.step__active .step_number{
  background: #0081CC;
}.step__active .step_text{
  color: #424242;
}.step__active .step_number .rhomboid::after{
  background: #0081CC;
}
@media print, screen and (max-width: 1023px) {
  .steps{
    gap: 10px;
  }
  .step{
    flex-direction: column;
  }
  .step_text{
    padding: 15px 5px 5px 5px;
    font-size: 12px;
  }
  .step_number_text{
    font-size: 14px;
  }
  .step_number{
    padding-bottom: 0px;
    flex-direction: column;
    width: 100%;
  }
  .step_number .rhomboid::after{
    top: -10px;
    left: 50%;
    transform: translateY(0) translateX(-50%) rotate(-45deg) skew(30deg,30deg);
    width: 64px;
    height: 64px;
  }
}
/* フォーム */
/* ラジオボタン */
input{
  color: #424242!important;
}
input[type=radio].radiobtn{
  border-color: #00235F!important;
}
input[type=radio].radiobtn:checked:after{
  background-color: #00235F;
}
.radio_label{
  font-size: 16px;
  color: #424242;
}.radio_label input[type=radio]{
  border-color: #00235F !important;
}.radio_label input[type=radio]:checked:after{
  background-color: #00235F !important;
}
/* チェックボックス */
.checkBox_wrap [type=checkbox]:checked{
  background-color: #00235F!important;
  border-radius: 5px;
}.checkBox_wrap input[type=checkbox]{
  border-color: #00235F !important;
  border-radius: 5px;
}.checkBox_wrap label{
  color: #424242;
  font-size: 16px;
}input[type="checkbox"]:focus {
  outline: none;
  outline-offset: 0px!important;
  box-shadow: none;
}
/* 微調整 */
.w-full_parent > form{
  width: 100%;
}
.pc_label_adjust > div:first-child{
  padding-top: 10px;
}

.align-self-start {
  align-self: flex-start;
}

.accordion-content.close {
  display: none;
}

.field_with_errors {
  input[type=text],
  input[type=prefecture],
  input[type=city],
  input[type=address],
  input[type=tel_1],
  input[type=tel_2],
  input[type=email],
  input[type=email_confirmation],
  select,
  textarea {
    background-color: #FFEDEF !important;
    border: 1px solid #FF0000 !important;
    box-shadow: 0 0 0 1px #d14835 !important; }
}

/* レイアウト微調整 */
@media print, screen and (max-width: 992px) {
  .flex_adjust_col > .flex{
    display: block;
  }
}
@media print, screen and (max-width: 992px) {
  .adjust_form > .flex{
    padding-top: 16px;
    padding-bottom: 16px;
  }.adjust_form > .flex > .pc\:py-8{
    margin-bottom: 10px;
  }.adjust_form > .flex .basis-1\/6{
    margin-bottom: 5px;
  }
}
/* イベント */
/* 実施日 */
.event_tag_wrap{
  overflow-y: hidden;
}
.event_tag{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-right: 20px;
  padding: 3px 0;
  width: 80px;
  height: 26px;
  font-size: 12px;
}
.event_tag .triangle{
  display: block;
}.event_tag .triangle::after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: -10px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%) rotate(45deg);
}.event_tag_text{
  position: relative;
  z-index: 2;
}
.event_tag_data{
  background: #D4C57F;
}.event_tag_data .triangle::after{
  background: #D4C57F;
}
/* 募集終了日 */
.event_tag_data_deadline{
  border: 2px solid #D4C57F;
  border-right: none;
  color: #D4C57F;
}.event_tag_data_deadline .triangle::after{
  border: 2px solid #D4C57F;
}.event_tag_data_deadline .triangle::before{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 50px;
  height: 22px;
  background: white;
  z-index: 2;
}

/* マイページトップ */
/* CREW NEWS */
.crew_news_background {
  padding: 20px 15px;
  background: url(/assets/mypage/top/crew_news_background-f45b513b6e703ac72a1e0e79e41bc8896792d9d5297114411baf745395235e76.jpg) no-repeat #48abe2;
  background-size: cover;
}
@media (min-width: 1024px) {
  .crew_news_background {
    padding: 32px 25px;
    background: url(/assets/mypage/top/crew_news_background-f45b513b6e703ac72a1e0e79e41bc8896792d9d5297114411baf745395235e76.jpg) no-repeat #48abe2;
    background-size: cover;
  }
}
/* スワレージクーポン交換 */
.swaleage_coupons_background {
  padding: 20px 15px;
  background: url(/assets/mypage/top/swaleage_coupons_background-24a49051804835a2fafa88fb6e4ea7db182833f4729d679ca3cdaa6fb78fffe8.png) no-repeat #48abe2;
  background-size: cover;
}
@media (min-width: 1024px) {
  .swaleage_coupons_background {
    padding: 32px 25px;
    background: url(/assets/mypage/top/swaleage_coupons_background-24a49051804835a2fafa88fb6e4ea7db182833f4729d679ca3cdaa6fb78fffe8.png) no-repeat #48abe2;
    background-size: cover;
  }
}
/* デジタル会報誌 */
.digital_newsletter_background {
  padding: 20px 15px;
  background: url(/assets/mypage/top/digital_newsletter_background-ae6a6ff2839e5702d176e7c84ea0340cc7eeb05e649c13af96c3dfc9df6a8187.png) no-repeat #48abe2;
  background-size: cover;
}
@media (min-width: 1024px) {
  .digital_newsletter_background {
    padding: 32px 25px;
    background: url(/assets/mypage/top/digital_newsletter_background-ae6a6ff2839e5702d176e7c84ea0340cc7eeb05e649c13af96c3dfc9df6a8187.png) no-repeat #48abe2;
    background-size: cover;
  }
}
/* GAME */
.game_background {
  padding: 20px 15px;
  background: url(/assets/mypage/top/game_background-6114522f16db8e839dcf0b730e378ec03f43ded2b5bdab1781749345b4710e81.jpg) no-repeat #48abe2;
  background-size: cover;
}
@media (min-width: 1024px) {
  .game_background {
    padding: 32px 25px;
    background: url(/assets/mypage/top/game_background-6114522f16db8e839dcf0b730e378ec03f43ded2b5bdab1781749345b4710e81.jpg) no-repeat #48abe2;
    background-size: cover;
  }
}
/* WPA */
.game_background_2 {
  padding: 20px 15px;
  background: url(/assets/baseball/game_background_2-cff4ec881b371fe8e41feb017b55212b5e24652b35793c7c0ab1c62559fb3de7.jpg) no-repeat #48abe2;
  background-size: cover;
  background-position: center center;
}
@media (min-width: 1024px) {
  .game_background_2 {
    padding: 32px 25px;
    background: url(/assets/baseball/game_background_2-cff4ec881b371fe8e41feb017b55212b5e24652b35793c7c0ab1c62559fb3de7.jpg) no-repeat #48abe2;
    background-size: cover;
    background-position: center center;
  }
}

/* ファンレター　見出し　右側背景画像つき */
.title_with_bg_right{
  display: flex;
  justify-content: center;
}@media (max-width: 767px) {
  .title_with_bg_right{
    align-items: center;
  }
}.title_with_bg_right img{
  width: 150px;
}@media (max-width: 767px) {
  .title_with_bg_right img{
    width: 50px;
  }
}
/* 番号付き見出し */
.title_with_number{
  display: flex;
  gap: 10px;
  position: relative;
  overflow: hidden;
  word-break: break-all;
  border-top: 3px solid #0081CC;
  border-radius: 10px 0 0 0;
}.title_with_number .font-en {
  display: block;
  padding: 10px 20px;
  height: 60px;
  border-radius: 10px 0 20px 10px;
  background: #0081CC;
  font-size: 36px;
  color: #fff;
}.title_with_number .__title{
  padding-top: 10px;
  color: #0081CC;
  font-size: 20px;
  font-weight: bold;
}
/* ファンレター　確認画面  背景 */
.bg-fan_letter{
  margin: 0 auto;
  padding: 24px 24px 80px 24px;
  max-width: 720px;
  min-height: 835px;
  background-image: url(/assets/baseball/bg-bottom-b3f9808ecf344647d572cc5d99e2649864b9ad1ed8b6a2aad9a1cd21e77335df.png), url(/assets/baseball/bg-top-7091f7cb063a6da19dd673f181a5d99cbc8eba072932ef5a02b9428ecf3d0578.png), url(/assets/baseball/bg-center-2043c3b9af1e93e930a50b7bbac19a15deb6944437f1db6912efe4136585a491.png);
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-size: 100%, 100%, 100%;
  background-position: left bottom, left top, center center;
  background-color: #f9f7f5;
  filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.25));
  word-break: break-word;
  overflow-wrap: break-word;
}

/* テキストエラー */
.text-error{
  padding-top: 5px;
}

input[type=submit]:disabled{
  opacity: 0.5;
}

/* last child 制御用 */
.list_wrap_adjust > div:last-child{
  border: none;  
}

/* トップ（ホーム） */
.member_info_area{
  background-image: url(/assets/mypage/bg_home_member_info_bottom-e9dba62274ff022885707f43b49e96f323e406632867164dc08a8750e74f881d.png), url(/assets/mypage/bg_home_member_info-98313307d73d3de60f6e3237c40fed8d0adb987d327f5bd0cd9311c74abfa7cd.png);
  background-repeat: no-repeat, no-repeat;
  background-color: #0068A1;
  background-size: contain, cover;
  background-position: bottom left, top center;
}
/* 上部バナー（カルーセルスライダー） */
.slick-arrow{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 20px;
  height: 33px;
  background-image: url(/assets/mypage/slick-arrow-60366c66914e94253e4008fe55c2bc7427ea36ac8cf88797a25461d829a422c9.svg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}.slick-prev{
  left: 10px;
  transform: translateY(-50%);
}.slick-next{
  right: 10px;
  transform: translateY(-50%) rotate(180deg);
}.slick-dots{
  display: none!important;
}

.member_photo img{
  width: 200px;
  height: 240px;
  object-fit: cover;
}@media print, screen and (max-width: 1023px) {
  .member_photo img{
    width: 112px;
    height: 134px;
  }
}

.avatar-box {
  width: calc(200px * var(--avatar-scale, 1));
  height: calc(240px * var(--avatar-scale, 1));
  border-radius: 5px;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .avatar-box {
    width: calc(112px * var(--avatar-scale, 1));
    height: calc(134px * var(--avatar-scale, 1));
  }
}

/* 会員ランク */
.bg-rank__{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 68px;
  line-height: 1.2;
  font-size: 24px;
  font-weight: bold;
  border-radius: 5px;
  padding: 0 8px;
  white-space: nowrap;
}@media print, screen and (max-width: 1023px) {
  .bg-rank__{
    min-height: 52px;
    font-size: clamp(14px, 6vw, 24px);
  }
}

.iocn_star svg{
  fill: #818C99;
}.iocn_star.__active svg{
  fill: #EFB92D;
}
/* 達成ゲージ（プログレスバー） */
.progress_bar{
  position: relative;
  width: 100%;
  height: 20px;
  background: white;
  border-radius: 100px;
  background: white;
}.progress_bar > div{
  position: absolute;
  left: 0;
  height: 20px;
  background: #EFB92D;
  border-radius: 100px;
}

/* 見出し */
.title_wrap_text_white > h2 {
  color: white;
}

/* 調整 */
.w-50p_gap-5{
  width: calc(50% - 10px);
}
@media print, screen and (min-width: 1023px) {
  .w-30p_gap-5__pc{
    width: calc(33.3% - 14px)!important;
  }
}

/* リスト */
.list_style_even_bg_light-gray li:nth-of-type(even){
  background: #FAFAFA;
}

/* 活躍選手予想ゲーム WPA */
.bg-main-selected{
  background: #EFF9FF;
}

.text-red {
  color: red
}