body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }

    .popup {
        position: relative;
        background-color: #f4ce13;
        border: 1px solid #ccc;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .popup-header {
      padding: 10px;
      color: #333;
      font-size: 18px;
      font-weight: bold;
      border-radius: 10px 10px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .popup-header div {
        display: flex;
        align-items: center; /* 画像とテキストを縦中央に揃える */
    }

    .popup-header p {
        margin: 0; /* pタグの余白をなくす */
        font-size:3.2vw;
        font-weight:normal;
    }

    .popup-header img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .popup-close {
        cursor: pointer;
        font-size: 24px;
        font-weight: bold;
        color: white;
    }
    
    .popup-contentarea{
        background: white;
        border-radius: 5px;
        width: 95%;
        margin: 0 auto 10px auto;
        padding: 40px 20px;
    }

    .popup-header img {
        width: 42px; 
        height: auto;
        margin-left:10px;
    }

    .popup-content p {
        margin: 10px 0;
        font-size: 3.8vw;
        line-height: 25px;
        padding: 12px 0;
    }
    
    .popup-header p{
      padding: 12px 10px 12px 0;
    }
    
    .popup-header{
        margin: 0;
        font-size: 3.8vw;
        line-height: 0;
        padding: 0;
    }

    .popup-content .step {
        font-size: 3.8vw;
        margin:30px 0 15px 0;
        font-weight: bold;
    }

    .popup-content .check {
        background-color: #f8f8f8;
        padding: 10px;
        border-left: 5px solid #ff5722;
        margin: 15px 0;
        font-weight: bold;
    }
    
    .step{
      display:flex;
      align-items:center;
      color:#59534f;
    }
    
    .step span {
        background: #645c5a;
        width: 9vw;
        height: 9vw;
        border-radius: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        color:white;
        margin-right:10px;
        font-size:3.6vw;
    }
    
    .question_btn {
        display: flex;
        width: 100%;
        height: 13vw;
        background: #eee;
        justify-content: center;
        align-items: center;
        font-size: 3.8vw;
        font-weight:bold;
    }
    
    .popup-content .step:first-child {
    margin-top: 0;
    }
    
    .footer_close{
      width:100%;
      font-size:30px;
      color:white;
      text-align:center;
      font-weight:bold;
    }

    .step.long_title span {
        width: 100%;
    }


    .popup-contentarea .youtube_howtochange{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: 600px;

}