@media (min-width: 1400px) {
    #contents{
        max-width:1400px; 
        padding: 20px 10px; 
        margin:10px auto; 
        text-align:center;
    }
    #current{
        min-width:670px; 
        max-width:670px;
        height:70vh;
        float:left;
        margin-right:8px;
    }
    #chart{
        min-width:670px; 
        max-width:670px; 
        height:70vh;
        float:left;
    }
    .iconModule{
        filter: hue-rotate(240deg);
        width:min(12vw, 120px);
        height:min(12vw, 120px);
        border-radius: 50%;
    }
    .chartArea{
        height:calc(70vh - 200px);
    }
}

@media (max-width: 1399px) {
    #contents{
        max-width:800px; 
        margin:10px auto; 
        text-align:center;
    }
    #current{
        max-width:760px;
        width:90vw;
        min-height:300px;
        padding:10px;
        margin-bottom:8px;
    }
    #chart{
        max-width:760px;
        width:90vw;
        min-height:500px;
        height:60vw;
        margin:5px; 
        padding:10px;
    }
    .iconModule{
        filter: hue-rotate(240deg);
        width:min(15vw, 150px);
        height:min(15vw, 150px);
        border-radius: 50%;
    }
    .chartArea{
        min-height:300px;
        height:calc(60vw - 200px);
    }
 }


    .slider-background {
        border-radius: 10px;
        height: 240px;
        padding:10px;
        background-color: rgba(255, 255, 255, 0.7);
    }
    .fontMain{
        margin-top:-3vw;
        position: relative;
        z-index:1;
        font-size:min(2.6vw, 30px);
        font-weight: bold;
        text-shadow:
        0 0 7px #fff,
        0 0 10px #ccf,
        0 0 21px #99f,
        0 0 42px #66f;
    }
    .fontSub{
        position: relative;
        z-index:1;
        font-size:min(2vw, 24px);
        margin-top:max(-1vw, -12px);
        text-shadow:
        0 0 7px #fff,
        0 0 10px #ccf,
        0 0 21px #99f;
    }

    .box {
        margin: 0 auto;
        position: relative;
        display: block;
        overflow: hidden;
    }

    .box__line {
        position: absolute;
        box-shadow:
        0 0 7px #ccf,
    }

    .box__line:nth-child(1) {
        width: 100%;
        height: 2px;
    }

    .box__line:nth-child(2) {
        width: 2px;
        height: 100%;
    }

    .box__line:nth-child(1) {
        top: 0;
        left: 0;
        background: linear-gradient(to right, transparent, #ccF);
        animation: animate1 2s linear infinite;
    }

    .cp_ipradio02 label {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    /*通常時のラジオボタンの色*/
    .cp_ipradio02 .option-input {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        font-size: 20px;
        color: #ffffff;
        background: #d7cbcb;
        cursor: pointer;
        transition: all 0.15s ease-out 0s;
        /*デフォルト値を無効に*/
        border: none;
        outline: none;
        appearance: none;
    }

    /*hover時のラジオボタンの色*/
    .cp_ipradio02 .option-input:hover {
        background: #d6a9a9;
    }

    /*checked時のラジオボタンの色*/
    .cp_ipradio02 .option-input:checked {
        width: 30px;
        height: 30px;
        background: #da3c41;
    }

    /*checked時のラジオボタンのチェックマーク*/
    .cp_ipradio02 .option-input:checked::before {
        position: absolute;
        content: '✔';
    }

    .cp_ipradio02 .option-input:checked::after {
        position: relative;
        content: '';
        background: #da3c41;
        animation: click-wave 0.8s ease;
    }

    .cp_ipradio02 .option-input.radio {
        border-radius: 50%;
    }

    .cp_ipradio02 .option-input.radio::after {
        border-radius: 50%;
    }

    /*無効の設定*/
    .cp_ipradio02 .disabled {
        color: #9e9e9e;
    }

    .cp_ipradio02 .option-input:disabled {
        cursor: not-allowed;
        background: #b8b7b7;
    }

    .cp_ipradio02 .option-input:disabled::before {
        position: absolute;
        content: '✖︎';
    }

    .toggle-button {
        margin: 400px;
          display: inline-block;
          position: relative;
          width: 100px;
          height: 50px;
          border-radius: 50px;
          border: 3px solid #dddddd;
          box-sizing: content-box;
          cursor: pointer;
          transition: border-color .4s;
      }
      
      .toggle-button:has(:checked) {
          border-color: #4bd865;
      }
      
      .toggle-button::after {
          position: absolute;
          top: 50%;
          left: 5px;
          transform: translateY(-50%);
          width: 45px;
          height: 45px;
          border-radius: 50%;
          background-color: #dddddd;
          content: '';
          transition: left .4s;
      }
      
      .toggle-button:has(:checked)::after {
          left: 50px;
          background-color: #4bd865;
      }
      
      .toggle-button input {
          display: none;
      }

    /*クリックした時のアニメーション*/
    @keyframes click-wave {
        0% {
            width: 30px;
            height: 30px;
            opacity: 0.35;
        }

        100% {
            transform: scale(8);
            opacity: 0;
        }
    }

    .box__line:nth-child(2) {
        top: 0;
        right: 0;
        animation: animate2 2s linear infinite;
        animation-delay: 1s;
        background: linear-gradient(to bottom, transparent, #ccF);
    }

    .box__line:nth-child(3) {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left, transparent, #ccF);
        animation: animate3 2s linear infinite;
    }

    .box__line:nth-child(4) {
        top: 0;
        left: 0;
        background: linear-gradient(to top, transparent, #ccF);
        animation: animate4 2s linear infinite;
        animation-delay: 1s;
    }

    @keyframes animate1 {
        0% {
            transform: translateX(-100%);
        }

        100% {
            transform: translateX(100%);
        }
    }

    @keyframes animate2 {
        0% {
            transform: translateY(-100%);
        }

        100% {
            transform: translateY(100%);
        }
    }

    @keyframes animate3 {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    @keyframes animate4 {
        0% {
            transform: translateY(100%);
        }

        100% {
            transform: translateY(-100%);
        }
    }