@charset "UTF-8";
@import url(reset.min.css);
/* 0. ローカルリセット */
* {
  box-sizing: border-box;
}

img {
  display: inline;
}

/* 1. 基本設定 */
html {
  font-size: 62.5%; /* ベースのフォントサイズを10pxにする */
}

body {
  background-color: #222;
  color: #fff;
  font-family: "メイリオ", "Meiryo", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  font-size: 1.6rem;
  line-height: 1.2;
}

h1,
h2,
h3 {
  font-weight: normal;
  margin: 0;
  padding: 0;
}

strong,
b {
  color: #cc5fe7;
  font-weight: normal;
}

em {
  font-style: normal;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* 横への並び方 */
.flexbox-rapper {
  display: flex;
}

.flexbox-rapper > * {
  flex: 1;
}

.position-center {
  /* 3行で中心揃え */
  align-items: center; /* 交差軸方向 */
  display: flex;
  justify-content: center; /* 横軸方向 */
}

.string-center {
  text-align: center;
}

.string-right {
  text-align: right;
}

.string-left {
  text-align: left;
}

/* 2. 装飾・レイアウト */
/* Font Size */
/* リンク */
a {
  color: #df7639;
  text-decoration: none;
}

a:hover {
  color: skyblue;
}

/* レイアウト */
.whitebase {
  background-color: #7a9e7e;
  width: 100%;
  position: relative;
}

header,
main,
section,
footer {
  width: 100%;
}

aside {
  background-color: #f0eada;
  color: #123;
  padding: 1.6rem;
  width: 100%;
  transition: transform 0.3s;
}
aside .logo-box {
  font-size: 2.1rem;
  margin-bottom: 1.8rem;
  padding: 1rem;
  text-align: center;
  border: 1px solid #ccc;
  background-color: #fff;
}
aside h1 {
  text-align: center;
  font-size: 2.1rem;
}
aside h2 {
  text-align: left;
  font-size: 1.9rem;
  margin-bottom: 1.9rem;
}
aside .menu-box {
  margin-bottom: 2.4rem;
}
aside .menu-box .race-day li {
  padding: 0.5em 1em;
  margin-bottom: 0.33em;
  border-bottom: 1px solid #ccc;
  font-size: 2.1rem;
}
aside .infomation-box {
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
}
aside .infomation-box .baken-score li {
  padding-left: 1em;
  margin-bottom: 0.33em;
}

.race-infomation-header { /* 今は外で定義 */
  margin-bottom: 1.9rem;
}

#umabashira-venue-text {
  background-color: #fffff8;
  color: #000;
  box-sizing: border-box;
  margin-bottom: 0.5em;
  padding: 0.5em;
  text-align: center;
}

#chart2_here {
  margin: auto;
}

.contents-box {
  width: 100%;
}
.contents-box .horse-prediction { /* main */
  background-color: #2f2f2f;
  color: #eee;
  margin-left: auto;
  right: 0;
  width: 100%;
}
.contents-box .horse-prediction section {
  padding: 1em;
}
.contents-box .horse-prediction section h2 {
  font-size: 3.6rem;
  color: #0a9aad;
}
.contents-box .horse-prediction section .headline-text {
  margin-bottom: 1em;
}
.contents-box .horse-prediction .common-setting {
  background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 2em;
}
.contents-box .horse-prediction .login-box {
  line-height: 2;
}
.contents-box .horse-prediction .login-box h2 {
  margin-bottom: 1.5em;
}
.contents-box .horse-prediction .login-box button {
  margin-top: 1.5em;
}
.contents-box .horse-prediction .sub-header-text {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1.5em;
}
.contents-box .horse-prediction .todays-race-attention {
  background-image: url(../images/ChatGPTImage2025年4月25日16_27_36.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  text-align: center;
  /* 薄くするためのオーバーレイ */
  /* テキストを前面に */
}
.contents-box .horse-prediction .todays-race-attention::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
.contents-box .horse-prediction .todays-race-attention .top-message,
.contents-box .horse-prediction .todays-race-attention .sub-message {
  position: relative;
  z-index: 2;
}
.contents-box .horse-prediction .todays-race-attention .top-message {
  color: #df7639;
  font-size: 3.6rem;
  line-height: 1;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.contents-box .horse-prediction .todays-race-attention .sub-message {
  color: #eee;
  font-size: 2.4rem;
  line-height: 1;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.contents-box .horse-prediction .hello {
  /*background-color: #fff;
  background-image: url(../images/ChatGPT_Image_16_54_47.jpg);
  background-position: center center;
  background-size: cover;*/
}
.contents-box .horse-prediction .hello .hello-body {
  display: none;
}
.contents-box .horse-prediction .hello .hello-head {
  margin-bottom: 0.5em;
  width: 100%;
}
.contents-box .horse-prediction .hello .hello-head h2 {
  margin-bottom: 0.75em;
}
.contents-box .horse-prediction .hello .hello-head h3 {
  margin-bottom: 1em;
}
.contents-box .horse-prediction .hello .hello-head p {
  font-size: 28px;
}
.contents-box .horse-prediction .hello .pickup-syussohyo td {
  padding: 0 0.5em;
}
.contents-box .horse-prediction .discription-box {
  background-color: #ddd;
  color: #123;
  line-height: 1.5em;
}
.contents-box .horse-prediction .discription-box p {
  margin-bottom: 0.5em;
  line-height: 1.33em;
}
.contents-box .horse-prediction .discription-box article {
  margin-top: 1.5em;
  padding: 0 1em;
}
.contents-box .horse-prediction .discription-box .pc-section {
  display: none;
}
.contents-box .horse-prediction .site-attention {
  color: #123;
  background-color: #fff;
}
.contents-box .horse-prediction .site-attention p {
  font-size: 2.4rem;
  line-height: 1;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}
.contents-box .horse-prediction .start-up {
  background: linear-gradient(to bottom, #456, #123);
}
.contents-box .horse-prediction .start-up ul {
  display: flex;
  margin-bottom: 1em;
}
.contents-box .horse-prediction .start-up li {
  padding: 1em;
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 6px;
  margin: 1em;
}
.contents-box .horse-prediction .links-to-note {
  color: #123;
  background-color: #fff;
}
.contents-box .horse-prediction .links-to-note h2 {
  margin-bottom: 0.5em;
}
.contents-box .horse-prediction .links-to-note h3 {
  margin-bottom: 0.75em;
}
.contents-box .horse-prediction .links-to-note ul li {
  padding: 0.75em;
}
.contents-box .horse-prediction .links-to-note ul li:not(:last-child) {
  border-bottom: 1px solid #ccc;
}
.contents-box .horse-prediction .catchup-picture {
  background: linear-gradient(to bottom, #123, #456);
}
.contents-box .horse-prediction .pred-chart {
  background: linear-gradient(to bottom, #456, #123);
}
.contents-box .horse-prediction .my-activities {
  background: linear-gradient(to bottom, #456, #123);
}
.contents-box .horse-prediction .profile div {
  margin-bottom: 5rem;
}
.contents-box .horse-prediction .profile div p {
  margin-bottom: 0.5em;
  line-height: 1.33em;
}

.my-skills dt {
  margin-bottom: 0.33em;
}
.my-skills dd {
  padding-left: 1em;
  margin-bottom: 0.66em;
}

footer {
  min-height: 10vh;
  background-color: #123;
  text-align: center;
  padding: 1.7rem;
  font-size: 1.7rem;
}
footer p {
  padding-bottom: 1em;
}
footer .horse-ai-racing img {
  width: 100%;
}

.short-widesize {
  width: 100%;
  margin: auto;
}

.main-nav {
  background-color: black;
  font-size: 1.4rem;
  /* 任意の場所で"固定" */
  /* position: sticky;
  top: 0; */
  text-align: center;
}

.main-nav li {
  padding: 1em 0.5em;
}

/* JavaScript用埋め込みデータ用 */
#horse-count {
  font-size: 100%;
}

.mywaku-bg-inner {
  background-color: #cef !important;
}

.mywaku-bg-middle {
  background-color: #fdf !important;
}

.mywaku-bg-outer {
  background-color: #ffd !important;
}

.home-ritto,
.home-miho {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-ritto {
  background-color: #2d5d63 !important;
}

.home-miho {
  background-color: #4f4a5e !important;
}

.jockey-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seibetsu-hinba {
  color: rgb(194, 111, 111) !important;
}

.current-venue-racelist {
  display: flex;
  flex-wrap: wrap;
}
.current-venue-racelist h3 {
  font-size: 1.2rem;
}
.current-venue-racelist li {
  background-color: rgb(65, 60, 52);
  padding: 0.4rem;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 0.3rem;
  font-size: 1.33rem;
  text-align: center;
}

/* 中 以下 */
@media (width < 650px) {
  .main-nav ul {
    display: flex;
    justify-content: space-evenly;
  }
  .main-nav li {
    padding: 0.5em;
    text-align: center;
    width: 20%;
  }
  .main-nav li:not(:last-child) {
    border-right: 1px solid #333;
  }
}
/* 中の大 以上 */
@media (650px <= width) {
  .contents-box .horse-prediction { /* main */ }
  .contents-box .horse-prediction .hello {
    display: flex;
    justify-content: space-between;
    gap: 3.2rem; /* 間隔を開けたい時 */
  }
  .contents-box .horse-prediction .hello .hello-body {
    display: block;
    width: 40%;
    background-image: url("/static/images/mike-kotsch-PiP3mbzg6To-unsplash.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .contents-box .horse-prediction .hello .hello-head {
    width: 57%;
  }
}
/* 中の大 以上 2ペインに変更 */
@media (960px <= width) {
  .whitebase {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  aside {
    width: 200px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;
  }
  aside .menu-box .race-day li {
    font-size: 16px;
    padding: 0.25em 1em;
  }
  .contents-box {
    width: 100%;
    padding-left: 200px;
  }
  .contents-box .horse-prediction { /* main */ }
  .contents-box .horse-prediction .todays-race-attention .top-message {
    font-size: 12rem;
    text-align: right;
    background: linear-gradient(135deg, #a67c52 0%, #ffffff 40%, #f0eada 70%, #d9a5a5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
  .contents-box .horse-prediction .discription-box {
    display: flex;
    justify-content: space-between;
  }
  .contents-box .horse-prediction .discription-box .mc-section {
    width: 58%;
  }
  .contents-box .horse-prediction .discription-box .pc-section {
    display: block;
    width: 40%;
  }
  .contents-box .horse-prediction .profile div {
    padding-left: 40%;
  }
  .contents-box .horse-prediction .links-to-note {
    padding-right: 33%;
  }
  footer .horse-ai-racing img {
    width: 25%;
  }
}
/* 大 以上 */
@media (1200px <= width) {
  .contents-box {
    width: 1570px;
    margin: auto;
  }
  .contents-box .horse-prediction { /* main */ }
  .contents-box .horse-prediction section {
    padding: 2em;
  }
  .contents-box .horse-prediction .todays-race-attention .top-message {
    font-size: 15rem;
  }
}/*# sourceMappingURL=style.css.map */