@charset "utf-8";
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?pkyxiw');
  src:  url('fonts/icomoon.eot?pkyxiw#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?pkyxiw') format('truetype'),
    url('fonts/icomoon.woff?pkyxiw') format('woff'),
    url('fonts/icomoon.svg?pkyxiw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*言語*/
.icon-language:before {
  content: "\f1ab";
}
.icon-ei-language:before {
  content: "\e90e";
}
.icon-checkmark1:before {
  content: "\e90a";
}
.icon-download1:before {
  content: "\e909";
}
.icon-trash:before {
  content: "\e90b";
}
.icon-document:before {
  content: "\e903";
}
/*Xボタン*/
.icon-close:before {
  content: "\e900";
}
/*チャットに戻る*/
.icon-chat:before {
  content: "\e90f";
}
/*マイク*/
.icon-microphone:before {
  content: "\e90c";
}
/*信頼性のある情報*/
.icon-checkmark:before {
  content: "\e901";
}
/*AIによる自動生成*/
.icon-information-outline:before {
  content: "\e902";
}
/*リンクアイコン*/
.icon-link:before {
  content: "\e904";
}
/*送信*/
.icon-send:before {
  content: "\e905";
}
/*プログレスバー*/
.icon-fast_forward:before {
  content: "\e90d";
}
/*ダウンロード*/
.icon-download:before {
  content: "\e906";
}
/*情報源*/
.icon-cheveron-up:before {
  content: "\e907";
}
.icon-cheveron-down:before {
  content: "\e908";
}
/*更新*/
.icon-reload:before {
  content: "\ea2e";
}
/*顔*/
/*Good*/
.icon-mood-happy-outline:before {
  content: "\e9e1";
}
/*Bad*/
.icon-mood-sad-outline:before {
  content: "\e9e5";
}
/*指*/
/*Good*/
.icon-thumbs-up:before {
  content: "\f164";
}
/*Bad*/
.icon-thumbs-down:before {
  content: "\f165";
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
STEP共通
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

.pn_chat {
    position: static;
    /* overflow-y: auto; */
    /* background: linear-gradient(to right, #a7fff7, #cee2fa); */
    background: #fafafa;
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* height: 100vh; */
}

/*各コンテンツの大枠
===============================*/

  .step_wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin:0 auto;
    min-height:calc( 100dvh - 128px);
    height: 100dvh;
    padding:40px 0;
  }

  .step_wrap .step_cont{
    width:100%;
    margin: 0 auto;
    padding: 32px 24px 32px;
    color:rgba(0, 20, 100, 1);
    text-align: center;
    border-radius: 16px;
    border:1px solid #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 1);
  }
  /*アイコン*/
  .step_wrap .step_cont .ic{
    display: block;
    width: 32px;
    margin:0 auto 12px;
  }
  .step_wrap .step_cont .ic img{
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;  
  }
  /*タイトル*/
  .step_wrap .step_cont h1{
    color:rgba(0, 20, 100, 1);
    font-size: 24px;
    margin:0 0 16px;
  }
  /*txt*/
  .step_wrap .step_cont .txt{
    color:rgba(0, 20, 100, 1);
    font-size: 16px;
  }
  /*フォーム*/
  .step_wrap .voice_form {
    width: 100%;
    padding: 32px 0;
    margin:0 auto;
  }
  .step_wrap .voice_form .wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin:0 0 16px;
  }
  .step_wrap .voice_form .wrap .name{
    width: 48%;
  }
  .name {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom:24px;
  }
  .name label {
    font-size: 16px;
    font-weight: bold;
    text-align: left;
  }
  .name input {
    width: 100%;
    height: 48px;
    padding: 8px;
    font-size: 16px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.3s;
  }
  .namewrap .name input:focus {
    border-color: #66afe9;
    outline: none;
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
  }
  
  /* 次へボタン共通 */
  .step_wrap .next_step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 224px;
    height: 64px;
    margin: 0 auto;
    color: #fff;
    font-size: 20px;
    letter-spacing: 4px;
    line-height: 1;
    border-radius: 10vw;
    background: linear-gradient(to right, #57EFE0 0%, #4FC6ED 50%, #4697FB 100%);
    background-image: -moz-linear-gradient(to right, #57EFE0 0%, #4FC6ED 50%, #4697FB 100%);
    background-image: -webkit-linear-gradient(to right, #57EFE0 0%, #4FC6ED 50%, #4697FB 100%);
    background-image: -ms-linear-gradient(to right, #57EFE0 0%, #4FC6ED 50%, #4697FB 100%);
    border: none;
    background-size: 100% 100%;
    cursor: pointer;
    /* -webkit-animation: cbAnime 12s ease infinite;
    -moz-animation: cbAnime 12s ease infinite;
    animation: cbAnime 12s ease infinite; */
    }
    .step_wrap .next_step.disabled {
      background: #ccc;
      cursor: not-allowed;
    }


/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
PC
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

  @media only screen and (min-width: 641px) {
    /*各コンテンツの大枠
  ===============================*/
  .step_wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height:calc( 100dvh - 164px);
    padding:40px 0;
  } 
  .step_wrap .step_cont{
    margin: 0 auto;
    padding: 64px 24px 64px;
    color:rgba(0, 20, 100, 1);
    text-align: center;
    border-radius: 16px;
    border:1px solid #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 1);
  }
  /*アイコン*/
  .step_wrap .step_cont .ic{
    display: block;
    width: 32px;
    margin:0 auto 12px;
  }
  .step_wrap .step_cont .ic img{
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;  
  }
  /*タイトル*/
  .step_wrap .step_cont h1{
    color:rgba(0, 20, 100, 1);
    font-size: 28px;
    margin:0 0 16px;
  }
  /*txt*/
  .step_wrap .step_cont .txt{
    color:rgba(0, 20, 100, 1);
    font-size: 16px;
  }
  /*フォーム*/
  .step_wrap .voice_form {
    width: 100%;
    padding: 32px 0;
    margin:0 auto;
  }
  .step_wrap .voice_form .wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin:0 0 16px;
  }
  .step_wrap .voice_form .wrap .name{
    width: 48%;
  }
  .name {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom:24px;
  }
  .name label {
    font-size: 16px;
    font-weight: bold;
    text-align: left;
  }
  .name input {
    width: 100%;
    height: 56px;
    padding: 8px;
    font-size: 16px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.3s;
  }
  .namewrap .name input:focus {
    border-color: #66afe9;
    outline: none;
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
  }

  /* 次へボタン共通 */
    .step_wrap .next_step {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 224px;
        height: 64px;
        margin: 0 auto;
        color: #fff;
        font-size: 20px;
        letter-spacing: 4px;
        line-height: 1;
        border-radius: 10vw;
        background: linear-gradient(to right, #57EFE0 0%, #4FC6ED 50%, #4697FB 100%);
        background-image: -moz-linear-gradient(to right, #57EFE0 0%, #4FC6ED 50%, #4697FB 100%);
        background-image: -webkit-linear-gradient(to right, #57EFE0 0%, #4FC6ED 50%, #4697FB 100%);
        background-image: -ms-linear-gradient(to right, #57EFE0 0%, #4FC6ED 50%, #4697FB 100%);
        border: none;
        background-size: 100% 100%;
        cursor: pointer;
        /* -webkit-animation: cbAnime 12s ease infinite;
        -moz-animation: cbAnime 12s ease infinite;
        animation: cbAnime 12s ease infinite; */
    }
    .step_wrap .next_step.disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    
 }