/* floatを無効化 */
.col-xs-1, .col-sm-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-lg-3, .col-xs-4, .col-sm-4,  .col-lg-4, .col-xs-5, .col-sm-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-lg-12 ,
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12  { 
      float: none;
      padding-left:5px;
      padding-right:5px;  
  }

.in-site-img{
  width:auto;
  height:100%;
}

#page-top{
  position:fixed;
  right:5px;
  font-size:77%;
}

.panel-body {
    padding: 15px;
    display: flex;
    flex-direction: row;
}

.col-md-offset-1 {
    /* margin-left: 8.33333333%; */
    margin-left:5%;
}
.graph-space{
	/* background-color:white; */
	border-radius: 12px;
  justify-content:center;
  width:100%;
}
.graph{
	/* background-color:white; */
	width:90%;
  /* justify-content:center; */
}
/* サイトタイトル・ログインボタン */
.head-title{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}
.site-title {
  font-size: 1.5rem;          /* タイトルを少し大きめに */
  margin: 0;                  /* デフォルトの余白をリセット */
}
.login-btn_test {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 子要素がはみ出した場合に折り返す */
  margin-left: 0px;  /* 元のBootstrapの`margin-left`を継承 -15px >> 0px */
  margin-right: 0px;  /* 元のBootstrapの`margin-right`を継承 -15px >> 0px */
}
.row.title-box {
    justify-content: space-between;
    align-items: center;
}
.title-box {
  width: 100%;
  padding: 0 50px;
  margin: 0;
}
.login-btn{
  max-width:220px;
  color: white;
  text-shadow:none;  
}
.login-btn a{
  color: white;
  text-decoration:none;
}

.col-ranking-1,
.col-ranking-3{
  display:flex;
  flex-direction: row;
}


/* アバター表示 */
.my-avatar{
  width:auto;
  height:24px;
  border-radius: 20px;	  
  margin:0;
  padding-top:1em;
  max-width:210px;
  max-height:210px;
  min-height:100px
}

/* ヘッダタイトル */
.title{
    justify-content:center; /*  中央に配置 */
}

/* 前日・今日・翌日 */
.clearfix-daily {
    display:flex;
    width:100%;
    justify-content:space-evenly; /*  中央に配置 */
}
/* .col-xs-4{ */
 /* flex: 1;*/               /* 各要素が等分される */
 /* text-align: center;*/    /* 中のリンクを中央寄せ */
  /* width:33.33333%; */
/* } */
/* 1位～3位 */
.ranking-index .ranking3-block {
  display:flex;
  padding-bottom: 11px;
  justify-content:space-between; /*  中央に配置 */
  width:100%;
  flex-direction: row;
}

.top3-block{
  display:flex;
  flex-direction: row;
  width:auto;
  margin:-5px;  /* 暫定調整 */
}

.col-md-9 {
  display:flex;
  flex-direction: column;
  /* width:100% */
} 
.col-md-10 {
  display:flex;
  flex-direction: column;
}
.ct-labels{
  width:100%;
} 
.col-md-3-s {
  width:100%;
} 

/* 1位～12位 */
.ranking-message {
    background-color: white;
    clear: both;
    margin: 5px;
    text-align: center;
    font-weight: bold;
    color: #ec7142;
    border: 5px solid #ffd15a;
    width: 100%;
    padding: 15px 0px;
}

/* フッタ */
.in-site-love,
.in-site-work,
.in-site-money,
.in-site-past,
.in-site-integrated,
.in-site-links
 {
    display: flex;
    flex-direction: row;
}
/* 年間・月間 */
.r-past-tabs {
    display: flex;
}

.ct-octave:before {
    display: block;
    float: none;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 50%;
}
.detail_default_graph_datetime {
	font-size: 12px;
	margin-top: 3px;
	text-align: center;
	margin-right:20px;
}

.ranking-index .in-site-links {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}

/* 「一週間の運勢変化グラフ」の文字を中央寄せにする */
.section-title {
  text-align: center;
}
.block-12seiza-sidebar{
  display:flex;
  flex-direction: row;
  justify-content:center;
  align-items:start;  
}
.site-under{
  display:flex;
  flex-direction: column;
    width: 75%;
    padding:0px 0px;
    align-items:center;
}

.right-bar{
  display:flex;
  flex-direction: row;
  width: 25%;
}
.graph-space{
  display:flex;
  flex-direction:column;
}

@media (max-width: 1200px) {
  .ranking-index .ranking3-block {
      flex-direction: row;
  }
  .col-md-4 {
      width: 50%;
  }
  .col-ranking-1{
    display:flex;
    flex-direction: column;
  }
}

@media (max-width: 992px) {
  .ranking-index .ranking3-block {
      flex-direction: column;
  }

  .col-md-3{
    padding-top:7em;
    width: 100%;
  }  
  .block-12seiza-sidebar {
    flex-direction: column;
  }

  .top3-block {
      flex-direction: column;
  }
  .rank-day-links {
      /* display: block; */
      flex-direction: row;
  }  
  .right-bar{
    width: auto;
  }
  .site-under{
    display:flex;
    flex-direction: column;
    width: 100%;
  }  
}

@media (max-width: 768px) {
  .row {
      display: flex;
      /* flex-direction: column; */
      flex-wrap: wrap;
  }
  .panel-body {
      /* padding: 15px; */
      /* display: flex; */
      flex-direction: column;
      width:680px;
  }  
  .col-sm-6{
    width:100%;
  }

  .col-sm-6-10{
    width:100%;
    height:200px;
  }  
  .in-site-integrated,
  .in-site-love,
  .in-site-work,
  .in-site-money,
  .in-site-past  {
      height: 280px;
      flex-direction: row;
  }
  .col-md-9 {
    /* display:flex; */
    /* flex-direction: column; */
    width:100%
  } 
  /* .col-xs-6{ */
    /* width:50%; */
    /* flex-direction: column; */
  /* }  */
  /* .col-xs-6 img{ */
    /* width:120px; */
    /* flex-direction: column; */
  /* }  */
}

/* Test Ranking Click button 2025/10/02  */
@media (max-width: 540px) {
  .in-site-integrated, .in-site-love, .in-site-work, .in-site-money, .in-site-past {
      height: 280px;
      flex-direction: row;
  }
  .ranking-wrapper div:nth-child(-n+4) img {
    max-width: 100px;
  }
  .panel-body {
      /* padding: 15px; */
      /* display: flex; */
      /* flex-direction: column; */
      width:320px;
  } 
}

@media (max-width: 376px) {
  .in-site-integrated, .in-site-love, .in-site-work, .in-site-money, .in-site-past {
      height: 340px;
      flex-direction: column;
  }
}


.star_rank_other {
    background: url(../img_re/top-rank.png);
    background-position: 40px 0px;
}    
.rankother-color-new{
    display:flex;
    align-items: center;
    justify-content: center;
}
.rankother-color-new h4{
    font-weight: 900;
    font-size: 18px;
    display: block;
    width: 100%;
    text-align: center; /* h4要素内のテキストを中央寄せにする */
    background-color: white;
    border: solid 4px #dede51;
    color: #1b1464;
    line-height: 72px;
    /* line-height: 70px; */  /* 2025/10/02 暫定数値 */
    margin: auto;
    border-radius: 12px;
    /* 浮き上がるような影 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    /* transition: transform 0.2s ease, box-shadow 0.2s ease;             */
}
.otherrank-height {
    padding: 5px 0px;
    height: 80px;
}

/* -----------------------------------
   独自クラス visible-xs-1（Bootstrap3対応） PART 1 
   ----------------------------------- */
/* .visible-xs-1
{
  display:none;
}
@media (max-width: 767px) {
  .visible-xs-1 { 
	display:block; 
	} */
  /* モバイルでのみ hidden-xs を使うならここで定義（元と同じ） */
  /* .hidden-xs { 
	display:none !important; 
	}
  .hide { 
	display:block; 
	}  
} */

/* ← ここが肝：.collapse をデスクトップで強制表示（Bootstrap の collapse で制御はモバイル側だけ） */
/* @media (min-width: 768px) {
  .collapse { 
	height: auto !important; 
	visibility: visible !important; 
	}
} */