@charset "UTF-8";

/*
==================================================

   URL input
   ツール スタイル

==================================================
*/



/*
==================================================
  ヘッダ
==================================================
*/

#header {
display: table;
width: 100%;
max-width: 700px;
height: 50px;
margin: 0 auto;
padding: 10px 0 5px;
}
#header a img {
border: none;
}

#header > div {
display: table-cell;
vertical-align: middle;
}

#header div.logo {
width: 70px;
text-align: center;
}
#header div.logo a {
display: inline-block;
width: 50px;
height: 50px;
}

#header div.title {

}
#header div.title h1 {
margin: 0;
font-size: 17px;
line-height: 130%;
}



/*
==================================================
  メイン
==================================================
*/

#main {
width: 100%;
max-width: 700px;
margin: 0 auto;
}

#operation {
margin: 0 0 30px;
}

#operation div.field {
width: 100%;
padding: 3px 7px;
background-color: #f0c45c;
border-bottom: 2px #ffffff solid;
box-sizing: border-box;
position: sticky;
top: 0;
}
#operation div.field input {
width: calc(100% - 29px);
padding: 3px 3px;
background-color: #f9f9f9;
border: 2px #7f7f7f solid;
box-sizing: border-box;
font-size: 17px;
}
#operation div.field input:focus {
outline: 1px #ff8c00 solid;
}
#operation div.field img {
margin: 0 0 0 5px;
vertical-align: -40%;
}

#operation div.input {
max-width: 700px;
margin: 0 0 5px;
padding: 5px 7px 1px;
background-color: #aaaaaa;
}

#operation div.input ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#operation div.input ul li {
display: inline-block;
margin: 0 1px 5px 0;
}
#operation div.input ul li input {
padding: 5px 3px;
font-size: 17px;
}
#operation div.input ul li input.s {
padding: 5px 10px;
}
#operation div.input ul li input.sb {
padding: 5px 15px;
}

#operation div.open {
margin: 8px 0 15px;
text-align: center;
}
#operation div.open div {
display: inline-block;
width: 7.5em;
background-color: #5f5f5f; 
background-image: url(down.png);
background-repeat: no-repeat;
background-position: 15px 0.4em;
border-radius: 12px;
padding: 6px 7px 5px 25px;
font-size: 14px;
color: #f9f9f9;
cursor: default;
}

#other {
display: none;
}

#operation div.output {
margin: 0 0 10px;
padding: 10px 0 0;
background-color: #9ec651;
}

#operation div.output ul {
display: table;
table-layout: fixed;
width: 100%;
margin: 0 0 10px;
padding: 0;
list-style-type: none;
}
#operation div.output ul li {
display: table-cell;
width: 50%;
text-align: center;
}
#operation div.output ul li button {
padding: 7px 5px;
font-size: 16px;
}
#operation div.output ul li button img {
margin: 0 5px 0 0;
vertical-align: -10%;
}

#operation div.output div.area {
min-height: 25px;
padding: 20px 5px;
background-color: #efefef;
}
#display {
display: inline-block;
width: calc(100% - 29px);
font-size: 19px;
line-height: 130%;
}
#operation div.output div.area img {
margin: 0 0 0 5px;
vertical-align: top;
}

#operation div.note {
padding: 0 5px;
}
#operation div.note p {
margin: 0;
font-size: 14px;
color: #7f7f7f;
line-height: 160%;
}

#ads {
margin: 0 0 30px;
}
#ads aside.ads_main_btm {
width: 300px;
height: 270px;
margin: 0 auto;
}
#ads aside.ads_main_btm div.ad-label {
text-align: right;
}
#ads aside.ads_main_btm div.ad-label span {
display: inline-block;
padding: 3px 6px 2px;
background: #f5f5f5;
font-size: 11px;
color: #7f7f7f;
}
#ads aside.ads_main_btm ins.adsbygoogle {
width: 300px;
height: 250px;
}

#guide {
margin: 0;
padding: 30px 10px;
background-color: #e3f0fb;
text-align: center;
}

#guide p {
margin: 0 0 1.4em;
font-size: 16px;
line-height: 160%;
}

#guide div.link ul {
display: inline-block;
margin: 0;
padding: 0;
list-style-type: none;
font-size: 18px;
text-align: left;
}
#guide div.link ul li {
padding: 5px 0 17px 42px;
background-repeat: no-repeat;
background-position: left 0;
line-height: 140%;
}
#guide div.link ul li:last-child {
padding: 5px 0 3px 42px;
}
#guide div.link ul li.howtouse {
background-image: url(howtouse.png);
}
#guide div.link ul li.problem {
background-image: url(problem.png);
}


#sharer {
margin: 0 auto;
padding: 30px 10px 40px;
background-color: #f9f9f9;
text-align: center;
font-size: 17px;
}
#sharer div.qr dl {
margin: 0;
}
#sharer div.qr dl dt {
margin: 0 0 10px;
}
#sharer div.qr dl dd {
margin: 0 0 15px;
}
#sharer div.qr dl dd:last-child {
margin: 0;
}
#sharer div.qr dl dd img {
border: 1px #dfdfdf solid;
}

/* ----- コピーボタン ----- */
#sharer div.url-copy {
margin: 40px 0 0;
text-align: center;
}
#sharer div.url-copy button {
display: inline-block;
width: 100%;
max-width: 23em;
padding: 11px 5px 10px;
background: #ffffff;
border: 1px #c0c0c0 solid;
font-size: 15px;
line-height: 140%;
cursor: pointer;
}
#sharer div.url-copy button.copied {
font-weight: bold;
color: #3366ff;
}