@CHARSET "UTF-8";

/* サービス - スタイルシート */

/** Stripeボタン */
div.stripeBuyButton {
	text-align: center;
}

/** 制定日 */
div.enactmentDate {
	text-align: right;
}

/** 接続情報 */
div.connectInfo {
	display:flex;
	width: 100%;
	height: 30px;
	box-sizing: border-box;
}
div.connectInfo div.title {
	width: 120px;
	text-align: right;
	margin: auto 0px
}
div.connectInfo div.item {
	margin: auto 0px
}
div.connectInfo div.item input[type="text"] {
	width: 220px;
}

/** 利用料金 */
span.usageFee {
	font-weight: bold;
	color: red;
}

/** コピーボタン */
#copy {
	position: relative;
}

/** 吹き出しの初期状態（非表示） */
.tooltip {
	 visibility: hidden;
	 position: absolute;
	 bottom: 125%; /* ボタンの上側に表示 */
	 left: 50%;
	 transform: translateX(-50%);
	 background-color: #333;
	 color: #fff;
	 padding: 5px 10px;
	 border-radius: 4px;
	 font-size: 12px;
	 opacity: 0;
	 transition: opacity 0.3s;
	 white-space: nowrap;
}
/** 吹き出しの矢印（三角形） */
.tooltip::after {
	 content: "";
	 position: absolute;
	 top: 100%;
	 left: 50%;
	 margin-left: -5px;
	 border-width: 5px;
	 border-style: solid;
	 border-color: #333 transparent transparent transparent;
}
/** クラスが付与されたら吹き出しを表示 */
#copy.show-tooltip .tooltip {
  visibility: visible;
  opacity: 1;
}