@import 'variables.css';

.info-list {
    list-style-type: none; /* リストのドットを非表示にする */
    padding: 0; /* 不要な余白を削除 */
    display: table; /* テーブルのような表示にする */
    width: 100%; /* 幅を100%にする */
    font-size: 14px;
    letter-spacing: 0.04em; /* 字間を調整 */
    margin-top: 10px;
}

.info-list li {
    display: table-row; /* 各リストアイテムを行として扱う */
}

.info-list a {
    display: table-cell;
    border-bottom: 1px solid #eee;
    color: black;
    text-decoration: none; /* 下線を削除 */
    transition: background-color 0.3s ease; /* 背景色の変化を滑らかにする */
}

.info-list p {
    display: table-cell;
    border-bottom: 1px solid #eee;
}

.info-list li:last-child *:last-child { /* liの最後の子要素のボーダーを消す */
    border-bottom: none;
}

.info-list > *:last-child { /* 全体の最後の子要素のボーダーを消す */
    border-bottom: none;
}

.info-list.tourview p {
    display: table-cell;
    border-bottom: none;
}

.info-list a:hover {
    /*background-color: #FCF4D2; /* マウスオーバー時の背景色 */
    text-decoration: underline; /* マウスオーバー時に下線を表示する（オプション） */
}

.tour-info-container {
    padding: 12px 0;
    display: flex;
    align-items: center; /* アイコンをテキストの中央に揃える */
}

.tour-info-container svg {
    width: 16px; /* アイコンの幅を固定 */
    height: 16px; /* アイコンの高さを固定 */
    flex-shrink: 0; /* アイコンが縮小されないようにする */
    margin-right: 16px; /* テキストとの間に余白を追加 */
}

.tour-info-container span {
    line-height: 1.5; /* 複数行のテキストの行間 */
}

.spot-info-container,
.drop-info-container,
.gem-info-container {
    padding: 12px 0;
    display: flex;
    align-items: center; /* アイコンをテキストの中央に揃える */
}

.spot-info-container svg,
.drop-info-container svg,
.gem-info-container svg {
    width: 16px; /* アイコンの幅を固定 */
    height: 16px; /* アイコンの高さを固定 */
    flex-shrink: 0; /* アイコンが縮小されないようにする */
    margin-right: 16px; /* テキストとの間に余白を追加 */
}

.spot-info-container span,
.drop-info-container span,
.gem-info-container span {
    line-height: 1.5; /* 複数行のテキストの行間 */
}

.org-info-container {
    padding: 20px;
    display: flex;
    align-items: center; /* アイコンをテキストの中央に揃える */
}

.org-info-container svg {
    width: 16px; /* アイコンの幅を固定 */
    height: 16px; /* アイコンの高さを固定 */
    flex-shrink: 0; /* アイコンが縮小されないようにする */
    margin-right: 16px; /* テキストとの間に余白を追加 */
}

.org-info-container span {
    line-height: 1.5; /* 複数行のテキストの行間 */
}