@import url('https://fonts.googleapis.com/css?family=Kosugi|M+PLUS+1p|M+PLUS+Rounded+1c|Sawarabi+Gothic&display=swap');
/* 共通、汎用 */
body{
	background-color:#9c9486;
	background-image:
		url("../images/bg-left.svg"),
		url("../images/bg-right.svg");
	background-repeat:no-repeat,no-repeat;
	background-position:top left,top right;
	background-size:750px,750px;
	color:#ffffff;
	font-family:'Kosugi', sans-serif;
	margin:0px;
	-webkit-touch-callout:none; /* iOS Safari */
	-webkit-user-select:none; /* Safari */
	-khtml-user-select:none; /* Konqueror HTML */
	-moz-user-select:none; /* Firefox */
	-ms-user-select:none; /* Internet Explorer/Edge */
	user-select:none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
body.viewer{
	background-color:#869c94;
}
body.secondary{
	background-color:#bea493;
}
body.monthly{
	background-color:#f4efec;
	color:#000000;
}
a:link{
	color:#ffffff;
	text-decoration:none;
}
a:visited{
	color:#ffffff;
}
a:hover{
	color:#ffffff;
}
a:active{
	color:#ffffff;
}
img.logo{
	width:150px; height:45px;
	padding-left:40px;
	padding-top:25px;
}
td.logo{
	text-align:left;
	vertical-align:top;
}
span.xxlarge{
	font-size:xx-large;
}
span.xlarge{
	font-size:x-large;
}
span.small{
	font-size:small;
}
span.xsmall{
	font-size:x-small;
}
div.outer{
	display:flex;
	justify-content:center;
	align-items:center;
}
.red{
	color:#ff4040;
}
.black{
	color:#000000;
}
td{
	text-align:center;
	vertical-align:middle;
	padding:0px;
}
div#footer{
	height:55px;
	border-top:solid 1px #707070;
	visibility:hidden;
}
table.footer{
	width:100%;
	table-layout:fixed;
}
img.icon_footer{
	width:18px; height:18px;
	margin-right:6px;
	padding-bottom:3px;
	display:inline-block;
	vertical-align:middle;
}
p.footer{
	display:inline;
	vertical-align:middle;
	font-family:'Sawarabi Gothic', sans-serif;
}
/* index.phpのみ */
p.mytype{
	font-size:2.75em;
	color:#feeebd;
	padding-left:40px;
	margin-bottom:10px;
}
p.alttype{
	font-size:large;
	color:#feeebd;
	padding-left: 80px;
	margin-top:10px;
}
table.top{
	width:100%;
	table-layout:fixed;
}
div.mt25{
	margin-top:25px;
}
div.yearbase{
	text-align:left;
	margin-left:40px;
	white-space:nowrap;
}
p#ymd_jp1{
	font-size:x-large;
	color:#feeebd;
	display:table-cell;
	vertical-align:bottom;
}
div.datebase{
	text-align:left;
	background-color:#feeebd;
	margin-left:40px;
	white-space:nowrap;
}
div.middle{
	vertical-align:middle;
}
p#ymd_jp2{
	font-family:'M PLUS Rounded 1c', sans-serif;
	font-size:2.75em;
	line-height:100px;
	color:#9c9486;
	margin-top:0px;
	margin-bottom:0px;
}
div.profbase{
	text-align:left;
	margin-left:40px;
	white-space:nowrap;
}
p.profname{
	font-size:x-large;
	color:#feeebd;
	display:table-cell;
	vertical-align:bottom;
}
div.top-panel{
	width:280px;
	position:relative;
	word-wrap:break-word;
	overflow-wrap:break-word;
	margin:6px;
}
div.top-circle{
	width:145px; height:145px;
	border-radius:50%;
	background:white;
	margin:auto;
	border:solid 4px #feeebd;
}
div.top-circle-subspec{
	width:145px; height:145px;
	border-radius:50%;
	background:#c0c0c0;
	margin:auto;
	border:solid 4px #feeebd;
}
img.top-thumb{
	position:relative;
	margin-top:25px;
	width:105px; height:59px;
	left:1px;
}
img.top-thumb-rom{
	position:relative;
	margin-top:25px;
	width:105px; height:59px;
	left:1px; top:18px;
}
input.btn-up{
	position:relative;
	width:47px; height:47px;
	left:1px;
}
.location{
	font-family:'M PLUS 1p', sans-serif;
}
.btn-copy{
	display:inline-block;
	padding:0.3em 1em;
	margin-top:8px;
	text-decoration:none;
	color:#67c5ff;
	border:solid 2px #feeebd;
	border-radius:3px;
	transition:.4s;
}
.btn-copy:active{
	/*ボタンを押したとき*/
	-webkit-transform:translateY(4px);
	transform:translateY(4px);/*下に動く*/
	border-bottom:none;/*線を消す*/
}
.btn-copy:hover{
	background:#feeebd;
	color:white;
}
div.pos-circle{
	display:inline-block;
	width:8px; height:8px;
	border-radius:50%;
	border:solid 2px #feeebd;
	margin:2px;
}
div.h50{
	height:50px;
}
/* 第2階層 */
td.backtop{
	text-align:left;
	vertical-align:middle;
}
td.secondary-main{
	vertical-align:top;
}
img.btn-top{
	width:32px; height:32px;
	padding-bottom:4px;
	margin:4px;
	display:inline-block;
	vertical-align:middle;
}
table.secondary{
	width:100%;
}
div.secondary-title{
	width:472px; height:100px;
	white-space:nowrap;
}
div.secondary-box{
	width:472px; height:229px;
	background-color:#fed458;
}
div.alert-title{
	width:560px; height:100px;
	white-space:nowrap;
}
div.alert-box{
	width:560px; height:240px;
	padding-left:16px;
	padding-right:16px;
	text-align:left;
	background-color:#fed458;
}
div.secondary-option{
	width:472px;
	white-space:nowrap;
}
input.secondary-btn-up{
	top:20px;
	width:66px; height:66px;
}
img.entry-thumb{
	width:210px; height:118px;
}
img.regist-thumb{
	width:210px; height:118px;
}
@media screen { #filename { display:none; } }
label > input{
	display:none;	/* アップロードボタンのスタイルを無効 */
}
label{
	color:#000000;			/* ラベルテキストの色 */
	font-size:small;		/* ラベルテキストのサイズ */
	background-color:#ffffff;	/* ラベルの背景色 */
	padding-left:20px;
	padding-right:20px;
	padding-top:5px;
	padding-bottom:5px;
}
span#warning{
	font-size:small;
	visibility:hidden;
}
div.entrythumb{
	width:360px;
	display:inline-block;
}
/* monthly.phpのみ */
table.monthly-head{
	width:75%; height:64px;
	color:#000000;
}
table.monthly{
	background-color:#dcd8d6;
	color:#000000;
	width:80%;
}
td.btn-monthly{
	width:32px;
	max-width:32px;
}
img.btn-monthly{
	width:22px; height:21px;
	margin-left:5px;
	margin-right:5px;
	padding-bottom:3px;
	display:inline-block;
	vertical-align:middle;
}
td.monthly-head{
	width:25%; height:43px;
	white-space:nowrap;
}
td.monthly-date{
	width:90px;
	white-space:nowrap;
}
div.monthly-date{
	width:90px;
	text-align:center;
	margin:auto;
}
td.monthly-place{
	height:32px;
	font-size:small;
}
span.weekdays{
	color:#000000;
}
span.saturday{
	color:#4040ff;
}
span.sunday{
	color:#ff4040;
}
td.monthly-thumb{
	text-align:center;
	width:143px;
}
div.monthly-thumb{
	width:143px; height:65px;
	max-height:65px;
	text-align:center;
	margin:auto;
}
img.monthly-thumb{
	width:113px; height:64px;
}
input.monthly-btn-up{
	position:relative;
	left:48px; top:-30px; width:32px; height:32px;
	z-index:1;
}
.monthly-continued{
	margin:0 auto;
	width:11px; height:20px;
}
.monthly-bg00{
	background-color:#fff0f5;	/* lavenderblush */
	border-left:1px solid #808080;
	border-right:1px solid #808080;
}
.monthly-bg01{
	background-color:#90ee90;	/* lightgreen */
	border-left:1px solid #808080;
	border-right:1px solid #808080;
}
.monthly-bg02{
	background-color:#87cefa;	/* lightskyblue */
	border-left:1px solid #808080;
	border-right:1px solid #808080;
}
.monthly-bg03{
	background-color:#fffacd;	/* lemonchiffon */
	border-left:1px solid #808080;
	border-right:1px solid #808080;
}
.monthly-bg10{
	background-color:#87cefa;	/* lightskyblue */
	border-left:1px solid #808080;
	border-right:1px solid #808080;
}
.monthly-bg11{
	background-color:#fffacd;	/* lemonchiffon */
	border-left:1px solid #808080;
	border-right:1px solid #808080;
}
.monthly-bg12{
	background-color:#fff0f5;	/* lavenderblush */
	border-left:1px solid #808080;
	border-right:1px solid #808080;
}
.monthly-bg13{
	background-color:#90ee90;	/* lightgreen */
	border-left:1px solid #808080;
	border-right:1px solid #808080;
}
/* マウスオーバー */
figure.hover-parent{
	width:113px; height:64px;
	position:relative;
	margin:0px;
	padding:0px;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	display:block;
	text-align:center;
}
figcaption.hover-mask{
	width:113px;height:64px;
	position:absolute;
	top:0; left:0;
	bottom:0; right:0;
	background:rgba(0,0,0,0.5);
	opacity:0;
	color:#ffffff;
	font-size:small;
	line-height:64px;
	text-align:center;
}
figure.hover-parent:hover .hover-mask{
	opacity:1;
}
/* CAROUSEL */
#carousel{
	margin:0 auto;
	width:840px;
	height:280px;
	text-align:left;
	position:relative;
	overflow:hidden;
}
#carousel_prev,
#carousel_next{
	top:0;
	width:20px; height:280px;
	background:#000;
	cursor:pointer;
	position:absolute;
}
#carousel_prev{
	left:-45px; top:75px;
	background:transparent url(../images/btn-left.svg) no-repeat top left;
	width:32px; height:32px;
}
#carousel_next{
	right:-45px; top:75px;
	background:transparent url(../images/btn-right.svg) no-repeat top left;
	width:32px; height:32px;
}
#carousel ul li{
	width:280px;
	float:left;
	display:inline;
	text-align:center;
}
/* =======================================
	ClearFixElements
======================================= */
#carousel ul:after{
	content:".";
	height:0;
	clear:both;
	display:block;
	visibility:hidden;
}
#carousel ul{
	display:inline-block;
	overflow:hidden;
	padding:0;
}

#menu-wrapper{
	overflow:hidden;
	width:80px;
	max-width:100%;
	cursor:pointer;
	float:left;
}
#menu-wrapper #hamburger-menu{
	position:relative;
	width:25px;
	height:20px;
	margin:15px;
	margin-left:40px;
}
#menu-wrapper #hamburger-menu span{
	opacity:1;
	left:0;
	display:block;
	width:100%;
	height:2px;
	border-radius:10px;
	color:black;
	background-color:white;
	position:absolute;
	transform:rotate(0deg);
	transition:.4s ease-in-out;
}
#menu-wrapper #hamburger-menu span:nth-child(1){
	top:0;
}
#menu-wrapper #hamburger-menu span:nth-child(2){
	top:9px;
}
#menu-wrapper #hamburger-menu span:nth-child(3){
	top:18px;
}
#menu-wrapper #hamburger-menu.open span:nth-child(1){
	transform:translateY(9px) rotate(135deg);
}
#menu-wrapper #hamburger-menu.open span:nth-child(2){
	opacity:0;
	transform:translateX(-60px);
}
#menu-wrapper #hamburger-menu.open span:nth-child(3){
	transform:translateY(-9px) rotate(-135deg);
}
#menu-container .menu-list .menu-submenu{
	padding-top:5px;
	padding-bottom:5px;
}
#menu-container .menu-list{
	font-family:'M PLUS Rounded 1c', sans-serif;
	padding-left:0;
	display:block;
	position:absolute;
	width:100%;
	max-width:380px;
	background:#ffffff;
	box-shadow:rgba(100,100,100,0.2) 6px 2px 10px;
	z-index:999;
	overflow-y:auto;
	overflow-x:hidden;
	left:-100%;
}
#menu-container .menu-list li.accordion-toggle, #menu-container .menu-list .menu-login{
	font-size:16px;
	padding:5px;
	padding-left:40px;
	text-transform:uppercase;
	border-top:1px solid #dbdcd2;
	background-color:#feeebd;
}
#menu-container .menu-list li:first-of-type{
	border-top:0;
}
.accordion-toggle, .accordion-content{
	cursor:pointer;
	font-size:16px;
	position:relative;
	letter-spacing:1px;
	color:#9c9486;
}
.accordion-content{
	display:none;
}
.accordion-toggle a:before, .accordion-toggle a:after{
	content:'';
	display:block;
	position:absolute;
	top:50%;
	right:5px;
	width:15px;
	height:2px;
	margin-top:-1px;
	background-color:#9c9486;
	transform-origin:50% 50%;
	transition:all 0.3s ease-out;
}
.accordion-toggle a:before{
	transform:rotate(-90deg);
	opacity:1;
	z-index:2;
}
.accordion-toggle.active-tab{
	background:#fadb7d;
	transition:all 0.3s ease;
}
.accordion-toggle a.active:before{
	transform:rotate(0deg);
	background:#fff !important;
}
.accordion-toggle a.active:after{
	transform:rotate(180deg);
	background:#fff !important;
	opacity:0;
}
a.menu-link{
	color:#9c9486;
}
a.menu-link:visited {
	color:#9c9486;
}
a.menu-head{
	color:#9c9486;
}
a.menu-head:visited {
	color:#9c9486;
}
#gear{
	padding-top:3px;
	width:36px; height:47px;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
	float:left;
	text-align:center;
}
div.clear{
	clear:both;
}
div.editmenu-box{
	font-family:'M PLUS Rounded 1c', sans-serif;
	width:500px;
	text-align:left;
	padding:8px;
	color:#9c9486;
	background-color:#fed458;
}
ul.editmenu-container{
	padding-left:0;
	max-width:380px;
	box-shadow:rgba(100,100,100,0.2) 6px 2px 10px;
}
li.menu-group{
	font-size:16px;
	position:relative;
	letter-spacing:1px;
	color:#9c9486;
	background-color:#feeebd;
	list-style-type: none
}
ul.menu-subgroup{
	font-size:16px;
	position:relative;
	letter-spacing:1px;
	background-color:#ffffff;
}
.icon-up{
	position:absolute;
	right:-25px;
}
.icon-down{
	position:absolute;
	right:-50px;
}
.icon-edit{
	position:absolute;
	right:-75px;
}
.icon-delete{
	position:absolute;
	right:-100px;
}
input.editname{
	width:320px;
	border-radius:3px;
}
textarea.editcomment{
	font-size:small;
	width:320px;
	border-radius:3px;
}
.icon-ok{
	position:absolute;
	right:-75px;
}
.icon-ng{
	position:absolute;
	right:-100px;
}
div.menu-box{
	width:324px; height:80px;
	text-align:center;
	background-color:#fed458;
	border:2px dotted #000000;
}
input.addgroup{
	text-align:left;
	width:382px;
	color:#9c9486;
	background-color:#feeebd;
	border-radius: 0.3em;
}
input.addfile{
	text-align:left;
	padding-left:20px;
	width:382px;
	color:#9c9486;
	background-color:#ffffff;
	border-radius: 0.3em;
}
input.update{
	width:382px;
	color:#9c9486;
	border-radius: 0.3em;
}