@charset "utf-8";
@import url("assets/css/attachment.css");

body {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    margin: 0;
    background-color: #f4f4f4;
    padding: 20px 20vw 30px;
}
@media (max-width: 768px) {
	body {
	    padding: 20px;
	}
}
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    color: #fff;
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
    background: #000;
    padding: 10px 0;
}

h2 {
    color: #555;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: center;
}

form {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
}

form input[type="text"],
form input[type="url"],
form input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 16px;
    color: #333;
}

form button {
    background-color: #5cb85c;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    display: block;
    width: 100%;
    margin-top: 10px;
    text-align: center;
}

form button:hover {
    background-color: #4cae4c;
}

form p {
    margin: 10px 0;
    color: #d9534f;
    font-size: 14px;
}

a {
    color: #337ab7;
    text-decoration: none;
    font-size: 15px;
    display: block;
    text-align: center;
    margin-top: 20px;
}

a:hover {
    text-decoration: underline;
}

a.link1 {
 display: inline;
 text-decoration: underline;
 color: #cb0303;
}
a.link1:hover {
 text-decoration: none;
}

.bookmark-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 20px 0 25px;
}

.bookmark {
    width: calc(25% - 16px);
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.bookmark:hover {
    transform: scale(1.05);
}

.bookmark img {
    width: 100%;
    height: auto;
    border-radius: 3px;
}

.bookmark-title {
    font-size: 14px;
    margin-top: 8px;
    color: #333;
    word-break: break-word;
}

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 10px;
    cursor: pointer;
    vertical-align: middle;
}

button.delete {
    background-color: #d9534f;
    padding: 8px 15px;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    margin-top: 15px;
    width: 100%;
}

button.delete:hover {
    background-color: #c9302c;
}

.error-message {
    color: #d9534f;
    font-size: 14px;
    margin-bottom: 10px;
}

.success-message {
    color: #5cb85c;
    font-size: 14px;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .bookmark {
        width: calc(50% - 16px);
    }
}

@media (max-width: 480px) {
    .container {
        width: 100%;
        padding: 10px;
    }
}

.logout-btn {
    display: inline-block;
    background-color: #d9534f;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}

.logout-btn:hover {
    background-color: #c9302c;
}

.step-wrap3 {
 counter-reset: count;
 margin: 2em 0;
 position: relative;
}
.step-content3 {
 padding: 1.3em 0 .3em 1em;
 margin: 0 0 1em 1em;
 position: relative;
 border-top: solid 2px #ddd;
 counter-increment: count; /* 各.step-content3内でカウンターをインクリメント */
}
.step-content3::before {
 content: "";
 display: block;
 position: absolute;
 bottom: 0;
 left: -10px;
 border-style: solid;
 border-width: 17px 8px 0 8px;
 border-color: #ddd transparent transparent transparent;
}
.step-content3::after {
 content: "";
 display: block;
 height: calc(100% - 36px);
 border-left: dashed 4px #ddd;
 position: absolute;
 top: 16px;
 left: -4px;
}
.step-label3 {
 padding: 3px 20px 3px 15px;
 color: #fff;
 font-weight: bold;
 position: absolute;
 top: -18px;
 left: -20px;
 background: #6ab5a5;
 border-radius: 20px;
 z-index: 1;
}
.step-label3::after {
 content: counter(count); /* カウンター値を出力 */
 position: relative;
 left: .3em;
}
.step-title3 {
 font-weight: bold;
 font-size: 120%;
}
.step-body3 {
 margin-top: .5em;
 padding: 0 0 1em;
}
.step-wrap3 > :last-child {
 box-shadow: 5px 7px 0 -5px #ddd;
}
.step-wrap3 > :last-child::before, .step-wrap3 > :last-of-type::after {
 display: none;
}

.pwdTab {
 width: 100%;
 border-top: 1px solid #999;
 border-left: 1px solid #999;
  border-collapse: collapse;
  border-spacing: 0;
}
.pwdTab td,
.pwdTab th {
 border-right: 1px solid #999;
 border-bottom: 1px solid #999;
 padding: 10px;
}
.pwdTab th {
 background: #d3d3d3;
 padding: 5px;
}
.pwdTab td {
 background: #fff;
}
.pwdTab td.misettei,
.pwdTab td.settei {
 color: #fff;
 padding: 5px;
 text-align: center;
 font-weight: bold;
}
.pwdTab td.misettei {
 background: #cb0303;
}
.pwdTab td.settei {
 background: #0997a7;
}
.qrcode {
 margin-top: 10px;
}
.qrcode img {
 width: 120px;
}