@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css2?family=Miriam+Libre:wght@700&display=swap');
@import url("font-awesome.css");

:root {
  --contents-width: 1000px;
  --link-blue: #00B5D5;
  
  
}

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3,
h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table,
caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details,
embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output,
ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-size: 100%;
  vertical-align: bottom;
}

h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, th {
  font-weight: normal;
}

article, aside, details, figcaption, figure,
footer, header, hgroup,
menu, nav, section {
  display: block;
}

* {
  box-sizing: border-box; 
  -o-box-sizing: border-box; 
  -ms-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
}

html {
  overflow-y: scroll;
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

input, textarea, {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

ol {
  list-style: decimal;
  margin: 0 0 0 2em;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th {
  text-align: left;
}

img, object, svg {
	width: 100%; 
}

body {
  background: #fff;
  color: #333;
  font-family: "Noto Sans Japanese","游ゴシック", YuGothic, "小塚ゴシック Pro L", "KozGoPro-Light", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; 
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0; 
  margin: 0; 
  font-weight: 400; 
  font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  line-height: 1.6; 
  
  transition: color 1s ease, background-color 1s ease;
  
  position: relative; 
}


body.gray {
  background-color: rgba(247,247,247,1); 
}

div[class*="backDrop"] {
  content: ""; 
  position: absolute; 
  z-index: -1; 
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0;
  transition: opacity 0.7s ease;
}


.backDrop1 {
  background: linear-gradient(0deg, rgba(153,218,255,1) 0%, rgba(0,128,128,1) 100%); /* w3c */
background: rgb(0,181,213);
background: -moz-linear-gradient(top,  rgba(0,181,213,1) 0%, rgba(186,1,176,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,181,213,1)), color-stop(100%,rgba(186,1,176,1)));
background: -webkit-linear-gradient(top,  rgba(0,181,213,1) 0%,rgba(186,1,176,1) 100%);
background: -o-linear-gradient(top,  rgba(0,181,213,1) 0%,rgba(186,1,176,1) 100%);
background: -ms-linear-gradient(top,  rgba(0,181,213,1) 0%,rgba(186,1,176,1) 100%);
background: linear-gradient(to bottom,  rgba(0,181,213,1) 0%,rgba(186,1,176,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b5d5', endColorstr='#ba01b0',GradientType=0 );

  
}

.backDrop2 {
background: -moz-linear-gradient(90deg, rgba(132,195,227,1) 0%, rgba(77,196,219,1) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(77,196,219,1)), color-stop(100%, rgba(132,195,227,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(90deg, rgba(132,195,227,1) 0%, rgba(77,196,219,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(90deg, rgba(132,195,227,1) 0%, rgba(77,196,219,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(90deg, rgba(132,195,227,1) 0%, rgba(77,196,219,1) 100%); /* ie10+ */
background: linear-gradient(0deg, rgba(132,195,227,1) 0%, rgba(77,196,219,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4DC4DB', endColorstr='#84C3E3',GradientType=0 ); /* ie6-9 */

}

.backDrop3 {
  background: linear-gradient(37deg, rgba(255,167,153,1) 0%, rgba(255,212,18,1) 100%); /* w3c */
background: rgb(237,193,0);
background: -moz-linear-gradient(top,  rgba(237,193,0,1) 0%, rgba(196,102,102,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,193,0,1)), color-stop(100%,rgba(196,102,102,1)));
background: -webkit-linear-gradient(top,  rgba(237,193,0,1) 0%,rgba(196,102,102,1) 100%);
background: -o-linear-gradient(top,  rgba(237,193,0,1) 0%,rgba(196,102,102,1) 100%);
background: -ms-linear-gradient(top,  rgba(237,193,0,1) 0%,rgba(196,102,102,1) 100%);
background: linear-gradient(to bottom,  rgba(237,193,0,1) 0%,rgba(196,102,102,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edc100', endColorstr='#c46666',GradientType=0 );

}


.backDrop4 {
background: -moz-linear-gradient(90deg, rgba(102,102,102,1) 0%, rgba(153,153,153,1) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(153,153,153,1)), color-stop(100%, rgba(102,102,102,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(90deg, rgba(102,102,102,1) 0%, rgba(153,153,153,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(90deg, rgba(102,102,102,1) 0%, rgba(153,153,153,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(90deg, rgba(102,102,102,1) 0%, rgba(153,153,153,1) 100%); /* ie10+ */
background: linear-gradient(0deg, rgba(102,102,102,1) 0%, rgba(153,153,153,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#444444',GradientType=0 ); /* ie6-9 */
}



body.blue,
body.green,
body.orange,
body.black {
  color: #fff; 
}

body.blue .backDrop1 {
  opacity: 1;
}

body.green .backDrop2 {
  opacity: 1;
}

body.orange .backDrop3 {
  opacity: 1;
}

body.black .backDrop4 {
  opacity: 1;
}

.infoWindow {
	position: fixed; 
	width: 100%; 
	bottom: 0;
	left: 0;
	z-index: 9999; 
	padding: 0.1em; 
	background: rgba(0,0,0,0.5); 
	color: #fff; 
}


/* clearfix */
.clearfix:after {
  content: ".";
  display: block;
  width: 1px;
  height: 1px;
  margin: 0 -1px -1px 0;
  border: 0;
  padding: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0.1em;
  line-height: 0;
}

.clearfix {
  display: inline-block;
}

/* デフォルトリンク */
a { text-decoration: none;}
a:link { color: #00B5D5;}
a:visited { color: #00B5D5;}
a:hover { color: #00B5D5;}
a:focus { outline: none;}
a:active { outline: none;}

p {
  text-align : justify;
  text-justify : distribute;
}

span {
font-size: inherit; 
}


/* ==================================================
	= コンテンツ共通
================================================== */
#wrapper {
  display: block; 
}



main {
  display: block; 
  width: 100%; 
  margin: 30px auto;
}

article,
section {
  width: 100%; 
  text-align: center; 
  overflow: hidden; 
}

article {
 margin: 40px 0 0 0;
}


section {
  padding: 0 10px 60px; 
  /* background: #F3F6FA;  */
  margin: 0 auto 60px;
}


article > header {
  margin: 0 auto 40px;
  max-width: 1000px; 
}

article > header h2 em {
	display: block; 
	text-align: center; 
	font-size: 36px; 
	font-weight: 900; 
	
}

article > header h2 span {
  font-size: 18px; 
  font-weight: 900; 
  text-align: center; 
  display: inline-block; 
  padding: 3px 20px; 
  position: relative; 
}

article > header h2 span:before,
article > header h2 span:after {
content: ""; 
position: absolute; 
width: 10px; 
height: 100%; 
border: 1px solid #673AB7;
top: -1px;
}

article > header h2 span:before {
left: 0;
border-right: none;
}

article > header h2 span:after {
right: 0; 
border-left: none;
}


article > header h1 {
  font-size: 44px; 
  font-weight: 200; 
}

.center {
  text-align: center; 
}

article section header {
	margin: 0 auto 30px;
	max-width: 1000px; 
	text-align: center; 
}

article section header em {
	display: block; 
	text-align: center; 
	font-size: 32px; 
	font-weight: 900; 
}

article section header h2 {
  font-size: 20px; 
  font-weight: 700; 
  display: block; 
  text-align: center; 
}


article section > .textBlock {
  margin: 0 auto 0;
  max-width: 1000px; 
  text-align: left; 
}

/* 
article section > .textBlock h3 {
	margin: auto;
	text-align: center; 
	font-size: 22px; 
	font-weight: 700; 
	border: 1px solid #000;
}
 */

/* イントロ */

.intro {

}


.intro .leadCopy {
  margin: 0 auto;
  font-size: 14px; 
  line-height: 1.8; 
  font-weight: 700; 
  /* color: #673AB7;  */
  color: #555; 
}

.intro .leadCopy p span {
	display: inline-block; 
	white-space: nowrap; 
}

.intro .leadCopy .note {
	font-size: 16px; 
	margin: 1em 0;
	color: #444; 
	font-weight: 400; 
}

.intro .leadCopy .note p {

}

.intro .leadCopy .note p a {
	display: inline-block; 
	font-weight: bold; 
	position: relative; 
	overflow: visible; 
	margin: 0 0.25em;
}


.intro .leadCopy .note p a:after {
	content: ""; 
	position: absolute; 
	width: 100%; 
	height: 0.4em; 
	left: 0; 
	bottom: 0.2em; 
	background: rgba(237,30,121,0.2); 
	z-index: -1; 
	transform: skew(-5deg);
}

.intro figure,
.intro .objectWrapper {
  max-width: 900px; 
  margin: 40px auto;
}

.intro figure {
	margin: 40px auto;
    position: relative;
    width: 100%;
    height: 0;
    padding-top: calc((200 / 700) * 100%);
}

.intro figure svg {
	position: absolute; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0; 
}

/* 特徴 */

.feature {
	
}

.feature ul {
	justify-content: center;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: stretch; 
}

.feature ul li {
   width: calc((100% - 20.1px) / 2); 
   margin: 0 20px 40px 0;
   	perspective: 800;
}

.feature ul li:nth-of-type(2n),
.feature ul li:last-of-type {
	margin-right: 0;
}

.feature ul li h3 {
	font-size: 16px; 
	font-weight: 700; 
	text-align: center; 
}

.feature ul li h3:after {
	content: ""; 
	display: block; 
	width: 80px; 
	height: 8px; 
	margin: 20px auto 0;
	
	background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%208%208%22%20style%3D%22enable-background%3Anew%200%200%208%208%3B%22%20xml%3Aspace%3D%22preserve%22%20preserveAspectRatio%3D%22xMinYMid%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%223.5%2C8%204.5%2C8%208%2C4.5%208%2C3.5%20%22%2F%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%228%2C8%208%2C7.5%207.5%2C8%20%22%2F%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%220%2C0%200%2C0.5%200.5%2C0%20%22%2F%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%224.5%2C0%203.5%2C0%200%2C3.5%200%2C4.5%20%22%2F%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%227.5%2C0%200%2C7.5%200%2C8%200.5%2C8%208%2C0.5%208%2C0%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); 
	background-repeat: repeat; 
	
	background-size: 8px 8px;
	-moz-background-size: 8px 8px;
	-webkit-background-size: 8px 8px;
	-o-background-size: 8px 8px;
	-ms-background-size: 8px 8px;
}

.feature ul li .icon {
	display: block; 
	width: 80px; 
	height: 80px; 
	margin: 20px auto;

  transform-style: preserve-3d;
  transition: 1s;
}

.feature ul li .icon.active {
	-webkit-transform: rotatey(360deg);
}

.feature ul li .text p {
	font-size: 14px; 
}


/* 機能別画面の操作イメージ */

.operation {

}

.operation .screenWrapper {
	position: relative; 
}

.operation .screenWrapper .base {
	margin: 0;
	width: 50%; 
	position: absolute; 
	display: block; 
   text-align: left; 
	overflow: hidden; 
}

.operation .screenWrapper .base img {
	width: 100%; 
	margin: auto;
}

.fingerWrapper {
	position: absolute; 
	top: 0; 
	left: 0;
    width: 50%;
    height: 0;
    padding-top: 97.4%;
}



.fingerWrapper > div[class*="finger"] {
	position: absolute; 
	width: 40px; 
	height: 60px; 
	opacity: 0;
	left: 100%;
	top: 50%;

	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	-ms-transition: all .2s ease;
	transition: all .2s ease;
}

.fingerWrapper > div[class*="move"] {
	opacity: 1;
}

/* 空いている時間帯をタップして予約 */
.fingerWrapper .finger.move1 {
	left: calc((402 / 920) * 100%);
	top: calc((1056 / 1800) * 100%);
}
/* 運用ルールで定められた */
.fingerWrapper .finger.move2 {
	left: calc((592 / 920) * 100%);
	top: calc((882 / 1800) * 100%);
}
/* 席番と場所 */
.fingerWrapper .finger.move3 {
	left: calc((190 / 920) * 100%);
	top: calc((928 / 1800) * 100%);
}
/* 今すぐ予約 */
.fingerWrapper .finger.move4 {
	left: calc((606 / 920) * 100%);
	top: calc((828 / 1800) * 100%);
}
/* チェックイン */
.fingerWrapper .finger.move5 {
	left: calc((590 / 920) * 100%);
	top: calc((708 / 1800) * 100%);
}
/* チェックアウト */
.fingerWrapper .finger.move6 {
	left: calc((590 / 920) * 100%);
	top: calc((708 / 1800) * 100%);
}
/* 検索 */
.fingerWrapper .finger.move7 {
	left: calc((482 / 920) * 100%);
	top: calc((498 / 1800) * 100%);
}


.operation .screenWrapper > div[class*="screen"] {
  width: 100%; 
  height: 350px; 
  
  position: absolute; 
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  -ms-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.operation .screenWrapper > div.screen1 {
	position: relative; 
}


.operation .screenWrapper > div.screen1 .line1,
.operation .screenWrapper > div.screen1 .line2,
.operation .screenWrapper > div.screen1 .line3 {
	display: none; 
}

.operation .screenWrapper > div.screen3 {

}

.operation .screenWrapper > div.screen3 .qrWrapper {
	position: absolute; 
	display: none; 
	top: 50%; 
	left: 50%;
	transform: translate(-50%, -50%);

	width: 100%; 
	height: auto; 
	max-width: 900px; 
	max-height: 600px; 
	background: #fff; 
	border: 8px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 0 20px rgba(0,0,0,0.8);
	padding: 20px; 
	color: #222; 
	display: none; 
}

.operation .screenWrapper > div.screen3 .qrWrapper h4 {
	display: block; 
	text-align: center; 
	font-weight: bold; 
	font-size: 16px; 
	margin: 0 0 1em;
}

.operation .screenWrapper > div.screen3 .qrWrapper .qr {
	justify-content: space-between;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: start; 
}

.operation .screenWrapper > div.screen3 .qrWrapper .qr .ph,
.operation .screenWrapper > div.screen3 .qrWrapper .qr .qrText {
	width: calc((100% - 20px) / 2); 
	font-size: 16px; 
}

.operation .screenWrapper > div.active {
	opacity: 1;
}

.screenWrapper .info {
	justify-content: space-between;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: center; 
}

.screenWrapper .info .capture {
	position: relative; 
	width: 50%; 
	height: 350px; 
}

.screenWrapper .info .capture img {
	width: 100%; 
	position: absolute; 
	top: 0;
	left: 0; 
}

.screenWrapper .info .capture img.second {
	display: none; 
}


.screenWrapper .info .textArea {
	width: -webkit-calc((100% - 50%));
	width: -moz-calc((100% - 50%));  
	width: calc((100% - 50%)); 

	text-align: center; 
	
	perspective: 800;
}

.screenWrapper .info .textArea .textGroup {
	margin: 0 0 0 10px;
}

.screenWrapper .info .textArea p {
	text-align: center; 
	font-size: 14px; 
	font-weight: 700; 
}

.screenWrapper .info .textArea p br {
	display: none; 
}

.screenWrapper .info .textArea p.smaller {
	font-size: 16px; 
	font-weight: 400; 
}

.screenWrapper .info .textArea h3 {
	width: 100%; 
	margin: 0 0 2em;
	-webkit-transform: rotateX(180deg);
	opacity: 0;
	transition: all .8s ease;
}

.screenWrapper .active .info .textArea h3 {
	-webkit-transform: rotateX(0);
	opacity: 1;
}

.screenWrapper .info .textArea h3 span {
	display: inline-block; 
	border: 1px solid #fff;
	background: rgba(255,255,255,0.1); 
	padding: 0.5em;
	border-radius: 30px; 

	box-shadow: 0 0 10px rgba(0,0,0,0.4);
	position: relative; 
	overflow: hidden; 
	color: #fff; 
}


.screenWrapper .info .textArea h3 span:before,
.screenWrapper .info .textArea h3 span:after {
	content: ""; 
	position: absolute; 
	width: 20%; 
	height: 100%; 
	top: 0; 
	left: -120%;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); /* w3c */
	opacity: 0.2;
	transform: skewX(-20deg);
}

.screenWrapper .info .textArea h3 span:before {
	width: 50%; 
	opacity: 0.4;
}

@keyframes slidein {
  from {
    left: -100%
  }

  to {
    left: 120%
  }
}

.screenWrapper .active .info .textArea h3 span:before {
	animation-duration: 1.5s;
	animation-name: slidein;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}

.screenWrapper .active .info .textArea h3 span:after {
	animation-duration: 2s;
	animation-name: slidein;
	animation-iteration-count: infinite;
}


/* エリア別に利用制限を設定できます */


.zoneSegmentation {


}

/* エリア分け */

.zoneSegmentation {
  padding: 0 10px; 
}

.zoneSegmentation .textBlock {
  max-width: 100%; 
  margin: 0;
  padding: 0 0; 
  position: relative; 
}



.zoneSegmentation .sideBySide {
    justify-content: space-between;
    width: 100%;
	max-width: 1000px; 
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: stretch; 
}

.zoneSegmentation .sideBySide > div {

  width: 50%; 
  width: 100%; 

}

.zoneSegmentation .sideBySide > div.leftCol {
  padding: 30px 0; 
}

.zoneSegmentation .sideBySide > div.leftCol p {
	font-size: 14px; 
	font-weight: 900; 
	display: block; 
	margin: 0 0 1em;
}

.zoneSegmentation .sideBySide > div.rightCol {
  padding: 0; 
  overflow-x: visible; 
}

.structure img,
.structure svg {
  width: 100%; 
}

.zoneSegmentation table {
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
  width: 100%; 
}

.zoneSegmentation.active table {
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.zoneSegmentation table tr.textEmphasize th {
	font-weight: 900; 
	font-size: 16px; 
}

.zoneSegmentation table tr.textSmaller th{
	font-size: 10px; 
}


.zoneSegmentation table th,
.zoneSegmentation table td {
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	text-align: center; 
	vertical-align: middle; 
	padding: 0.5em; 
	font-size: 12px; 
}

.zoneSegmentation.active table th,
.zoneSegmentation.active table td {
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.zoneSegmentation table th.noLine,
.zoneSegmentation table td:last-of-type {
	border-right: none;
}

.zoneSegmentation table th.ditLine {
	border-bottom: 1px dotted #eee;
}

.zoneSegmentation table tr {
  -webkit-transition: background .5s ease;
  -moz-transition: background .5s ease;
  -o-transition: background .5s ease;
  -ms-transition: background .5s ease;
  transition: background .5s ease;
  position: relative; 
}

.zoneSegmentation table tr.active {
  background: rgba(0,0,0,0.3); 
}

.svgWrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: calc((706 / 684) * 100%);
    overflow: hidden;
}

.svgWrapper svg {
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
}



/* 機能説明 */

.function {

}

.function h3 {
  display: inline-block; 
  padding: .5em 3em; 
  margin: 0 0 40px;

  color: #fff; 

	font-size: 20px; 
	font-weight: 900; 
}

.forUser,
.forAdministrator {
	position: relative; 
	overflow: hidden; 
}

.function h3.forAdministrator {
	margin-top: 40px;
}

.forUser:after,
.forAdministrator:after {
	content: ""; 
	position: absolute; 
	top: 0;
	left: 0;
	width: 300%; 
	height: 100%; 
	background: rgba(0,0,0,0.5); 
	z-index: -1; 
}

@keyframes fadeAnimation {
	0% { top: 0; left: 0;}
	50% { top: 0; left: -200%; }
	100% { top: 0; left: 0; }
}


.forUser:after {
background: linear-gradient(90deg, rgba(255,111,240,1) 0%, rgba(92,101,255,1) 100%); 
animation: fadeAnimation 5s linear infinite;

}

.forAdministrator:after {
background: linear-gradient(90deg, rgba(255,65,231,1) 0%, rgba(255,150,86,1) 100%); 
animation: fadeAnimation 5s linear infinite;

}

.function .tableScroll {
	width: 100%; 
	max-width: 100%; 
	overflow-x: scroll; 
}

.function table {
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  width: 100%; 
}

.function.active table {
	border-color: #fff;
}

.function table th, 
.function table td {
	padding: 0.5em; 
	border-bottom: 1px solid #666;
	vertical-align: middle; 
	font-size: 12px; 
}

.function.active table th, 
.function.active table td {
	border-color: #fff;
}

.function table th {
	text-align: center; 
	color: #fff; 
}

.function table td:last-of-type {
	font-size: 12px; 
}

.function colgroup.borderBold {
	border-bottom: 1px solid #666;
	font-weight: bold; 
	background: rgba(0,0,0,0.5); 
   width: 30%; 
}

.function colgroup.borderDotted {
	border-right: 1px dotted #ccc;
   width: 35%; 
}

.function colgroup.fontSmaller {
	font-size: 12px; 
   width: 35%; 
}

.function table td.corderLight {
	border-bottom: 1px solid #aaa;
}


/* ダウンロード */
.lineUp .download {
    display: block; 
    max-width: 1000px; 
    margin: 60px auto;
	padding: 0 10px; 
}

.lineUp .download a {
  border: 1px solid #7DD1F9;
  background: #7DD1F9; 
  display: block; 
  color: #fff; 
  font-size: 28px; 
  font-weight: 300; 
  padding: 20px; 

  -moz-box-shadow: 0 0 5px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);
  -o-box-shadow: 0 0 5px rgba(0,0,0,0.1);
  -ms-box-shadow: 0 0 5px rgba(0,0,0,0.1);
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

.lineUp .download a:hover {
  border: 1px solid #7DD1F9;
  background: #fff; 
  display: block; 
  color: #7DD1F9; 
}

/* お問い合わせ */

.btnArea {
    display: block; 
    max-width: 1000px; 
    margin: 60px auto;
	padding: 0 10px; 
}

.btnArea .copy {
    display: block; 
    text-align: center; 
    font-weight: 700; 
    margin: 0 0 1em 0;
}

.btnArea a {
    display: block; 
    border: 1px solid #fff;
    font-size: 20px; 
    font-weight: 900; 
    padding: 1em; 
    background: #00B5D5; 
	color: #fff  !important; 

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;

    -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.4);
    -o-box-shadow: 0 5px 5px rgba(0,0,0,0.4);
    -ms-box-shadow: 0 5px 5px rgba(0,0,0,0.4);
    box-shadow: 0 5px 5px rgba(0,0,0,0.4);

    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -ms-transition: all .2s ease;
    transition: all .2s ease;
}

.btnArea a:hover {
    border: 1px solid #00B5D5;
	color: #00B5D5  !important; 
    background: #fff; 
}


/* ==================================================
	=  問い合わせフォーム
================================================== */
.contents.innerSection {

}

.contents.innerSection h2 {
    text-align: left; 
    display: block; 
    font-weight: bold; 
    margin: 0 0 1em 0;
    padding: 0 0 0.5em 0; 
    border-bottom: 1px solid #ccc;
}

section.form {

}

section.form .innerSection {

}

section.form .innerSection dl {
  display: block; 
  text-align: left; 
  font-size: 16px; 
  border-bottom: 1px dotted #888;
  padding: 10px; 
}

section.form .innerSection dl dt,
section.form .innerSection dl dd {
  float: left; 
}

section.form .innerSection dl dt {
  width: 200px; 
  margin: 0 0 10px 0;
}

section.form .innerSection dl dt span {
  background: #2699D2; 
  display: inline block; 
  padding: 0 5px; 
  margin: 0 0 0 0.5em;
  color: #fff; 
  font-size: 12px; 
  font-weight: 900; 
}

section.form .innerSection dl dt em {
    color: #f00; 
    font-size: 16px; 
    font-weight: bold; 
}

section.form .innerSection dl dd {
    width: 100%; 
}

section.form .innerSection dl dd.subjectItem {

}

section.form .innerSection dl dd.subjectItem label {
  display: block; 
    width: 100%; 
}

section.form .innerSection dl dd.subjectItem label.wide span {
    font-size: 12px; 
    display: block; 
    padding:  0 0 0 1em; 
}

section.form .innerSection dl dd .rowBlock {
  display: block; 
  padding: 2px 0; 
}

section.form input,
section.form textarea,
section.form select {
  
}

section.form input,
section.form textarea,
section.form select {
  border: 2px solid #7DD1F9;
  padding: 10px; 
  font-size: 16px; 
  outline: none;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  color: #2699D2; 
  color: #222; 
  background: #fff; 
}

section.form select {
  -webkit-appearance:none;
  -moz-appearance: none;
  appearance: none;
}

section.form input#agreeCheck {
  -webkit-appearance:normal;
  -moz-appearance: normal;
  appearance: normal;
}

section.form select {
  color: #222;
  background-image: url('/meetingroom/form_images/arrow.png'); 
  background-repeat: no-repeat; 
  background-position : right 10px top 50%;
}

section.form input::-webkit-input-placeholder,
section.form textarea::-webkit-input-placeholder {
  color: #bba;
  font-weight: normal;
} 

section.form input::-ms-input-placeholder,
section.form textarea::-ms-input-placeholder {
  color: #bba;
  font-weight: normal;
}

section.form input::-moz-placeholder,
section.form textarea::-moz-placeholder {
  color: #bba;
  font-weight: normal;
}

.kana {
  ime-mode: active;
}

.alpha {
  ime-mode: disabled;
}



.comName,
.address,
.mail,
.inquiry.inquiryText {
  width: 100%; 
}

.familyName, 
.lastName {
    max-width: 8em; 
    
}

.inquiry {
  height: 12em; 
}

#postcode {
  width: 9em; 
}

#address1 {
  width: 9em; 
}

section.form .privacyPolicy {
  text-align: left; 
  border: 1px solid #ccc;
  background: #f7f7f7; 
  margin: 20px 0 0 0;
  padding: 30px; 
  font-size: 14px; 
  line-height: 1.6em; 

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

section.form .privacyPolicy h2 {
  font-size: 16px; 
}

section.form .privacyPolicy p {
  margin: 0 0 0.5em 0;
  text-indent: 1em; 
}

section.form .privacyPolicy .right {
  display: block; 
  text-align: right; 
  font-weight: bold; 
  margin: 10px 0 0 0;
}

section.form .privacyPolicy .agreement {
  border: 1px solid #7DD1F9;
  background: #fff; 
  background: #2699D2; 
  margin: 20px 0 0 0;
  text-align: center; 

  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  color: #fff; 
}

section.form .privacyPolicy .agreement:hover {
  color: #fff; 
  color: #2699D2; 
  
  background: #fff; 
}

section.form .privacyPolicy .agreement label {
  padding: 10px; 
  font-size: 16px; 
  font-weight: bold; 
  cursor: pointer; 
  display: block; 
  width: auto; 

}

section.form .btnArea {
  margin: 30px 0 0 0;
  width: auto; 

}

section.form .btnArea .btn {
  width: 100%; 
  font-size: 20px; 
  font-weight: 900; 
  padding: 10px 0; 
}

section.form .btnArea .btn:hover {
  color: #fff; 
  background: #2699D2; 
  cursor: pointer; 
}


/* ==================================================
	= Media Queries
================================================== */

/* 480px未満 */
@media only screen and (max-width: 479px) {


}

/* 480px以上 */
/* スマホ */
@media only screen and (min-width: 480px) {

}

/* 568px以上 */
/* タブレット */
@media only screen and (min-width: 568px) {


}

/* 667px以上 */
/* タブレット */
@media only screen and (min-width: 667px) {

	.intro .leadCopy {
		font-size: 18px; 
	}

	.feature ul li h3 {
		font-size: 18px; 
	}


	.feature ul li .icon {
		width: 120px; 
		height: 120px; 
	}

	.feature ul li .text p {
		font-size: 16px; 
	}


	article section header h2 {
		font-size: 40px; 
		font-weight: 100; 
	}

	.fingerWrapper > div[class*="finger"] {
		width: 80px; 
		height: 120px; 
	}


	.operation .screenWrapper .base {
		width: 36%; 
	}
	
	.fingerWrapper {
		width: 36%;
	}

	.screenWrapper .info .capture {
		width: 36%; 
		height: 500px; 
	}
	
	.screenWrapper .info .textArea {
		width: -webkit-calc((100% - 36%));
		width: -moz-calc((100% - 36%));  
		width: calc((100% - 36%)); 
	}

	.screenWrapper .info .textArea .textGroup {
		margin: 0 30px;
	}

	.screenWrapper .info .textArea p {
		font-size: 20px; 
	}



	.screenWrapper .info .textArea h3 {
		font-size: 20px; 
		font-weight: bold; 
	}

	.screenWrapper .info .textArea h3 span {
		padding: 0.5em 3em;
	}

	.fingerWrapper {
		padding-top: 70.2%;
	}


	.operation .screenWrapper > div[class*="screen"] {
	height: 500px; 
	}





	.function table th, 
	.function table td {
		font-size: 16px; 
	}


    /* ==================================================
        = 問い合わせフォーム
    ================================================== */
    section.form .innerSection dl dd {
        width: -webkit-calc(100% - 200px);
        width: -moz-calc(100% - 200px);
        width: calc(100% - 200px);
    }

}

/* 768px以上 */
/* タブレット */
@media only screen and (min-width: 768px) {




	/* エリア分け */
	.zoneSegmentation {
		padding: 0 0; 
	}

	.zoneSegmentation .textBlock:before,
	.zoneSegmentation .textBlock:after {
		content: ""; 
		width: 50%; 
		height: 100%; 
		position: absolute; 
		top: 0;
		left: 0;
		z-index: -1; 
	}
	
	.zoneSegmentation .textBlock:before {
		background: rgba(0,0,0,0.1); 
	}
	
	.zoneSegmentation .textBlock:after {
		left: 50%;
		background: rgba(255,255,255,0.1); 
	}

	.zoneSegmentation .sideBySide > div {
		width: 50%; 
	}

	.zoneSegmentation .sideBySide > div.leftCol {
		padding: 60px 20px; 
	}


	

}

/* 1000px以上 */
/* タブレット */
@media only screen and (min-width: 1000px) {



	/* 特徴 */
	
	.feature ul li,
	.feature ul li:nth-of-type(1n) {
		width: calc((100% - 60.1px) / 4); 
		margin: 0 20px 20px 0;
	}
	
	.feature ul li:last-of-type {
		margin-right: 0;
	}
	


	/* 機能別画面の操作イメージ */
	.screenWrapper .info .textArea p br {
		display: block; 
	}

	.operation .screenWrapper > div.screen3 .qrWrapper {
		width: auto; 
	}

	.operation .screenWrapper > div.screen3 .qrWrapper h4 {
		font-size: 20px; 
	}


	/* エリア分け */

	.zoneSegmentation .sideBySide > div.leftCol {
		padding: 60px 40px 60px 0; 
	}

	.zoneSegmentation .sideBySide > div.leftCol p {
		font-size: 18px; 
	}

	.zoneSegmentation table tr.textSmaller th{
		font-size: 14px; 
	}
	
	
	.zoneSegmentation table th,
	.zoneSegmentation table td {
		font-size: 16px; 
	}

    /* ==================================================
        = 問い合わせフォーム
    ================================================== */
    section.form .innerSection dl dd.subjectItem label {
        float: left; 
        width: -webkit-calc((100% - 20px) / 2);
       width: -moz-calc((100% - 20px) / 2);  
       width: calc((100% - 20px) / 2); 
        margin: 0 20px 0 0;
    }
    
    section.form .innerSection dl dd.subjectItem label:nth-of-type(2n) {
        margin-right: 0;
    }
    
    section.form .innerSection dl dd.subjectItem label.wide {
        width: 100%; 
        margin: 0 0 0 0;
    }
    
    section.form .innerSection dl dd.subjectItem label.wide span {
        padding: 0 0 0 0; 
        display: inline; 
    }

}