@charset "UTF-8";
ul, ol { list-style-type: none; margin: 0; padding: 0; }

dl { margin: 0; }

dt { margin: 0; }

dd { margin: 0; }

figure { margin: 0; }

img, picture { margin: 0; max-width: 100%; padding: 0; vertical-align: bottom; line-height: 1; }

table { border-collapse: collapse; margin: 1.5em 0; table-layout: fixed; text-align: left; width: 100%; }

thead { line-height: 1.5; vertical-align: bottom; }

tbody { vertical-align: top; }

tr { border-bottom: 1px solid rgba(255, 255, 255, 0.5); }

th { font-weight: 600; }

th, td { padding: 0.75em 0.75em 0.75em 0; }

html { color: #FFF; font-family: "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; font-size: 100%; font-weight: 500; line-height: 1.66; }

@media (max-width: 780px) { html { font-size: 4.2667vw; } }

body { font-size: 1rem; }

@media screen and (max-width: 560px) { body { font-size: 1rem; line-height: 1.77; } }

h1, h2, h3, h4, h5, h6 { font-size: 1.25em; line-height: 1.5; margin: 0; font-weight: 600; }

p { margin: 0; }

a { -webkit-text-decoration-skip: ink; text-decoration-skip: ink; -webkit-transition: color 150ms ease; -o-transition: color 150ms ease; transition: color 150ms ease; text-decoration: none; outline: none; }

a img { border: none; }

a:focus { outline: none; outline-offset: 0; }

hr { border-bottom: 1px solid rgba(255, 255, 255, 0.5); border-left: 0; border-right: 0; border-top: 0; margin: 1.5em 0; }

address { font-style: normal; }

img { height: auto; }

@media all and (-ms-high-contrast: none) { img[src$=".svg"] { width: 100%; height: auto; } }

input[type="text"], textarea { -webkit-appearance: none; border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; -moz-appearance: button; appearance: button; border: none; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }

html { background-color: rgba(0, 0, 0, 0.83); -webkit-box-sizing: border-box; box-sizing: border-box; }

@media screen and (min-width: 1281px) { html { width: 100%; overflow-x: hidden; } }

*, *::before, *::after { -webkit-box-sizing: inherit; box-sizing: inherit; }

html, body { height: 100%; }

body { margin: 0; }

@media screen and (max-width: 560px) { img { width: 100%; height: auto; } }

@media screen and (max-width: 560px) { li a { width: 100%; height: 100%; display: block; } }

li a:hover { opacity: 0.7; }

@media screen and (max-width: 560px) { body { min-width: 100%; } }

body #header { z-index: 99; width: 100%; height: 100px; }

@media screen and (max-width: 560px) { body #header { height: 80px; } }

@media screen and (orientation: landscape) and (max-width: 960px) { body #header { height: 80px; } }

body #header .header_inner { width: 100%; overflow-x: hidden; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px 65px 0 23px; }

@media screen and (max-width: 1280px) { body #header .header_inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } }

@media screen and (max-width: 560px) { body #header .header_inner { padding: 3vw 0 0 3vw; } }

body #header .header_inner a { color: #FFF; display: block; }

@media screen and (max-width: 560px) { body #header .header_inner a { color: #013f9b; } }

body #header .header_inner .header_logo { width: 194px; height: auto; }

@media screen and (max-width: 960px) { body #header .header_inner .header_logo { max-width: 260px; width: 35vw; height: auto; } }

@media screen and (max-width: 560px) { body #header .header_inner .header_logo { width: 39vw; height: auto; } }

@media screen and (orientation: landscape) and (max-width: 960px) { body #header .header_inner .header_logo { max-width: 200px; width: 30vw; } }

@media screen and (max-width: 960px) { body #header .header_inner .header_logo img { width: 100%; } }

body #header .header_inner .header_logo a { -webkit-transition: .3s; -o-transition: .3s; transition: .3s; }

body #header .header_inner .header_logo a:hover { opacity: .8; }

body #header .header_inner #btn_menu_area { display: none; z-index: 30000; text-align: center; line-height: 1; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; cursor: pointer; -webkit-transition: right .6s; -o-transition: right .6s; transition: right .6s; }

body #header .header_inner #btn_menu_area:hover { opacity: .7; }

@media screen and (max-width: 1280px) { body #header .header_inner #btn_menu_area { display: block; height: 50px; width: 50px; right: 5.5%; top: 20px; position: absolute; } }

@media screen and (max-width: 960px) { body #header .header_inner #btn_menu_area { position: fixed; right: 3%; top: 3vw; height: 11vw; width: 11vw; } }

body #header .header_inner #btn_menu_area.open { display: none; }

body #header .header_inner #btn_menu_area #btn_menu { display: inline-block; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; }

@media screen and (max-width: 1280px) { body #header.nav_fixed .header_inner #btn_menu_area { position: fixed; right: 2%; top: 25px; } }

@media screen and (max-width: 960px) { body #header.nav_fixed .header_inner #btn_menu_area { position: fixed; right: 3%; top: 3vw; height: 11vw; width: 11vw; } }

.pc { display: block !important; }

@media screen and (max-width: 560px) { .pc { display: none !important; } }

.sp { display: none !important; }

@media screen and (max-width: 560px) { .sp { display: block !important; } }

#fb-root { display: none; }

#contents #videoArea { width: 72%; min-height: 600px; position: relative; }

@media screen and (max-width: 1280px) { #contents #videoArea { width: 100%; overflow-x: hidden; } }

@media screen and (max-width: 560px) { #contents #videoArea { min-height: 85vh; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #videoArea { min-height: calc(100vh - 80px); } }

#contents #videoArea .videoInner { width: 880px; min-height: 80vh; margin: 0 auto; }

@media screen and (max-width: 1280px) { #contents #videoArea .videoInner { width: 90%; } }

@media screen and (max-width: 1050px) { #contents #videoArea .videoInner { width: 96%; } }

@media screen and (max-width: 960px) { #contents #videoArea .videoInner { width: 90%; } }

@media screen and (max-width: 560px) { #contents #videoArea .videoInner { min-height: calc(100vh - 80px); } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #videoArea .videoInner { min-height: calc(100vh - 80px); } }

#contents #videoArea .room_head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 30px; }

@media screen and (max-width: 960px) { #contents #videoArea .room_head { -ms-flex-wrap: wrap; flex-wrap: wrap; } }

@media screen and (orientation: landscape) { #contents #videoArea .room_head { padding-bottom: 1em; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #videoArea .room_head { -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding-bottom: .5em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } }

#contents #videoArea .room_head h2 { background: url("../images/video_ico.svg") left center no-repeat; padding-left: 2.5em; line-height: 2; font-size: 1.25rem; }

@media screen and (max-width: 960px) { #contents #videoArea .room_head h2 { background-size: auto 1em; font-size: 1.125rem; margin-bottom: .5em; padding-left: 2em; } }

@media screen and (max-width: 560px) { #contents #videoArea .room_head h2 { background-size: 1.5em; padding-left: 2.2em; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #videoArea .room_head h2 { font-size: 0.75rem; padding-left: 2.5em; margin-bottom: 0; } }

#contents #videoArea .room_head .idArea { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

@media screen and (max-width: 960px) { #contents #videoArea .room_head .idArea { width: 100%; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #videoArea .room_head .idArea { -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 55%; } }

#contents #videoArea .room_head .idArea .idTxt { display: none; }

#contents #videoArea .room_head .idArea h3 { margin-right: 1em; }

@media screen and (max-width: 960px) { #contents #videoArea .room_head .idArea h3 { font-size: 0.75rem; } }

@media screen and (max-width: 560px) { #contents #videoArea .room_head .idArea h3 { margin-right: 1.3em; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #videoArea .room_head .idArea h3 { margin-right: .5em; font-size: 0.625rem; } }

#contents #videoArea .room_head .idArea button { height: 33px; width: 83px; font-size: 1.25rem; border: none; margin-left: .5em; cursor: pointer; -webkit-appearance: none; vertical-align: bottom; }

@media screen and (max-width: 960px) { #contents #videoArea .room_head .idArea button { font-size: 0.875rem; height: 2.1em; width: 3.6em; } }

@media screen and (max-width: 560px) { #contents #videoArea .room_head .idArea button { margin-left: 1em; width: 4em; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #videoArea .room_head .idArea button { font-size: 0.625rem; height: 2em; width: 4.2em; margin-left: .8em; } }

#contents #videoArea .room_head .idArea button:hover { opacity: .8; }

#contents #videoArea .room_head .idArea #make-call { vertical-align: bottom; }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #videoArea .room_head .idArea #make-call { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } }

#contents #videoArea .room_head .idArea #join-room { background-color: #FFF; width: 180px; height: 33px; padding: .4em; border: none; font-size: 1rem; vertical-align: bottom; display: inline-block; }

@media screen and (max-width: 960px) { #contents #videoArea .room_head .idArea #join-room { width: 50vw; height: 1.8em; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #videoArea .room_head .idArea #join-room { font-size: 0.625rem; width: 20vw; height: 2em; } }

#contents #videoArea .room_head .idArea .join-button { background-color: #535353; color: #FFF; }

#contents #videoArea .room_head .idArea #room-id { background-color: #FFF; width: 180px; padding: .4em; color: #000; display: none; line-height: 1.26; vertical-align: bottom; }

@media screen and (max-width: 960px) { #contents #videoArea .room_head .idArea #room-id { max-width: inherit; width: 50vw; height: 1.8em; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #videoArea .room_head .idArea #room-id { font-size: 0.625rem; width: 20vw; height: 2em; } }

#contents #videoArea .room_head .idArea #room-id.show { display: inline-block; }

#contents #videoArea .room_head .idArea #end-call { display: none; line-height: 1; }

#contents #videoArea .room_head .idArea .end-button { background-color: #FFF; color: #000; }

#contents #videoArea .videosContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -10px; padding-bottom: 70px; }

@media screen and (max-width: 1280px) { #contents #videoArea .videosContainer { width: 105%; } }

@media screen and (orientation: landscape) and (max-width: 1280px) { #contents #videoArea .videosContainer { width: 70%; margin: 0 auto; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #videoArea .videosContainer { padding-bottom: 1.5em; } }

#contents #videoArea .videosContainer > .memberVideo, #contents #videoArea .videosContainer > .myVideo { vertical-align: bottom; margin: 0 15px 15px 0; width: 430px; max-height: 320px; height: 320px; text-align: center; }

@media screen and (max-width: 1280px) { #contents #videoArea .videosContainer > .memberVideo, #contents #videoArea .videosContainer > .myVideo { max-height: 33vw; height: 33vw; width: 46%; max-width: 46%; margin: 0 3% 3% 0; } }

@media screen and (orientation: landscape) and (max-width: 1280px) { #contents #videoArea .videosContainer > .memberVideo, #contents #videoArea .videosContainer > .myVideo { margin: 0 1.5% 1em; max-height: 25vw; height: 22vw; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #videoArea .videosContainer > .memberVideo, #contents #videoArea .videosContainer > .myVideo { max-height: 21vw; margin-bottom: .5em; } }

#contents #videoArea .videosContainer > .memberVideo video, #contents #videoArea .videosContainer > .myVideo video { width: auto; max-width: 100%; vertical-align: bottom; max-height: 100%; height: 100%; display: block; margin: 0 auto; }

@media screen and (max-width: 1280px) { #contents #videoArea .videosContainer > .memberVideo video, #contents #videoArea .videosContainer > .myVideo video { height: 100%; max-height: 100%; } }

#contents #videoArea #muteArea { position: fixed; bottom: 0; left: 0; width: 72%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-bottom: 2em; }

@media screen and (max-width: 1280px) { #contents #videoArea #muteArea { width: 100%; } }

@media screen and (max-width: 560px) { #contents #videoArea #muteArea { bottom: 10vw; } }

@media screen and (orientation: landscape) { #contents #videoArea #muteArea { padding-bottom: 0; bottom: 2vw; } }

#contents #videoArea #muteArea > div { margin: 0 .5em; }

@media screen and (max-width: 960px) { #contents #videoArea #muteArea > div.tit { font-size: 1rem; line-height: 1.2; } }

#contents #chatArea { position: fixed; top: 0; right: 0; max-width: 540px; min-width: 366px; width: 28%; height: 100vh; background-color: #e9e9e9; padding-bottom: 165px; }

@media screen and (max-width: 1280px) { #contents #chatArea { right: -100%; -webkit-transition: .6s; -o-transition: .6s; transition: .6s; } }

@media screen and (max-width: 960px) { #contents #chatArea { width: 76%; min-width: inherit; } }

#contents #chatArea #chatAreaClose { position: absolute; top: 0; bottom: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0; z-index: -99; }

@media screen and (max-width: 1280px) { #contents #chatArea #chatAreaClose { left: -55px; z-index: 10; opacity: 1; -webkit-transition: opacity .3s 1s; -o-transition: opacity .3s 1s; transition: opacity .3s 1s; } }

@media screen and (max-width: 960px) { #contents #chatArea #chatAreaClose { left: -10vw; } }

#contents #chatArea #chatAreaClose #chatAreaCloseBtn { width: 55px; display: block; cursor: pointer; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; }

#contents #chatArea #chatAreaClose #chatAreaCloseBtn:hover { opacity: 0.7; }

@media screen and (max-width: 960px) { #contents #chatArea #chatAreaClose #chatAreaCloseBtn { width: 10vw; } }

#contents #chatArea #chatAreaClose #chatAreaCloseBtn img { width: 100%; }

@media screen and (max-width: 1280px) { #contents #chatArea.open { right: 0; } }

#contents #chatArea .room_head { background: url("../images/chat_bg.jpg") left top repeat; padding: 20px 10px; }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #chatArea .room_head { padding: .2em 1em; } }

#contents #chatArea .room_head h2 { text-align: center; font-size: 1.25rem; line-height: 1.5; margin-bottom: .8em; }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #chatArea .room_head h2 { font-size: 1rem; margin-bottom: .5em; } }

#contents #chatArea .room_head h2:before { content: ""; display: inline-block; height: 28px; width: 36px; background: url("../images/chat_ico.svg") left center no-repeat; margin-right: .5em; vertical-align: middle; }

#contents #chatArea .room_head .idArea { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

#contents #chatArea .room_head .tit { margin-right: .5em; }

@media screen and (max-width: 960px) { #contents #chatArea .room_head .tit { font-size: 0.875rem; margin-right: .4em; line-height: 2; } }

@media screen and (orientation: landscape) { #contents #chatArea .room_head .tit { font-size: 0.875rem; line-height: 2.5; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #chatArea .room_head .tit { font-size: 0.75rem; line-height: 2; } }

#contents #chatArea .room_head button { height: 33px; width: 83px; font-size: 1.25rem; border: none; margin-left: .5em; cursor: pointer; -webkit-appearance: none; }

@media screen and (max-width: 960px) { #contents #chatArea .room_head button { font-size: 0.875rem; height: 2.1em; width: 3.2em; } }

@media screen and (max-width: 560px) { #contents #chatArea .room_head button { width: 4em; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #chatArea .room_head button { font-size: 0.625rem; height: 1.8em; width: 4.5em; } }

#contents #chatArea .room_head button:hover { opacity: .8; }

#contents #chatArea .room_head #roomName { background-color: #FFF; max-width: 180px; width: 50%; height: 33px; padding: .4em; border: none; font-size: 1rem; vertical-align: bottom; }

@media screen and (max-width: 960px) { #contents #chatArea .room_head #roomName { max-width: inherit; width: 50%; height: 1.8em; } }

@media screen and (orientation: landscape) and (max-width: 1280px) { #contents #chatArea .room_head #roomName { font-size: 0.875rem; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #chatArea .room_head #roomName { font-size: 0.625rem; } }

#contents #chatArea .room_head #join { background-color: #535353; color: #FFF; }

#contents #chatArea .room_head #chatroom { background-color: #FFF; max-width: 180px; width: 50%; padding: .4em; color: #000; display: none; line-height: 1.26; vertical-align: bottom; }

@media screen and (max-width: 960px) { #contents #chatArea .room_head #chatroom { max-width: inherit; width: 50%; height: 1.8em; } }

@media screen and (orientation: landscape) and (max-width: 1280px) { #contents #chatArea .room_head #chatroom { font-size: 0.875rem; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #chatArea .room_head #chatroom { font-size: 0.625rem; } }

#contents #chatArea .room_head #chatroom.show { display: inline-block; }

#contents #chatArea .room_head #leave { display: none; background-color: #FFF; color: #000; }

#contents #chatArea #chatLog { padding: 25px 25px 40px 25px; height: calc(100vh - 290px); color: #000; overflow-y: auto; }

@media screen and (max-width: 960px) { #contents #chatArea #chatLog { height: 60vh; } }

@media screen and (max-width: 560px) { #contents #chatArea #chatLog { height: 55vh; } }

@media screen and (orientation: landscape) and (max-width: 1280px) { #contents #chatArea #chatLog { padding: 1em 1em 2em 1em; font-size: 0.875rem; height: calc(100vh - 165px - 121px); } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #chatArea #chatLog { height: 48vh; font-size: 0.625rem; } }

#contents #chatArea #chatLog .msg { border-bottom: 1px solid #a5a5a5; padding: .5em 0; word-break: break-all; }

#contents #chatArea #chatLog .msg .mk { color: #eb0000; }

#contents #chatArea .sendArea { background: url("../images/chat_bg.jpg") left top repeat; position: absolute; right: 0; bottom: 0; left: 0; padding: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; }

@media screen and (max-width: 560px) { #contents #chatArea .sendArea { padding: .5em .8em; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #chatArea .sendArea { padding: .5em; } }

#contents #chatArea .sendArea #msg { background-color: #FFF; width: 400px; height: 115px; padding: .4em; border: none; font-size: 1rem; vertical-align: bottom; resize: vertical; overflow: auto; }

@media screen and (orientation: landscape) and (max-width: 1280px) { #contents #chatArea .sendArea #msg { font-size: 0.875rem; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #chatArea .sendArea #msg { height: 15vh; font-size: 0.625rem; } }

#contents #chatArea .sendArea #send { height: 115px; width: 83px; font-size: 1.25rem; border: none; margin-left: .5em; background-color: #535353; color: #FFF; }

@media screen and (max-width: 960px) { #contents #chatArea .sendArea #send { font-size: 0.875rem; } }

@media screen and (orientation: landscape) and (max-width: 960px) { #contents #chatArea .sendArea #send { height: 15vh; font-size: 0.625rem; } }

h2, h3, .tit { font-family: gravesend-sans, sans-serif; font-weight: 500; font-size: 1rem; }

.col_two { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.col_two.btn_block { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 3em; }

@media screen and (max-width: 560px) { .col_two.btn_block { display: block; } }

.col_two.btn_block .btn { margin: 0 23px; }

@media screen and (max-width: 560px) { .col_two.btn_block .btn { margin: 0 0 1.8em; } }

.txt_red { color: #ff5353; }

.txt_link { display: inline; color: #f8b551; }

b { font-weight: bold; }

.switchArea { line-height: 30px; /* 1行の高さ          */ letter-spacing: 0; /* 文字間             */ text-align: center; /* 文字位置は中央     */ font-size: 20px; /* 文字サイズ         */ position: relative; /* 親要素が基点       */ margin: 0; /* 中央寄せ           */ width: 80px; /* ボタンの横幅       */ -webkit-box-sizing: border-box; box-sizing: border-box; }

@media screen and (max-width: 960px) { .switchArea { width: 4em; font-size: 0.875rem; line-height: 1.4em; } }

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

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

@media screen and (max-width: 960px) { .switchArea label { height: 1.4em; } }

.switchArea label:hover { opacity: .8; }

/* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type="checkbox"]:checked + label { background-color: #FFF; }

/* === 表示する文字（標準） ================================ */
.switchArea label span { display: block; }

.switchArea label span:after { content: "OFF"; /* 表示する文字       */ padding: 0 0 0 20px; /* 表示する位置       */ color: #FFF; /* 文字色             */ }

@media screen and (max-width: 960px) { .switchArea label span:after { padding-left: .8em; } }

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

@media screen and (max-width: 960px) { .switchArea input[type="checkbox"]:checked + label span:after { padding: 0 1em 0 .5em; } }

/* === 丸部分のSTYLE（標準） =============================== */
.switchArea .swImg { position: absolute; /* 親要素からの相対位置*/ width: 1.25rem; /* 丸の横幅           */ height: 1.25rem; /* 丸の高さ           */ background: #FFF; /* カーソルタブの背景 */ top: .25em; /* 親要素からの位置   */ left: .25em; /* 親要素からの位置   */ border-radius: 50%; /* 角丸               */ -webkit-transition: .2s; -o-transition: .2s; transition: .2s; /* 滑らか変化         */ }

@media screen and (max-width: 960px) { .switchArea .swImg { top: .2em; left: .3em; width: 0.875rem; height: 0.875rem; } }

@media screen and (max-width: 560px) { .switchArea .swImg { top: .22em; width: 0.8125rem; height: 0.8125rem; } }

/* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type="checkbox"]:checked ~ .swImg { -webkit-transform: translateX(2.5em); -ms-transform: translateX(2.5em); transform: translateX(2.5em); /* 丸も右へ移動       */ background: #a0a0a0; /* カーソルタブの背景 */ }

@media screen and (max-width: 960px) { .switchArea input[type="checkbox"]:checked ~ .swImg { -webkit-transform: translateX(2.4em); -ms-transform: translateX(2.4em); transform: translateX(2.4em); } }