@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.comment_wrap {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #FFF;
    background: #6fc360;
    border-bottom: solid 6px #a5c778;
    box-shadow: 0 3px 6px rgb(0 0 0 / 25%);
}

div.youtube_wrap iframe{
	width:-webkit-fill-available
}

/************************************
** トップページ
************************************/

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.category-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.category-box:hover {
    transform: translateY(-5px);
}

.category-title {
    color: #2b2b2b;
    margin: 0 0 10px;
    font-size: 1.2em;
}

.post-count {
    color: #666;
    font-size: 0.9em;
}

.bike-items {
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.loading::after {
    content: "読み込み中...";
    display: block;
    color: #888;
}

/* CSSスタイリング */
.bike-container {
    display: flex;
    gap: 20px;
    padding: 15px 0;
}

/* 30件未満の通常表示 */
.bike-container:not(.scrollable) {
    flex-wrap: wrap;
    justify-content: center;
}

/* 30件以上のスクロール表示 */
.bike-container.scrollable {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #666 #f0f0f0;
    padding-bottom: 10px;
}

.bike-item {
    flex: 0 0 280px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.bike-item:hover {
    transform: translateY(-5px);
}

.bike-card {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #333;
}

.bike-thumbnail {
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
}

.bike-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bike-title {
    margin: 15px 0 0;
    font-size: 1.1em;
    line-height: 1.4;
}
.category-title.bike-title {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(90deg, #7e8c95 0%, #4e4376 100%);
  color: #fff;
  font-size: 1.4em;
  font-weight: bold;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(44,62,80,0.18);
  padding: 22px 32px;
  margin: 18px 0;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
  user-select: none;
  position: relative;
}

.category-title.bike-title:hover,
.category-title.bike-title:focus {
  background: linear-gradient(90deg, #4e4376 0%, #2b5876 100%);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 24px rgba(44,62,80,0.25);
  color: #ffe066;
}

.category-title.bike-title i.fa-motorcycle {
  font-size: 1.5em;
  color: #ffe066;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.13));
  margin-right: 8px;
}
/* スクロールバースタイル */
.bike-container.scrollable::-webkit-scrollbar {
    height: 8px;
}

.bike-container.scrollable::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.bike-container.scrollable::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 4px;
}

ul.bike-items {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    position: relative;
}

.category-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.category-box.active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw !important;
    height: 50vh !important;
    z-index: 9999;
    border-radius: 0;
    overflow-y: auto;
    cursor: default;
    animation: expand 0.3s ease;
}

.category-box.active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

@keyframes expand {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: none;
}

.category-box.active .close-button {
    display: block;
}

/* 追加のスタイル */
.no-scroll {
    overflow: hidden;
}

.category-box.active .category-title {
    font-size: 2rem;
    text-align: center;
    margin: 40px 0;
}

.category-box.active .count {
    display: block;
    font-size: 1.2rem;
    margin-top: 10px;
}
.bike-items {
    margin-top: 15px;
    display: flex;
    border-top: 1px solid #eee;
    padding-top: 15px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.bike-row {
    display: block;
    width: 30%;
}

/************************************
** トップページおわり
************************************/



/************************************
** インデックスページのエントリーカードのPV数を非表示
************************************/
.entry-card .admin-pv {
	display: none;
}

table{
  border-collapse:separate;
  border-spacing: 5px;
  width: 100%;
}

table th,table td{
  border-radius: 5px;
  text-align: center;
  padding: 10px 0;
}

table th {
    background-color: #2d9589;
    color: white;
    border: solid 1px #927141;
}

table td {
    background-color: #cfcfcf42;
    border: solid 1px #af9d85;
}

/* inline-grid -category  */

ul.lcp_catlist li {
    list-style: none;
    display: inline-grid;
    grid-template-columns: 200px;
}

/* top-page */

article#post-31 header {
    display: none;
}

article#post-31 footer {
	display:none;
}

article#post-31 div div div#toc {
    display: none;
}
article#post-31 div div ul.wsp-pages-list {
    list-style: none;
}

article#post-31 div div ul.wsp-categories-list {
    list-style: none;
}

article#post-31 div div ul.wsp-posts-list {
    list-style: none;
}

article#post-31 div div ul.wsp-pages-list li {
    display: inline-grid;
}

article#post-31 div div ul.wsp-posts-list li {
    display: inline-grid;
}

article#post-31 div div ul.wsp-categories-list li {
    display: inline-grid;
}

/* カテゴリー ボックスデザイン */

ul.lcp_catlist li a {
	text-decoration: none;
}

ul.lcp_catlist{
  position: relative;
  padding: 0.8em;
  font: 14px/1.6 'arial narrow', sans-serif;
  background:#F2EFE7;
  list-style: none;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
}
 
ul.lcp_catlist li{
  position:relative;
  font-weight: bold;
  color: #333;
  border-bottom:dashed 1px #ccc;
}
ul.lcp_catlist li:last-child{
  margin-bottom:15px;
}
ul.lcp_catlist li:before{
  position: absolute;
  left: 10px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

ul.lcp_catlist li a img {
	filter: drop-shadow(5px 5px 5px #aaa);
    width: 100%;
}

ul.wsp-pages-list li a {
	text-decoration: none;
}

ul.wsp-pages-list{
  position: relative;
  padding: 0.8em;
  font: 14px/1.6 'arial narrow', sans-serif;
  background:#F2EFE7;
  list-style: none;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
}
 
ul.wsp-pages-list li{
  position:relative;
  font-weight: bold;
  color: #333;
  border-bottom:dashed 1px #ccc;
  padding:4px 0 4px 2em;
}
ul.wsp-pages-list li:last-child{
  margin-bottom:15px;
}
ul.wsp-pages-list li:before{
  position: absolute;
  left: 10px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

ul.wsp-posts-list li a {
	text-decoration: none;
}

ul.wsp-posts-list{
  position: relative;
  padding: 0.8em;
  font: 14px/1.6 'arial narrow', sans-serif;
  background:#F2EFE7;
  list-style: none;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
}
 
ul.wsp-posts-list li{
  position:relative;
  font-weight: bold;
  color: #333;
  border-bottom:dashed 1px #ccc;
  padding:4px 0 4px 2em;
}

ul.wsp-posts-list li:before{
  position: absolute;
  left: 10px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* 2カラム新着記事 */

/************************************
** ショートコードの新着一覧を２カラム表示にする
************************************/
.new-entry-cards.fp-new-entry-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}

.fp-new-entry-cards .new-entry-card-link.a-wrap {
    display: inline-block;
    width: 33.3%;
}


/************************************
** yahoo auction
************************************/
table.auction-data td {
    width: 1em;
    max-width: 2em;
}


/************************************
 * バイクカタログ
************************************/
/* バイクカタログ */

p.title-percentage {
    margin: 0px;
    font-weight: bold;
    font-size: xx-large;
}

p.title-percentage > span{
	font-size:17px;
}

p.title-count{
	margin: 0px;
    text-align: center;
}

p.title-count > span{
	font-size:14px;
}

p.description-text {
    border-bottom: 3px dotted #4d9bc1;
}

p.description-text > span{
	font-size:14px;
}

p.description-record-all {
    text-align: right;
    font-size: 14px;
}

span.post-date{
	display:none;
}

.content{
	margin-top: 3em;
	margin-bottom:3em;
}

.percent-title{
	display: flex;
    justify-content: center;
}

.percent-title > span {
    margin-left: 0.3em;
    padding: 0.1em;
	white-space: pre;
}

/* win-lose-draw */
.fighter_rocord_all {
    display: flex;
    justify-content: space-evenly;
    text-align: center;
}

.fighter_rocord_all_win {
    padding: 0.5em;
    font-family: fantasy;
    font-style: italic;
    width: 24%;
    background: #ea6f6f;
}

.fighter_rocord_all_lose {
    padding: 0.5em;
    font-family: fantasy;
    font-style: italic;
    width: 24%;
    background: #7377da;
}

.fighter_rocord_all_draw {
    padding: 0.5em;
    font-family: fantasy;
    font-style: italic;
    width: 24%;
    background: #77ea72;
}

div.fighter_rocord_all > div > span:first-child {
	padding-right: 0.2em;
    font-size: xxx-large;
    font-weight: bold;
}


/*------------------------------------
  pie chart
------------------------------------*/
@media screen and (min-width: 751px) {
  .pie-chart-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
 
.box {
  position: relative;
  min-width: 200px;
  width: 33.3333333333%;
  height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #fff;
  -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 750px) {
  .box {
    width: 100%;
  }
}
@media screen and (min-width: 751px) {
  .box + .box {
    margin-left: 20px;
  }
}
@media screen and (max-width: 750px) {
  .box + .box {
    margin-top: 20px;
  }
}
.box .percent {
  position: relative;
  width: 150px;
  height: 150px;
}
.box .percent svg {
  position: relative;
  width: 150px;
  height: 150px;
  transform: rotate(270deg);
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.box .percent svg circle {
  position: relative;
  fill: none;
  stroke-width: 10;
  stroke: #f3f3f3;
  stroke-dasharray: 440;
  stroke-dashoffset: 0;
  stroke-linecap: round;
}
.box .percent .number {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #111;
}
.box .percent .number .title {
  font-size: 50px;
}
.box .percent .number .title span {
  font-size: 22px;
}
.box .text {
  padding: 10px 0 0;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}

.box.blue .percent .line-blue {
  stroke: #03a9f4;
	-webkit-animation: circleAnim 1s forwards;
	animation: circleAnim 2s forwards;
}
.box.red .percent .line-red {
  stroke: #ff3051;
	-webkit-animation: circleAnim 1s forwards;
	animation: circleAnim 3s forwards;
}
.box.green .percent .line-green {
  stroke: #1fd26c;
	-webkit-animation: circleAnim 1s forwards;
	animation: circleAnim 4s forwards;
}

@-webkit-keyframes circleAnim {
  0% {
    stroke-dasharray: 0 440;
  }
  99.9%, to {
    stroke-dasharray: 440 440;
  }
}
 
@keyframes circleAnim {
  0% {
    stroke-dasharray: 0 440;
  }
  99.9%, to {
    stroke-dasharray: 440 440;
  }
}
 
.line-0{stroke-dashoffset: calc(440 - (440 * 0) / 100) !important}

.line-1{stroke-dashoffset: calc(440 - (440 * 1) / 100) !important}

.line-2{stroke-dashoffset: calc(440 - (440 * 2) / 100) !important}

.line-3{stroke-dashoffset: calc(440 - (440 * 3) / 100) !important}

.line-4{stroke-dashoffset: calc(440 - (440 * 4) / 100) !important}

.line-5{stroke-dashoffset: calc(440 - (440 * 5) / 100) !important}

.line-6{stroke-dashoffset: calc(440 - (440 * 6) / 100) !important}

.line-7{stroke-dashoffset: calc(440 - (440 * 7) / 100) !important}

.line-8{stroke-dashoffset: calc(440 - (440 * 8) / 100) !important}

.line-9{stroke-dashoffset: calc(440 - (440 * 9) / 100) !important}

.line-10{stroke-dashoffset: calc(440 - (440 * 10) / 100) !important}

.line-11{stroke-dashoffset: calc(440 - (440 * 11) / 100) !important}

.line-12{stroke-dashoffset: calc(440 - (440 * 12) / 100) !important}

.line-13{stroke-dashoffset: calc(440 - (440 * 13) / 100) !important}

.line-14{stroke-dashoffset: calc(440 - (440 * 14) / 100) !important}

.line-15{stroke-dashoffset: calc(440 - (440 * 15) / 100) !important}

.line-16{stroke-dashoffset: calc(440 - (440 * 16) / 100) !important}

.line-17{stroke-dashoffset: calc(440 - (440 * 17) / 100) !important}

.line-18{stroke-dashoffset: calc(440 - (440 * 18) / 100) !important}

.line-19{stroke-dashoffset: calc(440 - (440 * 19) / 100) !important}

.line-20{stroke-dashoffset: calc(440 - (440 * 20) / 100) !important}

.line-21{stroke-dashoffset: calc(440 - (440 * 21) / 100) !important}

.line-22{stroke-dashoffset: calc(440 - (440 * 22) / 100) !important}

.line-23{stroke-dashoffset: calc(440 - (440 * 23) / 100) !important}

.line-24{stroke-dashoffset: calc(440 - (440 * 24) / 100) !important}

.line-25{stroke-dashoffset: calc(440 - (440 * 25) / 100) !important}

.line-26{stroke-dashoffset: calc(440 - (440 * 26) / 100) !important}

.line-27{stroke-dashoffset: calc(440 - (440 * 27) / 100) !important}

.line-28{stroke-dashoffset: calc(440 - (440 * 28) / 100) !important}

.line-29{stroke-dashoffset: calc(440 - (440 * 29) / 100) !important}

.line-30{stroke-dashoffset: calc(440 - (440 * 30) / 100) !important}

.line-31{stroke-dashoffset: calc(440 - (440 * 31) / 100) !important}

.line-32{stroke-dashoffset: calc(440 - (440 * 32) / 100) !important}

.line-33{stroke-dashoffset: calc(440 - (440 * 33) / 100) !important}

.line-34{stroke-dashoffset: calc(440 - (440 * 34) / 100) !important}

.line-35{stroke-dashoffset: calc(440 - (440 * 35) / 100) !important}

.line-36{stroke-dashoffset: calc(440 - (440 * 36) / 100) !important}

.line-37{stroke-dashoffset: calc(440 - (440 * 37) / 100) !important}

.line-38{stroke-dashoffset: calc(440 - (440 * 38) / 100) !important}

.line-39{stroke-dashoffset: calc(440 - (440 * 39) / 100) !important}

.line-40{stroke-dashoffset: calc(440 - (440 * 40) / 100) !important}

.line-41{stroke-dashoffset: calc(440 - (440 * 41) / 100) !important}

.line-42{stroke-dashoffset: calc(440 - (440 * 42) / 100) !important}

.line-43{stroke-dashoffset: calc(440 - (440 * 43) / 100) !important}

.line-44{stroke-dashoffset: calc(440 - (440 * 44) / 100) !important}

.line-45{stroke-dashoffset: calc(440 - (440 * 45) / 100) !important}

.line-46{stroke-dashoffset: calc(440 - (440 * 46) / 100) !important}

.line-47{stroke-dashoffset: calc(440 - (440 * 47) / 100) !important}

.line-48{stroke-dashoffset: calc(440 - (440 * 48) / 100) !important}

.line-49{stroke-dashoffset: calc(440 - (440 * 49) / 100) !important}

.line-50{stroke-dashoffset: calc(440 - (440 * 50) / 100) !important}

.line-51{stroke-dashoffset: calc(440 - (440 * 51) / 100) !important}

.line-52{stroke-dashoffset: calc(440 - (440 * 52) / 100) !important}

.line-53{stroke-dashoffset: calc(440 - (440 * 53) / 100) !important}

.line-54{stroke-dashoffset: calc(440 - (440 * 54) / 100) !important}

.line-55{stroke-dashoffset: calc(440 - (440 * 55) / 100) !important}

.line-56{stroke-dashoffset: calc(440 - (440 * 56) / 100) !important}

.line-57{stroke-dashoffset: calc(440 - (440 * 57) / 100) !important}

.line-58{stroke-dashoffset: calc(440 - (440 * 58) / 100) !important}

.line-59{stroke-dashoffset: calc(440 - (440 * 59) / 100) !important}

.line-60{stroke-dashoffset: calc(440 - (440 * 60) / 100) !important}

.line-61{stroke-dashoffset: calc(440 - (440 * 61) / 100) !important}

.line-62{stroke-dashoffset: calc(440 - (440 * 62) / 100) !important}

.line-63{stroke-dashoffset: calc(440 - (440 * 63) / 100) !important}

.line-64{stroke-dashoffset: calc(440 - (440 * 64) / 100) !important}

.line-65{stroke-dashoffset: calc(440 - (440 * 65) / 100) !important}

.line-66{stroke-dashoffset: calc(440 - (440 * 66) / 100) !important}

.line-67{stroke-dashoffset: calc(440 - (440 * 67) / 100) !important}

.line-68{stroke-dashoffset: calc(440 - (440 * 68) / 100) !important}

.line-69{stroke-dashoffset: calc(440 - (440 * 69) / 100) !important}

.line-70{stroke-dashoffset: calc(440 - (440 * 70) / 100) !important}

.line-71{stroke-dashoffset: calc(440 - (440 * 71) / 100) !important}

.line-72{stroke-dashoffset: calc(440 - (440 * 72) / 100) !important}

.line-73{stroke-dashoffset: calc(440 - (440 * 73) / 100) !important}

.line-74{stroke-dashoffset: calc(440 - (440 * 74) / 100) !important}

.line-75{stroke-dashoffset: calc(440 - (440 * 75) / 100) !important}

.line-76{stroke-dashoffset: calc(440 - (440 * 76) / 100) !important}

.line-77{stroke-dashoffset: calc(440 - (440 * 77) / 100) !important}

.line-78{stroke-dashoffset: calc(440 - (440 * 78) / 100) !important}

.line-79{stroke-dashoffset: calc(440 - (440 * 79) / 100) !important}

.line-80{stroke-dashoffset: calc(440 - (440 * 80) / 100) !important}

.line-81{stroke-dashoffset: calc(440 - (440 * 81) / 100) !important}

.line-82{stroke-dashoffset: calc(440 - (440 * 82) / 100) !important}

.line-83{stroke-dashoffset: calc(440 - (440 * 83) / 100) !important}

.line-84{stroke-dashoffset: calc(440 - (440 * 84) / 100) !important}

.line-85{stroke-dashoffset: calc(440 - (440 * 85) / 100) !important}

.line-86{stroke-dashoffset: calc(440 - (440 * 86) / 100) !important}

.line-87{stroke-dashoffset: calc(440 - (440 * 87) / 100) !important}

.line-88{stroke-dashoffset: calc(440 - (440 * 88) / 100) !important}

.line-89{stroke-dashoffset: calc(440 - (440 * 89) / 100) !important}

.line-90{stroke-dashoffset: calc(440 - (440 * 90) / 100) !important}

.line-91{stroke-dashoffset: calc(440 - (440 * 91) / 100) !important}

.line-92{stroke-dashoffset: calc(440 - (440 * 92) / 100) !important}

.line-93{stroke-dashoffset: calc(440 - (440 * 93) / 100) !important}

.line-94{stroke-dashoffset: calc(440 - (440 * 94) / 100) !important}

.line-95{stroke-dashoffset: calc(440 - (440 * 95) / 100) !important}

.line-96{stroke-dashoffset: calc(440 - (440 * 96) / 100) !important}

.line-97{stroke-dashoffset: calc(440 - (440 * 97) / 100) !important}

.line-98{stroke-dashoffset: calc(440 - (440 * 98) / 100) !important}

.line-99{stroke-dashoffset: calc(440 - (440 * 99) / 100) !important}

.line-100{stroke-dashoffset: calc(440 - (440 * 100) / 100) !important}


/*------------------------------------
  bar graph
------------------------------------*/
.bar-graph-wrap {
  position: relative;
  height: 700px;
  -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background-color: #fff;
  background: repeating-linear-gradient(-45deg, #eaf3f8, #eaf3f8 5px, #fff 5px, #fff 13px);
}
.bar-graph-wrap .graph {
  height: 45px;
  position: absolute;
  left: 0;
  border-radius: 0 4px 4px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px;
  -webkit-animation: graphAnim 2.5s forwards;
          animation: graphAnim 2.5s forwards;
}
.bar-graph-wrap .graph span {
	font-size: 14px;
	white-space: pre;
	background-color:#000000;
	color:#fff;
	padding: 0.2em;
}
@media screen and (max-width: 750px) {
  .bar-graph-wrap .graph span {
    font-size: 12px;
  }
}

.graph{
  background: #1fd26c;
}

.graph:nth-of-type(1){
  top: 7%;
}

.graph:nth-of-type(2){
  top: 14%;
}

.graph:nth-of-type(3){
  top: 21%;
}

.graph:nth-of-type(4){
  top: 28%;
}
.graph:nth-of-type(5){
  top: 35%;
}

.graph:nth-of-type(6){
  top: 42%;
}

.graph:nth-of-type(7){
  top: 49%;
}
.graph:nth-of-type(8){
  top: 56%;
}
.graph:nth-of-type(9){
  top: 64%;
}

.graph:nth-of-type(10){
  top: 71%;
}

.graph:nth-of-type(11){
  top: 78%;
}

.graph:nth-of-type(12){
  top: 85%;
}
.graph:nth-of-type(13){
  top: 92%;
}
table.detail_table{
	width: 80%;
    margin: 0 auto;
}

.image-wrapper {
    text-align: center;
    display: block;
}

.parallel-0{width:0% !important}

.parallel-1{width:1% !important}

.parallel-2{width:2% !important}

.parallel-3{width:3% !important}

.parallel-4{width:4% !important}

.parallel-5{width:5% !important}

.parallel-6{width:6% !important}

.parallel-7{width:7% !important}

.parallel-8{width:8% !important}

.parallel-9{width:9% !important}

.parallel-10{width:10% !important}

.parallel-11{width:11% !important}

.parallel-12{width:12% !important}

.parallel-13{width:13% !important}

.parallel-14{width:14% !important}

.parallel-15{width:15% !important}

.parallel-16{width:16% !important}

.parallel-17{width:17% !important}

.parallel-18{width:18% !important}

.parallel-19{width:19% !important}

.parallel-20{width:20% !important}

.parallel-21{width:21% !important}

.parallel-22{width:22% !important}

.parallel-23{width:23% !important}

.parallel-24{width:24% !important}

.parallel-25{width:25% !important}

.parallel-26{width:26% !important}

.parallel-27{width:27% !important}

.parallel-28{width:28% !important}

.parallel-29{width:29% !important}

.parallel-30{width:30% !important}

.parallel-31{width:31% !important}

.parallel-32{width:32% !important}

.parallel-33{width:33% !important}

.parallel-34{width:34% !important}

.parallel-35{width:35% !important}

.parallel-36{width:36% !important}

.parallel-37{width:37% !important}

.parallel-38{width:38% !important}

.parallel-39{width:39% !important}

.parallel-40{width:40% !important}

.parallel-41{width:41% !important}

.parallel-42{width:42% !important}

.parallel-43{width:43% !important}

.parallel-44{width:44% !important}

.parallel-45{width:45% !important}

.parallel-46{width:46% !important}

.parallel-47{width:47% !important}

.parallel-48{width:48% !important}

.parallel-49{width:49% !important}

.parallel-50{width:50% !important}

.parallel-51{width:51% !important}

.parallel-52{width:52% !important}

.parallel-53{width:53% !important}

.parallel-54{width:54% !important}

.parallel-55{width:55% !important}

.parallel-56{width:56% !important}

.parallel-57{width:57% !important}

.parallel-58{width:58% !important}

.parallel-59{width:59% !important}

.parallel-60{width:60% !important}

.parallel-61{width:61% !important}

.parallel-62{width:62% !important}

.parallel-63{width:63% !important}

.parallel-64{width:64% !important}

.parallel-65{width:65% !important}

.parallel-66{width:66% !important}

.parallel-67{width:67% !important}

.parallel-68{width:68% !important}

.parallel-69{width:69% !important}

.parallel-70{width:70% !important}

.parallel-71{width:71% !important}

.parallel-72{width:72% !important}

.parallel-73{width:73% !important}

.parallel-74{width:74% !important}

.parallel-75{width:75% !important}

.parallel-76{width:76% !important}

.parallel-77{width:77% !important}

.parallel-78{width:78% !important}

.parallel-79{width:79% !important}

.parallel-80{width:80% !important}

.parallel-81{width:81% !important}

.parallel-82{width:82% !important}

.parallel-83{width:83% !important}

.parallel-84{width:84% !important}

.parallel-85{width:85% !important}

.parallel-86{width:86% !important}

.parallel-87{width:87% !important}

.parallel-88{width:88% !important}

.parallel-89{width:89% !important}

.parallel-90{width:90% !important}

.parallel-91{width:91% !important}

.parallel-92{width:92% !important}

.parallel-93{width:93% !important}

.parallel-94{width:94% !important}

.parallel-95{width:95% !important}

.parallel-96{width:96% !important}

.parallel-97{width:97% !important}

.parallel-98{width:98% !important}

.parallel-99{width:99% !important}

.parallel-100{width:100% !important}

@-webkit-keyframes graphAnim {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
 
@keyframes graphAnim {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
 
/* table */
table.mma_records {
    margin: 0 auto;
    width: 100%;
    table-layout: fixed;
	box-shadow: 4px 2px 18px 0px darkgrey;
	text-align:center;
}

table.mma_records > tbody > tr {
    background: #fff !important;
    border-bottom: solid 1px black;
}

/* eye-catch */
.eye-catch-wrap{
	display:none;
}

/* all-record */
.fighter_record_row {
  margin-bottom: 1.5em;
}
@keyframes expand {
  from {width: 0%;}
  to {width: 100%;}
}
@media screen and (min-width: 768px) {
  @keyframes expand {
    from {width: 0%;}
    to {width: calc(100% - 75px);}
  }
}
.fighter_record_chart {
  overflow: hidden;
  width: 0%;
  animation: expand 1.5s ease forwards;
  display:flex;
  justify-content: center;
}
.fighter_record_row + .fighter_record_row .fighter_record_chart {
  animation-delay: .2s;
}
.fighter_record_row + .fighter_record_row + .fighter_record_row .fighter_record_chart {
  animation-delay: .4s;
}
.fighter_record_block {
  display: block;
  height: 100px;
  color: #fff;
  font-size: .75em;
  float: left;
  background-color: #ea6f6f;
  border-right: #fff 1px solid;
  position: relative;
  overflow: hidden;
  opacity: 1;
  transition: opacity, .3s ease;
  cursor: pointer;
}


.value {
  display: block;
  line-height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
/************************************
** バイクカタログ終わり
************************************/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	
	table.auction-data td {
		width: auto;
		max-width: none;
	}
	table.auction-data, thead, tbody, th, td, tr {
		display: block;
	}

	table.auction-data thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	table.auction-data tr {
		margin-bottom: 20px;
		border: 1px solid #ddd;
	}

	table.auction-data td {
		border: #d0d0d0 1px solid;
		position: relative;
	}

	table.auction-data td:before {
		position: absolute;
		left: 6px;
		content: attr(data-label);
		font-weight: bold;
	}
	
	.parts-cost-table {
        display: block;
        overflow-x: auto;
    }
	
	div.api-results > div {
        flex: 1 1 0;
        min-width: fit-content;
        max-width: 33.3333%;
    }
	
	.auction-table {
        display: block;
    }
    
    .auction-table thead {
        display: none;
    }
    
    .auction-table tbody td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
    }
    
    .auction-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 500;
        color: #005baa;
    }
    
    .auction-table img {
        max-width: 100%;
    }
	
	.auction-grid {
        grid-template-columns: 1fr;
    }
	
	.tax-info-box {
        padding: 1.5rem;
    }
    
    .tax-label,
    .tax-value {
        padding: 0.75rem;
    }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 320px){
  /*必要ならばここにコードを書く*/
	ul.lcp_catlist li{
		padding:14px;
	}
}


/* ヤフオクCSSの追記 */
/* 基本テーブルスタイル */
.auction-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

/* ヘッダースタイル（サイト6の鎌倉カラーを参考） */
.auction-table th {
    background: #181B39;
    color: #fff;
    padding: 1.2rem;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid #005baa;
}

/* データセルスタイル */
.auction-table  td {
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}

/* ホバー効果（サイト5参照） */
.auction-table  tr:hover {
    background-color: #f8f9fa;
}

/* 画像スタイル */
.auction-table img {
    max-width: 120px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* リンクボタンスタイル（サイト4参照） */
.auction-link {
    display: inline-block;
    padding: 8px 16px;
    background: #005baa;
    color: #fff!important;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 0.9rem;
}

.auction-link:hover {
    background: #003f6f;
    transform: translateY(-1px);
}

/* レスポンシブ対応（サイト3の手法を適用） */
@media (max-width: 768px) {
    .auction-table thead { display: none; }
    .auction-table td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
    }
    
    .auction-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 500;
        color: #005baa;
    }
    
    .auction-table td img {
        max-width: 100%;
    }
    
    .auction-table tr {
        margin-bottom: 1rem;
        display: block;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12);
        border-radius: 8px;
    }
}

/* 価格強調表示（サイト6のアイデアを参考） */
td[data-label="価格"] {
    color: #e74c3c;
    font-weight: 600;
}

.header, .header .site-name-text {
    color: #fff;
    font-family: serif;
}
/* 落ち着いた大人バイクスペックテーブル（motopetit 2025 最終版） */
.news-spec-table {
    margin: 2.8em 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0,0,0,0.12);
    background: #fff;
    border: 2px solid #e0e0e0;
}

.news-spec-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 16px;
    background: #fafafa;
    color: #222;
}

.news-spec-table th {
    background: #2c3e50;              /* 深みのあるネイビーグレー */
    color: #ffffff;
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    width: 40%;
    letter-spacing: 0.8px;
    font-size: 15.5px;
}

.news-spec-table td {
    padding: 16px 20px;
    background: #ffffff;
    color: #2c3e50;
    font-weight: 600;
    font-size: 17px;
    border-bottom: 1px solid #ecf0f1;
}

.news-spec-table tr:last-child td {
    border-bottom: none;
}

/* 薄いストライプで見やすい */
.news-spec-table tr:nth-child(even) td {
    background: #f8fbfc;
}

/* スマホ縦型カード（超見やすい） */
@media (max-width: 640px) {
    .news-spec-table th,
    .news-spec-table td {
        display: block;
        width: 100%;
    }
    .news-spec-table th {
        background: #2c3e50;
        border-radius: 10px 10px 0 0;
        font-size: 15px;
    }
    .news-spec-table td {
        border-radius: 0 0 10px 10px;
        font-size: 18px;
        padding: 18px 20px;
    }
    .news-spec-table tr {
        margin-bottom: 18px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }
}

/* 区切りなしの1行項目 */
.news-spec-table td.full-row {
    background: #ecf0f1 !important;
    text-align: center;
    color: #e74c3c;
    font-weight: 700;
    font-size: 16px;
}

/* テーブルがあるnews記事だけ適用される神CSS */
body.has-spec-table .news-spec-table {
    animation: fadeInUp 0.8s ease-out;
    margin: 3em auto;
    max-width: 800px;
    border: 3px solid #3498db;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

/* 左上に「SPEC」ラベル（高級カタログ風） */
body.has-spec-table .news-spec-table::before {
    content: "SPEC";
    position: absolute;
    top: -12px;
    left: 20px;
    background: #e74c3c;
    color: #fff;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 10;
}

/* 少し浮かせる＋滑らかな影 */
body.has-spec-table .news-spec-table table {
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* 登場アニメーション */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* スマホでもラベルが見えるように調整 */
@media (max-width: 640px) {
    body.has-spec-table .news-spec-table::before {
        font-size: 11px;
        padding: 5px 14px;
        left: 12px;
    }
}

/* テーブル全体をカッコよく */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    font-family:serif;
    margin: 2em 0;
}

table th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16ed: 18px 20px;
    text-align: left;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

table td {
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
    background-color: #ffffff;
}

/* ストライプ（ゼブラ） */
table tbody tr:nth-child(even) {
    background-color: #f8f9ff;
}

/* ホバーエフェクト */
table tbody tr:hover {
    background-color: #e3f2fd !important;
    transform: scale(1.01);
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}