sup {
font-size:0.5em;
}


.smalltitle {
  position: relative;
  padding: 0.6em;
  background: #e0edff;
}

.smalltitle:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
  width: 0;
  height: 0;
}

.image_mouseover{
overflow: hidden;
margin: 20px auto;
}
.image_mouseover img{
cursor: pointer;
transition-duration: 0.3s;
}
.image_mouseover:hover img{
opacity: 0.6;
transition-duration: 0.3s;
}

.page-link {
width:1400px;
display: block;
margin:10px auto;
}

.page-link2 {
width:100%;
display: block;
margin:10px auto;
}

.page-link3 {
width:1400px;
display: block;
margin:10px auto;
}

.page-link4 {
width:1200px;
display: block;
margin:10px auto;
}

.page-link-rankingcate {
width:100%;
display: block;
margin:10px auto;
}

.page-link div{
font-size:14px;
display: inline-block;
width: 292px;
text-align:center;
margin-bottom:8px;
border:#999 1px solid;
color:#666;
}

.page-link2 div{
font-size:16px;
display: inline-block;
width: 288px;
text-align:center;
margin-bottom:8px;
border:#CCC 3px solid;
color:#666;
}

.page-link3 div{
display: inline-block;
text-align:center;
margin:8px 10px 50px 0;

transition: all 0.2s ease-in;

  color: #090909;
  padding: 0.7em 1.7em;
  font-size: 18px;
  border-radius: 0.5em;

}

.page-link4 div{
display: inline-block;
text-align:center;
margin:8px 10px 40px 0;

transition: all 0.2s ease-in;

  color: #090909;
  padding: 0.7em;
  font-size: 15px;
  border-radius: 0.5em;
  font-weight:bold;

}

.page-link-rankingcate div{
font-size:16px;
display: inline-block;
width: 450px;
text-align:center;
margin-bottom:8px;
border:#999 1px solid;
color:#666;
}

.brown{
  background: #C5BFBA;
  border: 1px solid #C5BFBA;
  box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

.brown:active {
  color: #666;
  box-shadow: inset 4px 4px 12px #c5c5c5,
             inset -4px -4px 12px #ffffff;
}

.brown:before {
  content: "";
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.brown:after {
  content: "";
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;

  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.brown:hover {
  color: #ffffff;
  background-color: #67574A;
}

.yellow_link{
  background: #00927F;
  font-weight:bold;
  border: 1px solid #00927F;
  box-shadow: 6px 6px 12px #c5c5c5;
}

.yellow_link:active {
  color: #666;
  box-shadow: inset 4px 4px 12px #c5c5c5;
}

.yellow_link:before {
  content: "";
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.yellow_link:after {
  content: "";
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;

  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.yellow_link:hover {
  color: #F9D005;
  background-color: #00a892;
}

.blue_link{
  background: #0069B8;
  font-weight:bold;
  border: 1px solid #0069B8;
  box-shadow: 6px 6px 12px #c5c5c5;
}

.blue_link:active {
  color: #666;
  box-shadow: inset 4px 4px 12px #c5c5c5;
}

.blue_link:before {
  content: "";
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.blue_link:after {
  content: "";
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;

  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.blue_link:hover {
  color: #058ef5;
  background-color: #FFFFFF;
}


.pastel_b{
  background: #e0ffff;
  border: 1px solid #bbb;
  box-shadow: 3px 3px 6px #c5c5c5,
             -3px 3px 6px #ffffff;
}

.pastel_b:active {
  color: #666;
  box-shadow: inset 4px 4px 7px #c5c5c5,
             inset -4px -4px 7px #ffffff;
}

.pastel_b:before {
  content: "";
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.pastel_b:after {
  content: "";
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;

  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.pastel_yellow{
  background: #ffffbc;
  border: 1px solid #bbb;
  box-shadow: 3px 3px 6px #c5c5c5,
             -3px 3px 6px #ffffff;
}

.pastel_yellow:active {
  color: #666;
  box-shadow: inset 4px 4px 7px #c5c5c5,
             inset -4px -4px 7px #ffffff;
}

.pastel_yellow:before {
  content: "";
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.pastel_yellow:after {
  content: "";
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;

  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}


.page-link a {
text-decoration: none;
display: block;
color:#666;
width:100%;
padding:10px;
}
.page-link a:hover {
text-decoration: none;
color:#AAA;
}

.page-link2 a {
text-decoration: none;
display: block;
color:#FFF;
width:100%;
padding:10px;
background-color:#4F616D;
}
.page-link2 a:hover {
text-decoration: none;
color:#4F616D;
background-color:#E7EBED; 
}

.page-link3 a {
text-decoration: none;
display: block;
width:100%;
padding: 5px 15px;
}

.page-link-rankingcate a {
text-decoration: none;
display: block;
color:#666;
width:100%;
padding:10px;
}
.page-link-rankingcate a:hover {
text-decoration: none;
color:#AAA;
}

.youtube {
width:800px;
height:400px;
}

.flexbox {
position:relative;
     display: flex;
border:1px solid #999;
padding:20px;
     
 }

.flexbox .link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 .box1 {
     width: 30%;
     margin: 0 20px 0 0;
 }
 .box2 {
     width: 70%;
     padding:20px;
font-sixe:20px;
font-weight:bold;
text-decoration: underline;
 }

.fanscene_p li {
float:left;
width:50%;
padding:10px;
}

/* 株主優待用_内部リンク */
/* ナビゲーション全体の枠 */
.shareholder-nav {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0;
  box-sizing: border-box;
}

/* 各ボタンのスタイル */
.shareholder-nav .nav-btn {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 40px 18px 20px;
  margin-bottom: 12px;
  
  /* ▼ここを変更しました（背景と枠線） */
  background-color: #f0f6ff; /* 爽やかな薄いブルーの背景 */
  border: 1px solid #d0e2f7; /* 背景より少しだけ濃いブルーの枠線 */
  color: #003366;            /* 文字色は読みやすい濃い紺色 */
  
  text-align: left;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;          /* 太字 */
  line-height: 1.4;
  transition: all 0.3s ease;
  border-radius: 4px;        /* 角を少し丸くして柔らかい印象に（任意） */
}

/* 右側の矢印アイコン */
.shareholder-nav .nav-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-top: 2px solid #003366;  /* 矢印も紺色に合わせて視認性UP */
  border-right: 2px solid #003366;
  transition: all 0.3s ease;
}

/* 最後のボタンの余白調整 */
.shareholder-nav .nav-btn:last-child {
  margin-bottom: 0;
}

/* --- マウスを乗せた時の動き --- */
.shareholder-nav .nav-btn:hover {
  background-color: #ffffff; /* ホバー時は白背景に戻して変化をつける */
  border-color: #003366;     /* 枠線を濃い紺色にして強調 */
  color: #003366;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 少し浮かび上がるような影を追加 */
}

@media not all and (min-width: 768px) {
  .item {
    width: 100%;
  }

  .item:not(:nth-child(3n+3)) {
    margin-right: 0;
  }

  .item:nth-child(n+2) {
    margin-top: 30px;
  }
}