/* 作業中のみ使用、作業後削除ページ 
ここから*/
.link-container {
    width: 100%; /* 幅を100%に設定 */
    max-width: 960px; /* 最大幅を960pxに設定 */
    margin: 20px auto; /* 中央寄せ */
    box-sizing: border-box; /* パディングを含めた幅の計算 */
}
/* 作業中のみ使用、作業後削除ページ 
ここまで*/


/* 共通設定　
ここから */
html {
    height:100vh
}


body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: #72706f;
    font-size: 15pt;
    margin-bottom: 300px;
    height:100vh
}


input[type="radio"] {
    width: 27px;
    height: 27px;
    vertical-align: middle;
}

/* 選択時のスタイル */
input[type="radio"]:checked {
    width: 23px;
    height: 23px;
    vertical-align: middle;
}

.header {
    position: fixed;
    top: 0;
    left: 87px;
    right: 0;
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #FFFFFF;
    z-index: 1001;
}

.title {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 41pt;
    font-weight: bold;
    margin-left: 10px;
}

/* .title::before {
    content: "PD";
    color: #FFFFFF;
    font-size: 36px;
    font-weight: bold;
} */

.sidebar {
    width: 114px;
    /* background-color: #ef8200; */
    background-color: #013B84;
    position: fixed;
    /* height: 100vh; */
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1002; /* ヘッダーより上に表示 */
}


.logo {
    color: white;
    font-size: 41pt;
    margin-top: 13px;
    margin-bottom: 20px;
    margin-left: 29px;
    font-weight: bold;
    text-align: right;
}




.search-icon, .seven {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 35px;
}
.seven1, .seven2, .seven3, .graph, .shop, .yen {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px;
}

.memo, .shop2, .circle {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px;
}

.search-icon img, .seven img {  /* img要素を指定 */
    width: 60px;  /* 画像自体のサイズを指定 */
    height: 60px;
    /* box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); */
}
.seven1 img, .seven2 img, .seven3 img, .graph img, .shop img, .yen img {  /* img要素を指定 */
    width: 50px;  /* 画像自体のサイズを指定 */
    height: 50px;
}

.memo img, .shop2 img, .circle img {  /* img要素を指定 */
    width: 50px;  /* 画像自体のサイズを指定 */
    height: 50px;
}

.mail-icon {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    margin-bottom: 20px;
}

.mail-icon img {
    width: 60px;
    height: 60px;
}

.sidebar .active img {
    filter: brightness(0) invert(1);
}


.logout {
    width: 114px;
    height: 114px;
    background-color: #00882b;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-orientation: mixed;
}

.logout-button {
    background-color: #00882b;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    font-size: 15pt;
}

.logout-button:hover {
    text-decoration: underline;
}


/* 共通設定　
ここまで */
/* produｃｔｓ/index　
【0000】Auth/Loginページここまで*/


.login-form {
    max-width: 800px;
    margin: 190px auto 70px;
    display: flex; /* 追加 */
    flex-direction: column; /* 追加 */
    align-items: center; /* 追加 */
}

.login-title {
    background: #E5DDFF;
    text-align: center;
    margin-bottom: 20px;
    width: 621px;
    height: 65px;
    line-height: 65px;
    display: block;
}

.loginform-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.loginform-label {
    background: #4AA063;
    color: #FFFFFF;
    width: 270px;
    height: 45px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loginform-input {
    margin-left: 10px;
    width: 300px;
    height: 45px;
    margin-left: 30px;
    font-size: 15pt;
    background: #FFFFFF;
    border: 1px solid #000000;
}

.remember-me {
    text-align: center;
    margin: 25px 0;
}

.login-button {
    display: block;
    width: 150px;
    height: 60px;
    font-size: 15pt;
    margin: 0 auto 30px;
    background: #3A72F3;
    color: white;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.error-message {
    color: red;
    text-align: center;
}

.help-text {
    text-align: center;
    line-height: 1.6;
    margin: 0 0 70px 0;
}

.help-text p {
    margin: 0;
    padding: 0;
}

.help-text a {
    color: #4169E1;
    text-decoration: none;

}
.footer {
    /* position: absolute; */
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: #666;
}


.password-field {
    position: relative;
}

.password-field i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
}




/* produｃｔｓ/index　
【0000】Auth/Loginページここまで*/

/* produｃｔｓ/index　
【１０００】サービスTOPページここまで*/
.main-content {
    margin-left: 114px; /* サイドバーの幅 */
    margin-top: 90px;
    height: calc(100vh - 90px);
    /* width: calc(100% - 114px); ビューポートの幅からサイドバーの幅を引く */
}


.content-title {
    font-size: 31pt;
    margin-bottom: 30px;
    font-weight: normal;

}

/* 中央揃えのためのコンテナを追加 */
.allcontent-wrapper {
    display: flex;
    justify-content: center;
}



.system-name {
    font-size: 24pt;
    color: #333;
}

.powered-by {
    color: #666;
    font-size: 15pt;
    font-weight: bold;
}



.stats-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 20px 0 90px 0;
    max-width: 1014px;
}

.stats-row {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.stats-item {
    display: flex;
    gap: 10px;
    width: calc(50% - 10px);
    background: none;
}

.stats-item .label {
    width: 225px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.stats-item.purple .label {
    background-color: #E5DDFF;
}

.stats-item.pink .label {
    background-color: #FFE6DD;
}

.stats-item .value {
    border-radius: 5px;
    flex-grow: 1;
    text-align: right;
    display: flex;
    align-items: center;
}





.news-section {
    margin: 90px 0;
    max-width: 1014px;
}

.news-section h2 {
    margin-bottom: 20px;
    font-size: 31pt;
}

.news-content {
    height: 420px;
    overflow-y: auto;
}

.news-item {
    margin-bottom: 15px;
    margin-right: 90px;
    padding-bottom: 10px;
}

.news-item .date {
    font-size: 15pt;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.news-item p {
    color: #666;
    margin: 0;
    font-size: 15pt;
    line-height: 1.6;
}



.ranking-section {
    display: flex;
    gap: 25px;
    width: 1014px;
}

.ranking-box {
    flex: 1;
}

.ranking-box p {
    background-color: #4AA063;
    color: #ffffff;
    text-align: center;
    font-size: 15pt;
    height: 50px;
    width: 500px;
    display: flex; /* Flexboxを使用 */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    margin: 0;
}

.ranking-list {
    list-style-type: none;
    padding: 0;
}

.ranking-item .p-rank {
    color: #666;
    margin: 0;
    font-size: 15pt;
    line-height: 1.4;
}

.ranking-item .s-rank {
    color: #666;
    margin: 0;
    font-size: 15pt;
    line-height: 1.4;
}

.p-title, .s-title{
    color: #666;
    margin-bottom: 20px;
    font-size: 15pt;
    line-height: 1.8;
    margin-left: 45px;

}

footer {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    color: #666;
    font-size: 12pt;
    padding: 115px 0;
}


.copyright {
    font-weight: bold;
    margin-top: 50px;
}

.chome {
    font-weight: bold;
}

/* produｃｔｓ/index　
【１０００】サービスTOPページここまで*/





/* produｃｔｓ/searｃｈ_top
【2000/2051/2052】検索機能ページここまで */
.search-section {
    padding: 20px;
    margin: 20px auto 70px auto;
    max-width: 960px;
}




.search-label {
    background: #4AA063;
    color: #ffffff;
    width: 270px;
    height: 45px;
    display: inline-block;
    text-align: center;
    line-height: 45px; /* heightと同じ値を設定 */
}

.search-select {
    width: 300px;
    height: 45px;
    margin-left: 30px;
    font-size: 15pt;
    border-radius: 9px;
    text-align: center;
}

.search-input {
    width: 300px;
    height: 45px;
    padding: 0;
    margin-left: 30px;
    font-size: 15pt;
    background: #FFFFFF;
    border: 1px solid #000000;
}

.search-input-small {
    width: 150px;
    height: 45px;
    padding: 0;
    font-size: 15pt;
    background: #FFFFFF;
    border: 1px solid #000000;
    margin: 0; /* マージンを0に */
}

.range-inputs {
    display: inline-flex;
    align-items: center;
    margin-left: 30px;
}

.space-before {
    margin-left: 10px; /* 「店から」の前に10pxの空間 */
    margin-right: 20px; /* 「店から」の後に20pxの空間 */
}

.space-after {
    margin-left: 10px; /* 「店まで」の前に10pxの空間 */
}

.radio-space-before {
    margin-left: 5px; /* 「すべて」の前に5pxの空間 */
    margin-right: 25px; /* 「すべて」の後に25pxの空間 */
}

.search-buttons {
    display: flex;
    gap: 30px;
    margin-top: 70px;
    justify-content: left;
}

.search-btn {
    background: #FFFFFF;
    width: 270px;
    height: 60px;
    font-size: 15pt;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.search-btn.active {
    background: #FF5356;
    color: white;
}

/* 店舗・企業・グループ検索結果テーブル */

.search-results-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

.search-results-container {
    width: 100%; /* 画面全体に広げる */
    max-width: none; /* 最大幅の制限を解除 */
    margin: 0;
    padding: 0;
}

.search-results {
    display: none;
    width: 100%;
    max-width: none;
    margin: 20px 0;
    
}


.search-results.active {
    display: block;
}

.search-results h2 {
    font-size: 31pt;
    margin: 0 20px 20px 50px;
    font-weight: normal;
}

.table-container {
    width: 100%;
    overflow-x: auto;
    margin-left: 50px;
}


.search-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 10px 2px;
    margin-top: 20px;
    display:block;
    table-layout: fixed; /* 列幅を固定 */
}

.search-table th {
    background: #4AA063;
    color: white;
    height: 45px;
    text-align: center;
    font-weight: normal;
    white-space: nowrap;
    border-spacing: 10px;
}

.search-table td {
    padding: 12px 0 0 0;
    border: none;
}

.search-table th.th-250 { width: 250px; } /* 店舗名、住所 */
.search-table th.th-110 { width: 110px; } /* 営業状況、機種R、稼働率 */
.search-table th.th-124 { width: 124px; } /* 都道府県、専門店区分 */
.search-table th.th-200 { width: 200px; } /* 企業名 */
/* ページネーション */

.page-item {
    padding: 5px 10px;
    border: 1px solid #ddd;
    cursor: pointer;
}

.page-item.active {
    background: #3A72F3;
    color: white;
}


.pagination {
    display: flex;
    justify-content: center;
    margin-top: 45px;
    padding: 0 0 70px 0;
}

.pagination a {
    text-decoration: none;
    color: #3A72F3;
    line-height: 45px;
}

.pagination .active {
    background-color: #3A72F3;
    color: white;
    border-color: #3A72F3;
}

.page-number {
    background-color: #D9D9D9;
    height: 45px;
    width: 45px;
    text-align: center;
    line-height: 45px;
    margin: 0 10px; /* 数字と数字の間 */
}

.prev-page {
    margin-right: 5px; /* ◀と数字の間 */
    background: white;
}


.next-page {
    margin-left: 5px; /* 数字と▶の間 */
    background: white;
}



/* produｃｔｓ/searｃｈ_top
【2000/2051/2052】検索機能ページここまで */




/* //////////////////////////////// */

/* produｃｔｓ/information
【２００１-2012】店舗企業グループ検索TOPページここから */


/* tab切り替え関連 */
.tab-menu {
    margin-top: 103px;
    display: flex;
    border-bottom: 1px solid;
    z-index: 999; /* ヘッダーよりも低い値 */
}

.tab-btn {
    width: 148px;
    height: 60px;
    background: #FFFFFF;
    position: relative;
    cursor: pointer;
    /* font-size: 17pt; */
    border: solid 1px;
    border-radius: 4px 4px 0 0;
    font-family: Arial, sans-serif;
    color: #72706f;
    font-size: 15pt;

}

.tab-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 148px;
    height: 10px;
    background: #D9D9D9;
    border-radius: 4px 4px 0 0;
}

.tab-btn.active::before {
    background: #FF5356;
}

.tab-btn:not(.active)::before {
    background: #D9D9D9;
}



.tab-content {
    margin: 20px auto;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* tab切り替え関連ここまで */



/* 店舗結果タブ */


.info-grid h2 {
    font-size: 31pt;
    margin-bottom: 20px;
    font-weight: normal;
}

.shop-info {
    padding: 20px;
    /* margin: 20px auto;
    max-width: 960px; */
    margin-bottom: 30px;
}

.info-grid {
    display: flex;
    flex-direction: column;

    margin: 20px auto;
    max-width: 1060px;
}

.info-row {
    display: flex;
}

.info-row.double {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
}

.info-label {
    background: #4AA063;
    color: white;
    min-width: 270px;
    height: 45px;
    text-align: center;
    line-height: 45px; /* heightと同じ値を設定 */
    margin-bottom: 20px;
}

.info-value {
    background: white;
    flex-grow: 1;
    line-height: 45px; /* heightと同じ値を設定 */
    min-width: 200px;
    margin-left: 20px;
}

.info-value224 {
    background: white;
    flex-grow: 1;
    line-height: 45px; /* heightと同じ値を設定 */
    width: 224px;
    margin: 0 20px 0 20px;

}
.info-value.url {
    color: blue;
    text-decoration: underline;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .info-row.double {
        grid-template-columns: auto 1fr;
    }
}





.machine-info {
    margin-top: 20px;
    padding: 20px 20px 180px 20px;
}

.machine-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.period-selector, .term-selector {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.period-selector {
    gap: 30px;
}


.machine-label, .period-btn, .term-btn, .csv-btn {
    width: 230px;
    height: 60px;
    font-size: 15pt;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}


.machine-label, .period-btn, .term-btn {
    background:#ffffff;
}



.machine-label.passive,.period-btn.passive, .term-btn.passive {
    background: #d9d9d9;
    color: #ffffff;
}

.button-group {
    display: flex;
    gap: 30px;
}

.period-label {
    width: 230px;
    text-align: right;
    padding-right: 30px;
}

.term-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #d9d9d9;
}

.csv-btn {
    background: #3A72F3;
    color: #ffffff;
    position: absolute;
    right: 0;
}

/* CSVボタンポップアップ関連ここから */

.csv-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    width: 1050px;
    border-radius: 4px;
}

.popup-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
}

.popup-header h3 {
    margin: 0 0 0 40px;
    width: 100%;
}

.popup-body {
    margin-left: 40px;
}
.close-btn {
    border: none;
    background: none;
    font-size: 24pt;
    cursor: pointer;
    padding: 0;
    margin-bottom: 10px;
}

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

.period-header h4 {
    background: #4AA063;
    color: white;
    margin: 0;
    width: 270px;
    height: 45px;
    line-height: 45px;
    text-align: center;
}

.content-section h4 {
    background: #4AA063;
    color: white;
    margin: 0;
    width: 270px;
    height: 45px;
    line-height: 45px;
    text-align: center;
}





.period-section,
.content-section,
.period-unit {
    margin-bottom: 20px;
}

.date-inputs {
    display: flex;
    align-items: center;
    line-height: 45px;
    margin-left: 30px;
}

.popyear-input,
.popmonth-input {
    width: 95px;
    height: 43px;
    padding: 0;
    font-size: 15pt;
    background: #FFFFFF;
    border: 1px solid #000000;
}

.content-buttons {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

.content-btn {
    padding: 8px 15px;
    background: #ffffff;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    width: 230px;
    height: 60px;
    font-size: 15pt;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.content-btn_not_possible {
    padding: 8px 15px;
    background: #d9d9dd;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    width: 230px;
    height: 60px;
    font-size: 15pt;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.content-nonbtn {
    background: none;
    border: none;
    width: 230px;
    height: 60px;
    font-size: 15pt;
    text-align: end;

}


.content-btn.active {
    background: #FF5356;
    color: #FFFFFF
}

.attention-red {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 12pt;
    color: #FF0000;
}



.download-btn {
    display: block;
    margin: 55px auto 25px;
    width: 230px;
    height: 60px;
    font-size: 15pt;
    background: #3A72F3;
    color: #FFFFFF;
    border: none;
    border-radius: 9px;
    cursor: pointer;
}



/* CSVボタンポップアップ関連ここまで */







/* コンテンツラッパーの共通スタイル */
.content-wrapper,
.company-content-wrapper,
.group-content-wrapper {
    width: 100%;
    margin: 0 auto;
    display: none;
    max-width: 1366px;
}

/* showクラスとactiveクラスの表示制御を統合 */
.content.active,
.content-wrapper.show,
.company-content-wrapper.show,
.group-content-wrapper.show {
    display: flex;
    justify-content: center;
}



/* 新台導入台数テーブル用のスタイル */


.machine-grid {
    display: grid;
    grid-template-columns: 442px 442px 442px;
    gap: 20px;
    min-width: 1200px; 
    width: 100%;
    box-sizing: border-box; /* ボックスサイズを設定 */
}

.machine-grid-s {
    display: grid;
    grid-template-columns: 606px 606px 606px;
    gap: 20px;
    min-width: 1200px; 
    overflow-x: auto; /* 横スクロールを許可 */
    width: 100%;
    box-sizing: border-box; /* ボックスサイズを設定 */
}


.content {
    display: none;
    width: 100%;
}

.content.active {
    display: grid;
    width: 100%;
}

.machine-label.active, 
.period-btn.active,
.term-btn.active {
    background: #FF5356;
    color: #ffffff;
}


.machine-column {
    width: calc((100% - 40px) / 3); /* カラム間のギャップ20pxを考慮して3等分 */
    overflow-x: hidden;
}

.scroll-machine-column {
    width: calc((100% - 40px) / 3); /* カラム間のギャップ20pxを考慮して3等分 */
    min-width: 606px; /* 新台購入台数に合わせた最小幅 */
}

.scroll-machine-column-s {
    width: calc((100% - 40px) / 3); /* カラム間のギャップ20pxを考慮して3等分 */
    min-width: 442px; /* 売上・粗利に合わせた最小幅 */
    overflow-x: auto;
}


.column-header {
    background: #4AA063;
    color: white;
    text-align: center;
    height: 45px;
    line-height: 45px;
    width: 100%;
}

thead .th-250 {
    width: 250px;
}



/* テーブル */
.shop-header {
    background: #4AA063;
}

.machine-table td {
    text-align: center;
}



.number, .percentage {
    text-align: right;
}

/* テーブル */

/* 設置機種テーブル */
.machine-table {
    width: calc(100% + 20px); /* 左右の余白分を加算 */
    margin-left: -10px; /* 左側の余白を相殺 */
    border-collapse: separate;
    border-spacing: 10px 10px;
    display:block;
    table-layout: fixed; /* 列幅を固定 */
}

.machine-table th:first-child {
    width: 250px; /* 機種名列 */
}

/* 各列の幅を指定 */
.machine-table th:nth-child(2),
.machine-table th:last-child {
    width: 86px; /* 台数と比率の列 */
}

/* 新台購入台数テーブル */
.new-machine-table {
    width: calc(100% + 20px); /* 左右の余白分を加算 */
    border-collapse: separate;
    border-spacing: 10px 10px;
    margin-left: -10px; /* 左側の余白を相殺 */
    display:block;
    table-layout: fixed; /* 列幅を固定 */
}

.new-machine-table th:first-child {
    width: 250px; /* 機種名列 */
}

.new-machine-table th:nth-child(2),
.new-machine-table th:nth-child(3) {
    width: 86px; /* 台数と比率の列 */
}

.new-machine-table th:last-child {
    width: 154px; /* 想定購入金額列 */
}




.new-machine-table td {
    text-align: left;
}

.new-machine-table th, .new-machine-table td {
    text-align: center;
    
}


/* 資産価値テーブル */
.asset-machine-table {
    width: calc(100% + 20px); /* 左右の余白分を加算 */
    margin-left: -10px; /* 左側の余白を相殺 */
    border-collapse: separate;
    border-spacing: 10px 10px;
    background: #48B669; /* 背景色を設定 */
    display:block;
    table-layout: fixed; /* 列幅を固定 */
}

/* 売上粗利テーブル */
.sales-machine-table {
    width: calc(100% + 20px); /* 左右の余白分を加算 */
    margin-left: -10px; /* 左側の余白を相殺 */
    border-collapse: separate;
    border-spacing: 10px 10px;

}

.sales-machine-table th:first-child {
    width: 216px; /* 売上列 */
}

.sales-machine-table th:last-child {
    width: 216px; /* 粗利列 */
}

.asset-machine-table td {
    text-align: center;
    font-size: 43pt;
    text-align: center;
}



.asset-machine-table {
    background: white;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 442px;
}

.machine-table td.asset-value {
    font-size: 46pt;
    text-align: center;
}

.asset-value {
    font-size: 24pt;
    text-align: center;

}


/* スクロールの設定 */

.machine-column {
    width: 442px; /* 必要に応じて調整 */
    overflow-x: hidden; /* 横スクロールを禁止 */
    margin: 0; /* マージンを0に設定 */
    padding: 0; /* パディングを0に設定 */
}



.machine-table th, .new-machine-table th, .sales-machine-table th {
    background: #48B669;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    white-space: nowrap; /* 折り返しを防ぐ */
    border-spacing: 2px; /* セル間の間隔を設定 */
    height: 45px;
    padding: 0;
}

.machine-table .area-shop-header {
    background: #4AA063;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    white-space: nowrap; /* 折り返しを防ぐ */
    border-spacing: 2px; /* セル間の間隔を設定 */
    height: 45px;
    margin-bottom: 10px; /* ここに10pxの空間を追加 */
}

.machine-table tfoot td.total-label, 
.new-machine-table tfoot td.total-label,
.sales-machine-table tfoot td.total-label {
    background: #4AA063;
    color: white;
    text-align: center;
}


/* 売上・粗利ボタンのコンテンツ */

.sales-machine-table td {
    text-align: center;
}

.assumption_sales, .constant_gross_profit {
    font-size: 30pt;
}

.assumption_sales .unit, .constant_gross_profit .unit {
    font-size: 15pt;
}





/* ソートボタン */
th.sortable {
    position: relative;
    /* padding-right: 10px; 矢印分のスペースを確保 */
}



.sort-arrows {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0; /* フォントサイズの継承を回避 */
    cursor: pointer;
}

/* 上向き矢印 */
.arrow.up {
    border-width: 0 5.5px 11px 5.5px; /* 三角形のサイズを設定 */
    border-color: transparent transparent #D9D9D9 transparent;
}

/* 下向き矢印 */
.arrow.down {
    border-width: 11px 5.5px 0 5.5px; /* 三角形のサイズを設定 */
    border-color: #D9D9D9 transparent transparent transparent;
}

/* アクティブな矢印のスタイル */
.arrow.active {
    opacity: 1;
}

/* 非アクティブな矢印のスタイル */
.arrow {
    width: 0;
    height: 0;
    border-style: solid;
    display: block;
    font-size: 0; /* フォントサイズの継承を回避 */
    line-height: 0; /* 行高さも0に設定 */
}








/* 横スクロールバーの設定 */

/* 新台導入台数テーブル用スクロール設定 */
#new-content .machine-column,
#company-new-content .machine-column,
#group-new-content .machine-column {
    overflow-x: hidden; 
}

#new-content .table-wrapper,
#company-new-content .table-wrapper,
#group-new-content .table-wrapper {
    overflow-x: auto;
    margin-bottom: 10px;/* スクロールバーと下部との間隔 */
}






/* スクロールバーのスタイリング */
.table-wrapper::-webkit-scrollbar {
    height: 8px; /* スクロールバーの高さ */
}

.table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1; /* スクロールバーの背景色 */
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: #888; /* スクロールバーのつまみ色 */
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555; /* ホバー時のつまみ色 */
}


/* スクロールバーのスタイリング */
.content-wrapper::-webkit-scrollbar {
    height: 8px; /* スクロールバーの高さ */
}

.content-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;/* スクロールバーの背景色 */
    border-radius: 4px;
}

.content-wrapper::-webkit-scrollbar-thumb {
    background: #888;/* スクロールバーのつまみ色 */
    border-radius: 4px;
}

.content-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555; /* ホバー時のつまみ色 */
}

















/* 店舗結果タブ　ここまで */




/* 企業結果タブ */



/* 企業結果タブ　ここまで */



/* produｃｔｓ/information
【２００１-2012】店舗企業グループ検索TOPページここから */



/* produｃｔｓ/area_analysis
【2101-2106】店舗エリア分析TOPページここから */


.area-analysis {
    padding: 20px;
    max-width: 1060px;
    margin: 0 auto;
}

.area-analysis h2 {
    font-size: 31pt;
    margin-bottom: 20px;
    font-weight: normal;
}


.shop-name {
    display: flex;
    align-items: center;
    margin-bottom: 20px,;
}

.shop-name .label {
    background: #4AA063;
    color: #FFFFFF;
    width: 270px;
    text-align: center;
    height: 45px;
    line-height: 45px; /* heightと同じ値を設定 */
}

.shop-name .value {
    margin-left: 20px;
    height: 45px;
    line-height: 45px; /* heightと同じ値を設定 */
}

.shop-status {
    display: flex;
    gap: 30px;
    margin: 20px 0;
}



.status-badge {
    border: none;
    width: 230px;
    height: 60px;
    font-size: 15pt;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.status-badge.active {
    background: #FF5356;
    color: #ffffff;
}

.status-badge:not(.active) {
    background: #ffffff;
}

.status-badge:hover {
    background: #f5f5f5;
}

.status-badge.active:hover {
    background: #FF5356;
}




.map-container {
    width: 960px;
    height: 400px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

#map {
    width: 100%;
    height: 100%;
}



.aria-machine-info {
    padding: 20px 20px 60px 20px;
}

.aria-machine-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.distance-filters {
    display: flex;
    justify-content: center; /* 中央揃え */
    gap: 30px;
    margin-top: 20px;
}

.distance-btn {
    height: 60px;
    width: 230px;
    font-size: 15pt;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.distance-btn.active {
    background: #FF5356;
    color: #ffffff;
}

.distance-btn:not(.active) {
    background: #ffffff;
}

.distance-btn:hover {
    background: #f5f5f5;
}

.distance-btn.active:hover {
    background: #FF5356;
}


.table-title {
    margin: 56px 0 20px 60px;
    font-size: 31pt;
    font-weight: normal;
}

.th-121  {
    width: 121px;
}



.aria-search-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 10px 2px;
    margin-top: 20px;
    display:block;
    table-layout: fixed; /* 列幅を固定 */
    padding: 0 0 20px 0;
}

.aria-search-table th {
    background: #4AA063;
    color: white;
    height: 45px;
    text-align: center;
    font-weight: normal;
    white-space: nowrap;
    border-spacing: 10px;
}

.aria-search-table td {
    padding: 12px 0 0 0;
    border: none;
}

.aria-search-table th.th-250 { width: 250px; } /* 店舗名 */
.aria-search-table th.th-110 { width: 110px; } /* 営業状況、機種R、稼働率 */
.aria-search-table th.th-121 { width: 121px; } /* 総台数、P台数、S台数 */
.aria-search-table th.th-200 { width: 200px; } /* 企業名 */


/* 設置機種ボタン内コンテンツ
ここから */

/* テーブル設定 */

.aria-machine-grid {
    display: grid;

    width: 100%; /* グリッド全体の最小幅を設定 */
    box-sizing: border-box;
}

.aria-machine-column {
    width: 100%;
    overflow-x: hidden; /* 横スクロールを禁止 */
    margin: 0; /* マージンを0に設定 */
    padding: 0; /* パディングを0に設定 */
}

.aria-machine-table {
    width: calc(100% + 20px); /* 左右の余白分を加算 */
    margin-left: -10px; /* 左側の余白を相殺 */
    border-collapse: separate;
    border-spacing: 10px 10px;
    display:block;
    table-layout: fixed; /* 列幅を固定 */
}

.aria-machine-table .area-column-header {
    background: #4AA063;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    white-space: nowrap; /* 折り返しを防ぐ */
    border-spacing: 2px; /* セル間の間隔を設定 */
    height: 100px; /* 高さを100pxに設定 */
    width: 250px; /* 幅を２５０pxに設定 */
}

.aria-machine-table .area-shop-header {
    background: #4AA063;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    white-space: nowrap; /* 折り返しを防ぐ */
    border-spacing: 2px; /* セル間の間隔を設定 */
    height: 45px; /* 高さを45pxに設定 */
    width: 428px; /* 幅を428pxに設定 */
}

.aria-sortable {
    height: 45px;
    white-space: nowrap; /* 折り返しを防ぐ */
}

.aria-sortable:nth-child(1),
.aria-sortable:nth-child(4),
.aria-sortable:nth-child(7) {
    width: 85px; /* 台数 */
}

.aria-sortable:nth-child(2),
.aria-sortable:nth-child(3),
.aria-sortable:nth-child(5),
.aria-sortable:nth-child(6),
.aria-sortable:nth-child(8),
.aria-sortable:nth-child(9) {
    width: 161px; /* 店舗比率、地域比率 */
}

th.aria-sortable {
    position: relative;
    /* padding-right: 10px; 矢印分のスペースを確保 */
}


.aria-machine-table th, .aria-machine-table td {
    text-align: center;
}
.aria-machine-table th {
    background: #48B669;
    color: #FFFFFF;
    font-weight: normal;
    border-spacing: 2px; /* セル間の間隔を設定 */
    padding: 0;
}




/* 設置機種ボタン内コンテンツ
ここまで */
.info-content {
    display: none;
    width: 100%;
}

.info-content.active {
    display: grid;
    width: 100%;
}


/* 新台導入台数ボタン内コンテンツ
ここから */
.aria-new-machine-table .area-column-header {
    background: #4AA063;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    white-space: nowrap; /* 折り返しを防ぐ */
    border-spacing: 2px; /* セル間の間隔を設定 */
    height: 100px; /* 高さを100pxに設定 */
    width: 250px; /* 幅を２５０pxに設定 */
    min-width: 250px; /* 最小幅を設定 */
}

.aria-new-machine-table .area-shop-header {
    background: #4AA063;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    white-space: nowrap; /* 折り返しを防ぐ */
    border-spacing: 2px; /* セル間の間隔を設定 */
    height: 45px; /* 高さを45pxに設定 */
    width: 428px; /* 幅を428pxに設定 */
    min-width: 428px; /* 最小幅を設定 */
}

.aria-new-sortable {
    height: 45px;
}

.aria-sortable:nth-child(1),
.aria-sortable:nth-child(4),
.aria-sortable:nth-child(7) {
    width: 85px; /* 台数 */
}

.aria-sortable:nth-child(2),
.aria-sortable:nth-child(3),
.aria-sortable:nth-child(5),
.aria-sortable:nth-child(6),
.aria-sortable:nth-child(8),
.aria-sortable:nth-child(9) {
    width: 161px; /* 店舗比率、地域比率 */
}

th.aria-sortable {
    position: relative;
    /* padding-right: 10px; 矢印分のスペースを確保 */
}


.aria-new-machine-table th, .aria-new-machine-table td {
    text-align: center;
}
.aria-new-machine-table th {
    background: #48B669;
    color: #FFFFFF;
    font-weight: normal;
    border-spacing: 2px; /* セル間の間隔を設定 */
    padding: 0;
}

.machine-table tfoot td.total-label, 
.aria-new-machine-table tfoot td.total-label,
.sales-machine-table tfoot td.total-label {
    background: #4AA063;
    color: white;
    text-align: center;
    height: 45px;
}

/* 新台導入台数ボタン内コンテンツ
ここまで */



/* 資産価値ボタン内コンテンツ
ここから */
.aria-asset-machine-column {
    width: 100%;
    overflow-x: hidden; /* 横スクロールを禁止 */
    margin: 0; /* マージンを0に設定 */
    padding: 0; /* パディングを0に設定 */
}
.aria-asset-machine-table .area-column-header {
    background: #4AA063;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    white-space: nowrap; /* 折り返しを防ぐ */
    border-spacing: 2px; /* セル間の間隔を設定 */
    height: 100px; /* 高さを100pxに設定 */
    width: 250px; /* 幅を２５０pxに設定 */
    min-width: 250px; /* 最小幅を設定 */
}

.aria-asset-machine-table .area-shop-header {
    background: #4AA063;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    white-space: nowrap; /* 折り返しを防ぐ */
    border-spacing: 2px; /* セル間の間隔を設定 */
    height: 45px; /* 高さを45pxに設定 */
    width: 428px; /* 幅を428pxに設定 */
    min-width: 428px; /* 最小幅を設定 */
}


.aria-asset-machine-table td.asset-value {
    font-size: 43pt;
    text-align: center;
}

.asset-value {
    font-size: 24pt;
    text-align: center;

}


/* 資産価値ボタン内コンテンツ
ここまで */
.aria-sales-machine-column {
    width: 100%;
    overflow-x: hidden; /* 横スクロールを禁止 */
    margin: 0; /* マージンを0に設定 */
    padding: 0; /* パディングを0に設定 */
}

.aria-sales-machine-table .area-column-header {
    background: #4AA063;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    white-space: nowrap; /* 折り返しを防ぐ */
    border-spacing: 2px; /* セル間の間隔を設定 */
    height: 100px; /* 高さを100pxに設定 */
    width: 250px; /* 幅を２５０pxに設定 */
    min-width: 250px; /* 最小幅を設定 */
}

.aria-sales-machine-table .area-shop-header {
    background: #4AA063;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    white-space: nowrap; /* 折り返しを防ぐ */
    border-spacing: 2px; /* セル間の間隔を設定 */
    height: 45px; /* 高さを45pxに設定 */
    width: 300px; /* 売上・粗利は2列なので幅を調整 */
    min-width: 300px; /* 最小幅を設定 */
}

.sub-header {
    height: 45px;
    width: 216px;
    background: #48B669;
    color: #FFFFFF;
    font-weight: normal;
    border-spacing: 2px; /* セル間の間隔を設定 */
    padding: 0;
}


/* ここから２１４ */
.sales-machine-table td {
    text-align: center;
}

.assumption_sales, .constant_gross_profit {
    font-size: 27pt;
}

.assumption_sales .unit, .constant_gross_profit .unit {
    font-size: 15pt;
}

/* 売上・粗利ボタン内コンテンツ
ここから */




/* 売上・粗利ボタン内コンテンツ
ここまで */


/* produｃｔｓ/area_analysis
【2101-2106】店舗エリア分析TOPページここまで */



/* produｃｔｓ/introduction-model
【2201ー2203】導入撤去機種TOPページここから */

.model-container {
    padding: 20px;
    max-width: 1080px;
    margin: 0 190px;
}

.model-container h2 {
    font-size: 31pt;
    margin-bottom: 20px;
    font-weight: normal;
}


.model-status {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}


.status-ps {
    border: none;
    width: 230px;
    height: 60px;
    font-size: 15pt;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.status-ps.active {
    background: #FF5356;
    color: #ffffff;
}

.status-ps:not(.active) {
    background: #ffffff;
}

.status-ps:hover {
    background: #f5f5f5;
}

.status-ps.active:hover {
    background: #FF5356;
}


.model-name {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.model-tname {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    margin: 0 0 0 40px
}

.model-tname .long-label {
    background: #4AA063;
    color: white;
    width: 270px;
    height: 45px;
    text-align: center;
    margin-right: 10px;
    line-height: 45px; /* heightと同じ値を設定 */
}
/* .left-model-name {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 170px;
} */

.model-name .label {
    background: #4AA063;
    color: #FFFFFF;
    width: 270px;
    height: 45px;
    text-align: center;
    margin-right: 20px;
    line-height: 45px; /* heightと同じ値を設定 */
}

/* .left-model-name .label {
    background: #4AA063;
    color: white;
    padding: 8px 15px;
    width: 180px;
    text-align: center;
    margin-right: 10px;
} */

.model-name .long-label {
    background: #4AA063;
    color: white;
    width: 270px;
    height: 45px;
    text-align: center;
    margin-right: 10px;
    line-height: 45px; /* heightと同じ値を設定 */
}

.model-info {
    padding: 0, auto;
    margin: 10px 0;
}


.input-section {
    margin: 10px 40px;
}

.input-group {
    display: flex;
    gap: 25px;
}


.date-select, .price-select {
    border: 1px solid #ccc;
    border-radius: 9px;
    text-align: center;
    font-size: 15pt;
    height: 45px;
    width: 300px;
}


.introduction-table-container {
    width: 100%;
}

.model-table-container {
    display: flex;
    margin: 0 40px;
}


.introductionsearch-table {
    table-layout: fixed;
    width: 1080px;
    border-collapse: separate;
    border-spacing: 10px 2px;
    margin-left: -10px; /* 左側の余白を相殺 */
    margin-bottom: 60px;
    display:block;
}

.introductionsearch-table th {
    background: #48B669;
    color: white;
    height: 45px;
    text-align: center;
    font-weight: normal;
    white-space: nowrap;
    border-spacing: 10px;
}

.introductionsearch-table td {
    padding: 12px 0 0 0;
    border: none;
    /* white-space: nowrap; 折り返しを防ぐ */
    overflow: hidden; /* コンテンツが長すぎる場合 */
    text-align: center;
}
.introductionsearch-table th.th-588 { width: 588px; } /* */
.introductionsearch-table th.th-192 { width: 192px; } /* */
.introductionsearch-table th.th-116 { width: 116px; } 
.introductionsearch-table th.th-517 { width: 517px; } 



.introduction-table,
.removal-table {
    table-layout: fixed;
    width: 663px;
    border-collapse: separate;
    border-spacing: 10px 2px;
    margin-left: -10px; /* 左側の余白を相殺 */
    margin-bottom: 20px;
}


.introduction-table th,
.removal-table th {
    background: #48B669;
    color: white;
    height: 45px;
    text-align: center;
    font-weight: normal;
}

.introduction-table td,
.removal-table td {
    padding: 12px 0 0 0;
    border: none;
    /* white-space: nowrap; 折り返しを防ぐ */
    text-align: center;
}

.introduction-table th.th-517 { width: 517px; } /* 店舗名 */
.introduction-table th.th-116 { width: 116px; } /* 店舗名 */
.removal-table th.th-517 { width: 517px; } /* 店舗名 */
.removal-table th.th-116 { width: 116px; } /* 店舗名 */








/* ボタン内コンテンツ
ここから */



/* ボタン内コンテンツ
ここまで */


/* produｃｔｓ/introduction-model
【2201ー2203】店舗新規導入撤去機種TOPページここまで */


/* produｃｔｓ/setup-model
【2301ー2303】店舗設置機種一覧TOPページここまで */
.modelset-title {
    margin-left: 40px;
    font-size: 31pt;
    font-weight: normal;
}
.modelset-name {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 40px;
}

.modelset-name .label {
    background: #4AA063;
    color: #FFFFFF;
    width: 260px;
    height: 45px;
    text-align: center;
    margin-right: 10px;
    line-height: 45px; /* heightと同じ値を設定 */
}

.modelset-status {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    margin-left: 40px;
}


.modelset-input-group {
    display: flex;
    gap: 25px;
    margin-bottom: 40px;
}



.setup-table {
    table-layout: fixed;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 10px 2px;
    margin-left: -10px; /* 左側の余白を相殺 */
    display:block;
}

.setup-table th {
    background: #48B669;
    color: white;
    height: 45px;
    text-align: center;
    font-weight: normal;
    white-space: nowrap;
    border-spacing: 10px;
}

.setup-table td {
    padding: 12px 0 0 0;
    border: none;
    text-align: center;
}

.setup-table th.th-588 { width: 588px; } /* 機種名 */
.setup-table th.th-173 { width: 173px; } /* メーカー */
.setup-table th.th-126 { width: 126px; } /* 販売日 */
.setup-table th.th-116 { width: 116px; } /* 機種タイプ、台数、台数 */

/* 確認

////////////////////////

*/

/* produｃｔｓ/setup-model
【2301ー2303】店舗設置機種一覧TOPページここまで */






/* produｃｔｓ/model-genre
【2401-2403】店舗機種ジャンル別分析TOPページここから */

.modelgenre-title {
    margin-left: 40px;
    font-size: 31pt;
    font-weight: normal;
}
.modelgenre-name {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 40px;
}

.modelgenre-name .label {
    background: #4AA063;
    color: #FFFFFF;
    width: 260px;
    height: 45px;
    text-align: center;
    margin-right: 10px;
    line-height: 45px; /* heightと同じ値を設定 */
}

.modelgenre-status {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    margin-left: 40px;
}

.modelgenre-input-section {
    margin: 30px 0 40px 40px;
}

.modelgenre-input-group {
    display: flex;
    gap: 25px;
    margin-bottom: 40px;
}



.chart-container {
    text-align: center;
}

.chart-section {
    margin-left: 40px;
    display: flex;
    align-items: start;
}
.chart-title {
    background: #4aa063;
    color: #ffffff;
    height: 45px;
    margin: 0 auto;
    text-align: center;
    font-size: 15pt;
    line-height: 45px; /* heightと同じ値を設定 */
    width: 1196px;
    font-weight: normal;
}

.chart-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直方向の中央揃え */
    align-items: center;
    height: 320px;
    margin: 46px auto;
}

#shop-piechart {
    width: 100%;
    height: 100%;
}
#company-piechart {
    width: 100%;
    height: 100%;
}
#group-pieChart {
    width: 100%;
    height: 100%;
}

/* 円グラフサンプル仮置き */
.chart-wrapper {
    width: 600px; /* キャンバス全体の幅 */
    height: 600px; /* キャンバス全体の高さ */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 46px; /* 上側46pxの間隔 */
    margin-bottom: 46px; /* 下側46pxの間隔 */
}


/* 円グラフサンプル仮置き */



.maker-tables {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin: 0 40px 80px 40px ;
}

.maker-table {
    table-layout: fixed;
    margin-left: -10px; /* 左側の余白を相殺 */
    border-collapse: separate;
    border-spacing: 10px 2px;
    display:block;
}

.maker-table th {
    background: #48B669;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    white-space: nowrap;
    height: 45px;
    border-spacing: 10px; /* セル間の間隔を設定 */
}

.maker-table td {
    padding: 12px 0 0 0;
    border: none;
    background: #FFFFFF;
}



.maker-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-sample {
    width: 40px;
    height: 40px;
    border-radius: 2px;
}

.maker-table td:nth-child(1) {
    width: 335px;
}
.maker-table td:nth-child(2),
.maker-table td:nth-child(3) {
    text-align: center;
    width: 92px;
}




.genresecond-buttons {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    position: relative;
    z-index: 10;
    margin-left: 40px;
}



.genre-btn {
    background: #ffffff;
    border: none;
    width: 230px;
    height: 60px;
    font-size: 15pt;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.genre-btn.active {
    background: #FF5356;
    color: #ffffff;
    border: none;
    width: 230px;
    height: 60px;
    font-size: 15pt;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}


/* 2段目のタイトル */
.genre-title {
    background: #4aa063;
    color: #FFFFFF;
    height: 45px;
    text-align: center;
    font-size: 15pt;
    width: 1196px;
    margin-left: 40px;
    margin-bottom: 30px;
    line-height: 45px; /* heightと同じ値を設定 */
    font-weight: normal;
}

/* 2段目の円グラフとテーブル */
/*  */
.genre-content {
    display: flex;
    gap: 20px;
    width: 1200px;
    padding: 0 0 20px 0;
}

.genre-content .chart-wrapper {
    width: 40%;
    height: 250px;
    position: relative;
    margin: 0 60px;
}


#genre-pie-chart {
    width: 200px;
    height: 200px;
}

.genre-table table {
    table-layout: fixed;
    width: calc(100% + 20px);
    margin-left: -10px;
    border-collapse: separate;
    border-spacing: 10px 2px;
    display:block;
}

.genre-table th {
    background: #48B669;
    color: #FFFFFF;
    height: 45px;
    text-align: center;
    font-weight: normal;
    white-space: nowrap;
    border-spacing: 10px;
}

.genre-table td {
    padding: 12px 0 0 0;
    text-align: left;
    width: 335px;
}

.genre-table td:nth-child(2),
.genre-table td:nth-child(3) {
    text-align: right;
    width: 92px;
}


/*  produｃｔｓ/model-genre
【2401-2403】店舗機種ジャンル別分析TOPページここまで */







/*  produｃｔｓ/new-machine-share-analysis
【2501-2503】店舗新台導入シェア分析TOPページここから */

.share-analysis-title {
    margin-left: 40px;
    font-size: 31pt;
    font-weight: normal;
}
.share-analysis-name {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 40px;
}

.share-analysis-name .label {
    background: #4AA063;
    color: #FFFFFF;
    width: 270px;
    height: 45px;
    text-align: center;
    margin-right: 20px;
    line-height: 45px; /* heightと同じ値を設定 */
}



.share-analysis-status {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    margin-left: 40px;
}

.share-analysis-input-section {
    margin: 30px 0 40px 40px;
}

.share-analysis-input-group {
    display: flex;
    gap: 25px;
    margin-bottom: 40px;
}


/* テーブル */

.nmshare-maker-tables {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin: 0 40px 0 40px;
    padding: 0 0 20px 0;
}

.nmshare-maker-table {
    table-layout: fixed;
    margin-left: -10px; /* 左側の余白を相殺 */
    border-collapse: separate;
    border-spacing: 10px 2px;
    display:block;
}

.nmshare-maker-table th {
    background: #48B669;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    white-space: nowrap;
    height: 45px;
    border-spacing: 10px; /* セル間の間隔を設定 */
}

.nmshare-maker-table td {
    padding: 12px 0 0 0;
    border: none;
    background: #FFFFFF;
}

.nmshare-maker-table td:nth-child(1) {
    width: 335px;
}
.nmshare-maker-table td:nth-child(2),
.nmshare-maker-table td:nth-child(3) {
    text-align: center;
    width: 92px;
}

/*  produｃｔｓ/new-machine-share-analysis
【2501-2503】店舗新台導入シェア分析TOPページここまで */





/* produｃｔｓ/model-search
【３０００】機種検索TOPページここから */

.model-search-section {
    max-width: 960px;
    padding: 20px;
    margin: 20px auto;
}

.search-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}


.form-row {
    display: flex;
    align-items: center;
}

.model-form-label {
    background: #4AA063;
    color: white;
    width: 270px;
    height: 45px;
    line-height: 45px; /* heightと同じ値を設定 */
    text-align: center;
}

.form-input {
    padding: 0;
    width: 300px;
    height: 45px;
    margin-left: 30px;
    font-size: 15pt;
    background: #FFFFFF;
    border: 1px solid #000000;
}

.space-w {
    margin: 0 10px;
}
.date-range {
    display: flex;
    align-items: center;
    margin-left: 30px;
}

.year-input {
    width: 110px;
    height: 43px;
    padding: 0;
    font-size: 15pt;
    background: #FFFFFF;
    border: 1px solid #000000;
}

.month-input {
    width: 60px;
    height: 43px;
    padding: 0;
    font-size: 15pt;
    background: #FFFFFF;
    border: 1px solid #000000;
}

.radio-group {
    display: flex;
    margin-left: 30px;
}

.model-search-button {
    background: #3A72F3;
    color: #FFFFFF;
    border: none;
    width: 230px;
    height: 60px;
    font-size: 15pt;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.model-search-buttons {
    display: flex;
    margin-top: 70px;
    margin-bottom: 60px;
    justify-content: center;
}

.model-search-title {
    font-size: 31pt;
    margin: 0 0 20px 50px;
    font-weight: normal;
}


.results-section {
    width: 1400px;
}
.model-results-table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 10px 2px;
    margin-left: 50px;
    display:block;
}

.model-results-table th {
    background: #4AA063;
    color: white;
    height: 45px;
    text-align: center;
    font-weight: normal;
    white-space: nowrap;
}

.model-results-table td {
    padding: 12px 0 0 0;
    border: none;
}

.model-results-table td:nth-child(1) {
    width: 660px;
}

.model-results-table td:nth-child(2) {
    width: 110px;
    text-align: center;
}

.model-results-table td:nth-child(3) {
    width: 209px;
}

.model-results-table td:nth-child(4) {
    width: 155px;
    text-align: center;
}

.model-results-table td:nth-child(5) {
    width: 110px;
    text-align: center;
}






/* produｃｔｓ/model-search
【３０００】機種検索TOPページここまで */




/* produｃｔｓ/model-detail-p
【３００1】機種詳細Pページここから */

#resultsSection {
    display: none; /* 初期状態で非表示 */
}

#instaResultsSection {
    display: none; /* 初期状態で非表示 */
}

.model-detail-label {
    background: #4AA063;
    color: #FFFFFF;
    width: 270px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    margin-bottom: 20px;

}

.bargraph-title {
    background: #4aa063;
    color: #ffffff;
    height: 45px;
    margin: 0 0 0 40px;
    text-align: center;
    font-size: 15pt;
    font-weight: normal;
    line-height: 45px; /* heightと同じ値を設定 */
    width: 1175px;


}


.model-detail-info-grid {
    display: flex;
    flex-direction: column;
    margin: 60px auto 40px auto;
    max-width: 1060px;
}


.weekly-chart {
    margin: 20px 50px 70px;
    background: white;
}

.modelchart-container {
    height: 443px;
    width: 1106px;
    margin: 20px 0 40px 50px;
}


.week-buttons {
    display: flex;
    gap: 30px;
    margin-bottom: 10px;
    margin-left: 90px;
}

.week-btn {
    background: #48B669;
    color: white;
    border: none;
    font-size: 15pt;
    height: 45px;
    width: 93px;
}

.week-values {
    display: flex;
    gap: 30px;
    margin-bottom: 70px;
    margin-left: 90px;
}

.week-values span {
    background: white;
    text-align: center;
    width: 93px;
}

.prefecture-data {
    background: white;
    padding: 0 190px;
}

.prefecture-title {
    background: #4AA063;
    color: white;
    text-align: center;
    margin: 0;
    width: 260px;
    height: 45px;
}

.date-display {
    margin: 20px 0;
    text-align: center;
    display: flex;
    align-items: start;
    gap: 25px;
}

.prefecture-table {
    display: flex;
    gap: 20px;
    padding: 0 0 20px 0;
}


.prefecture-column table {
    width: 100%;
    border-collapse: separate;
    white-space: nowrap; /* 折り返しを防ぐ */
    border-spacing: 10px 2px; /* セル間の間隔を設定 */
}

.prefecture-column th {
    background: #48B669;
    color: white;
    text-align: center;
    height: 45px;
}

.th-232 {
    width: 232px;
}

.th-93 {
    width: 93px;
}

.prefecture-column td {
    background: white;
    padding: 8px;
    text-align: center;
}

/* produｃｔｓ/model-detail-p
【３００1】機種詳細Pページここまで */





/* produｃｔｓ/installation-shop-search
【3101】設置店舗検索ページここから */


.shop-search-section {
    max-width: 960px;
    padding: 20px;
    margin: 20px auto 70px auto;
}






.installation-info-value {
    margin-left: 20px;
}
.installation-search-select {
    width: 300px;
    margin-left: 20px;
    font-size: 15pt;
    border-radius: 4px;
    text-align: center;
    height: 45px;
}

.installation-form-input {
    margin-left: 20px;
    height: 45px;
    width: 300px;
    font-size: 15pt;
    background: #FFFFFF;
    border: 1px solid #000000;
}

.installation-form-label {
    background: #4AA063;
    color: white;
    height: 45px;
    width: 270px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}


.insta-results-section {
    width: 1400px;
    padding: 0 0 70px 0;
}

.insta-results-table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 10px 0;
    margin-left: 50px; /* 左側の余白を相殺 */
    display:block;
}

.insta-results-table th {
    background: #4AA063;
    color: white;
    height: 45px;
    text-align: center;
    font-weight: normal;
    white-space: nowrap;
}

.insta-results-table td {
    padding: 12px 0 0 0;
    border: none;
    text-align: center;
}

.insta-results-table th.machin-total-label {
    color: #ffffff;
    font-weight: normal;
    background: #48B669;
    text-align: center;
    width: 630px;
    height: 45px;
}


/* produｃｔｓ/installation-shop-search
【3101】設置店舗検索ページここまで */




/* produｃｔｓ/model-share-rate
【3201】シェア率ページここから */

.model-share-info-label {
    background: #4AA063;
    color: #FFFFFF;
    width: 270px;
    height: 45px;
    text-align: center;
    line-height: 45px; /* heightと同じ値を設定 */
}

.share-rate-container {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    background: white;
    margin: 0 auto; /* 中央寄せのために追加 */
    justify-content: center; /* 水平方向の中央寄せ */
    max-width: fit-content; /* コンテンツ幅に合わせる */
}

.share-groups {
    display: flex;
    flex-direction: column;
}

.share-group {
    display: flex;
}

.rank-label {
    background: #4AA063;
    color: white;
    margin-bottom: 10px;
    text-align: center;
    width: 185px;
    height: 265px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.share-total {
    background: white;
    text-align: center;
    width: 185px;
    height: 265px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ranking-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rank-row {
    display: flex;
    align-items: center;
    height: 45px; /* 5つのランクが均等に配置されるように調整 */
}

.rank {
    background: #48B669;
    color: white;
    width: 110px;
    height: 45px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-bar {
    background: #48B669;
    height: 100%;
    width: 300px;
}

.share-number,
.share-percentage {
    width: 100px;
    text-align: right;
    padding: 8px;
    background: white;
}



/* produｃｔｓ/model-share-rate
【3201】シェア率ページここまで */



/* inquiry
【4000】メッセージ機能ページここから */

.inquiry-title {
    font-size: 31pt;
    margin-bottom: 20px;
    font-weight: normal;
}

.inquirymain-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    margin-left: 114px; /* サイドバーの幅 */
    margin-top: 80px;
    overflow-y: auto;
    height: calc(100vh - 90px);
}

.contact-form {
    display: block;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.form-group-textarea {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
}

.form-label {
    background: #4AA063;
    color: white;
    width: 270px;
    height: 45px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inquiryform-input {
    width: 300px;
    height: 45px;
    font-size: 15pt;
    background: #FFFFFF;
    border: 1px solid #000000;
    margin-left: 30px;
    padding: 0;
}

.form-select {
    width: 300px;
    height: 45px;
    border: 1px solid #000000;
    text-align: center;
    font-size: 15pt;
    border-radius: 4px;
    margin-left: 30px;
    padding: 0;
}


.form-textarea {
    width: 620px;
    height: 273px;
    border: 1px solid #000000;
    padding: 0;
}

.submit-btn {
    display: block;
    margin: 20px auto;
    background: #4169E1;
    color: white;
    height: 60px;
    width: 150px;
    font-size: 15pt;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    margin-top: 67px;
}

.required-text {
    color: #FF0000;
    text-align: center;
    font-size: 14pt;
    z-index: 1; /* 他の要素に隠れないようにする */
}

.alert {
    color: green;
    background-color: #d4edda;
    border-color: #c3e6cb;
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
}


/* inquiry
【4000】メッセージ機能ページここまで */




/* 保存用＝＝＝＝＝＝＝＝＝＝＝ */
/* modelsーsearch
【・・・・・・】導入撤去機種TOPページここから */

/* modelsーsearch
【・・・・・】導入撤去機種TOPページここまで */

/* ボタン内コンテンツ
ここから */

/* ボタン内コンテンツ
ここまで */
/* 保存用＝＝＝＝＝＝＝＝＝＝＝ */




/* レスポンシブ対応 */
@media (max-width: 768px) {
    .form-group {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .search-label {
        margin-bottom: 10px;
    }
    
    .search-select,
    .search-input {
        margin-left: 0 !important;
        max-width: 100%;
    }
}

/* 追加：コンテンツを中央表示するためのスタイル */
.content-wrapper,
.company-content-wrapper,
.group-content-wrapper {
    width: 100%;
    margin: 0 auto;
    display: none;
    max-width: 1366px;
}

.content-wrapper.show,
.company-content-wrapper.show,
.group-content-wrapper.show {
    display: flex;
    justify-content: center;
}

.machine-grid {
    margin: 0 auto;
}

/* public のキャッシュクリアが効いていないため、追加分を該当箇所に直接追加(本番反映時には不要になるはず) */
.machine-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.machine-header {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.tab-btn {
    font-family: Arial, sans-serif;
    color: #72706f;
    font-size: 15pt;

}
/* 追加ここまで */

.aria-asset-machine-table .area-shop-header {
    background: #4AA063;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    white-space: nowrap; /* 折り返しを防ぐ */
    border-spacing: 2px; /* セル間の間隔を設定 */
    height: 45px; /* 高さを45pxに設定 */
    width: 200px; /* 資産価値は1列なので幅を調整 */
    min-width: 200px; /* 最小幅を設定 */
}

.aria-asset-machine-table td.asset-value {
    text-align: center;
    font-weight: bold;
    width: 200px;
    min-width: 200px;
    white-space: nowrap;
    font-size: 43pt; /* 既存のフォントサイズを保持 */
}

.asset-value {
    text-align: center;
    font-weight: bold;
    color: #333;
    padding: 10px;
    font-size: 24pt; /* 既存のフォントサイズを保持 */
}