:root {
  /* レイアウト */
  --app-width:     320px;
  --header-height: 50px;
  --title-block-height: 50px;

  /* アイコン枠・角丸 */
  --icon-border:      3px #ffffff solid;
  --radius-user:      50%;
  --radius-group:     30%;
  --radius-community: 15%;
  --radius-spot:      10%;
  --radius-area:       5%;

  /* ボタン角丸 */
  --radius-button: 7px;

  /* カラー */
  --color-menu1:       #00A0FF;
  --color-menu2:       #00C0A0;
  --color-btn-accent:  #FF0080;
  --color-btn-purple:  #800080;
  --color-btn-violet:  #8000FF;
  --color-btn-primary: #0040C0;
  --color-link:        #0000BB;
  --color-page-title:  #C0FFE0;
  --color-event-title: #FFFF80;
  --color-edit-bg:     #F0F0F0;
  --color-edit-border: #C0C0C0;
}

BODY{
	margin:0;
	width:var(--app-width);
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	overflow-wrap: break-word;
}

#logo{
	position: absolute;
	top:0px;
	left:55px;
	width:212px;
	height:25px;
}

#header{
	height:var(--header-height);
	width:var(--app-width);
	position:fixed;
	background-image:url(../images/TitleBack.png);
	background-size: cover;
	z-index:100;
}
#HeaderMessage{
	font-size:14px;
	position:fixed;
	top:28px;
	left:50px;
	width:220px;
	text-align:center;
	background-color:rgba(255,255,255,0.5);
}
#TitleBlock{
	//padding:5px 0px 5px 0px;
	height:var(--title-block--height);
	width:var(--app-width);
	top:var(--header-height);
	position:fixed;
	z-index:100;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color:#B0FFB0;
}
#spreadsheet{
	top:var(--title-block-height);
}
#List{
	position:relative;
	top:var(--title-block-height);
}

IMG.IconNone{width:0;}
IMG.IconSS{width:20px;}
IMG.IconS{width:30px;}
IMG.IconM{width:40px;}
IMG.IconL{width:70px;}
IMG.IconLL{width:100px;}
IMG.User{      border-radius: var(--radius-user);}
IMG.Group{     border-radius: var(--radius-group);}
IMG.Community{ border-radius: var(--radius-community);}
IMG.Spot{      border-radius: var(--radius-spot);}
IMG.Message{   border-radius: var(--radius-group);}
IMG.Sign{      border-radius: var(--radius-group);}
IMG.Border0{border:none;}
IMG.Border1{border:1px #ffffff solid;}
IMG.Border2{border:2px #ffffff solid;}
IMG.Border3{border:var(--icon-border);}

.userphoto{
	width:70px;
	border-radius: var(--radius-user);
	border:var(--icon-border);
}
#userphoto{
	width:50px;
	height:50px;
	position: absolute;
	top:2px;
	left:270px;
}

IMG.TitleBlockIcon{
	width:35px;
	border-radius: 20%;
	border:var(--icon-border);
}

DIV.ListIcons{
	float:left;
	width:80px;
	height:120px;
	text-align:center;
	overflow: hidden
}


IMG.GroupIcon{
	width:60px;
	border-radius: var(--radius-group);
	border:var(--icon-border);
}
DIV.GroupIcons{
	float:left;
	width:80px;
	height:120px;
	text-align:center;
	overflow: hidden
}
DIV.GroupIcons A{
	display:block;
	font-size:14px;
	color:var(--color-link);
	text-decoration: none;
}

IMG.CommunityIcon{
	width:60px;
	border-radius: var(--radius-community);
	border:var(--icon-border);
}
DIV.CommunityIcons{
	float:left;
	width:80px;
	height:120px;
	text-align:center;
	overflow: hidden
}
DIV.CommunityIcons A{
	display:block;
	font-size:14px;
	color:var(--color-link);
	text-decoration: none;
}

IMG.AreaIcon{
	width:60px;
	border-radius: var(--radius-area);
	border:var(--icon-border);
}
DIV.AreaIcons{
	float:left;
	width:80px;
	height:120px;
	text-align:center;
	overflow: hidden
}
DIV.AreaIcons A{
	display:block;
	font-size:14px;
	color:var(--color-link);
	text-decoration: none;
}

IMG.SpotIcon{
	width:60px;
	border-radius: var(--radius-spot);
	border:var(--icon-border);
}


IMG.MessageIcon{
	border-radius: var(--radius-group);
	border:var(--icon-border);
}

DIV#blank{
	height:113px;
	width:var(--app-width);
}

TABLE.title{
	width:100%;
}

TABLE.title TD.left{
	width:40px;
}

TABLE.title TD.center{
	padding:0;
	margin:0;
	text-align:center;
	line-height:18px;
}

TABLE.title TD.right{
	width:40px;
}

INPUT.notify_button{
	font-size:10px;
	border:1px solid #999;
}

IFRAME.page{
	background-color:#FFFFFF;
	position:absolute;
	top:2px;
	width:var(--app-width);
	min-height:1000px;
	transform-origin: 0% 50%;
	transform: perspective(1000px);
	transition:0.5s;
	padding:0;
	margin:0;
}

DIV.overlay{
	position: absolute;
	top: 0;
	left: 0;
	width:var(--app-width);
	height:1000px;
	z-index: 4;
	background: transparent;
}


A{
	text-decoration:none;
}

DIV.header{
	padding:5px;
	font-size:25px;
	text-align:center;
	font-weight:bold;
	background-color:#8080F0;
	color:#FFFFFF;
}

DIV.top_menu{
	margin:5px;
	text-align:center;
}

DIV.menu{
	text-align:center;
}

DIV.PageTitle{
	background-color:var(--color-page-title);
	padding:5px;
	font-weight:bold;
	box-shadow: 5px 5px 5px gray;
}
DIV.EventTitle{
	background-color:var(--color-event-title);
	padding:5px;
	font-weight:bold;
}
DIV.article-map-block{
	margin:10px 0;
	padding:8px;
	background-color:#F0F8FF;
	border-radius:6px;
}
DIV.article-map-title{
	font-weight:bold;
	margin-bottom:6px;
	font-size:14px;
}

DIV.main{
	position:relative;
	top:var(--header-height);
	padding-top:0px;
	margin:0px;
	background-color:#FFFFFF;
}

DIV.center{
	text-align:center;
}

DIV.title{
	margin:10px;
	text-align:center;
	font-size:20px;
	padding:10px;
	border-style:solid;
	border-width:3px 0 3px 0;
	border-color:#808080;
}
DIV.button{
	text-align:center;
	margin:0px;
	padding-top:10px;
	padding-bottom:20px;
}

A.button_a{
	cursor:pointer;
	padding:3px;
	text-decoration:none;
	font-weight:bold;
	font-size:20px;
	color:#FFFFFF;
	background-color:var(--color-btn-accent);
	border-radius:var(--radius-button);
}
A.button_b{
	margin:3px;
	padding:3px 10px 3px 10px;
	text-decoration:none;
	font-weight:bold;
	font-size:15px;
	color:#FFFFFF;
	background-color:var(--color-btn-purple);
	border-radius:var(--radius-button);
}

A.button_c{
	display:block;
	width:80px;
	height:15px;
	float:left;
	text-align:center;
	margin:2px 1px 0 1px;
	padding-top:10px;
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
	color:#FFFFFF;
	background-color:#808080;
	border-top-left-radius:var(--radius-button);
	border-top-right-radius:var(--radius-button);
	border-style:solid;
	border-color:#808080;
	border-width:1px 1px 0 1px;
}
A.button_d{
	display:block;
	width:154px;
	height:30px;
	float:left;
	text-align:center;
	margin:1px;
	padding-top:10px;
	text-decoration:none;
	font-weight:bold;
	font-size:15px;
	color:#404040;
	background-color:#F0F0F0;
	border-top-left-radius:var(--radius-button);
	border-top-right-radius:var(--radius-button);
}

A.button_e{
	margin:20px;
	line-height:50px;
	padding:3px 10px 3px 10px;
	text-decoration:none;
	font-weight:bold;
	font-size:20px;
	color:#FFFFFF;
	background-color:var(--color-btn-violet);
	border-radius:var(--radius-button);
}

A.button_f{
	display:block;
	width:130px;
	height:130px;
	float:left;
	margin:3px;
	padding:3px 10px 3px 10px;
	text-decoration:none;
	font-weight:bold;
	font-size:20px;
	color:#FFFFFF;
	background-color:var(--color-btn-violet);
	border-radius:var(--radius-button);
}
A.button_g{
	display:block;
	text-align:center;
	color:white;
	background-color:var(--color-btn-primary);
	border-style:solid;
	border-width:2px;
	border-color:white;
	width:250px;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:5px;
	text-decoration:none;
	padding-top:5px;
	padding-bottom:5px;
	border-radius:var(--radius-button);
	font-weight:bold;
}


th{
	text-align:left;
}

table.border{
	margin-left:auto;
	margin-right:auto;
	border-collapse:  collapse;
}


table.border td,table.border th{
	border-style:solid;
	border-width:2px;
	border-color:gray;
}


DIV.area{
	float:left;
	margin-left:5px;
}

input{
	font-size:18px;
}
textarea{
	font-size:18px;
}
#menuicon{
	position: absolute;
	top:7px;
	left:5px;
	width:40px;
	height:40px;
}

#menu1{
  display:none;
  position:fixed;
  top:40px;
  z-index:100;
}
UL{
	list-style-type: none;
	list-style-position:outside;
	padding-left:0;
}
#menu1 UL LI{
	display:block;
	width:200px;
	background:var(--color-menu1);
	margin:3px;
	padding:10px;
	font-size:17px;
	font-weight: bold;
	color:#FFFFFF;
	cursor:pointer;
}

#menu2{
	display:none;
	position:fixed;
	top:40px;
	left:95px;
  z-index:101;
}

#menu2 UL LI{
	cursor:pointer;
	display:block;
	width:200px;
	background:var(--color-menu2);
	margin:3px;
	padding:10px;
	font-size:17px;
	font-weight: bold;
	color:#FFFFFF;
}


/*********** Schedule **********/
TABLE.calendar{
	border-spacing:0;
	border-color:#000000;
}

TABLE.calendar TD,TH{
	width:80px;
	border-style:solid;
	border-width:1px;
	border-color:#000000;
}

TABLE.calendar TH{
	height:20px;
	text-align:center;
	font-size:12pt;
	font-weight:bold;
}

TABLE.calendar TD{
	height:40px;
	vertical-align:top;
	font-size:12pt;
	background-color:#FFFFFF;
	padding:3px;
	cursor:pointer;
}

TABLE.calendar SPAN.date{
	font-family:'Arial Black','Baekmuk HeadLine';
}

TABLE.calendar TD.to_week{
	font-size:10pt;
	font-family:'Arial Black','Baekmuk HeadLine';
	background-color:#90FF90;
	border-color:#A0FFA0 #80EF80 #80EF80 #A0FFA0;
}

TABLE.calendar TD.to_week A{
	display:block;
	color:#008000;
}
TABLE.calendar TD.to_week A:visited{
	color:#008000;
}

TABLE.calendar TD.holiday,TH.holiday{
	color:#E04000;
	background-color:#FFE0E0;
	border-color:#FFF0F0 #EFD0D0 #EFD0D0 #FFF0F0;
}

TABLE.calendar TD.holiday SPAN.date A{
	color:#E04000;
}

TABLE.calendar TD.holiday SPAN.date A.visited{
	color:#E04000;
}

TABLE.calendar TD.weekday,TH.weekday{
	color:#404040;
	background-color:#F0F0F0;
	border-color:#F8F8F8 #E0E0E0 #E0E0E0 #F8F8F8;
}

TABLE.calendar DIV.item{
	margin-top:2px;
	font-size:0.7em;
}

TABLE.calendar TD.weekday SPAN.date A{
	color:#808080;
}

TABLE.calendar TD.weekday SPAN.date A:visited{
	color:#808080;
}

TABLE.calendar TD.weekday SPAN.date A:hover{
	background-color:#FFFFFF;
}

TABLE.calendar TD.saturday,TH.saturday{
	color:var(--color-btn-primary);
	background-color:#E0E0FF;
	border-color:#F0F0FF #D0D0EF #D0D0EF #F0F0FF;
}

TABLE.calendar TD.saturday SPAN.date A{
	color:var(--color-btn-primary);
}

TABLE.calendar TD.saturday SPAN.date A.visited{
	color:var(--color-btn-primary);
}

DIV.calendar_day{
	font-size:13px;
	width:40px;
	max-height:40px;
	overflow:hidden;
	border-style:solid;
	border-width:1px;
	border-color:#C0C0C0;
}

INPUT.date{
	width:110px;
	font-size:14px;
}


INPUT.time{
	width:70px;
	font-size:14px;
}

FORM.form2 TD{
	font-size:14px;
}
FORM.form2 INPUT{
	font-size:12px;
	padding:0;
	margin:0;
}

.fileinput{
	width:300px;
}

DIV.photo_area{
	position:relative;
	width:260px;
	height:260px;
	top:30px;
	left:30px;
	border-style:solid;
	border-width:1px;
	z-index:21;
}

DIV.tile{
	width:158px;
	height:180px;
	float:left;
	border-width:1px;
	background-color:#FFFFFF;
	text-align:center;
	padding-top:10px;
}

IMG.tile{
	width:150px;
	height:140px;
	object-fit:cover;
	margin:0;
	border-style:solid;
	border-color:#FFFFFF;
}

DIV.tile3{
	width:100px;
	height:130px;
	float:left;
	border-width:1px;
	background-color:#FFFFFF;
	text-align:center;
	padding-top:10px;
}

DIV.tile3c{
	width:100px;
	height:130px;
	float:left;
	border-width:1px;
	background-color:#FFFFFF;
	text-align:center;
	padding-top:10px;
	margin-left:10px;
	margin-right:10px;
}

IMG.tile3{
	width:90px;
	height:90px;
	object-fit:cover;
	margin:0;
	border-style:solid;
	border-color:#FFFFFF;
}

DIV.tile_body{
	text-align:left;
	color:#408040;
	width:150px;
	height:140px;
	background-color:#EEEEFF;
	display:inline-block;
	overflow:hidden;
	border-style:solid;
	border-color:#FFFFFF;
}

DIV.tile A{
	color:#0000FF;
	font-weight:bold;
	padding:1px;
	font-size:12px;
	text-decoration:none;
}

DIV.tile2{
	width:160px;
	height:180px;
	float:left;
	border-width:1px;
	background-color:#FFFFA0;
	text-align:center;
	padding-top:10px;
}

IMG.tile2{
	width:140px;
	height:140px;
	object-fit:cover;
	margin-top:10px;
}

DIV.tile2 A{
	color:#0000FF;
	font-weight:bold;
	padding:3px;
	font-size:12px;
	text-decoration:none;
}

/*************************/

DIV.main INPUT{
	font-size:14px;
}
DIV.buttons{
	text-align:center;
	padding:10px;
}
DIV.buttons INPUT{
	font-size:16px;
}

DIV.InsertElement{
	text-align:center;
	display:none;
}
.InsertItemButtons{
	text-align:center;
	display:none;
}
.EditItemButtons{
	text-align:center;
	position:absolute;
	width:300px;
	display:none;
}

.EditItemButtons img{
	text-align:center;
	margin-left:20px;
	margin-right:20px;
}

DIV.edit_field{
	width:294px;
	padding:10px;
	border-style:solid;
	border-color:var(--color-edit-border);
	background-color:var(--color-edit-bg);
  user-select: text;
  -webkit-user-select: text;
}

::placeholder {
  color: #C0C0C0;
}

IMG.image{
	display:block;
	margin-top:10px;
	margin-left:20px;
	margin-bottom:10px;
	width:280px;
	box-shadow: 10px 5px 5px gray;
}

DIV.lightbox{
	display:none;
	position:fixed;
	top:0;
	left:0;
  width: 100vw;
  height: 100vh;
	background-color:#000000;
	z-index:101;
}
DIV.lightbox IMG{
	margin-top:auto;
	margin-bottom:auto;
  width: 100vw;
  height: 100vh;
	object-fit:contain;
}

#main{
	position:relative;
}
#sub {
	padding: 0px;
	height: 500px;
	background-color: #3fd198;
	position:absolute;
	top:75px;
	z-index:10;
}
.CommentIcon{
	border-radius: var(--radius-user);
	border:var(--icon-border);
	display:block;
	width:40px;
	height:40px;
	float:left;
	margin-left:5px;
	margin-right:5px;
}
.CommentDiv{
	width:250px;
	padding:3px;
}
.CommentTitle{
	background-color:#FFBB88;
	box-shadow: 5px 5px 5px gray;
}

.Comment TD{
	background-color:#EEEEFF;
}
.CommunityDescription{
	margin:5px;
	border-style:solid;
	border-width:1px;
	padding:3px;
	text-align:left;
}
.PhotoOuter{
	position:relative;
	top:0px;
	left:20px;
	width:280px;
	height:280px;
	z-index:2;
	overflow:hidden;
}


DIV.QRimg IMG{
	width:200px;
}

DIV#divItems INPUT[type="button"]{
	width:40px;
}


DIV#Dialog{
	display:none;
	position:fixed;
	top:200px;
	left:20px;
	width:280px;
	height:100px;
	padding-top:18px;
	text-align:center;
	background-color:#F0F0FF;
	border-style:solid;
	border-width:1px 3px 3px 1px;
	border-color:#808080;
}

DIV.Dialog{
	width:300px;
	padding:10px;
	border-style:solid;
	position:absolute;
	top:120px;
	left:5px;
	z-index:100;
	background-color:white;
	display:none
}

DIV#Dialog1{
	width:300px;
	padding:10px;
	border-style:solid;
	position:fixed;
	top:120px;
	left:5px;
	z-index:100;
	background-color:white;
	display:none
}

SELECT.area{
	font-size:20px;
}

DIV.fig{
	text-align:center;
}

DIV.fig IMG{
	width:200px;
	border-style:solid;
	border-width:1px;
}

DIV.comment_list IMG{
	width:35px;
	border-width:1px;
	vertical-align:middle;
}
DIV.comment_list A{
	text-decoration:none;
}


TABLE.comment_list{
	border-collapse:collapse;
}

TABLE.comment_list TD{
	border-style:solid;
	border-width:0px 0 1px 0px;
}

DIV.stamp{
	width:60px;
	height:47px;
	overflow:hidden;
	padding-top:13px;
	background-image:url("/img/stamp.png");
	line-height:18px;
}

DIV.About{
	padding:10px;
}

DIV.About H2{
	font-size:18px;
}

TD.tile{
	border-style:solid;
	border-width:1px;
	text-align:center;
	width:150px;
	height:150px;
}

TABLE.PointCard{
	border-collapse:collapse;
	border-style:solid;
	border-width:2px;
	border-color:#808080;
	background-color:#FFFFFF;
}

TABLE.PointCard TD{
	border-style:solid;
	border-width:2px;
	border-color:#808080;
	width:60px;
	height:60px;
	color:#A0A0A0;
	text-align:center;
	position:relative;
}

TABLE.PointCard TD IMG{
	position:absolute;
	top:0px;
	left:0px;
}
TABLE.PointCard TD DIV{
	line-height:15px;
	font-size:15px;
	color:#000000;
	z-index:5;
	position:absolute;
	top:15px;
	left:0px;
}

INPUT.Capacity{
	width:40px;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 10vh;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.9);
  text-align: center;
}
.modal-content {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.modal-content:active {
  transform: scale(1.5);
}


DIV.dialog{
	display:none;
	position:fixed;
	top:300px;
	left:10px;
	width:290px;
	background-color:#C0C0FF;
	padding:5px;
	border-style:solid;
	border-width:1px 3px 3px 1px;
}

DIV#DiMember{
	width:250px;
	height:300px;
	position:fixed;
	top:140px;
	left:50px;
	background-color:#F0FFF0;
	display:none;
	box-shadow: 10px 5px 5px grey;
}

DIV.FieldInner{
	border-style:solid;
	border-width:1px;
	min-height:50px;
	margin:5px;
	padding:5px;
}

DIV.FieldButtons{
	width:100%;
	text-align:right;
	height:20px;
}

INPUT.FormInput{
	width:280px;
}
TEXTAREA.FormInput{
	width:280px;
	height:80px;
}

DIV.Check{
	background-color:#E0E0FF;
}