/* ボディ指定 */
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
div,
span,
img {
    margin: 0;
    padding: 0;
}

body {
    margin: 10px;
}

/* ヘッダートップロゴの指定 */
#top-logo {
    width: auto;
    height: 50px;
}

.top-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#top-logo {
    /* ロゴは左に配置 */
    align-self: flex-start;
}

.account-menu-icon {
    font-size: 45px;
}

.account-menu-button {
    /* アカウントメニューボタンは中央に配置 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.account-menu-button a {
    color: #000000;
    text-decoration: none;
}

.account-menu-button a:hover {
    color: #00a2ff;
}

details>summary {
    cursor: pointer;
}

details>summary::-webkit-details-marker {
    display: none;
}


.menu-wrapper {
    position: fixed;
    /* メニューアイコンを固定する */
    top: 20px;
    /* 上からの位置 */
    right: 20px;
    /* 右からの位置 */
    z-index: 1000;
    /* 他の要素より前面に表示 */
    cursor: pointer;
}





.menu-bar {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

/* メニューのスタイル */
.menu-content {
    position: fixed;
    /* メニューを固定する */
    right: 0;
    /* 右側に配置 */
    top: 60px;
    /* メニューアイコンの下に配置 */
    width: 250px;
    /* メニューの幅 */
    background-color: #f9f9f9;
    /* メニューの背景色 */
    box-shadow: -8px 0px 16px 0px rgba(0, 0, 0, 0.2);
    /* 左側に影をつける */
    display: none;
    /* 初期状態では非表示 */
    z-index: 999;
    /* 他の要素より前面に表示 */
}




.menu-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.menu-content a:hover {
    background-color: #f1f1f1
}

.back-button-p {
    border: 1px solid #000000;
    border-radius: 5px;
    padding: 5px;
    color: #000000;
    margin-top: 10px;
    text-align: center;
}

.back-button-a {
    text-decoration: none;
}

.back-button-a:hover {
    opacity: 0.5;
}

.redirect-button-a {
    text-decoration: none;
    color: #000000;
}

.redirect-button-p {
    margin: 5px;
    padding: 1px;
    border: #000000 solid 1px;
    display: inline;
}

.redirect-button-p:hover {
    opacity: 0.5;
}

#header-title {
    text-align: center;
}

#header-user-infomation {
    text-align: center;
}

#header-date {
    position: fixed;
    /* メニューアイコンを固定する */
    top: 23px;
    /* 上からの位置 */
    right: 46%;
    /* 右からの位置 */
    z-index: 998;

    background-color: #ffffff;
    border-radius: 10px;
    padding: 3px;
    text-align: center;
}

#header-ymd {
    font-size: xx-small;
}




/* アプリメニュー指定 */
.menu-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* メニューボックス指定 */
.menu-button {
    width: calc(30% - 10px);
    margin: 5px;
    background-color: #000000;
    border-radius: 5px;
}

/* メニュータイトル指定 */
.menu-button-p {
    font-size: small;
    color: #ffffff;
}

/* メニューアイコン指定 */
.menu-button-icon {
    font-size: 40px;
    color: #ffffff;
}

/* アプリボックスリンクデザイン指定 */
.menu-button a {
    display: block;
    padding: 20px;
    text-align: center;
    font-size: 24px;
    color: #333;
    text-decoration: none;
}

/* メニューボックスのhover指定 */
.menu-button a:hover {
    background-color: #00a2ff;
    border-radius: 5px;
}

/* ログインしていないとき、機能を非表示 */
.menu-button-nologin {
    display: none;
}

/* 以下のメディアクエリを削除または調整 */
@media (max-width: 800px) {
    .menu-button {
        width: calc(48% - 10px);
    }
}

@media (max-width: 500px) {
    .menu-button {
        width: calc(100% - 10px);
    }
}

footer {
    text-align: left !important;
}











/* 共通デザインの作成 はじめ */

/* ボタン1 はじめ */
.button1 a {
    color: #ffffff;
    text-decoration: none;
    background-color: #000000;
    display: block;
}

.button1 a:hover {
    background-color: #fdb61d;
    color: #000000;
}

/* ボタン1 おわり */