@charset "utf-8";


/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tfoot, thead, table, tbody, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

/* 全体
------------------------------------------------------------*/

body{
	color:#333;
	font:17px verdana,"游ゴシック","ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	line-height:1.5;
	background:#fff;
	-webkit-text-size-adjust: none;
	margin:auto;
	border-style: solid; 
}


@media screen and (max-width: 736px) {
    body {

        padding: 0 10px;
        display: block;
        font:14px verdana,"游ゴシック","ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
    }
}







.contents {
width:1100px;
margin: 0px auto 0 auto;
}




@media only screen and (max-width: 768px) {
.contents {
width:auto;
}
}



.sp2 {
    display: none !important;
}
@media only screen and (max-width: 768px) {
    .sp2 {
        display: block !important;
        width: 100%;
    }
}
.pc2 {
    display: inline-block !important;
}
@media only screen and (max-width: 768px) {
    .pc2 {
        display: none !important;
    }
}

.image{
	margin-top: 100px;
}

.image1{
	margin-top: 50px;
}




/* リンク設定
------------------------------------------------------------*/
a{color:#3769a5;text-decoration:none;}
a:hover{color:#054b83;}
a:active, a:focus{outline:0;}


/* 文字、見出し
------------------------------------------------------------*/

p{
	margin: 20px;
}

@media only screen and (max-width: 768px) {
    p{
	margin: 10px 0 ;
}
}


.article {
  padding: 2em 0 0 0;
}


h2 {
  position: relative;

  padding: 0.25em 0;
  font-size:20px;
  font-weight:bold;
}

h2:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
  background: linear-gradient(to right,  #3769a5, #b2c3ff);
}



/*************
テーブル
*************/

.ranktable{
	display: flex;

}

@media only screen and (max-width: 768px) {
    .ranktable{
	display: block;

}
}

table.tbl-r05 {
	margin: 10px 10px 100px 10px;
	 width: 100%;
	 text-align: center;
	 border-collapse: collapse;
	 border-spacing: 0;
	 border-style: solid; 
}




@media only screen and (max-width: 768px) {
    table {
	margin: 0px;
	 width: 100%;
	 text-align: center;
	 border-collapse: collapse;
	 border-spacing: 0;
	 border-style: solid; 
}
}



@media screen and (max-width: 768px) {
  table.tbl-r05 {
  	margin: 0px;
	 width: 100%;
    margin:auto;
  }
  .tbl-r05 .thead {
    display: none;
  }
  .tbl-r05 tr {
    width: 100%;
  }
  .tbl-r05 td {
    display: block;
    text-align: center;
  }
  .tbl-r05 td:first-child {
    background: linear-gradient(135deg, #1d262e 0%, #183d5c 100%);
    color: #fff;
    font-weight: bold;
    text-align: center;
  }
  .tbl-r05 td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 10px;
  }
}


th {
 padding: 10px;
 background: linear-gradient(135deg, #1d262e 0%, #183d5c 100%);
 color:#fff;
 border: solid 1px #778ca3;
 vertical-align:middle;
 text-align:center;
 border-style: solid; 
}

td {
 padding: 10px;
 border: solid 1px #778ca3;
 border-style: solid; 
}


.prize td {
	vertical-align:middle;
}

.date{
	width: 90px;text-align:center;
}

.prizeto{
	width:15%;
	text-align:center;
}

.message{
	width:58%;
	text-align:left;
}

.photo{
	text-align:center; middle;
}

.rank{
	text-align:center;
}

.rank0{
	text-align:center;
  background: #ff1493!important;
  color:#fff;
  font-weight:bold;
    animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}


.rank1{
  background: linear-gradient(45deg, #DAAF08 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #DAAF08 90% 100%)!important;
  text-align:center;
  color:#fff;
  font-weight:bold;
  animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}


.rank2{
	text-align:center;
   background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%)!important;
  color:#fff;
  font-weight:bold;
    animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}

.rank3{
	text-align:center;
  background: linear-gradient(45deg, #a57e65 0%, #a57e65 45%, #f3cfb8 70%, #a57e65 85%, #a57e65 90% 100%)!important;
  color:#fff;
  font-weight:bold;
    animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}

.section{

	text-align:center;
}

.personname{
	text-align:center;
}

  td.personname::after {
    content: "さん"; /* 単位を表示 */
    display: inline-block; /*  inline-blockで横並び */
    margin-left: 5px; /* 調整 */
  }

.age{
	text-align:center;
}

.place{
	text-align:center;
}

.count{
	text-align:center;
}

/* スマホ表示時 (例: 768px以下) */
@media (max-width: 768px) {
  td.count {
    display: block; /* セルをブロック要素化 */
    box-sizing: border-box; /* パディングを幅に含める */
  }

  td.count::after {
    content: "File"; /* 単位を表示 */
    display: inline-block; /*  inline-blockで横並び */
    margin-left: 5px; /* 調整 */
  }

}


.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:20px 0;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #4169e1;
  display: block;
  order: -1;
}
.tab-label {
  color: White;
  background: LightGray;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
  background: #4169e1;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 20px 40px;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
}

@media screen and (max-width: 768px) {
.tab-switch:checked+.tab-label+.tab-content {
  padding: 20px 20px;
}
}

/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}
.line {
  text-decoration: underline;
}

@media screen and (max-width: 768px)
{.tab-label {
  font-size: 80%;
}}



/* 上に戻るボタン */
.pagetop {
	color: #fff;
	background-color: rgba(0,0,0,0.3);
	text-decoration: none;
	display: none;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	font-size: 1.5rem;
	width: 3.3rem;
	height: 3.3rem;
	line-height: 3.3rem;
	border-radius: 3.3rem;
	text-align: center;
	cursor: pointer;
}

.pagetop:hover {
	color: #fff !important;
	background-color: #4169e1;
	text-decoration: none;
}


-----------

button {
  padding: 0;
  font-family: inherit;
  appearance: none;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

/* ボタンのスタイル */
.buttonIconText02 {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 320px;
  height: 40px;
  padding: 8px 64px 8px 8px;
  font-family: sans-serif;
  font-size: 16px;
  color: #4169e1;
  text-align: center;
  overflow-wrap: anywhere;
  background-color: none;
  border-radius: 20px; /* (buttonの高さ / 2) の値 */
  border: 2px solid #4169e1;
}

.buttonIconText02__reverse {
  flex-direction: row-reverse;
  padding: 8px 8px 8px 64px;
}

.buttonList {
    display: flex;
    margin: 20px 0 30px 0;
    flex-wrap: wrap;
    gap: 45px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

@media screen and (max-width: 768px)
{
.buttonIconText02 {
  width: 70%;
  height: 30px;
}
.buttonIconText02__reverse {
  flex-direction: row-reverse;
  padding: 8px 8px 8px 40px;
}

.buttonList {
    gap: 10px;

}

}




.buttonIconText02_icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  aspect-ratio: 1;
  overflow: hidden;
}

.buttonIconText02_text {
  flex-shrink: 1;
  width: 100%;
}



@media (any-hover: hover) {
  .buttonIconText02 {
    transition: background-color 0.2s;
  }

  .buttonIconText02_icon {
    transition: transform 0.2s;
  }

  .buttonIconText02:hover {
    background-color: #99ccff;
  }

  .buttonIconText02:hover .buttonIconText02_icon {
    transform: translateX(4px);
  }

  .buttonIconText02:hover .buttonIconText02_icon__left {
    transform: translateX(-4px);
  }
}

/* 左矢印アイコンのスタイル */
.iconArrowLeft {
  rotate: 180deg;
}