/* responsive.css: 各ページ共通のレスポンシブデザイン */

/* 1440px用のスタイル */
@media (max-width: 1440px) {
  #side-colum {
    padding: 0 30px;
  }
  #side-colum ul {
    padding: 0;
  }
}

/* 1. スマホ・タブレット用（幅1024px以下） */
@media (max-width: 1024px) {
  #reward-graph {
    width: 960px !important;
  }
  #reward-graph .tv-lightweight-charts {
    width: 960px !important;
  }
  body {
    font-size: 15px;
  }
  #main-colum {
    margin-left: 0;
    width: 100%;
    padding: 60px 10px;
    top: 70px;
  }
  header h1 img {
    margin-left: 15px;
  }
  #container.flex {
    margin-left: 0;
    width: 100%;
    display: block;
  }
  /* ハンバーガーメニュー用ボタン */
  .hamburger {
    display: block !important;
    position: fixed;
    top: 12px;
    left: 16px;
    width: 38px;
    height: 38px;
    z-index: 1201;
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
  }
  .hamburger span,
  .hamburger span:before,
  .hamburger span:after {
    display: block;
    position: absolute;
    width: 28px;
    height: 2px;
    background: #036eb8;
    border-radius: 2px;
    transition: all 0.3s;
  }
  .hamburger span {
    top: 17px;
  }
  .hamburger span:before {
    content: '';
    top: -10px;
  }
  .hamburger span:after {
    content: '';
    top: 10px;
  }
  /* メニュー開閉時のアニメーション */
  .hamburger.active span {
    background: transparent;
  }
  .hamburger.active span:before {
    transform: translateY(10px) rotate(45deg);
  }
  .hamburger.active span:after {
    transform: translateY(-10px) rotate(-45deg);
  }

  /* サイドメニュー本体 */
  #side-colum {
    position: fixed;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 1200;
    box-shadow: 2px 0 8px rgba(0,0,0,0.08);
    transition: left 0.3s;
    border-bottom: none;
    border-right: 1px solid #ddd;
    padding: 40px 20px 10px 20px;
  }
  #side-colum.open {
    left: 0%;
  }
  /* オーバーレイ */
  .menu-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.2);
    z-index: 1199;
  }
  .menu-overlay.active {
    display: block;
  }
  #side-colum ul {
    padding: 10px 0;
    box-sizing: border-box;
  }
  #side-colum ul li {
    margin: 20px 0;
    font-size: .9rem;
    padding-left: 40px;
  }
  #main-colum {
    margin-left: 0;
    width: 100%;
    padding: 10px;
    top: 70px;
  }
  .header-content {
    padding: 0.5rem 1rem;
    text-align: left;
    height: 100%;
  }
  .user_name {
    text-align: right;
    float: right;
    margin-right: 0;
    margin-left: auto;
    width: auto;
  }
  #reward_price_graph {
    width: 100% !important;
    max-width: 100% !important;
  }
  .user_contact_ai_message {
    font-size: 1rem;
    padding: 8px 4px;
    min-height: 40px;
  }
  .select_contact_box, #user_contact_message {
    min-width: 40rem;
    width: 100%;
    padding: 5px;
  }
  #dashboard .dashboard-graph-content{
    min-height: 350px;
  }
  #dashboard .dashboard-graph-content .dashboard-graph-left-content{
    width: 65%;
  }
  .output-section dd{
    max-width: 250px;
  }

}
@media (max-width: 900px) {
  #reward-graph {
    width: 815px !important;
  }
  .wallet-container {
    display: block;
  }
  #wallet-form, #wallet_datas {
    margin-top: 0 !important;
  }
  #assets_data, #bank_datas {
    margin-top: 15px;
  }
  .regist-container {
    display: block;
  }
  .output-section dd{
    max-width: 188px;
  }
  #user_regist .regist-left-container dl dt, #user_regist .regist-right-container dl dt, #user_update .regist-left-container dl dt, #user_update .regist-right-container dl dt{
    width:120px;
  }
}
/* 2. タブレット用（幅768px以下） */
@media (max-width: 768px) {
  #reward-graph {
    width: 686px !important;
    height: 440px;
  }
  .button-section {
    flex-direction: row;
    align-items: center;
  }
  header h1 img {
    margin-left: 30px;
  }

  #main-colum {
    padding: 5px 10px;
  }
  .header-content {
    padding: 0.3rem 0.5rem;
  }
  .user_name {
    font-size: 0.9rem;
  }

  .user_contact_ai_message {
    font-size: 0.95rem;
    padding: 4px 2px;
    min-height: 30px;
  }
  .select_contact_box, #user_contact_message {
    padding: 2px;
  }
  #dashboard .dashboard-graph-content{
    display: block
  }
  #dashboard .dashboard-graph-content .dashboard-graph-left-content, 
  #dashboard .dashboard-graph-content .dashboard-graph-right-content{
    width: 100%;
  }
    #dashboard .dashboard-graph-content .dashboard-graph-right-content{
      margin-top: 30px;
    }
  .dashboard-assets-detail .symbol-assets, .dashboard-assets-detail .symbol-rate{
    padding: 0 15px
  }
  #node_unit_daily_details_table_paginated {
    overflow-x: auto;
    width: 100%;
    display: block;
  }
  .output-section dd{
    max-width: 160px;
  }
  .specify_date dd:nth-child(5), 
  .period_specification dd:nth-child(5){
    max-width: 170px;
  }
  .period_specification dd:nth-child(5) p button, 
  .specify_date dd:nth-child(5) p button{
    font-size: .9rem;
  }
  .regist-container{
    display: block
  }
  .regist-left-container, 
  .regist-right-container{
    width: 100%;
  }
  .regist-left-container{
    border-right:none;
  }
  #wallet .wallet-container{
    display: block;
  }
  .wallet-left-container, 
  .wallet-right-container{
    width: 100%;
  }
  .wallet-left-container{
    border-right:none;
  }
  .button-section button{
    width: calc(94% / 3 - 16px);
  }

}
@media (max-width: 728px) {
  #reward_price_graph{
    padding:30px 0 10px
  }
  .tv-lightweight-charts{
    width: 650px !important;
  }
  #output .output-content .output_input_box{
    padding:20px 0
  }
}

/* 2. スマホ用（幅600px以下） */
@media (max-width: 640px) {
  #reward-graph {
    width: 606px !important;
    height: 440px;
  }
  #reward-graph .tv-lightweight-charts {
    width: 580px !important;
  }
  .dashboard-log-content,
  .dashboard-log-content th,
  .dashboard-log-content td {
    font-size: 0.85rem !important;
  }
  .output-section dl {
    display: block;
  }
  .output-section dt {
    margin-bottom: 5px;
  }
  .output-section dd {
    margin-bottom: 15px;
    width: 100%;
  }
  .output-section input,
  .output-section select {
    width: 100%;
    max-width: 280px;
    box-sizing: border-box;
  }

  #main-colum {
    padding: 60px 10px;
  }
  .header-content {
    padding: 0.3rem 0.5rem;
  }
  .user_name {
    font-size: 0.9rem;
  }
  #reward_price_graph {
    height: 180px !important;
  }
  .user_contact_ai_message {
    font-size: 1.1rem;
    padding: 4px 2px;
    min-height: 30px;
  }
  .select_contact_box, #user_contact_message {
    padding: 2px;
  }
  #login_form_section dl{
    display: block;
  }
  #login_form_section dd{
    margin-top: 10px;
    width: 100%;
  }
  #login_form_section dd input{
    height: 45px;
  }
  .send_btn input{
    max-width: 220px;
    padding: 15px 0;
  }
  .dashboard-assets-detail .symbol-assets, .dashboard-assets-detail .symbol-rate{
    font-size: 1rem;
  }
  .symbol-rate span{
    font-size: 1.4rem;
  }
  #dashboard .dashboard-graph-content{
    padding:10px 5px
  }
  .tv-lightweight-charts{
    width: 580px !important;
  }
  .tv-lightweight-charts table{
    width: 100% !important;
  }
  .pager-nav-disabled.next{
    margin-left: 4px;
  }
  .period_specification dd:nth-child(3){
    max-width: 30px;
  }
  .output-section dd {
        max-width: 140px;
    }
    .specify_date dd:nth-child(5), 
    .period_specification dd:nth-child(5){
      margin-left: 15px;
    }
    #output .output-content .output_input_box{
      padding:20px 0;
    }
    .button-section button{
      font-size: .9rem;
      width: calc(100% / 3 - 16px);
    }
    .select_contact_box, #user_contact_message{
      min-width: 35rem;
    }
    .button-section{
      width: initial;
    }
}

@media (max-width: 480px) {
  #main-colum h2{
    font-size: 1.1rem;
  }
    .tv-lightweight-charts {
        width: 450px !important;
    }


    #dashboard .dashboard-assets-content .dashboard-assets-detail{
        display: block;
    }
    .dashboard-assets-detail .symbol, 
    .dashboard-assets-detail .symbol-assets, 
    .dashboard-assets-detail .symbol-rate{
      width: 100%;
      text-align: left;
      margin: 15px 0;
      padding:0
    }

  .log-table-responsive {
    overflow-x: auto;
    width: 100%;
  }
  .log-table-responsive table {
    min-width: 800px;
  }
  #user_regist .regist-left-container dl dd, #user_regist .regist-right-container dl dd, #user_update .regist-left-container dl dd, #user_update .regist-right-container dl dd {
    margin: 20px 0;
    font-size: 1rem;
    width: calc(100% - 120px);
  }
  #user_regist .regist-right-container dl dd select, #user_update .regist-right-container dl dd select{
    width: 50%;
  }
  .output-section dl{
    display: block;
  }
  .period_specification {
    display: block;
  }
  .period_specification dt {
    display: block;
    margin-bottom: 6px;
  }
  .period_specification .dd-row, 
  .specify_date .dd-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
  }
  .specify_date{
    margin-top: 50px;
  }
  .specify_date .dd-row dt{
    width: 30px;
  }
   .specify_date .dd-row dd{
    max-width: 165px;
   }
  .period_specification .dd-row dd {
    display: flex;
    align-items: center;
    justify-content: center;
  }
   .period_specification .dd-row dd:first-child{
    max-width: 175px;
   }
  .period_specification .dd-row dd:nth-child(2) {
    max-width: 50px;
    border:none;
  }
  .period_specification .dd-row dd:nth-child(3) {
    max-width: 175px;
    border:1px solid #ddd;
    background: #fafafa;
    border-radius: 7px;
    font-size: .9rem;
    box-sizing: border-box;
    padding: 1px;
  }
  .period-output-btn-dd{
    max-width: initial !important;
    background: #fff !important;
    display: flex;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #036eb8 !important;
}
.period-output-btn-dd p button{
    background: transparent;
    border:none;
    outline: none;
    color:#fff;
    font-size: 1rem;
}
.button-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    align-items: stretch;
  }
  .button-section button {
    width: 100%;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
  }
  #company .company-container ul.company-list li dd{
    width: 280px;
    line-height: 1.3;
  }
  .select_contact_box, #user_contact_message {
    min-width: 20rem;
  }
  #dashboard .dashboard-graph-content .dashboard-graph-right-content dl{
    margin: 18px 0;
    font-size: 1rem;
  }
  #reward_price_graph{
    padding:30px 0 10px
  }
  .regist-left-container{
    padding: 20px 10px;
  }

}








@media (max-width: 414px){
  .tv-lightweight-charts{
    width: 385px !important;
  }
  .period_specification .dd-row dd:first-child, .period_specification .dd-row dd:nth-child(3){
    max-width: 150px;
    margin-top: 0;
    background:transparent !important;
    max-width: 150px;
  }

  .specify_date .dd-row dd {
        max-width: 135px;
  }

    
}

@media (max-width: 393px){
  .tv-lightweight-charts{
    width: 360px !important;
  }
  .period_specification .dd-row dd:first-child, .period_specification .dd-row dd:nth-child(3){
    max-width: 150px;
  }
  .specify_date .dd-row dd {
        max-width: 135px;
    }
  #company .company-container ul.company-list li dd{
    width: 230px;
  }
  .tel_contact dt{
    font-size: .8rem;
  }
  .tel_contact li:first-child{
    font-size: 1.3rem;
  }
}

@media (max-width: 375px){
  .tv-lightweight-charts{
    width: 340px !important;
  }
  .period_specification .dd-row dd:first-child, .period_specification .dd-row dd:nth-child(3){
    max-width: 150px;
  }
  .specify_date .dd-row dd {
        max-width: 135px;
    }
  #company .company-container ul.company-list li dd{
    width: 230px;
  }
  #reward-graph .label_box li{
    margin-left: 5px;
  }
  #company .company-container ul.company-list li dt{
    margin-right: 5px;
  }
}

/* Safari・iOSでのflexbox幅崩れ対策 */
@media (max-width: 414px) {
  .period_specification .dd-row,
  .specify_date .dd-row {
    min-width: 0;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .period_specification .dd-row dd,
  .specify_date .dd-row dd {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    word-break: break-all;
  }
  .period_specification .dd-row dd:first-child,
  .period_specification .dd-row dd:nth-child(3) {
    max-width: 150px;
    min-width: 0;
    flex-shrink: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -webkit-flex-grow: 1;
  }
  .specify_date .dd-row dd {
    max-width: 135px;
    min-width: 0;
    flex-shrink: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -webkit-flex-grow: 1;
  }
}

/* 全体にbox-sizing: border-box;を適用（未設定の場合） */
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/* 3. テーブル横スクロール対応 */
@media (max-width: 1024px) {
  #node_unit_daily_details_table_paginated, #log_table {
    overflow-x: auto;
    width: 100%;
  }
  #node_unit_daily_details_table_paginated thead, #log_table thead {
    display: table-header-group;
  }
}
@media (max-width: 1024px) {
  .table-responsive {
    overflow-x: auto;
    width: 100%;
  }
}
@media (max-width: 768px) {
  .table-responsive {
    overflow-x: scroll;
    width: 800px
  }
}

/* 480px用のスタイル */
@media (max-width: 480px) {
  #reward-graph {
    width: 448px !important;
    height: 432px;
  }
  #reward-graph .tv-lightweight-charts {
    width: 444px !important;
  }
  .card {
    padding: 10px 0;
  }
  .dashboard-assets-detail .stat-card {
    display: block;
    width: 100%;
    max-width: none;
  }
  .dashboard-assets-detail .stat-card:nth-child(2) {
    margin-top: 15px;
  }
  
  /* データ出力画面の調整 */
  #output .output-content {
    padding: 10px;
  }
  #output .output_input_box {
    padding: 15px 10px;
  }
  #output .output-section {
    margin: 15px 0;
  }
  #output .output-section dl {
    display: block !important;
    clear: both;
  }
  #output .output-section dt {
    width: 100%;
    margin-bottom: 8px;
    font-size: 0.9rem;
    display: block;
    clear: both;
  }
  #output .output-section dd {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    display: block;
    float: none !important;
  }
  /* 出力形式セクション */
  #output .output_format {
    display: block !important;
  }
  /* 期間指定セクション */
  #output .period_specification {
    display: block !important;
  }
  #output .period_specification dd:nth-child(3) {
    text-align: center;
    margin: 5px 0;
    background: transparent !important;
  }
  #output .output-section dd input,
  #output .output-section dd select {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    font-size: 0.95rem;
  }
  #output .period_specification dd p,
  #output .specify_date dd p {
    margin: 10px 0;
  }
  #output .button-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #output .button-section button {
    width: 100%;
    padding: 12px;
    font-size: 0.9rem;
    max-width: none;
  }
  #output .period-output-btn,
  #output .by-month-output-btn {
    width: 100%;
    padding: 10px;
    font-size: 0.9rem;
    background: #036eb8 !important;
    color: #fff !important;
    border-radius: 7px;
  }
  #output .period-output-btn-dd {
    width: 100%;
    margin-top: 10px;
  }
  
  /* 会社概要のdt幅調整 */
  .company-list dt {
    min-width: 80px;
  }
  
  /* お問合せボックスのpadding調整 */
  .user_contact-box {
    padding: 24px 0;
  }
  
  /* 資産データのpadding調整 */
  #assets_data,
  #wallet-form,
  #bank_datas {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 440px用のスタイル */
@media (max-width: 440px) {
  #reward-graph {
    width: 408px !important;
    height: 432px !important;
  }
  #reward-graph .tv-lightweight-charts {
    width: 402px !important;
  }
  header h1 img {
    margin-left: 55px;
    width: 100px;
  }
  .period_specification .dd-row dd:first-child, .period_specification .dd-row dd:nth-child(3){
    max-width: 160px;
  }
  .specify_date .dd-row dd {
        max-width: 135px;
  }
   .period_specification .dd-row dd:nth-child(2){
    max-width: 25px;
  }
  #company .company-container ul.company-list li dd{
    width: 250px;
  }
  #user_contact .user_contact-content{
    padding:10px;
  }
  .user_contact-box{
    padding:0;
  }
  #user_update .regist-left-container dl dd {
    margin: 10px 0;
  }
}

/* 428px用のスタイル */
@media (max-width: 428px){
  #reward-graph {
    width: 395px !important;
    height: 432px !important;
  }
  #reward-graph .tv-lightweight-charts {
    width: 388px !important;
  }
  #reward_price_graph {
    /* height: 180px !important; */
  }
  .wallet-left-container{
    padding: 20px 0;
  }
  .period_specification .dd-row dd:nth-child(2){
    max-width: 25px;
  }
  .period_specification .dd-row dd:first-child, 
  .period_specification .dd-row dd:nth-child(3){
    max-width: 160px;
  }
  .specify_date .dd-row dd{
    max-width: 140px;
  }
  #user_regist .regist-left-container dl dt, #user_regist .regist-right-container dl dt, #user_update .regist-left-container dl dt, #user_update .regist-right-container dl dt{
    width: 110px;
  }
  #user_regist .regist-left-container dl dd, #user_regist .regist-right-container dl dd, #user_update .regist-left-container dl dd, #user_update .regist-right-container dl dd{
    width: calc(100% - 110px);
  }

  input, select, textarea{
    font-size: .9rem;
  }
  #user_regist .regist-left-container dl dd input, #user_regist .regist-right-container dl dd input, #user_update .regist-left-container dl dd input, #user_update .regist-right-container dl dd input{
    padding:10px;
    font-size: .9rem;
  }
  #user_regist .regist-right-container dl dd select, #user_update .regist-right-container dl dd select{
    font-size: .9rem;
  }
  #dashboard .dashboard-assets-content .dashboard-assets-detail .symbol p{
    font-size: 1.2rem;
  }
  #company .company-container ul.company-list li dt{
    width: 105px;
  }
  #company .company-container ul.company-list li dd{
    width: 265px;
  }
  #company .company-container{
    padding:10px;
  }
  #user_regist .regist-right-container #zipcode, #user_update .regist-right-container #zipcode{
    width: 46%;
  }
}

/* 4. 汎用：ボタンや入力欄の幅調整 */
@media (max-width: 600px) {
  input, select, textarea {
    font-size: 1em;
    width: 100%;
    box-sizing: border-box;
  }
  .pager-controls {
    padding: 5px;
    font-size: 0.95em;
  }
}

.table-responsive table {
  min-width: 700px;
}