@charset "utf-8";

/* CSS Document */

/* --yoyaku-- */

 /* === ボタンを表示するエリア ============================== */
.switch {
  line-height    : 60px;                /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
  font-size      : 27px;                /* 文字サイズ         */

  position       : relative;            /* 親要素が基点       */
  margin         : auto;                /* 中央寄せ           */
  width          : 149px;               /* ボタンの横幅       */
  background     : #fff;                /* デフォルト背景色   */
}

 /* === チェックボックス ==================================== */
.switch input[type="checkbox"] {
  display        : none;            /* チェックボックス非表示 */
}

 /* === チェックボックスのラベル（標準） ==================== */
.switch label {
  display        : block;               /* ボックス要素に変更 */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  height         : 60px;                /* ボタンの高さ       */
  border         : 2px solid #777;   /* 未選択タブのの枠線 */
  border-radius  : 30px;                /* 角丸               */
}

 /* === チェックボックスのラベル（ONのとき） ================ */
.switch input[type="checkbox"]:checked +label {
  border-color   : #f17b50;             /* 選択タブの枠線     */
}

 /* === 表示する文字（標準） ================================ */
.switch label span:after{
  content        : "OFF";               /* 表示する文字       */
  padding        : 0 0 0 36px;          /* 表示する位置       */
  color          : #777;             /* 文字色             */
}

 /* === 表示する文字（ONのとき） ============================ */
.switch  input[type="checkbox"]:checked + label span:after{
  content        : "ON";                /* 表示する文字       */
  padding        : 0 36px 0 0;          /* 表示する位置       */
  color          : #f17b50;             /* 文字色             */
}

 /* === 丸部分のSTYLE（標準） =============================== */
.switch #buttonpoint {
  position       : absolute;            /* 親要素からの相対位置*/
  width          : 52px;                /* 丸の横幅           */
  height         : 52px;                /* 丸の高さ           */
  background     : #777;             /* カーソルタブの背景 */
  top            : 4px;                 /* 親要素からの位置   */
  left           : 4px;                 /* 親要素からの位置   */
  border-radius  : 26px;                /* 角丸               */
  transition     : .2s;                 /* 滑らか変化         */
}

 /* === 丸部分のSTYLE（ONのとき） =========================== */
.switch input[type="checkbox"]:checked ~ #buttonpoint {
  transform      : translateX(89px);    /* 丸も右へ移動       */
  background     : #f17b50;             /* カーソルタブの背景 */
}

 /* === okボタン =========================== */
form > #submit{
    display: block;
    margin: 5% 0;
    text-decoration: none;
    padding: 3px 20px;
    background: #fff;
    border: 1px solid #4a9e13;
    border-radius: 10px;
    box-shadow: 3px 3px 0px 0px #4a9e13;
    position: relative;
    top: 2px;
    cursor: pointer;
	transition: all 0.3s;
}
form > #submit:hover{
	color: #B56D90;
}


@media print, screen and (min-width: 641px) {


form{
	margin: 50px 0;
}
form > p{
	display: inline-block;
    margin-right: 15px;
    font-size: 18px;
    font-weight: bold;
}
.switch {
    display: inline-block;
    line-height: 32px;
    font-size: 18px;
    width: 82px;
}
.switch label{
	height: 35px;
	cursor: pointer;
	border-radius: 20px;
}
.switch label span::after {
    padding: 0 0 0 22px;
}
.switch  input[type="checkbox"]:checked + label span:after{
	padding: 0 27px 0 0;
}
.switch #buttonpoint {
    width: 25px;
    height: 25px;
	top: 5px;
    left: 6px;
}
.switch input[type="checkbox"]:checked ~ #buttonpoint {
    transform: translateX(45px);
}


}

@media screen and (max-width: 640px) {
}