/*変更前のバックアップ*/
/*
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
    background-color:rgb(255, 255, 255);
    -webkit-touch-callout:none;
    user-select:none;
}
.main{
    padding-left: 14px;
    padding-right: 14px;
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
}
*/

body {
    font-family: Arial, sans-serif;
    height: 100%;
    margin: 0;
    background-color:rgb(255, 255, 255);
    -webkit-touch-callout:none;/* リンク長押しのポップアップを無効化 */
    user-select:none; /* テキスト長押しの選択ボックスを無効化 */
    width: 100%;
}

.main{
    margin-left:auto;
    margin-right:auto;
    padding-left: 14px;
    padding-right: 14px;
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
}


.title-image{
    width:100%;
    padding-top: 14px;
}
.title-image img{
    width:100%;
    object-fit: cover; /* 中央を基準に切り取る */
    object-position: center; /* 縦横の中心を基準に表示 */
}
.head-border{
    display: flex;
    align-items: center;
    font-size:medium;
    text-align: center;
}
.head-border:before,
.head-border:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #666;
}

.head-border:before {
    margin-right: 2rem;
}

.head-border:after {
    margin-left: 2rem;
}

.container {
    /*background-color:rgb(248, 237, 236);*/
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0);
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
}
.character-name{
    display: flex;
    justify-content: center; /* 横方向に中央寄せ */
    align-items: center; /* 縦方向に中央寄せ（高さがある場合） */
    flex-direction: column; /* 上下に要素を配置 */
    text-align: center; /* テキストの中央揃え */
    margin-top: 30px; /* 任意で上下の余白を調整 */
}
.character-name img{
    width:50%;
    /*height:200px;*/
    object-fit: cover; /* 中央を基準に切り取る */
    object-position: center; /* 縦横の中心を基準に表示 */
    display: block; /* インライン要素ではなく、ブロック要素として扱う */
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
}
.character-name div{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top:20px;
    margin-left:30px;
}

#reloadButton{
    background-color:#fff;
    color: #000;
    width:20px;
    margin:0;
    padding:0;
    margin-left:10px;
}

.character-name input{
    text-align: center;
    font-size: medium;
    border: solid 1px #cfcfcf;
}
.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    border-left: 1px solid transparent;
    margin-left: 5px;
}
#choice1Group ,#choice2Group,#choice3Group{
    position: relative; /* 子要素の絶対配置の基準となる */
}
#choice1Group div, #choice2Group div, #choice3Group div{
    text-align: left;
    padding-left:5%;
}
#choice1Group::before,#choice2Group::before,#choice3Group::before{
    content: "";
    position: absolute;
    left: 2px;
    top: 50px;
    bottom: 0;
    border-left: 0.75px solid #0ABAB5; /* 細い縦線を指定 */
}
table{
    height:40px;
    margin-top:5px;
    margin-bottom:15px;
    border-collapse: separate;
    border-spacing: 0;
}
table td{
    /*border-style: solid;*/
    padding:0;
    margin:0;    
}
table tr:nth-child(1) td:nth-child(1){
    width: 5em;
    background-color:#0ABAB5;;
    border: 1px solid #ccc;
    border-radius: 3px 0 0 3px;
    border:none;
}
table tr:nth-child(1) td:nth-child(2){
    width: fit-content;
    background-color: rgb(255, 255, 255);
    border: 1px solid #ccc;
    border-left:none;
    border-radius: 0 3px 3px 0;
}
label{
    width: 100%;
    padding: 10px;
    font-size: 1em;
    color:#fff;
    box-sizing: border-box;
    margin-top: 5px;
    height:40px;
}

.input-group input {
    width: 100%;
    padding: 10px;
    font-size: medium;
    border:none;
    background-color: rgb(255, 255, 255,0);
    box-sizing: border-box;
    margin-top: 0px;
}
#addChoiceButton1,#addChoiceButton2,#addChoiceButton3 {
    background-color:rgb(255, 255, 255);
    border: 1px solid #0ABAB5;
    color:#0ABAB5;
}
#addChoice1,#addChoice2,#addChoice3 {
    background-color:#0ABAB5;
    border: 1px solid #0ABAB5;
    color:rgb(255, 255, 255);
    margin-bottom:0;
}
#addMessage{
    background-color: rgb(255, 255, 255);
    color: #4d4d4d;
    border-style: solid;
    border-width:1px;  
}
.input-group textarea {
    width: 100%;
    padding: 10px;
    font-size: medium;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-top: 5px;
    resize: none;
    height:70px;
}


.container button {
    width: 90%;
    padding: 10px;
    font-size: 1em;
    border: none;
    border-radius: 3px;
    background-color: #4d4d4d;
    color: white;
    cursor: pointer;
    margin-top: 10px;
    margin-left:5%;
}
#previewUrl{
    background-color: #f37e91;
}

.message-group, .choice-message-group {
    padding-left:5px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.message-group img, .choice-message-group img {
    margin-right: 10px;
    cursor: pointer;
    width: 80px;
    height: 80px;
    border-radius: 5px;
}

.message-group textarea{
    width:100%;
    font-size: medium;
    height:70px;
    border-radius: 5px;
    border: 1px solid #ccc;
    resize: none;
}
/* スクロールを停止するためのクラス */
.no-scroll {
    overflow: hidden;
}

.iconPicker {
    display: none;
    position: fixed; /* 常に画面の中央に表示するためにfixedを使用 */
    max-width: 600px;
    top:0;
    width: 100%; /* 横幅を調整（必要に応じて変更） */
    height: 100%; /* アイコンピッカーの最大高さを設定 */
    background-color:rgba(0, 0, 0, 0.3);
    z-index: 1000; /* 他の要素の上に表示 */
    margin-left:-14px;

}
.iconPicker-contents{
    border:solid 1px #5f5f5f;
    width:90%;
    height: 90svh;
    border-radius: 10px;
    margin-left:5%;
    margin-top:5svh;
    overflow: hidden;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.35);
    background-color:#ffffff;
}
.iconPicker-header{
    /*background-color:#0ABAB5;*/
    background-color:#ffffff;
    text-align: center;
    height:5svh;
    display: flex; /* Flexboxを使用 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    color:#555;
    font-weight: 500;
}

.icon-container{
    background-color:#ffffff;
    overflow-y: auto; /* 縦方向にスクロールできるようにする */
    width:100%;
    height:71svh;
    display: flex;            /* フレックスボックスを使用 */
    justify-content: center;   /* 横方向に中央揃え */
    align-items: center;       /* 縦方向に中央揃え */
    flex-wrap: wrap;           /* アイコンを折り返す（必要に応じて） */
    gap: 8px;                 /* アイコン間のスペース（調整可能） */
}
.iconPicker img {
    width: 43%;
    max-width: 200px;
    cursor: pointer;
    border-radius: 10px;
}

.iconPicker-footer{
    background-color:#ffffff;
    text-align: center;
    height:14svh;
    display: flex; /* Flexboxを使用 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
}

.icon-option {
    border: 5px solid transparent; /* 初期状態では縁なし */
    cursor: pointer;
}

.icon-option.selected {
    border-color: #FF6666; /* 選択中のアイコンに赤い縁を追加 */
}

#confirmButton{
    width:30%;
    padding: 10px;
    font-size: 1em;
    border: none;
    border-radius: 3px;
    background-color: #0ABAB5;
    color: white;
    cursor: pointer;
    
}
#cancelButton{
    width:30%;
    margin-left:10%;
    padding: 10px;
    font-size: 1em;
    border: none;
    border:1px solid #0ABAB5;
    border-radius: 3px;
    background-color: #4d4d4d;
    background-color: #ffffff;
    color: white;
    color: #0ABAB5;
    cursor: pointer;
}


#linkcard table{
    background-color: #ffffff;
    padding:0!important;
    margin:0!important;
    border-radius: 10px;
    overflow: hidden;
    /*border: 1px solid #ccc;*/
    border: 1px solid #c5ded9;
}
#linkcard td{
    height:150px;
    vertical-align: top;
    border:none;
}
#linkcard img{
    width:100%!important;
    height:100%!important;
    object-fit: cover; /* 中央を基準に切り取る */
    object-position: center; /* 縦横の中心を基準に表示 */
    display: block; /* インライン要素ではなく、ブロック要素として扱う */
    background-color: rgb(255, 255, 255);

}
#linkmassage{
    padding-left:10px;
    padding-right:10px;
    margin-top:16px;
    margin-bottom:8px;
    height:100px;
}
#linkmassage p{
    overflow: hidden;
    font-size: 0.8em;
    word-wrap: break-word;
    /*margin-top: 20px;*/
}
#editable-title{
    width:90%;
    font-size:medium;
    height:2em;
    border: 1px solid #ccc;
    background-color: azure;
    border-radius: 0;
}
#editable-title::placeholder{
    font-size:0.9em;
}

.generatedUrl {
    margin:10px;
    margin-top: 20px;
    border-bottom: 1px solid #c5c5c5;
    color:#555;
}

#generatedUrl {
word-wrap: break-word;
overflow-y:scroll;
max-height: 200px;
font-size: 0.9em;
margin:10px;
margin-bottom:20px;
user-select:text;
color:#555;
}

.spacer {
    height:150px;
}

.share-buttons button{
    background-color: #eee;
    color: #000;
    display: flex;
    align-items: center; /* 縦方向で中央揃え */
    justify-content: center; /* 横方向の中央揃え */
    position: relative;
    text-align: center;
    width: 90%;
    padding: 10px;
    font-size: 1em;
    margin-top: 15px;
    margin-left:5%;
}

.share-buttons button i {
    position: absolute;
    left: 20px; /* アイコンをボタンの左側に配置 */
}

.share-buttons button span {
    flex-grow: 1; /* 残りのスペースにテキストを表示 */
    text-align: center;
    margin-left:20px;
}
#copyUrlBtn i{
    color:#a0a0a0;
    font-size:1.2em;
}
#lineShare i{
    color:#00B900;
    font-size:1.8em;
}
#twitterShare i{
    color:#000000;
    font-size:1.8em;
    margin-left: 2px;
}
#facebookShare i{
    color:#1877f2;
    font-size:1.7em;
}

.fa-twitter:before {
    content: '𝕏';
    font-family: unset;
    font-weight: bold;
}


.step-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: 600;
    color: #777;
    font-family: 'Helvetica Neue', sans-serif;
    margin-bottom: 0.2em;
  }

  .step-title::before,
  .step-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #aaa;
    margin: 0 1em;
  }

  .step-description {
    display: flex;
    align-items: center;
    justify-content: center;
          font-size: 1em;
          color: #777;
          margin-top: 0.2em;
          font-family: 'Helvetica Neue', sans-serif;
          }