/* 基本的なスタイルのリセット */
body {
    margin: 0;
    padding: 20px;
    font-family: sans-serif;
    background-color: #f0f0f0;
    padding-top: 30px;
}


.hidden {
    display: none;
}

/* 新しいラッパー要素を中央揃え */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.titlebox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto 10px;
}
.titlebox img {
    height: 100px;
    width: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.titletext {
    color: #111;
    font-size: 2em;
    margin-left: 30px;
}

hr {
    width: 90%;
    border: none;
    border-top: 1px solid #ccc;
    margin: 20px 0;
}

.centertext {
    text-align: center;
    margin: 5px 0;
}

.nametext {
    font: bold 3em sans-serif;
    color: #111;
    margin: 1.5em auto 1em;
    text-align: center;
}

.logobox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 10px auto 10px;
}

.logopic {
    height: 300px;
    width: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


.mailemoji {
    font-size: 2.5em;
    /* vertical-align: middle; */
    margin-right: 5px;
}

img.xlogo {
    height: 1.5em;
    width: auto;
    vertical-align: middle;
}


.menu-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto 10px;
    position: relative;
}

/* メニューコンテナのスタイル */
.menu-container {
    display: flex; /* 横並びにする */
    margin: 0 auto;
    position: absolute;
    left: 0; right: 0;
    justify-content: center; /* 中央揃え */
    width: fit-content;
    list-style: none; /* リストの点マークを削除 */
    padding: 0;
    overflow: hidden;
}

/* メニュー項目の共通スタイル */
.menu-item {
    padding: 5px 25px;
    text-align: center;
    background-color: #ffffff; /* 通常時の背景色 */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease; /* スムーズな色の変化 */
}

/* メニュー内のリンクのスタイル */
.menu-item a {
    text-decoration: none; /* 下線を削除 */
    color: #aaa; /* テキスト色 */
    font-weight: normal;
    display: block; /* クリック領域を広げる */
}

/* ホバー時のスタイル */
.menu-item:hover {
    background-color: #e0e0e0; /* ホバー時の背景色 */
}

/* 選択中のメニュー項目のスタイル */
.menu-item.active {
    background-color: #e0d0d0; /* 選択中の背景色 */
    color: #111;
}

/* 選択中のメニュー項目内のリンクのスタイル */
.menu-item.active a {
    color: #000000; /* 選択中のテキスト色 */
}

/* ホバー時のテキスト色の変化 */
.menu-item:not(.active):hover a {
    color: #000000;
}

/* 言語選択ドロップダウンのスタイル */
.language-select {
    font-size: 1em;
    margin-left: 0;
    margin-right: 0;
    position: absolute;
    right: 0;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #aaa;
    background: #fff;
}




.fftitlebox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 3em auto 10px;
}
.fftitlebox img {
    height: 160px;
    width: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    border: 2px solid #000;
    border-radius: 4px;
}
.fftitletext{
    vertical-align: center;
    font: bold 3em sans-serif;
    margin-left: 1em;
}
.ffexpltext {
    width: 600px;
    justify-content: center;
    margin: 10px auto 10px;
}


/* 親要素（コンテナ）のスタイル */
.expl-container {
    display: flex;
    flex-wrap: wrap; /* ボックスが入りきらない場合に改行する */
    gap: 20px; /* ボックス間の余白 */
    justify-content: center; /* ボックスを中央に寄せる */
    margin: 0 auto 30px;
}

/* 子要素（各ボックス）のスタイル */
.expl-box {
    width: 400px; /* 固定幅 */
    flex-shrink: 1; /* 親要素の幅が足りない場合は縮小する */
    background-color: #dfe;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* 画像のスタイル */
.expl-box img {
    max-width: 100%; /* 画像がボックスからはみ出さないようにする */
    height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
    box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.1);
}

.store-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ccc;
}
.store-infotext {
    font: bold 3em sans-serif;
}