@charset "UTF-8";

@font-face {
    font-family: 'Noto Sans CJK JP Light';
    font-style: normal;
    font-weight: 200;
    src: url('/font/NotoSansCJKjp-Light.woff2') format('woff2'),
	     url('/font/NotoSansCJKjp-Light.woff') format('woff'),
	     url('/font/NotoSansCJKjp-Light.ttf')  format('truetype'),
         url('/font/NotoSansCJKjp-Light.eot') format('embedded-opentype');
}
@font-face {
    font-family: 'Noto Sans CJK JP Regular';
    font-style: normal;
    font-weight: 400;
    src: url('/font/NotoSansCJKjp-Regular.woff2') format('woff2'),
	     url('/font/NotoSansCJKjp-Regular.woff') format('woff'),
	     url('/font/NotoSansCJKjp-Regular.ttf')  format('truetype'),
         url('/font/NotoSansCJKjp-Regular.eot') format('embedded-opentype');
}
@font-face {
    font-family: 'Noto Sans CJK JP Bold';
    font-style: normal;
    font-weight: 700;
    src: url('/font/NotoSansCJKjp-Bold.woff2') format('woff2'),
	     url('/font/NotoSansCJKjp-Bold.woff') format('woff'),
	     url('/font/NotoSansCJKjp-Bold.ttf')  format('truetype'),
         url('/font/NotoSansCJKjp-Bold.eot') format('embedded-opentype');
}


body{
	*font-size:small;
	*font:x-small;
	font-size:13px;
	line-height:1.75;
	color:#000;
	font-feature-settings:"palt";
	font-family: "Noto Sans CJK JP Regular","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	text-align:center;
	width:100%;
	margin:0px;
	padding:0px;
	background:#fff;
	-webkit-text-size-adjust:100%;
}
body.top,
body.registration{
	background:#e6e6e6;
}
body::after{
  content: "";
  display: block;
  width: 100%;
  height: 100vh;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
	-webkit-transition:opacity 0.1s;
	-ms-transition:opacity 0.1s;
	transition:opacity 0.1s;
}
body.loadEnd::after{
	-webkit-transition:opacity 0.5s;
	-ms-transition:opacity 0.5s;
	transition:opacity 0.5s;
  opacity: 0;
  pointer-events: none;
}
body *,
body *::before,
bory *::after{
  box-sizing: border-box;
}
form,
select,
option,
input,
textarea{
	font-feature-settings:"palt";
	font-family: "Noto Sans CJK JP Regular","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
h1,h2,h3,h4,h5,p,ul,ol,li,img,table,th,td,dl,dt,dd{
	margin:0px;
	padding:0px;
	font-size:13px;
	line-height:1.75;
	font-weight: normal;
}
li{
	list-style-type:none;
}
table{
	border-collapse:collapse;
}
a:link,a:visited{
	cursor:pointer;
	color:#000;
	text-decoration:none;
}
a{
  outline:none;
	transition:opacity 0.2s;
	-webkit-tap-highlight-color:transparent;
}
img{
	vertical-align:top;
	border:0;
	max-width:100%;
	height:auto;
	backface-visibility:hidden;
}
input, 
textarea, 
select,
button,
label{
	font-feature-settings:"palt";
	font-family: "Noto Sans CJK JP Regular","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	font-weight: normal;
  outline:none;
	-webkit-tap-highlight-color:transparent;
}

#wrap{
	position:relative;
	text-align:left;
	overflow:hidden;
}

/* header */
header{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	padding: 30px 30px 20px 40px;
	background: #fff;
}
body.top header,
body.registration header{
	background:#e6e6e6;
}
header::after{
	content: "";
	display: block;
	clear: both;
}
#menuBtn{
	display: none;
}
@media only screen and (max-width:980px) {
	header{
		padding: 0;
		background: transparent;
	}
	.oneColumn header{
		padding: 30px 30px 20px;
		background: transparent;
	}
}
@media only screen and (max-width:768px) {
	.oneColumn header{
		padding: 20px;
	}
	#menuBtn{
		display: block;
		width: 30px;
		height: 30px;
		background: #00a99d;
		position: absolute;
		top: 50%;
		right: 20px;
		z-index: 103;
		transform: translate(0%,-50%);
		border-radius: 4px;
		cursor: pointer;
	}
	#menuBtn::before,
	#menuBtn::after{
		content: "";
		display: block;
		width: 22px;
		height: 2px;
		background: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transition: transform .2s;
	}
	#menuBtn::before{
		transform: translate(-50%,-8px);
	}
	#menuBtn::after{
		transform: translate(-50%,6px);
	}
	#menuBtn.active::before{
		transform: translate(-50%,-1px) rotate(45deg);
	}
	#menuBtn.active::after{
		transform: translate(-50%,-1px) rotate(-45deg);
	}
	#menuBtn span{
		font-size: 0;
		display: block;
		width: 22px;
		height: 2px;
		background: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	#menuBtn.active span{
		display: none;
	}
}

/* galleryTtl */
#galleryTtl{
	font-size: 0;
	line-height: 1;
	width: 124px;
}
#galleryTtl::before{
	content: "";
	display: block;
	width: 100%;
	height: 0;
	padding-top: 31.4516%;
	background: url("/common/img/logo.svg") no-repeat center;
	background-size: 100%;
}
@media only screen and (max-width:768px) {
	#galleryTtl{
		width: 100px;
	}
}

/* galleryName */
#galleryName{
	font-size: 14px;
	line-height: 1.2;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	position: absolute;
	top: 50%;
	left: 370px;
	transform: translate(0%,-50%);
	margin-top: 0.35em;
	z-index: 102;
	max-width: 20em;
}
@media only screen and (max-width: 1200px) {
	#galleryName{
		left: 330px;
	}
}
@media only screen and (max-width: 980px) {
	#galleryName{
		left: 260px;
		margin-top: -1.25em;
	}
}
@media only screen and (max-width: 860px) {
	#galleryName{
		max-width: 13em;
	}
}
@media only screen and (max-width:768px) {
	#galleryName{
		position: relative;
		top: 0;
		left: 0;
		transform: translate(0%,0%);
		margin-top: 0;
		margin-bottom: 40px;
		margin-left: 22px;
		max-width: none;
	}
}

/* userBar */
#userBar{
	float: right;
	font-size: 0;
}
#usernameBox{
	display: inline-block;
	vertical-align: middle;
	font-size: 12px;
	line-height: 1.2;
	font-weight: bold;
	margin-right: 10px;
}
#usernamePrint{
	display: inline-block;
}
#status{
	display: inline-block;
	vertical-align: middle;
	width: 70px;
	height: 30px;
	font-size: 14px;
	line-height: 28px;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	margin-right: 10px;
	color: #00a99d;
	border: solid 1px #00a99d;
	border-radius: 4px;
	text-align: center;
}
#status::before{
	content: "非公開";
}
#status.on::before{
	content: "公開中";
}
#userId{
	display: inline-block;
	vertical-align: middle;
	width: 130px;
	height: 30px;
	font-size: 12px;
	line-height: 30px;
	margin-right: 10px;
	letter-spacing: 0.08em;
	text-align: center;
}
#userId a{
	display: block;
	width: 100%;
	height: 100%;
	background: #00a99d;
	color: #fff;
	border-radius: 4px;
}
#logout{
	display: inline-block;
	vertical-align: middle;
	width: 90px;
	height: 30px;
	border: none;
	border-radius: 4px;
	background: #00a99d;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-align: center;
	cursor: pointer;
}
@media only screen and (max-width:980px) {
	#userBar{
		position: absolute;
		top: 30px;
		right: 30px;
		z-index: 102;
		display: table;
		margin-left: 270px;
	}
}
@media only screen and (max-width:768px) {
	#userBar{
		position: relative;
		top: 0;
		right: auto;
		display: block;
		margin-left: 22px;
		margin-top: 50px;
		float: none;
	}
	#status{
		display: block;
		width: 100%;
		margin: 0 auto 10px;
	}
	#userId{
		display: block;
		width: 100%;
	}
	#logout{
		display: block;
		width: 100%;
		margin: 10px 0 0;
	}
}

#container{
	max-width: 1440px;
	margin: 0 auto;
	padding: 150px 60px 70px 370px;
	position: relative;
}
#container::after{
	content: "";
	display: block;
	clear: both;
}
.oneColumn #container{
	display: table;
	width: 100%;
	height: 100vh;
	padding: 0;
}
#contents{
	width: 100%;
	text-align: left;
}
#contents::after{
	content: "";
	display: block;
	clear: both;
}
.oneColumn #contents{
	float: none;
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	text-align: center;
	padding: 100px 80px;
}
@media only screen and (max-width:1200px) {
	#container{
		padding: 150px 60px 70px 330px;
	}
}
@media only screen and (max-width:980px) {
	#container{
		padding: 184px 60px 70px 60px;
	}
}
@media only screen and (max-width:768px) {
	#container{
		padding: 91px 20px 30px;
	}
	.oneColumn #contents{
		padding: 80px 20px 100px;
	}
}
@media only screen and (max-width:520px) {
	.oneColumn #contents{
		padding: 80px 20px 120px;
	}
}

/* H1 */
#contents h1{
	font-size: 28px;
	line-height: 1.2;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	letter-spacing: 0.08em;
}
@media only screen and (max-width:768px) {
	#contents h1{
		font-size: 22px;
	}
}
@media only screen and (max-width:440px) {
	#contents h1{
		text-align: center;
	}
}

/* btnArea */
#contents .btnArea{
	font-size: 0;
	text-align: center;
}
#contents .btnArea .btn{
	display: inline-block;
	width: 220px;
	height: 50px;
	font-size: 16px;
	line-height: 50px;
	margin: 0 10px;
}
#contents .btnArea .btn:first-child{
	margin-left: 0;
}
#contents .btnArea .btn:last-child{
	margin-right: 0;
}
#contents .btnArea .btn a{
	display: block;
	background: #000;
	border-radius: 4px;
	color: #fff;
}
#contents .btnArea .btn a:hover{
	opacity: 0.7;
}
@media only screen and (max-width:860px) {
	#contents .btnArea .btn{
		width: 180px;
	}
}
@media only screen and (max-width:768px) {
	#contents .btnArea .btn{
		display: block;
		margin: 20px auto 0 !important;
	}
	#contents .btnArea .btn:first-child{
		margin-top: 0 !important;
	}
}

/* loginBox */
.loginBox{
	max-width: 560px;
	margin: 0 auto;
	text-align: left;
}
.registration .loginBox{
	max-width: 700px;
	padding: 50px 70px 70px;
	background: #f2f2f2;
	border-radius: 4px;
	box-shadow: 2px 2px 8px 0 rgba(0,0,0,0.05);
}
.loginBox::after{
	content: "";
	display: block;
	clear: both;
}
.loginBox h1{
	text-align: center;
}
.loginBox .errorTtl{
	text-align: center;
	color: #ff0000;
	font-size: 14px;
	margin-top: 20px;
	display: none;
}
.error .loginBox .errorTtl,
.errorPasword .loginBox .errorTtl{
	display: block;
}
.loginBox .errorTtl br{
	display: none;
}
.loginBox form{
	margin-top: 40px;
}
.loginBox .formBox + h2{
	margin-top: 20px;
}
.loginBox .formBox{
	position: relative;
}
.loginBox .formBox::before{
	content: "";
	display: block;
	width: 37px;
	height: 37px;
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translate(0%,-50%);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
	z-index: 1;
}
.loginBox .formBox.emailForm::before{
	background-image: url("/common/img/ico_mail.svg");
}
.loginBox .formBox.passwordForm::before{
	background-image: url("/common/img/ico_pw.svg");
}
.loginBox input{
	width: 100%;
	height: 70px;
	border: solid 1px #999;
	border-radius: 4px;
	font-size: 20px;
	padding: 10px 60px 10px 80px;
}
.registration .loginBox input{
	border: none;
}
.loginBox input::placeholder{
	color: #999;
}
.loginBox .formBox.passwordForm #toggle-password{
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translate(0%,-50%);
	width: 29px;
	height: 29px;
	background-image: url("/common/img/ico_eye.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
	cursor: pointer;
}
.loginBox .formBox.passwordForm #toggle-password.off{
	background-image: url("/common/img/ico_eye_off.svg");
}
#contents .loginBox .btnArea{
	margin-top: 50px;
	text-align: left;
}
#contents .loginBox .btnArea::after{
	content: "";
	display: block;
	clear: both;
}
.loginBox .sign-in{
	float: right;
	width: 220px;
	margin-top: 50px;
	position: relative;
}
#contents .loginBox .btnArea .sign-in{
	margin-top: 0;
}
.loginBox .sign-in::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.7);
	position: absolute;
	top: 0;
	left: 0;
}
.loginBox .sign-in.active::after{
	display: none;
}
.loginBox .sign-in button{
	display: block;
	width: 100%;
	height: 50px;
	font-size: 16px;
	line-height: 50px;
	background: #000;
	border-radius: 4px;
	color: #fff;
	border: none;
	cursor: pointer;
	transition: opacity .2s;
}
.loginBox .sign-in button:hover{
	opacity: 0.7;
}
.loginBox .btnArea .reset{
	display: none;
}
.error .loginBox .btnArea .reset{
	display: block;
}
.loginBox .btnArea .reset button{
	display: inline-block;
	border: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: underline;
	background: none;
	cursor: pointer;
}
.loginBox .btnArea .registration{
	margin-top: 15px;
	font-size: 14px;
	line-height: 1.2;
	display: none;
}
.error .loginBox .btnArea .registration{
	display: block;
}
.loginBox .btnArea .registration a{
	display: inline-block;
	text-decoration: underline;
}
@media only screen and (max-width:768px) {
	.loginBox{
		max-width: none;
		padding: 30px 20px;
	}
	.registration .loginBox{
		padding: 30px 20px;
	}
	.loginBox .errorTtl{
		font-size: 13px;
	}
	.loginBox form{
		margin-top: 30px;
	}
	.loginBox .formBox::before{
		width: 28px;
		height: 28px;
		left: 10px;
	}
	.loginBox input{
		height: 60px;
		font-size: 16px;
		padding: 10px 50px 10px 60px
	}
	.loginBox .formBox.passwordForm #toggle-password{
		right: 10px;
		width: 24px;
		height: 24px;
	}
	#contents .loginBox .btnArea{
		margin-top: 30px;
	}
	.loginBox .sign-in{
		float: none;
		width: 180px;
		margin: 30px auto 0;
	}
	.loginBox .sign-in button{
		height: 44px;
		font-size: 14px;
		line-height: 44px;
	}
	.loginBox .btnArea .reset{
		margin-top: 30px;
		font-size: 13px;
		text-align: center;
	}
	.loginBox .btnArea .registration{
		font-size: 13px;
		text-align: center;
	}
}
@media only screen and (max-width:420px) {
	.loginBox .errorTtl br{
		display: block;
	}
}

#controlMenu{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 101;
	width: 300px;
	height: 100vh;
	background: #f2f2f2;
	padding: 30px 40px;
	box-shadow: 2px 2px 20px 0 rgba(0,0,0,0.05);
}
#controlMenu ul{
	margin-top: 80px;
}
#controlMenu li{
	display: block;
	font-size: 14px;
	line-height: 1.2;
	font-weight: bold;
	margin-top: 35px;
	padding-left: 22px;
}
#controlMenu li:first-child{
	margin-top: 0;
}
#controlMenu li.current{
	position: relative;
}
#controlMenu li.current::before{
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #00a99d;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0%,-50%);
}
#controlMenu li a{
	color: #b3b3b3;
	transition: color .2s;
}
#controlMenu li.current a{
	transition: color 0s;
	color: #000;
}
#controlMenu li a:hover{
	color: #000;
}
@media only screen and (max-width:1200px) {
	#controlMenu{
		width: 270px;
		padding: 30px;
	}
}
@media only screen and (max-width:980px) {
	#controlMenu{
		position: relative;
		width: 100%;
		height: auto;
		padding: 30px 30px 20px;
	}
	#controlMenu ul{
		margin-top: 30px;
		font-size: 0;
		text-align: center;
	}
	#controlMenu li{
		display: inline-block;
		margin-top: 0;
		margin-left: 30px;
	}
	#controlMenu li:first-child{
		margin-left: 0;
	}
}
@media only screen and (max-width:768px) {
	#controlMenu{
		padding: 20px;
		background: #f2f2f2;
	}
	#controlMenu ul{
		display: none;
	}
}

/* menu */
#menu ul{
	display: none;
}
@media only screen and (max-width:768px) {
	#menu{
		position: absolute;
		top: 0;
		right: 0;
		width: 240px;
		height: 100vh;
		padding: 61px 0 0;
		background: #f2f2f2;
		transform: translate(100%,0%);
		transition: transform .5s;
	}
	#menuBtn.active + #menu{
		transform: translate(0%,0%);
	}
	#menu .inner{
		height: 100%;
		padding: 30px 20px 20px;
		box-shadow: 2px 2px 20px 0 rgba(0,0,0,0.05);
		overflow-y: auto;
	}
	#menu ul{
		display: block;
	}
	#menu li{
		display: block;
    font-size: 14px;
    line-height: 1.2;
    font-weight: bold;
    margin-top: 30px;
    padding-left: 22px;
	}
	#menu li:first-child{
		margin-top: 0;
	}
	#menu li.current{
		position: relative;
	}
	#menu li.current::before{
		content: "";
		display: block;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: #000;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0%,-50%);
	}
	#menu li a{
		display: block;
	}
}

/* dashboardTtl */
#dashboardTtl{
	margin-bottom: 40px;
}
#dashboardTtl h1 span{
	display: inline-block;
	padding-right: 0.5em;
	margin-right: 0.5em;
	position: relative;
}
#dashboardTtl h1 span::after{
	content: "";
	display: block;
	width: 1px;
	height: 30px;
	background: #000;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0%,-50%);
}
#dashboardTtl p{
	font-size: 13px;
	line-height: 1.5;
	margin-top: 20px;
	font-family: "Noto Sans CJK JP Light","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
#dashboardTtl p br{
	display: none;
}
@media only screen and (max-width:768px) {
	#dashboardTtl{
		margin-bottom: 30px;
	}
	#dashboardTtl h1 span::after{
		height: 24px;
	}
	#dashboardTtl p{
		margin-top: 15px;
	}
}
@media only screen and (max-width:440px) {
	#dashboardTtl h1 span{
		display: block;
		padding-right: 0;
		margin-right: 0;
	}
	#dashboardTtl h1 span::after{
		width: 30px;
		height: 1px;
		position: relative;
		top: 0;
		right: auto;
		transform: translate(0%,0%);
		margin: 10px auto;
	}
	#dashboardTtl p{
		text-align: center;
	}
	#dashboardTtl p br{
		display: block;
	}
}

/* formWrap */
#formWrap{
	background: #f2f2f2;
	padding: 60px;
	border-radius: 4px;
	box-shadow: 4px 4px 14px 0 rgba(0,0,0,0.05);
}
#formWrap::after{
	content: "";
	display: block;
	clear: both;
}
@media only screen and (max-width:1200px) {
	#formWrap{
		padding: 50px;
	}
}
@media only screen and (max-width:768px) {
	#formWrap{
		padding: 30px 20px;
	}
}

/* userImg */
#userImg{
	width: 240px;
	float: left;
	position: relative;
}
#userImg p{
	font-size: 13px;
	line-height: 1.5;
	margin-bottom: 0.5em;
}
#userImg .formBox{
	position: relative;
	width: 100%;
}
#userImg .formBox::before{
	content: "";
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
}
#userImg .img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
#userImg .img img{
	width: 100%;
}
#userImg .img img.h100{
	width: auto;
	max-width: none;
	height: 100%;
}
#userImg label{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}
#userImg label input{
	display: none;
}
@media only screen and (max-width:1200px) {
	#userImg{
		float: none;
		margin: 0 auto;
	}
}
@media only screen and (max-width:768px) {
	#userImg{
		width: 100%;
		max-width: 240px;
	}
}

/* userinfo */
#userInfo{
	margin-left: 300px;
}
@media only screen and (max-width:1200px) {
	#userInfo{
		margin: 60px auto 0
	}
}
@media only screen and (max-width:768px) {
	#userInfo{
		margin: 30px auto 0
	}
}

/* formArea */
#contents .formArea::after{
	content: "";
	display: block;
	clear: both;
}
#contents .formArea .formBox + h2,
#contents .formArea .formBox + h3{
	margin-top: 20px;
}
#contents .formArea .formBox input{
	display: block;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 13px;
	font-size: 16px;
	line-height: 1.5;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
#contents .formArea .formBox input::placeholder{
	color: #999;
}
#contents .formArea .formBox input:focus::-webkit-input-placeholder {
	color: transparent;
}
#contents .formArea .formBox input:focus::-moz-placeholder {
	color: transparent;
}
#contents .formArea .formBox input:focus::-ms-input-placeholder {
	color: transparent;
}
#contents .formArea .formBox input:focus::placeholder {
	color: transparent;
}
#contents .formArea .formBox textarea{
	display: block;
	width: 100%;
	height: 180px;
	margin: 0;
	padding: 13px;
	font-size: 16px;
	line-height: 1.5;
	resize: vertical;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
#contents .formArea .formBox textarea::placeholder{
	color: #999;
}
#contents .formArea .formBox textarea:focus::-webkit-input-placeholder {
	color: transparent;
}
#contents .formArea .formBox textarea:focus::-moz-placeholder {
	color: transparent;
}
#contents .formArea .formBox textarea:focus::-ms-input-placeholder {
	color: transparent;
}
#contents .formArea .formBox textarea:focus::placeholder {
	color: transparent;
}
#contents .formArea .saveBtn{
	width: 220px;
	position: relative;
	float: right;
	margin-top: 50px;
}
#contents .formArea .saveBtn::after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.7);
}
#contents .formArea .saveBtn.active::after{
	display: none;
}
#contents .formArea .saveBtn input,
#contents .formArea .saveBtn button{
	display: block;
	width: 100%;
	height: 50px;
	border: none;
	border-radius: 4px;
	background: #00a99d;
	color: #fff;
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}
@media only screen and (max-width:768px) {
	#contents .formArea .formBox input{
		height: 44px;
		padding: 10px;
		font-size: 14px;
	}
	#contents .formArea .formBox textarea{
		padding: 10px;
		font-size: 14px;
	}
	#contents .formArea .saveBtn{
		width: 180px;
		float: none;
		margin: 30px auto 0;
	}
	#contents .formArea .saveBtn input,
	#contents .formArea .saveBtn button{
		height: 44px;
		font-size: 14px;
	}
}

/* exhibition */
#exhibition #contents .formArea .formBox::after{
	content: "";
	display: block;
	clear: both;
}
#exhibition #contents .formArea .formBox input[type="radio"]{
	display: none;
}
#exhibition #contents .formArea .formBox input[type="radio"] + label{
	float: left;
	width: 32.57%;
	margin-left: 1.12%;
	margin-top: 15px;
	position: relative;
	padding-bottom: 40px;
	cursor: pointer;
}
#exhibition #contents .formArea .formBox input[type="radio"]:nth-child(-n+5) + label{
	margin-top: 0;
}
#exhibition #contents .formArea .formBox input[type="radio"]:nth-child(6n+1) + label{
	margin-left: 0;
}
#exhibition #contents .formArea .formBox input[type="radio"] + label::before{
	content: "";
	display: block;
	width: 35px;
	height: 35px;
	border: solid 2px #ccc;
	border-radius: 50%;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,0%);
}
#exhibition #contents .formArea .formBox input[type="radio"]:checked + label::after{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: #00a99d;
	border-radius: 50%;
	position: absolute;
	bottom: 7px;
	left: 50%;
	transform: translate(-50%,0%);
}
#exhibition #contents .formArea .formBox input[type="radio"] + label img{
	border-radius: 4px;
	transition: opacity .2s;
}
#exhibition #contents .formArea .formBox input[type="radio"] + label:hover img{
	opacity: 0.7;
}
@media only screen and (max-width:768px) {
	#exhibition #contents .formArea .formBox input[type="radio"] + label{
		float: left;
		width: 49.27%;
		margin-left: 1.45%;
		position: relative;
		padding-bottom: 30px;
		cursor: pointer;
	}
	#exhibition #contents .formArea .formBox input[type="radio"]:nth-child(-n+5) + label{
		margin-top: 15px;
	}
	#exhibition #contents .formArea .formBox input[type="radio"]:nth-child(-n+3) + label{
		margin-top: 0;
	}
	#exhibition #contents .formArea .formBox input[type="radio"]:nth-child(6n+1) + label{
		margin-left: 1.45%;
	}
	#exhibition #contents .formArea .formBox input[type="radio"]:nth-child(4n+1) + label{
		margin-left: 0;
	}
	#exhibition #contents .formArea .formBox input[type="radio"] + label img{
		width: 100%;
	}
	#exhibition #contents .formArea .formBox input[type="radio"] + label::before{
		width: 25px;
		height: 25px;
	}
	#exhibition #contents .formArea .formBox input[type="radio"]:checked + label::after{
		width: 16px;
		height: 16px;
		bottom: 5px;
	}
}

/* works */
.workCont{
	background: #f2f2f2;
	border-radius: 4px;
	position: relative;
	/*box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.05);*/
}
/*.workCont.active{
	box-shadow: 4px 4px 14px 0 rgba(0,0,0,0.05);
}*/
.workCont h2{
	font-size: 16px;
	line-height: 1.2;
	display: block;
	padding: 16px 60px 15px 80px;
	position: relative;
	cursor: pointer;
	transition: opacity .2s;
}
.workCont h2:hover{
	opacity: 0.7;
}
.workCont h2::after{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-bottom: solid 2px #000;
	border-right: solid 2px #000;
	position: absolute;
	top: 50%;
	right: 25px;
	margin-top: -2px;
	transform: translate(0%,-50%) rotate(45deg);
	transition: margin-top .2s, transform .2s;
}
.workCont.active h2::after{
	margin-top: 2px;
	transform: translate(0%,-50%) rotate(-135deg);
}
.workCont h2 strong{
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translate(0%,-50%);
	transition: left .2s;
}
.workDetail{
	display: none;
	margin: 0 auto;
	padding: 30px 80px 60px;
}
.workDetail::after{
	content: "";
	display: block;
	clear: both;
}
#works.iframeBox{
}
#works iframe{
	display: block;
	border: none;
	width: 100%;
	box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.05);
	margin-top: 20px;
}
#works #iframe1{
	margin-top: 0;
}
.workImg{
	width: 240px;
	float: left;
}
.workImg .formBox{
	position: relative;
	width: 100%;
}
.workImg .img{
	width: 100%;
}
.workImg .img img{
	width: 100%;
}
.workImg .img.active{
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
}
.workImg canvas{
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
}
.workImg #workLarge{
	opacity: 0;
}
.workImg #workThumb{
	opacity: 0;
}
.workImg #workMap.active{
	position: relative;
}
.workImg label{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}
.workImg label input{
	display: none;
}
.workImg .map{
	margin-top: 50px;
	position: relative;
}
.workImg .map p{
	position: absolute;
	top: 0;
	left: 0;
}
.workInfo{
	margin-left: 280px;
}
#contents .workInfo input[type="radio"]{
	display: none;
}
#contents .workInfo .col2{
	display: table;
	width: 100%;
	margin-top: 30px;
}
#contents .workInfo .buyBox,
#contents .workInfo .priceBox{
	display: table-cell;
	vertical-align: top;
}
#contents .workInfo .buyBox{
	width: 210px;
}
#contents .workInfo .buyBox .formBox{
	margin-top: 7px;
}
#contents .workInfo #publicSet{
	margin-top: 30px;
	position: relative;
}
#contents .workInfo #publicSet::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #f2f2f2;
	opacity: 0.7;
}
#contents .workInfo #publicSet.active::after{
	display: none;
}
#contents .workInfo .buyBox .formBox input[type="radio"]{
	display: none;
}
#contents .workInfo .buyBox .formBox label,
#contents .workInfo #publicSet label{
	display: inline-block;
	font-size: 16px;
	position: relative;
	margin-right: 20px;
	padding-left: 35px;
	cursor: pointer;
}
#contents .workInfo .buyBox .formBox label:last-child,
#contents .workInfo #publicSet label:last-child{
	margin-right: 0;
}
#contents .workInfo .buyBox .formBox label::before,
#contents .workInfo #publicSet label::before{
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	border: solid 2px #ccc;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0%,-50%);
}
#contents .workInfo .buyBox .formBox input[type="radio"]:checked + label::after,
#contents .workInfo #publicSet input[type="radio"]:checked + label::after{
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background: #00a99d;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 6px;
	transform: translate(0%,-50%);
}
@media only screen and (max-width:768px) {
	.workCont h2{
		font-size: 14px;
		padding: 16px 60px 15px;
	}
	.workDetail{
		padding: 20px 20px 30px;
	}
	.workImg{
		width: 100%;
		max-width: 240px;
		margin: 0 auto;
		float: none;
	}
	.workInfo{
		margin-left: 0;
		margin-top: 30px;
	}
	#contents .workInfo #publicSet{
		margin-top: 20px;
	}
	#contents .workInfo .col2{
		display: block;
		margin-top: 0;
	}
	#contents .workInfo .buyBox h3{
		width: 100px;
	}
	#contents .workInfo .buyBox,
	#contents .workInfo .priceBox{
		display: block;
		margin-top: 20px;
	}
	#contents .workInfo .buyBox{
		width: 100%;
	}
	#contents .workInfo .buyBox .formBox label,
	#contents .workInfo #publicSet label{
		font-size: 14px;
		margin-right: 20px;
		padding-left: 25px;
	}
	#contents .workInfo .buyBox .formBox label::before,
	#contents .workInfo #publicSet label::before{
		width: 22px;
		height: 22px;
	}
	#contents .workInfo .buyBox .formBox input[type="radio"]:checked + label::after,
	#contents .workInfo #publicSet input[type="radio"]:checked + label::after{
		width: 12px;
		height: 12px;
		left: 5px;
	}
}

/* release */
#release #releaseInfo table{
	width: 100%;
}
#release #releaseInfo th,
#release #releaseInfo td{
	font-size: 14px;
	line-height: 1.75;
	vertical-align: top;
}
#release #releaseInfo th{
	font-weight: normal;
	padding: 6em 0 0 0;
	width: 8em;
}
#release #releaseInfo tr:first-child th{
	padding: 0;
}
#release #releaseInfo td{
	padding: 6em 0 0 0;
}
#release #releaseInfo tr:first-child td{
	padding: 0;
}
#release #releaseInfo td a{
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	word-break: break-all;
	transition: opacity .2s;
}
#release #releaseInfo td a:hover{
	opacity: 0.7;
}
#release #canvas.none{
	height: 0;
	width: 0;
}
#release #data{
	margin: 0;
	padding: 5px 15px;
	border: none;
	border-radius: 4px;
	background: #00a99d;
	color: #fff;
	font-size: 16px;
	outline: none;
	cursor: pointer;
}
#release #contents .formArea .formBox::after{
	content: "";
	display: block;
	clear: both;
}
#release #contents .formArea .formBox input[type="radio"]{
	display: none;
}
#release #contents .formArea .formBox input[type="radio"] + label{
	float: left;
	margin-left: 36px;
	position: relative;
	cursor: pointer;
	padding-left: 44px;
	font-size: 16px;
}
#release #contents .formArea .formBox input[type="radio"]:first-child + label{
	margin-left: 0;
}
#release #contents .formArea .formBox input[type="radio"] + label::before{
	content: "";
	display: block;
	width: 35px;
	height: 35px;
	border: solid 2px #ccc;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0%,-50%);
}
#release #contents .formArea .formBox input[type="radio"]:checked + label::after{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: #00a99d;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 7.5px;
	transform: translate(0%,-50%);
}
@media only screen and (max-width:768px) {
	#release #releaseInfo tr{
		display: block;
		width: 100%;
	}
	#release #releaseInfo th,
	#release #releaseInfo td{
		display: block;
		width: 100%;
		font-size: 13px;
	}
	#release #releaseInfo th{
		padding: 4em 0 0 0;
	}
	#release #releaseInfo td{
		padding: 0;
	}
	#release #canvas{
		display: block;
		margin: 0 auto;
	}
	#release #contents .formArea .formBox input[type="radio"] + label{
		font-size: 14px;
	}
	#release #contents .formArea .formBox input[type="radio"] + label::before{
		width: 25px;
		height: 25px;
	}
	#release #contents .formArea .formBox input[type="radio"]:checked + label::after{
		width: 16px;
		height: 16px;
		left: 4.5px;
	}
}

/* ogp */
#ogp #mainImgBox{
	position: relative;
	width: 100%;
}
#ogp #mainImgBox::before{
	content: "";
	display: block;
	width: 100%;
	height: 0;
	padding-top: 52.5%;
}
#ogp #mainImgBox .img,
#ogp #mainImgBox #mainImg{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
#ogp #mainImgBox .img img{
	width: 100%;
}
#ogp #mainImgBox .img img.h100{
	width: auto;
	max-width: none;
	height: 100%;
}
#ogp #mainImgBox label{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}
#ogp #mainImgBox label input{
	display: none;
}

#resizeImg,
.resizeImg{
	position: fixed !important;
	top: 0;
	left: 0;
	transform: translate(-100%,-100%);
}
.resizeImg#userImg{
	width: 300px;
	height: 300px;
}

/* support */
#support #galleryTtl{
	float: left;
}
#support #login,
#support #logout{
	float: right;
}
#support #login{
	display: none;
	width: 90px;
	height: 30px;
	border: none;
	border-radius: 4px;
	background: #00a99d;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-align: center;
	cursor: pointer;
}
#support.notLogin #login{
	display: block;
}
#support.notLogin #logout{
	display: none;
}
#support.oneColumn #container{
	display: block;
	padding: 170px 60px;
	height: auto;
}
#support.oneColumn #contents{
	display: block;
	padding: 0;
}
#support h1{
	font-family: 'Oswald', sans-serif;
	font-size: 32px;
	line-height: 1;
	font-weight: 500;
	color: #00a99d;
}
#support h1 span{
	font-weight: 300;
}
#support .box{
	margin-top: 90px;
}
#support .box h2{
	font-size: 32px;
	line-height: 1.5;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	color: #00a99d;
}
#support .box p{
	font-size: 14px;
	line-height: 2;
	color: #00a99d;
}
#support .box ul{
	font-size: 0;
	margin-top: 30px;
}
#support .box ul li{
	display: inline-block;
	vertical-align: middle;
	margin: 0 5px;
}
#support .box ul li a{
	display: block;
	width: 300px;
	height: 70px;
	font-size: 20px;
	line-height: 70px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	background: #00a99d;
	border-radius: 4px;
}
@media only screen and (max-width:768px) {
	#support.oneColumn header{
		background: #fff;
	}
	#support #login,
	#support #logout{
		width: 90px;
		margin: 0;
	}
	#support.oneColumn #container{
		padding: 91px 20px 30px;
	}
	#support h1{
		font-size: 22px;
	}
	#support .box{
		margin-top: 40px;
	}
	#support .box h2{
		font-size: 22px;
	}
	#support .box p{
		font-size: 12px;
	}
	#support .box ul{
		margin-top: 20px;
	}
	#support .box ul li{
		display: block;
		max-width: 260px;
		margin: 10px auto 0;
	}
	#support .box ul li:first-child{
		margin-top: 0;
	}
	#support .box ul li a{
		width: 100%;
		height: 60px;
		font-size: 16px;
		line-height: 60px;
	}
	#support.oneColumn footer{
		position: relative;
	}
}
@media only screen and (max-width:374px) {
	#support h1{
		line-height: 1.2;
	}
	#support .box p{
		font-size: 11px;
	}
}

/* footer */
footer{
	position: fixed;
	bottom: 30px;
	left: 20px;
	padding-right: 20px;
	z-index: 102;
}
.oneColumn footer{
	position: absolute;
}
footer ul{
	font-size: 0;
	margin-bottom: 15px;
}
footer li{
	display: inline-block;
	vertical-align: top;
	font-size: 12px;
	line-height: 1.5;
	margin-right: 0.5em;
	color: #02a99d;
}
footer li:last-child{
	margin-right: 0;
}
footer li::after{
	content: "｜";
	display: inline-block;
	margin-left: 0.5em;
}
footer li:last-child::after{
	display: none;
}
footer li a:link,
footer li a:visited{
	color: #02a99d;
}
footer p{
	font-size: 10px;
	line-height: 1.2;
	color: #02a99d;
}
@media only screen and (max-width:980px) {
	footer{
		position: relative;
	}
}
@media only screen and (max-width:768px) {
	footer{
		margin-top: 30px;
		z-index: 99;
	}
}