@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
html {
  height: 100%;
}
html, body {
  touch-action: manipulation;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.thread_c.new-post {
    animation: slideIn 0.5s ease-out;
}

p, h1, h2, h3, h5, h6,
.h1, .h2, .h3, .h5, .h6 {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "ヒラ
ギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,
sans-serif;
  font-weight: 400;
  line-height: 1.2;
}

div {
    display: block;
    unicode-bidi: isolate;
}
body,tr,td,th,input,textarea,select,option {
	margin:0;
	 -webkit-text-size-adjust: 100%; 
}

body{
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "ヒラ
ギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,
sans-serif;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  height: 100%;
  

}
.navbar-expand-md{
    background-color: #ffffff;
}


header {

	width: 100%;
}
footer {
	position: sticky;
	top: 100vh;
	width: 100%;
}
.b_color {
	background-color: rgba(91, 136, 181, 1);
}

a {
	text-decoration: none;
}

a:focus {
	outline: thin dotted
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block
}
button, input, select {
	overflow: auto;
}

.post-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.form-box {
	max-width: 540px;
	margin: 0 auto;
	text-align: center;
}

.fas_menu_horizontopicon,
.navbar-toggler {
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: flex;
    
}
#subNavContainer{

}
.fas_menu_horizontopicon li,
.navbar-toggler {
    list-style: none;
    margin: 0 10px 0 0;
    width: 60px;
    text-align: center;
    
}
.fas_menu_horizontopicon li:last-child,
.navbar-toggler {
    margin-right: 0px;
    
}
.fas_menu_horizontopicon li a,
.navbar-toggler {
    text-decoration: none;
    display: inline-block;
        font-size: 14px;
        font-weight: bold;
    line-height: 1.4;
    color: #d0772f;

}
.fas_menu_horizontopicon li a i,
.navbar-toggler i {
    display: block;
    font-size: 1.3em;
    line-height: 1em;
    margin-bottom: 5px;
    
}
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none; /* フォーカス時のアウトラインを非表示 */
    box-shadow: none; /* ボックスシャドウを非表示 */
}

.delete-btn {
   font-size: 14px;
  color: #4f4f4f;
  position: absolute;
  right: 10px; /* 右から10pxだけ左に調整 */
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  border: 1px solid #868686;
  border-radius: 0.375rem;
}
.delete-btn:hover {
background: #fda2a4;
}
    .btn-1 {
        color: #ffffff;
        background-color: #3366cc;
        border-color: #2851a4;
    }
    .btn-1:hover {
        color: #ffffff;
        background-color: #244791;
        border-color: #1c366c;
    }
    .btn-1:focus,
    .btn-1.focus {
        box-shadow: 0 0 0 .2rem rgba(104, 167, 219, 0.5)
    }
    .btn-outline-1 {
        color: #7cc;
        background-color: transparent;
        background-image: none;
        border-color: #7cc
    }
    
    .btn-outline-1:hover {
        color: #222;
        background-color: #d68787;
        border-color: #7cc
    }
    
    .btn-outline-1:focus,
    .btn-outline-1.focus {
        box-shadow: 0 0 0 .2rem rgba(222, 132, 101, 0.5)
    }

.form_d {
    max-width: 400px; /* Slightly smaller form */
    margin: 15px auto; /* Reduced margin */
    background: #fafafa;
    padding: 15px;
    border-radius: 5px;
}

.form_d label {
    display: block;
    margin-top: 6px;
    margin-bottom: 6px; /* Smaller margin */
    color: #8d4a01;
}

.form_d input[type="text"],
.form_d input[type="password"],
.form_d input[type="no"],
.form_d textarea {
    width: 100%;
    padding: 6px; /* Smaller padding */
    margin-bottom: 10px; /* Smaller margin */
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 3px; /* Slightly smaller border-radius */
}

.form_d input[type="password"],
.form_d input[type="no"] {
    width: 50px; /* Adjusted width */
}

.form_d input[type="submit"],
.form_d input[type="reset"] {
    background-color: #ef890c;
    color: #fff;
    padding: 8px 12px; /* Smaller padding */
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.form_d input[type="submit"]:hover,
.form_d input[type="reset"]:hover {
    background-color: #45a049;
}

          .rainbow {
            font-weight: bold;
            font-size: 2em;
            position: relative;
            display: inline-block;
            animation: rainbowGlow 2s infinite;
        }

        @keyframes rainbowGlow {
            0% { color: red; }
            14% { color: orange; }
            28% { color: yellow; }
            42% { color: green; }
            57% { color: blue; }
            71% { color: indigo; }
            85% { color: violet; }
            100% { color: red; }
        }



        .rainbow.confetti .particle {
            position: absolute;

            border-radius: 50%;
            background-color: transparent;
            animation: confetti 4s infinite ease-in-out;
        }

        /* 複数のランダムなカラーを指定 */
        .rainbow.confetti .c1 { background-color: rgba(255, 0, 0, 0.8); }
        .rainbow.confetti .c2 { background-color: rgba(255, 165, 0, 0.8); }
        .rainbow.confetti .c3 { background-color: rgba(255, 255, 0, 0.8); }
        .rainbow.confetti .c4 { background-color: rgba(0, 128, 0, 0.8); }
        .rainbow.confetti .c5 { background-color: rgba(0, 0, 255, 0.8); }
        .rainbow.confetti .c6 { background-color: rgba(75, 0, 130, 0.8); }
        .rainbow.confetti .c7 { background-color: rgba(238, 130, 238, 0.8); }

        @keyframes confetti {
            0% {
                opacity: 0;
                transform: translateY(0%) rotate(0deg);
            }
            10% {
                opacity: 1;
            }
            35% {
                transform: translateY(-800%) rotate(270deg);
            }
            80% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: translateY(2000%) rotate(1440deg);
            }
        }

.text {
    float: right;
    margin: 5px;

}
hr {
    padding: 3px;
 	border-width: 1px 0 0 0;
 	border-style: dashed; 
 	border-color: #4d4d4d;

}
blockquote{
      background: #fafafa;
    margin: 0.5em auto;
      font-size: 16px;
}




a:link {
 color: #bc3f3f;
 text-decoration: none;
}

a:visited {
 color: #c44f4f;
 text-decoration: none;
}

a:hover {}

a:active {
 color: #c44f4f;
 text-decoration: underline;
}




.cmt{ 
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
background: #ffffff;
}
.tree_p {
    overflow: visible;
    max-width: 680px; /* Slightly smaller form */
	margin: 10px auto;
      background: #f8f8f8;
    padding: 10px;
    border-radius: 1px;

}

.thread_b {
    overflow: visible;
    max-width: 680px; /* Slightly smaller form */
	margin: 0 auto;
    padding: 10px;
    border-radius: 1px;
}

blockquote, q {
	margin-left:8px;
	margin-right:8px;
	background: #f9f9f9;
	quotes: none
}

blockquote:after, blockquote:before, q:after, q:before {
	content: none
}
.res { 
border-bottom: 1px solid #cccccc;
position: relative; 
	padding: 4px 5px 5px 5px;

	display: block;
    background-color: #fafafa;
    
}
.res2 { 
position: relative;
border-bottom: 1px solid #cccccc;
	padding: 4px 5px 5px 5px;
	display: block;
    background-color: #fafafa;
}

.comment { 
	padding: 8px 8px 8px 8px;

	        font-size: 16px;
	              margin: 0px;
}
.comment a { 
color:#0267ff;
}
.date { 
color:#808080;
	        font-size: 14px;
	padding: 4px 8px 6px 8px;
	display: block;

}


.subm_1 ul {
  display: flex;
  gap: 8px; /* li要素間の間隔を調整 */
  padding: 0;
     margin-top: 10px;
          margin-bottom: 0;
  list-style: none;
}

.subm_1 ul li a {
font-weight: bold;
  border: 1px solid #ddd;
  border-radius: 2px;
  font-size: 14px;
padding: 5px 9px;
  text-decoration: none;
  color: #333;
  background: linear-gradient(to bottom, #fbfbfb 0%, #F5F5F5 100%);
  text-align: center;
  display: inline-block;
}

.subm_1 ul li a:hover {
  background: #eee;
}




.head_line{
    width: 100%;
	background: #e7a365;
	font-size: 95%;
  display: block;
    z-index: 3;
    transition: .5s;
}
.head_line.hide{
    transform: translateY(-100%);
}
.head_line ul{
	width: 100%;
	margin: 0;
	height: calc(1em + 20px);
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	padding-left: 0;
}
.head_line ul li{
    text-align: center;
	width: 100%;
	animation : headLine 32s linear infinite;
	position: absolute;
	top: 0;
	background: #e7a365;
	z-index: 3;
	opacity: 0;
    visibility: hidden;
	line-height: 1;
	list-style: none;
}
.head_line ul li::before{
	content: '';
	width: 100%;
	height: 50px;
	position: absolute;
	top: 0;
	left: 0;

}
@keyframes headLine{
	from {
        opacity: 1;
        visibility: visible;
    }
	25% {
        opacity: 1;
        visibility: visible;
    }
	26% {
        opacity: 0;
        visibility: hidden;
    }
	99% { opacity: 0;}
	100% { opacity: 1;}
}
.head_line ul li:nth-of-type(2){
	animation-delay: 8s;
	z-index: 2;
}
.head_line ul li:nth-of-type(3){
	animation-delay: 16s;
	z-index: 1;
}
.head_line ul li:nth-of-type(4){
	animation-delay: 24s;
	z-index: 0;
}
.head_line ul li a{
	padding: 10px 15px;
	color: #FFF;
		font-weight: bold;
	display: block;
	transform: translateX(100%);
	animation : listScroll 32s linear infinite;
	text-decoration: none;
	transition: .5s;
}
.head_line ul li:nth-of-type(2) a{
	animation-delay: 8s;
}
.head_line ul li:nth-of-type(3) a{
	animation-delay: 16s;
}
.head_line ul li:nth-of-type(4) a{
	animation-delay: 24s;
}
@keyframes listScroll{
	from { transform: translateY(100%);}
	4% { transform: translateX(0);}
	35% { transform: translateX(0);}
	100% { transform: translateY(100%);}
}
@media screen and (max-width: 300px){
     .head_line .hl_title{
         padding: 10px 15px;
     }
     .head_line ul li{
         padding-left: 0;
         animation : headLineSP 60s linear infinite;
     }
     @keyframes headLineSP{
         from {
             opacity: 1;
             transform: translateX(100%);
             visibility: visible;
         }
         25% {
             opacity: 1;
             transform: translateX(-120%);
             visibility: visible;
         }
         26% {
             opacity: 0;
             visibility: hidden;
         }
         99% { opacity: 0;}
         100% {
             opacity: 1;
             transform: translateX(100%);
         }
     }
     .head_line ul li:nth-of-type(2){
         animation-delay: 15s;
     }
     .head_line ul li:nth-of-type(3){
         animation-delay: 30s;
     }
     .head_line ul li:nth-of-type(4){
         animation-delay: 45s;
     }
     .head_line ul li::before{
         content: none;
     }
     .head_line ul li a{
         padding: 10px 0;
         display: inline-block;
         animation : none;
         transform: none;
     }
}

/* pop */
.popres {
  max-width: 620px; 
}


.center{ text-align:center; }
.right{ text-align:right; }
.left{ text-align:left;margin:0 0 3px; }
.nowrap{ white-space:nowrap; }
.b{font-weight:bold;}
input[type=submit]:hover { opacity:0.5;}

.container{
	max-width:680px;
}

/* 記事表示部 */
.listtable2{
	margin: 0 auto;
	max-width:680px;
	background-color: #f8f8f8;
	
}
.new{
	 font-size: 10px;
	font-weight: bolder;
	color: #F44336; 
	    display: inline-block;
    vertical-align: middle;
}
.name_h{
	 font-size: 14px;
	font-weight: bolder;
	    display: inline-block;
    vertical-align: middle;
}
.thread_title {
	background-color: #f6f6f6;
	border-bottom: 3px solid #9f620f;

	top: 0;
	z-index: 100;
	padding: 6px;
			font-weight: bold;

	margin: 0;
	margin-bottom: 0;
}
.sub_title {
	background-color: #f6f6f6;
	border-bottom: 3px solid #9f620f;
		padding: 10px;
			margin-bottom: 0;
			font-weight: bold;
				font-size: 14px;
}
.bdr{
	background-color: #f6f6f6;

		padding: 5px;
			margin-bottom: 0;
}

.thread_title  small{

	color: #2b9aff; 
	font-size: 12px;
	line-height: 1;
}

td { font-size: 14px; }
big { font-size: 15px; }
small { font-size: 13px; color: #888; }

.pset, .res_table1 { background-color: #ffffff; }

.th01, .thread_table1 { background-color: #ffffff; }

.thread_title_res {
	background: linear-gradient(to right, #e6e6e6, #e6e6e6, #fafafa);
	margin-top: -2px;
	padding: 10px;
}

.th01 {
	clear: both;
	width: 100%;
	border-spacing: 0;
}

span.name_b { color: #424242; font-size: 16px; font-weight: normal;}
span.name_c { color: #252525; font-size: 15px; }
span.name_t { color: #171717; font-size: 15px; font-weight: bold;}
span.ed_a a { color: #bc3f3f; font-size: 16px; vertical-align: middle; font-weight: bold; }
span.ed_a2 a { color: #383838; font-size: 16px; vertical-align: middle; font-weight: bold; }
span.num_b { 
    display: inline-block;
    vertical-align: middle;
    min-width: 20px;
    font-size: 16px;
    color: #424242;
}

span.num_d { vertical-align: middle; font-size: 14px; color: #ffffff; }
span.num_e { vertical-align: middle; font-size: 14px; color: #2c2c2c; }
span.num_c a { font-size: 15px; color: #0267ff; }

.th01td-no {
    width: 45px;
    text-align: center;
    background: #56a3dc;
    border-bottom: 2px solid #dfa453;

}

.res01td-no { 
	width: 45px;
    text-align: center;
	background: #ffffff; 
	border-bottom: 1px solid #999999;
}

.th01td {
    overflow: hidden;
    text-align: left;
	padding:3px 3px 3px 5px;
    border-top: 1px solid #e4834e;
    border-bottom: 1px solid #e4834e;
    border-left: 10px solid #e4834e;
}
/* 背景アイコンのスタイル */
.th01td::before, .res01td::before {
    content: ""; /* 初期値は空 */
    position: absolute; /* 絶対位置指定 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央に配置 */
    font-family: "Font Awesome 6 Free"; /* Font Awesomeのフォントを指定 */

    font-size: 10rem; /* アイコンのサイズ（大きくする） */
    opacity: 1;     /* アイコンをうっすら表示 */
    z-index: 1000;      /* テキストの背後に表示 */
    color: #ccc;      /* アイコンの色 */
}
.th02, .res02 {
    float: left;
line-height: 1.5em;
}

.th02 a, .res02 a {
    display: inline-block;
    vertical-align: middle;
line-height: 1.8em;
}

.th03, .res03 {
    float: right;
    text-align: right;
line-height: 1.5em;
}

.hidden_res {
    clear: both;
    width: 100%;
    border-spacing: 0;
    vertical-align: middle;
    text-align: center;
    background: #f4f4f4;
    font-size: 13px;
    border-left: 10px solid #e0cbcb;
    border-bottom: 1px solid #e7e7e7;
}

.res01 {
    clear: both;
    width: 100%;
    border-spacing: 0;
}

.res01td {

    overflow: hidden;
    text-align: left;
	padding:3px 3px 3px 5px;

    border-bottom: 1px solid #c1c1c1;
    border-left: 10px solid #e0cbcb;
}



.upname { font-size: 100%; color: #5b5b5b; }

.update {
    font-size: 100%;
    white-space: nowrap;
    margin: 0;
    padding: 3px;
    display: inline-block;
    min-width: 5em;
    text-align: center;
    color: #0066cc;
}
.color_icon {
		color:#f3815a;
	    vertical-align: middle;
}
.nav-item a {
		color:#de6b1f;
}
input[type=text],input[type=tel],input[type=email],input[type=button],input[type=submit],input[type=password],input[type=reset], textarea{ -webkit-appearance: none; }




/* ページネーションの全体的なスタイル */
.pagination {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
	margin-bottom: 1rem;
	list-style: none; 
	padding-left: 0; 
}

.pagination-sm .page-item .page-link {
	font-size: 0.875rem;
	padding: 0.375rem 0.75rem;
}
.pagination .page-item.active .page-link {
	background-color: #ff8c42; /* オレンジ色に変更 */
	border-color: #ff8c42; /* オレンジ色に変更 */
	color: white;
}
.pagination .page-item .page-link {
	color: #ff8c42; /* オレンジ色に変更 */
	border: 1px solid #ffcc99; /* オレンジ色に変更 */
	border-radius: 0.25rem;
	padding: 0.375rem 0.75rem;
	text-decoration: none;
}
.pagination .page-item .page-link:hover {
	background-color: #ffcc99; /* オレンジ色に変更 */
	color: white;
}
.pagination .page-item.disabled .page-link {
	background-color: #ffe5cc; /* オレンジ色に変更 */
	border-color: #ffcc99; /* オレンジ色に変更 */
	color: #b35900; /* オレンジ色に変更 */
}
.pagination .page-item .page-link {
	background-color: transparent;
	border: none;
	color: #b35900; /* オレンジ色に変更 */
	cursor: default;
}

/* ページリンクの中央配置 */
.page-item {
	margin: 0 2px;
}



.title_logo{
	   background: #E8C6A7;
	padding: 0.375rem 0.75rem;
 	text-align: center;
 	
}
.fit-picture{
filter:drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.2));
 	
}
.cright {
    text-align: center;
    font-size: 0.875rem; /* small */
    color: #555;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cright a {
    color: #007bff;
    text-decoration: none;

}

.cright a:hover {
    text-decoration: underline;
}

.cright small {
    display: block;
    margin-top: 5px;
    font-size: 0.75rem;
}


/* レスポンシブ設定  */

@media screen and (max-width:905px){
.listtable1, .listtable2, .headertable, .footer{width:100%;}
}

@media screen and (max-width:705px){
.upname{font-size:80%;}
.update{font-size:80%;font-weight: bold;}
.th01td{

	padding:1px 1px 1px 5px;
}
.res01td{
	padding:1px 1px 1px 5px;
}
span.num_b { 
  font-size: 11px;
  
}
span.name_b { 
font-weight: bold;
font-size: 13px;
    vertical-align: middle;
}
    .name-btn {
        font-weight: bold !important;  /* !importantを使って優先度を高くする */
    }
span.ed_a { 
font-size: 14px;
font-weight: bold;
}
.delete-btn {
   font-size: 11px;
}
}
@media screen and (max-width:450px){

}