/* 基本的なスタイル */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff;
color: #333;
transition: background-color 0.3s ease, color 0.3s ease;
}

.dark-mode {
background-color: #000 !important;
color: #f0f8ff !important;
}

/* 特別なアイテムのスタイル /
.special-item {
padding: 5px;
margin: 5px 5px 20px;
border: 1px solid #ccc;
background-color: #f0e8f9;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out, background-color 0.3s ease;
overflow: hidden; / 子要素のはみ出しを防ぐ */
}

.special-item .mb30 {
font-size: 0.9em;
}

/* ヘッダーのスタイル /
header {
display: flex;
justify-content: flex-start; / ロゴを左寄せ */
align-items: center;
background-color: #a672ff5c;
color: #fff;
position: fixed;
top: 0;
width: 100%;
height: 60px;
z-index: 1000;
box-sizing: border-box;
padding: 0 1rem;
}

header .logo {
display: flex;
align-items: center;
}

header .logo img {
max-width: 200px;
height: auto;
display: block;
max-height: 48px;
}

@media (max-width: 768px) {
header {
height: 50px;
padding: 0 0.5rem;
}

header .logo img {
    max-width: 150px;
    max-height: 36px;
}

}

/* メインコンテンツのスタイル */
main {
padding: 2rem;
margin-top: 70px;
}

.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

hr {
border: 1px solid #ccc;
margin: 20px 0;
}

a {
color: #2eeb21;
text-decoration: none;
}

.BLACK {
color: #000;
}

.White {
color: #fff;
text-decoration: none;
}

/* フッターのスタイル */
footer {
background-color: #4d4d4d;
color: #fff;
padding: 1rem;
font-size: 0.9em;
position: relative;
bottom: 0;
width: auto;
}

footer .footer-content {
line-height: 2.1;
color: #fff;
margin: 0 auto;
}

footer .footer-content a {
display: block;
margin-bottom: 10px;
color: #fff;
text-decoration: none;
}

footer .footer-content p {
margin: 10px 0;
line-height: 2.1;
}

/* ボタンコンテナのスタイル */
#buttonContainer {
display: flex;
gap: 10px;
margin-top: 10px;
}

#copyButton,
#tweetButton {
font-size: 20px;
padding: 5px 0;
width: 50%;
background-color: #808080;
color: #fff;
cursor: not-allowed;
}

#copyButton.enabled,
#tweetButton.enabled {
background-color: #4b51ff;
color: #fff;
cursor: pointer;
}

/* ツールボックスのスタイル */
.ojisan-tool {
font-family: Arial, sans-serif;
line-height: 1.5;
background-color: #f9f9f9;
margin: 0;
padding: 20px;
color: #333;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.ojisan-tool h2,
.ojisan-tool h4 {
color: #333;
border-left: 4px solid #3f51b5;
padding-left: 8px;
margin-bottom: 10px;
}

.ojisan-tool p {
background-color: #fff;
border-left: 3px solid #ffca28;
padding: 12px;
margin-bottom: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ojisan-tool ol {
padding-left: 20px;
margin-bottom: 15px;
}

.ojisan-tool ol li {
margin: 10px 0;
}

/* アコーディオンのスタイル */
.accordion {
background-color: #ffee6c;
color: #444;
cursor: pointer;
padding: 15px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: background-color 0.2s ease;
}

.accordion:hover {
background-color: #ffee6cc8;
}

.accordion-content {
padding: 0 15px;
display: none;
overflow: hidden;
background-color: #f9f9f9;
}

/* スクロールボタンのスタイル */
#button-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
display: none;
}

#scroll-to-top-button {
background-color: #8170ff;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
}

#scroll-to-top-button.show {
display: flex;
}

#scroll-to-top-button:not(.show) {
display: none;
}

/* コンテナとテキストのスタイル */
.container {
background-color: #f7f7f7;
padding: 20px;
margin: 0 auto;
}

.fontBold {
font-weight: bold;
}

.font15 {
font-size: 1.5em;
}

.mb30 {
margin-bottom: 30px;
font-size: 0.9em;
}

ul.mb30 {
color: #555;
line-height: 1.5;
margin-bottom: 30px;
font-size: 0.9em;
}

p {
color: #555;
line-height: 1.5;
}

.listDot {
margin-left: 20px;
}

/* テーブルのスタイル */
.basicTable {
border-collapse: collapse;
width: 100%;
max-width: 100%;
overflow-x: auto;
display: block;
}

.basicTable table {
width: 100%;
table-layout: auto;
}

.basicTable th,
.basicTable td {
border: 1px solid #ddd;
border-right: none; /* 右側のボーダーを削除 */
padding: 8px;
text-align: left;
vertical-align: top;
word-wrap: break-word;
}

.basicTable th {
background-color: #f0f0f0;
font-weight: bold;
}

.basicTable td ul.indent01 {
margin: 0;
padding-left: 20px;
}

.basicTable tr:hover {
background-color: #e9e9e9;
}

@media screen and (max-width: 600px) {
.basicTable {
font-size: 0.9em;
}

.basicTable th,
.basicTable td {
    padding: 6px;
    border-right: none; /* 右側のボーダーを削除 */
}

}

/* プロフィールテーブルのスタイル */
.profile-table-container {
max-width: 600px;
width: 100%;
margin: 20px auto;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
font-family: Arial, sans-serif;
}

.profile-table {
width: 100%;
border-collapse: collapse;
}

.profile-table td {
padding: 12px 15px;
text-align: left;
font-size: 16px;
border-bottom: 1px solid #e0e0e0;
background-color: #f0e8f9; /* Matches special-item background */
color: #555;
border-right: none;
}

.profile-table tr:nth-child(even) td {
background-color: #f7f0ff;
}

.profile-table tr:hover td {
background-color: #e6d9f5;
}

.profile-table td a {
color: #555;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 16px;
display: block;
}

.profile-table td a:hover {
background-color: #e6d9f5;
}

@media screen and (max-width: 600px) {
.profile-table-container {
margin: 10px;
}

.profile-table td {
    padding: 10px;
    font-size: 14px;
}

}

/* ボタンのスタイル (新しく追加) */
.ojisan-tool.button {
background-color: #3f51b5;
color: #fff;
border: none;
padding: 10px 20px;
margin-right: 10px;
cursor: pointer;
font-size: 1em;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, transform 0.1s ease;
}

.ojisan-tool.button:hover {
background-color: #303f9f;
transform: translateY(-2px);
}

.ojisan-tool.button:active {
background-color: #1c2857;
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}