@charset "UTF-8";


section.adbox { /* 画面幅いっぱいにしたい要素にあてるクラス */
width: 100%;
  margin: 15px calc(50% - 50vw) 15px;
 text-align: center;
padding:0;
    border: none;
}

section.adbox img{
display: block;
	width: 100%;
	height: auto;
}



@media screen and (min-width : 768px) {
section.adbox { /* 画面幅いっぱいにしたい要素にあてるクラス */
 display:none;
}
}


section.button-area {
margin: 20px 0;
}

section.memo-area {
}


section.note-area {
margin: 20px 0;
padding:15px;
background: #FFF;
font-size:16px;
}

h3.note-title{

   font-family: 'BIZ UDPGothic', sans-serif; 
    font-weight: 500; 
color:#555;
font-size:16px;
font-weight: 500;
text-align: left;
}

h3.note-title:before {
margin-right: 6px;
color:#ffd278;
border-left: 4px solid;
content: '';
    border-radius: 5px;

}





@media screen and (min-width : 768px) { /* デスクトップ用 */
section.button-area {
margin: 20px 0;
}

section.memo-area {
background: #fff;
}

}



.copy-button {
cursor:pointer;
    width: auto;
    padding: 5px 7px;
    background-color: #666;
    color: #fff;
border:none;
border-radius: 5px;
font-size:11px;
}




textarea{
display:block;
}




.txt {
width:100%;
height:500px;
resize:none;

font-size:16px;
background:#fff;
color:#111;
padding:10px;
border: none;
margin: 0 auto;

   font-family: 'BIZ UDPGothic', sans-serif; 
    font-weight: 400; 
    line-height: 1.65;
    letter-spacing: 0.06em; 
    border-radius: none;
word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;

}

.txt:focus {
outline:none;
    border: solid 0px #000;
transition: 0.5s

}

@media screen and (min-width : 768px) { /* デスクトップ用 */
.txt{
padding:28px 36px;
font-size:18px;
    line-height: 1.7;
    border: 0px solid #eee;



}

.txt:focus {
outline:none;
    border: solid 0px #fff;
transition: 0.8s

}

}




.pallet {

height: 50px;
background: #fff;
color: #666;
font-size:14px;
padding: 0 15px;


display: flex;
align-items: center;
    justify-content: space-between;


    font-family: 'BIZ UDPGothic', sans-serif;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.05em;
}






#dialog {
position: fixed;

  top: 45%; /* 修正 */
  left: 50%; /* 修正 */ 
  transform: translate(-50%, -50%); /* 追加 */


}




#dialog[open] {
  display: block;
width:66%;
    border-radius: 14px;

}


#dialog::backdrop {
  background: rgba(0, 0, 0, 0.204)
}

@media screen and (min-width : 768px) { /* デスクトップ用 */
#dialog[open] {
  display: block;
width:33%;
    border-radius: 14px;

}

}

.conf {
padding: 20px;
font-size:16px;
background: #FFF;   /* 背景を白色に指定 */
}



.button-conf{
display: flex;
width:100%;
    max-width: 200px;
    justify-content: center;
    text-align: center;
margin: 20px auto 0;

cursor:pointer;
border:none;

font-family: 'Kiwi Maru', serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;

padding: 10px;
    border-radius: 14px;

background:#EEE; /* 5c86ce */
color: #333;
}




.btn-part{
    display: flex;
    width:100%;
    max-width: 200px;
    justify-content: center;
    text-align: center;
margin: 10px auto;

cursor:pointer;
border:none;

font-family: 'Kiwi Maru', serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;

padding: 10px 24px 12px;
    border-radius: 14px;
}

.btn-part.colored {
background:#FFF; /* 5c86ce */
color: #333;
border: solid 1px #333;
}