@charset "UTF-8";

a{
text-decoration:none;
color:#003399;
}
a:visited{
text-decoration:none;
color:#660066;
}
a:hover{
text-decoration:underline;
}
body{
color:#222222;
font-family : sans-serif;
background:#F9F9F3;
}

div#container{
text-align:center;
border:1px solid #333333;
}
div#container2{
text-align:center;
border:1px solid #333333;
}

#box_table{
border-collapse: collapse;
margin:0px auto;
padding:none;
letter-spacing: -0.03em;
}

#box_table_report{

}
/* テーブルスタイル */
table {
  width: 100%;
  font-size: clamp(14px, 2vw, 24px);
}

table#main{
border-collapse: collapse;
padding:none;
word-break:break-all;
width:100%;
}
table#sub{
/*border-collapse: collapse;*/
border-collapse: collapse;
border:none;
padding:none;
word-break:break-all;
width:100%;
}
table#sub tr{
}

div#report_box{
text-align:right;
}

table#report{
text-align:left;
border-collapse: collapse;
padding:none;
word-break:break-all;
}

td{
padding:4px;
font-weight:bold;
text-align:center;
vertical-align:middle;
background-color:#FCFCFC;
border:1px solid #777777;
}
th{
padding:4px;
font-weight:bold;
text-align:center;
vertical-align:middle;
background-color:#FCFCFC;
border:1px solid #777777;
}
td.titlelist{
text-align:left;
}

td.nolist{
}

td.infolist{
}

td.limitlist{
}

tr.header_title td{
background-color:#222222;
color:#FFFFFF;
font-weight:bold;
text-align:left;
padding-top:5px;
padding-bottom:5px;
position: relative;  /* 相対位置の基準にする */
}

tr.header_title td a{
color:#FFFFFF;
}
tr.header_title td a:hover{
text-decoration:none;
}
tr.header_img td{
  padding: 0px;
}
.header_info{
border:1px solid #777777;
}
tr.header_info td{
text-align:center;
background-color:#B0D0E6;
font-weight:bold;
}

tr.header_description td{
text-align:left;
background-color:#FFFFF0;
font-weight:bold;
}

tr.header_description td table{
border-collapse: collapse;
border:2px solid #444444;
}

tr.header1 td{
text-align:left;
background-color:#B0D0E6;
font-weight:bold;
}

tr.header1_report td{
text-align:center;
background-color:#B0D0E6;
font-weight:bold;
}

.header2{
border:1px solid #777777;
}
tr.header2 td{
text-align:left;
background-color:#EEEEEE;
font-weight:bold;
}
tr.header2 th{
text-align:center;
background-color:#EEEEEE;
font-weight:bold;
}

td.menutab{
padding-top:10px;
padding-bottom:10px;
line-height:2.5;
}

td.menubody{
text-align:left;
font-weight:bold;
}

.header_tweet{
margin:5px 0;
}

tr.odai td{
text-align:left;
padding:30px 40px;
font-weight:bold;
font-size: 110%;
}

tr.odai td img,
tr.header_img td img {
  margin: 10px 0;
  width: 100%;
  height: auto;
  display: block;
  margin: 0px;
}

tr.postcell td{
padding:none;
background-color:#FFFFF0;
}

tr.postcell td table{
margin:10px 0px !important;
border:none;
width:100%;
}

tr.postform td{
border:none;
padding:3px;
font-weight:normal;
background-color:#FFFFF0;
}

td.form_l{
text-align:right;
width: 1%;
}

td.form_r{
text-align:left;
}

input.inputform{
color:#222222;
border:1px solid #777777;
width: 70%;
}

input.inputform2{
color:#222222;
border:1px solid #777777;
width:70%;
}

input.inputform3{
color:#222222;
border:1px solid #777777;
width:15%;
}

input.inputpass{
color:#222222;
border:1px solid #777777;
width:30%;
}

input.inputbodyform{
color:#222222;
border:1px solid #777777;
width:70%;
}

textarea{
width:70%;
height: 15vw;
}
input.inputfile{
margin:3px 0;
}

tr.postednamecell td{
font-weight:normal;
}

div.postedname{
text-align:left;
word-break:break-all;
}

div.postednum{
text-align:center;
}

textarea{
color:#222222;
border:1px solid #777777;
}

.pre_textarea{
color:#222222;
border:1px solid #777777;
}

input.button{
color:#222222;
background-color:#B0D0E6;
border:1px solid #777777;
}

form.inlineform{
display:inline;
margin-right:10px;
}

span.odaidata{
padding: 0 7px 0 2px;
margin-right:5px;
border-right:1px solid #888888;
font-weight:normal;
}

span.odaidata a{
color:#888888;
}

tr.footer_pagenav td{
text-align:left;
}

.limit{
color:#FF4500;
}

.rank{
}

.anaume{
color:#FF6347;
}

tr.boke_info td{
background-color:#EEEEEE;
}

.point_info{
}

th.point_info,th.nolist,th.infolist,th.limitlist {
  text-align: left;
  white-space: nowrap;
  width: 1%; /* 幅をできるだけ最小限に */
}

td.point_info,td.nolist,td.infolist,td.limitlist {
  text-align: center;
  white-space: nowrap;
  width: 1%; /* 幅をできるだけ最小限に */
  padding: 0.15rem;
}

td.boke_cell{
text-align:left;
padding:5px 10px;
}

td.boke_cell a{
color:#222222;
}

td.boke_cell2{
text-align:left;
background-color:#FFFFF0;
padding:20px 40px;
font-size:110%;
}

.meta{
font-size:80%;
font-weight:normal;
font-family : 'Tahoma','Verdana',sans-serif;
word-break:break-all;
}

div.bokebody{
padding:10px 0px 5px;
word-break:break-all;
}

.num1{
font-family : 'Tempus Sans ITC','Courier New','Courier',sans-serif;
color:#FF4500;
}
.num2{
font-family : 'Tempus Sans ITC','Courier New','Courier',sans-serif;
color:#FF4500;
font-size: 50%;
}

.box1{
padding:2px;
background-color:#FFFFF0;
border:1px solid #999999;
color:#222222;
font-weight:bold;
font-family : 'Tempus Sans ITC','Courier New','Courier',sans-serif;
}

.cmt_name{
font-size: clamp(9px, 1.5vw, 18px);
font-weight:normal;
color:#666666;
padding:0.5em 0 0;
}

.cmt_body{
font-size: clamp(9px, 1.5vw, 18px);
font-weight:normal;
color:#666666;
padding:0 1em;
overflow:auto;
}

tr.voterlist td{
font-size: clamp(9px, 1vw, 18px);
}

div.footer{
text-align:right;
}

div.footer_c{
clear:both;
font-family : 'Tahoma','Verdana',sans-serif;
}

.edit_l{
text-align:right;
font-size: clamp(9px, 1vw, 18px);
}

.edit_r{
text-align:left;
font-size: clamp(9px, 1vw, 18px);
}

.edit_chk{
text-align:center;
font-size: clamp(9px, 1vw, 18px);
}

.edit_r ul,ul.admin{
margin:3px;
padding-left:20px;
}

.edit_r span{
line-height:2;
}

.pagenav{
text-align:left;
}

.filepagenav .pagenav{
text-align:left;
font-size: clamp(9px, 1vw, 18px);
}

.pagenav a{
text-decoration:none;
color:#222222;
padding:2px;
margin:3px;
font-weight:normal;
border:1px solid #777777;
}

.pagenav a.current{
background:#B0D0E6;
}

#caution{
color:#FF0000;
font-size: clamp(9px, 1vw, 18px);
font-weight:normal;
}

table.cmt_box{
border-collapse:collapse;
margin:0 0 5px;
}

td.cmt_l{
border:none;
text-align:right;
margin-bottom:3px;
font-size: clamp(9px, 1vw, 18px);
font-weight:normal;
background-color:#EEEEEE;
border:1px solid #777777;
margin:0;
}

td.cmt_r{
border:none;
text-align:left;
margin-bottom:3px;
font-size: clamp(9px, 1vw, 18px);
font-weight:normal;
border:1px solid #777777;
margin:0;
}

div.wordbreak_cmt{
overflow:auto;
word-break:break-all;
}

.note{
color: #FF0000;
}

table.error{
margin:100px auto;
border:2px solid #222222;
border-collapse: collapse;
padding:none;
}

.error_header{
background-color:#222222;
font-weight:bold;
text-align:center;
color:#FFFFFF;
}

.error_body{
padding:8px;
font-weight:bold;
text-align:center;
background-color:#FCFCFC;
}

table.thanks{
margin:100px auto;
border:2px solid #222222;
border-collapse: collapse;
padding:none;
}

.thanks_body{
padding:8px;
font-weight:bold;
text-align:center;
background-color:#FCFCFC;
}

ul.rule{
margin:3px 0 3px 1.5em;
padding:0;
}

ul.rule li{
padding:0 0 3px;
}

/*追記*/
/*結果個別ページ*/
td.point_info2{
width:1px;
background-color:#FFFFF0;
}

td.boke_cell3{
text-align:left;
background-color:#FFFFF0;
padding:20px;
font-size:105%;
}
/*結果画面1位*/
tr.number1 td{
font-size: 120%;
}
tr.targetcolor td{
background-color: #ffffcc;
}
tr.number1color td{
background-color: #ffdbb7;
}
span#target,span#target a{
color: #ff7f7f;
}
/*total.php*/
table.total{
border-collapse: collapse;
padding:none;
word-break:break-all;
width:100%;
/*margin-bottom: 2%;*/
}
.total {
  white-space: nowrap;
  min-width: max-content;
}
#box_table2{
border-collapse: collapse;
margin:0px auto;
padding:none;
overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS対策 */
}
#box_table2 th,#box_table2 td{
font-size: 65%;
letter-spacing: -0.1em;
font-feature-settings: "palt";
}
#box_table2 th{
white-space: nowrap;
background-color: #e6dfe4;
padding: 1px;
}
.nowrap{
white-space: nowrap;
}
.border_line{
  border-top: 3px solid red;
}
.total_color{
  color: #F57856;
}
h2{
  margin: 0;
  padding: 0;
}
h1,h2{
  white-space: nowrap;
  background-color: #e6dfe4;
  margin-bottom: 2%;
  padding: 7px;
  border-bottom: 1px solid #777777;
  font-size: 70%;
}
.header_wrap {
  position: relative;
  height: 30px; /* 高さが明示されていないなら追加 */
  display: flex;
  align-items: center;
  padding: 0 10px;
}

/* ハンバーガーアイコン */
.hamburger {
  position: absolute;
  top: 50%;               /* 親の中央に配置 */
  right: 20px;            /* 右端に配置（必要に応じて調整） */
  transform: translateY(-50%); /* 自身の高さの半分ずらして完全中央 */
  font-size: 24px;        /* アイコンサイズ */
  color: white;
  cursor: pointer;
}
/* メニュー内の「閉じる」ボタン */
.menu .hamburger.close {
  position: absolute;
  top: 32px;
  right: 37px;
  color: white;
  font-size: 28px;
  z-index: 1001;
}

/* メニュー本体 */
.menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 50%;
  height: 100%;
  background-color: #707070;
  padding: 60px 20px;
  transition: right 0.3s ease;
  z-index: 1000;
}

.menu ul {
  list-style: none;
}

.menu li {
  margin: 20px 0;
  color: #000;

}

.menu a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
}

/* メニュー表示時 */
.menu.active {
  right: 0;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* レスポンシブ対応 */
@media screen and (min-width: 768px) {
  body {
  }

  #container {
width: 70%;
margin:0px auto;
  }
  #container2 {
margin:0px auto;
  }
 .footer{
 	width: 70%;
margin:0px auto;
 }

  th, td {
  }
}

.bgc{
  background-color: fff;
}
@media screen and (max-width: 480px) {
  table, th, td {
  }

  th, td {
font-size: clamp(12px, 1.6vw, 20px);
  }
  #box_table{
border-collapse: collapse;
margin:0px auto;
padding:none;
width: 100%;
}
input.inputform{
color:#222222;
border:1px solid #777777;
width: 90%;
}

input.inputform2{
color:#222222;
border:1px solid #777777;
width:90%;
}

input.inputform3{
color:#222222;
border:1px solid #777777;
width:35%;
}

input.inputpass{
color:#222222;
border:1px solid #777777;
width:30%;
}

input.inputbodyform{
color:#222222;
border:1px solid #777777;
width:90%;
}

textarea{
width:90%;
height: 20vw;
}
.cmt_box textarea,.cmt_box select{
width: 50%;
}
/*結果画面1位*/
tr.number1 td{
font-size: 103%;
}
.meta{
font-size:70%;
}
#box_table2 th,#box_table2 td{
font-size: 55%;
}
}