@charset "utf-8";
/* CSS Document */

/* -----------------------------------------------------------------------------
	responsive list-content
 -------------------------------------------------------------------------------*/

#contents .list-primary {
	width:calc(100% + 30px);
}

#contents .list-primary .list {
	width:calc(25% - 30px);
	min-height:100px;
	margin-right:30px;
	margin-bottom:30px;
	float:left;
}

#contents .list-primary.column2 .list {
	width:calc(50% - 30px);
}

@media screen and (max-width: 900px) {
	#contents .list-primary .list { width:calc(33.333% - 30px); }
}

@media screen and (max-width: 800px) {
	#contents .list-primary .list { width:calc(100% - 30px) !important; }
}

@media screen and (max-width: 640px) {
	#contents .list-primary .list { width:calc(100% - 30px) !important; }
}

/* -----------------------------------------------------------------------------
	responsive img-auto-width
 -------------------------------------------------------------------------------*/

.img-auto-width {
	position:relative;
	width:calc(100% + 30px);
}

.img-auto-width img, .img-auto-width figure, .img-auto-width .item {
	width:calc(25% - 30px);
	height:auto;
	margin-right:30px;
	margin-bottom:30px;
	float:left;
	transition:0.3s;
}

.img-auto-width.column3 img, .img-auto-width.column3 figure, .img-auto-width.column3 .item {
	width:calc(33.333% - 30px);
	height:auto;
	margin-right:30px;
	margin-bottom:30px;
	float:left;
	transition:0.3s;
}

.img-auto-width.column2 img, .img-auto-width.column2 figure, .img-auto-width.column2 .item {
	width:calc(50% - 30px);
	height:auto;
	margin-right:30px;
	margin-bottom:30px;
	float:left;
	transition:0.3s;
}

/* figure */

@media screen and (max-width: 900px) {
	.img-auto-width img, .img-auto-width figure, .img-auto-width .item { width:calc(33.333% - 30px); }
}

@media screen and (max-width: 800px) {
	.img-auto-width img, .img-auto-width figure, .img-auto-width .item { width:calc(50% - 30px); }
}

@media screen and (max-width: 640px) {
	.img-auto-width img, .img-auto-width figure, .img-auto-width .item { width:calc(100% - 30px); }
}

.img-auto-width figure { text-align:center; }

.img-auto-width figure img {
	width:100% !important;
	height:auto;
	margin-bottom:15px;
}

/* alternative */

.img-auto-width .item a {
	width:100%;
	height:300px !important;
	display:block;
	background-position:center top;
	background-repeat:no-repeat;
	background-size:contain;
}

/* alternative figure */

.img-auto-width .item figure {
	width:100% !important;
}

.img-auto-width .item figure a {
	margin-bottom:15px;
}

/* -----------------------------------------------------------------------------
	responsive pickup
 -------------------------------------------------------------------------------*/

.pickup {
	position:relative;
}

.pickup-layout {
	width:calc(100% + 30px);
}

.pickup-layout .list {
	box-sizing:border-box;
	position:relative;
	float:left;
	background-color:#ffffff;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.09);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.09);
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.09);
}

.pickup-layout .list a {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:block;
	z-index:99;
}

.pickup-layout .list a:after {
	content:"";
	background-color:rgba(255,255,255,0);
	transition:0.3s;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.pickup-layout .list a:hover:after {
	background-color:rgba(255,255,255,0.3);
}

.pickup-layout .list .new {
	background-image:url(../image/contents/top/new.png);
	position:absolute;
	top:0;
	left:0;
	width:50px;
	height:50px;
	text-indent:100%;
	overflow:hidden;
	white-space:nowrap;
	z-index:100;
}

/* column 6 */

.pickup-layout .list {
	width:calc(16.662% - 30px);
	box-sizing:border-box;
	margin-right:30px;
	margin-bottom:30px;
}

/* column 5 */

@media screen and (max-width: 1750px) {
	.pickup-layout .list {
		width:calc(20% - 30px);
		box-sizing:border-box;
		margin-right:30px;
		margin-bottom:30px;
	}
}

/* column 4 */

@media screen and (max-width: 1500px) {
	.pickup-layout .list {
		width:calc(25% - 30px);
		box-sizing:border-box;
		margin-right:30px;
		margin-bottom:30px;
	}
}

/* column 3 */

@media screen and (max-width: 1270px) {
	.pickup-layout .list {
		width:calc(33.333% - 30px);
		box-sizing:border-box;
		margin-right:30px;
		margin-bottom:30px;
	}
}

/* column 2 */

@media screen and (max-width: 1080px) {
	.pickup-layout .list {
		width:calc(50% - 30px);
		box-sizing:border-box;
		margin-right:30px;
		margin-bottom:30px;
	}
}

/* column 4 */

@media screen and (max-width: 1000px) {
	.pickup-layout .list {
		width:calc(25% - 30px);
		box-sizing:border-box;
		margin-right:30px;
		margin-bottom:30px;
	}
}

/* column 3 */

@media screen and (max-width: 900px) {
	.pickup-layout .list {
		width:calc(33.333% - 30px);
		box-sizing:border-box;
		margin-right:30px;
		margin-bottom:30px;
	}
}

/* column 2 */

@media screen and (max-width: 730px) {
	.pickup-layout .list {
		width:calc(50% - 30px);
		box-sizing:border-box;
		margin-right:30px;
		margin-bottom:30px;
	}
}

/* thum-area */

.pickup-layout .list .thum-area {
	position:relative;
	overflow:hidden;
	width:100%;
	height:233px;
}

.pickup-layout .list .thum-area:after {
	content:"";
	background-position:bottom;
	background-repeat:no-repeat;
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 1%, rgba(255,255,255,0) 55%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 1%,rgba(255,255,255,0) 55%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 1%,rgba(255,255,255,0) 55%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	min-height:233px;
	display:block;
	z-index:10;
}

.pickup-layout .list .thum-area .thum {
	background-image:url(../image/contents/top/sample.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	height:233px;
	position:relative;
	z-index:2;
}

.pickup-layout .list .thum-area .thum-blur {
	background-image:url(../image/contents/top/sample.jpg);
	background-position:center bottom;
	background-repeat:no-repeat;
	background-size:cover;
	width:calc(100% + 20px);
	height:233px;
	margin-left:-5px;
	margin-top:-5px;
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	opacity:0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
}

.pickup-layout .list .thum-area.portrait .thum {
	background-size:contain;
	background-position:center top;
	max-height:233px;
	width:auto;
	margin-left:auto;
	margin-right:auto;
}

.pickup-layout .list .thum-area.nocrop .thum {
	width:calc(100% - 40px);
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	background-position:center top;
	background-size:contain;
	background-repeat:no-repeat;
}

/* detail */

.pickup-layout .list .detail {
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	margin-top:-20px;
	position:relative;
	z-index:11;
}

.pickup-layout .list .detail .detail-option {
	padding-bottom:6px;
}

.pickup-layout .list .detail .detail-option .space {
	display:inline-block;
	background-color:#4b4b4b;
	color:#ffffff;
	text-align:center;
	height:26px;
	line-height:24px;
	font-size:16px;
	padding-left:10px;
	padding-right:10px;
}

.pickup-layout .list .detail .detail-option .price {
	display:inline-block;
	background-color:#d14e4e;
	color:#ffffff;
	text-align:center;
	height:26px;
	line-height:24px;
	font-size:16px;
	padding-left:10px;
	padding-right:10px;
}

@media screen and (max-width: 640px) {
	.pickup-layout .list .detail .detail-option .space {
		font-size:20px;
		height:32px;
		line-height:32px;
	}
	.pickup-layout .list .detail .detail-option .price {
		font-size:20px;
		height:32px;
		line-height:32px;
	}
}

.pickup-layout .list .detail h4 {
	margin:0;
	position:0;
	font-size:16px;
	color:#19896e;
	font-weight:normal;
	line-height:20px;
}

@media screen and (max-width: 640px) {
	.pickup-layout .list .detail h4 {
		font-size:22px;
		line-height:26px;
	}
}

.pickup-layout .list .detail p {
	margin:0;
	padding:0;
	padding-top:3px;
	line-height:18px;
}

@media screen and (max-width: 640px) {
	.pickup-layout .list .detail p {
		line-height:26px;
	}
}

/* -----------------------------------------------------------------------------
	table
 -------------------------------------------------------------------------------*/

.table-content {
	margin-bottom:50px;
}

.table-content table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  border:1px solid #d8d8d8;
}

.table-content th {
	text-align:left;
	background-color:#f4f4f4;
	/*width:28%;*/
	padding:20px;
	border-bottom:1px solid #d8d8d8;
	border-right:1px solid #d8d8d8;
	vertical-align:top;
	white-space:nowrap;
}

.table-content th .ic-required {
	float:right;
	margin-left:150px;
}

.table-content td {
	padding:15px;
	border-bottom:1px solid #d8d8d8;
	border-right:1px solid #d8d8d8;
	background-color:#ffffff;
}

@media screen and (max-width: 1100px) {
		.table-content table {
		width:100%;
	}
}
@media screen and (max-width: 700px) {
/* column break - example 700px */
	.table-content th {
		text-align:left;
		background-color:#f4f4f4;
		width:100% !important;
		padding:20px;
		border-bottom:1px solid #d8d8d8;
		vertical-align:top;
		white-space:nowrap;
		display:block;
		box-sizing:border-box;
	}
	
	.table-content th .ic-required {
		float:right;
		margin-left:150px;
	}
	
	.table-content td {
		width:inherit;
		padding:15px;
		border-bottom:1px solid #d8d8d8;
		display:block;
	}
	.center { 
		float:none; 
		margin:5px auto 15px; 
		display:inherit;
	}

}

/* -----------------------------------------------------------------------------
	link button
 -------------------------------------------------------------------------------*/

.link-button a {
	display:block;
	margin-left:auto;
	margin-right:auto;
	width:99.6%;
	height:60px;
	line-height:60px;
	border-radius:30px;
	position:relative;
	margin-bottom:30px;
	text-align:center;
	text-decoration:none !important;
	font-size:18px;
	font-weight:bold;
	clear: both;
	color:#4f4f4f !important;
	transition:0.3s;
	background-repeat:no-repeat;
	background-position:left;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+47,ededed+100;White+3D+%231 */
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.43);
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.43);
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.43);
	overflow:visible;
}

.link-button a:hover {
	text-decoration:underline !important;
}

.link-button.mono a {
	border:2px solid #8d8d8d;
	color:#333333 !important;
	font-weight:normal;
}

.link-button.harf a {
	padding-top:10px;
	padding-bottom:10px;
	padding-left:55px;
	border:1px solid #cccccc;
}

.link-button a.pdf { background-image:url(../image/layout/pdf.png); text-align:left; }
.link-button a.doc { background-image:url(../image/layout/doc.png); text-align:left; }
.link-button.mono a.pdf { background-image:url(../image/layout/pdf-mono.png); text-align:left; }
.link-button.mono a.doc { background-image:url(../image/layout/doc-mono.png); text-align:left; }
.link-button.harf a.pdf { background-image:url(../image/layout/pdf.png); text-align:left; background-size:40px 59px; }
.link-button.harf a.doc { background-image:url(../image/layout/doc.png); text-align:left; background-size:40px 59px; }
.link-button.mono.harf a.pdf { background-image:url(../image/layout/pdf-mono.png); text-align:left; background-size:40px 59px; }
.link-button.mono.harf a.doc { background-image:url(../image/layout/doc-mono.png); text-align:left; background-size:40px 59px; }


/*----------------------------------------------------------------------------
   blog - ブログスタイルのレイアウト body.subpageに.blogを付与して使用
------------------------------------------------------------------------------*/

.blog #content-sidebar {
	/* position: absolute;
	left: inherit;
	right: 0;
	top: 0; */
	margin-top: 50px;
	width: 300px;
	border-right: none;
	box-sizing: border-box;
	transition: 0.2s;
}

@media screen and (max-width: 1240px) {
	.blog #content-sidebar {
			/* right: 30px; */
			padding-right: 30px;
		}
	}

	.blog #content-sidebar h2 {
		font-size: 20px !important;
		color: #ffffff !important;
		margin: 0 !important;
		padding: 0 !important;
		height: 50px;
		text-align: center !important;
		line-height: 50px;
		border-radius: 5px;
		margin-bottom: 30px !important;
		background-color: #f5a413 !important;
		display: block !important;
	}

	.blog #content-sidebar h2:before, .blog #content-sidebar h2:after {
		display: none;
		background-position: left 0 top 10px !important;
	}

	.blog #content-sidebar .blog-latest {
		list-style: none;
		margin: 0;
		padding: 0;
		padding-bottom: 30px;
		top: -20px;
		position: relative;
	}

	.blog #content-sidebar .blog-latest li a {
		padding-top: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid #cccccc;
		display: block;
		text-decoration: none !important;
	}

	.blog #content-sidebar .blog-latest li:last-of-type a {
		border-bottom: none;
		padding-bottom: 0;
	}

	.blog #content-sidebar .blog-latest li a span {
		display: block;
		font-size: 14px;
		color: #777777;
	}

	.blog #content-sidebar .blog-category {
		list-style: none;
		margin: 0;
		padding: 0;
		margin-bottom: 50px;
	}

	.blog #content-sidebar .blog-category li a {
		background-color: #ffffff;
		padding: 10px;
		text-align: center;
		position: relative;
		text-indent: -10px;
		border: 1px solid #f5f5f5;
		border-radius: 5px;
		box-sizing: border-box;
		transition: 0.2s;
		text-decoration: none;
		color: #222222;
		display: block;
	}

	.blog #content-sidebar .blog-category li {
		margin-bottom: 5px;
	}

	.blog #content-sidebar .blog-category li a:after {
		content: "▶";
		position: absolute;
		top: 10px;
		right: 10px;
		display: block;
		transform: scale(0.4,0.4);
		color: #cccccc;
	}

	.blog #content-sidebar .blog-category li a:hover {
		background-color: #ffffff;
		border: 1px solid #ff9900;
		box-sizing: border-box;
		color: #ff9900;
	}

	.blog #content-sidebar .blog-month ul {
		margin: 0;
		padding: 0;
	}

	.blog #content-sidebar .blog-month select {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
	}

	.subpage.blog #contents article {
		/* padding-left: 0;
		padding-right: 350px; */
		display: flex;
		padding-left: 0;
		padding-right: 0;
	}

	@media screen and (max-width: 1000px) {
		.subpage.blog #contents article {
			flex-wrap: wrap;
			padding-left: 30px;
			padding-right: 30px;
		}
		.subpage.blog #contents article {
			padding-right: 30px !important;
		}
		.blog #content-sidebar {
			width:100%;
			border-left: none;
			padding-left: 0px;
			padding-right: 0px;
			margin-bottom: 100px;
			position: relative;
			top: inherit;
			left: inherit;
			right: inherit;
		}
	}

	.blog .post {
		margin-bottom: 50px;
	}

	.blog h3 {
		margin-bottom: 50px !important;
	}

	.blog .post h4 {
		background-color: #ffffff;
		border:3px dotted #f5a413 !important;
		padding: 15px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 18px;
		margin-bottom: 30px;
		color: #ffffff;
		line-height: 24px;
		font-size: 22px;
	}

	.blog .post h4 span {
		display: block;
		font-size: 15px;
		color: #777777;
		padding-bottom: 7px;
	}

	.blog .post img[src*="data"] {
		max-width: 100%;
		margin-bottom: 30px;
	}

	.blog .content.archives .post img.alignleft {
		width: 280px;
		height: auto;
	}

	.blog .content.archives .post .detail-button a {
		display: block;
		float: right;
	}

	.blog .content .pmove {
		list-style: none;
		margin: 0;
		padding: 0;
		padding-top: 40px;
		padding-bottom: 40px;
		margin-bottom: 50px;
		display: block;
		width: 100%;
		position:relative;
		border-top: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
		background-color: #ffffff;
	}

	.blog .content .pmove .prev {
		position: absolute;
		left:30px;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
	}

	.blog .content .pmove .next {
		position: absolute;
		right:30px;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
	}

	.blog .content .pmove .show-back {
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}


	/* -----------------------------------------------------------------------------
		form
	-------------------------------------------------------------------------------*/
	
	#mailform-layout {
	}

	#mailform-layout .item {
		position: relative;
	}

	#mailform-layout .item .name {
		position: absolute;
		top: 0;
		left: 0;
		width: 180px;
	}

	#mailform-layout .item .answer {
		padding-left: 200px;
		box-sizing: border-box;
	}

	@media screen and (max-width: 750px) {
		#mailform-layout .item .answer {
			padding-left: 0;
			padding-top: 40px;
		}
	}

	#mailform-layout .required {
		background-color: #ff4545;
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		color: #ffffff;
		text-align: center;
		width: 50px;
		padding-top: 3px;
		padding-bottom: 3px;
		font-size: 13px;
		border-radius: 3px;
	}

	#mailform-layout ul {
		list-style: none;
		margin: 0 !important;
		padding: 0 !important;
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}

	.mailform-alart {
		background-color: #e3fff2;
		border: 1px solid #bae4d1;
		box-sizing: border-box;
		border-radius: 5px;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 15px;
		padding-bottom: 15px !important;
		margin-bottom: 30px;
		text-align: center;
	}

	.mailform-box {
		background-color: #f2f2f2;
		padding: 30px !important;
		margin-bottom: 30px !important;
		box-sizing: border-box;
		border-radius: 5px;
		margin-top: 50px;
	}

	.mailform-box .title {
		font-size: 24px;
		display: block;
		padding-bottom: 10px;
		color: #ff6b6b;
		background-image: url("../contact/image/icon-mailplus.png");
		background-repeat: no-repeat;
		background-position: left 2px top 0;
		padding-left: 60px;
	}

	.mailform-box p {
		margin: 0 !important;
		padding: 0 !important;
	}

	.sentok {
		font-size: 32px;
		text-align: center;
		color: #ff6b6b;
	}

	/* input - text */

	input[type=text] {
		border: 1px solid #cccccc;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 3px;
	}

	/* input - tel */

	input[type=tel] {
		border: 1px solid #cccccc;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 3px;
		width: 250px;
	}

	/* input - email */

	input[type=email] {
		border: 1px solid #cccccc;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 3px;
		width: 100%;
	}

	/* input - radio */

	input[type=radio] {
		display: none;
	}

	input[type=radio]+label {
		display:block;
		cursor:pointer;
		margin-top:0.25em;
		margin-bottom:0.25em;
		font-family:inherit;
	}

	input[type=radio]+label:before {
		width:1.25em;
		height:1.25em;
		display:inline-block;
		content:"";
		border-radius:1.25em;
		vertical-align:middle;
		border:2px solid #c8c8c8;
		background-color:#fff;
		margin:-2px 5px 0 0;
		-webkit-transition:border-color ease-in-out .15s, background-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
		-o-transition:border-color ease-in-out .15s, background-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
		transition:border-color ease-in-out .15s, background-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	}

	input[type=radio]:hover+label:before {
		border-color:#c8c8c8;
		background-color:#c8c8c8;
		box-shadow:inset 0 0 0 0.25em #fff;
	}

	input[type=radio]:checked+label:before {
		border-color:#4593ea;
		background-color:#4593ea;
		box-shadow:inset 0 0 0 0.25em #fff;
	}

	.radio-group label {
		margin-right:1.5em;
	}

	.radio-group li {
		float: left;
	}

	/* input - checkbox */

	.chk-group {
		position: relative;
		bottom: -5px !important;
		display: block;
	}

	.chk-group li {
		display: inline-block;
		padding-right: 20px;
	}

	.chk-group li label {
	display: block;
	position: relative;
	padding-left: 30px;
	padding-bottom: 5px;
	cursor: pointer;
	font-size: 18px;
	}
	.chk-group li label input {
	position: absolute;
	z-index: -1;
	opacity: 0;
	}
	.indicator {
	position: absolute;
	top: 2px;
	left: 0;
	height: 20px;
	width: 20px;
	background: #e6e6e6;
	border-radius: 2px;
	}
	.chk-group li label:hover input ~ .indicator,
	.chk-group li label input:focus ~ .indicator {
	background: #ccc;
	}
	.chk-group li label input:checked ~ .indicator {
	background: #4593ea;
	}
	.chk-group li label:hover input:not([disabled]):checked ~ .indicator,
	.chk-group li label input:checked:focus ~ .indicator {
	background: #4593ea;
	}
	.chk-group li label input:disabled ~ .indicator {
	background: #e6e6e6;
	opacity: 0.6;
	pointer-events: none;
	}
	.indicator:after {
	content: '';
	position: absolute;
	display: none;
	}
	.chk-group li label input:checked ~ .indicator:after {
	display: block;
	}
	.chk-group li .checkbox .indicator:after {
	left: 8px;
	top: 4px;
	width: 3px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	}
	.chk-group li .checkbox input:disabled ~ .indicator:after {
	border-color: #7b7b7b;
	}

	/* item - age */

	#mailform-layout ul.age {
	}

	#mailform-layout ul.age li {
		float: left;
		width: 100px;
		margin-right: 5px;
	}
	#mailform-layout ul.age li input {
		width: 70px;
		border: 1px solid #cccccc;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 3px;
		margin-right: 5px;
	}

	#mailform-layout ul.age li:nth-of-type(1) {
		width: 120px
	}

	#mailform-layout ul.age li:nth-of-type(1) input {
		width: 90px;
	}

	/* item - postcode */

	#mailform-layout .postcode {
		display: block;
		padding-bottom: 10px;
	}

	#mailform-layout .postcode input {
		border: 1px solid #cccccc;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 3px;
		margin-right: 5px;
	}

	#mailform-layout .postcode input:nth-of-type(1) {
		width: 60px;
	}
	#mailform-layout .postcode input:nth-of-type(2) {
		width: 80px;
	}

	#mailform-layout .postcode+input {
		width: 100%;
	}

	/* textarea */

	#mailform-layout textarea {
		width: 100%;
		border: 1px solid #cccccc;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 3px;
	}

	/* submit-button */

	.submit-button {
		text-align: center;
		padding-top: 20px;
	}

	.submit-button button {
		display: inline-block;
		margin-left: 14px;
		margin-right: 14px;
		background-color: #ffffff;
		color: #4593ea;
		border: 1px solid #4593ea;
		border-radius: 5px;
		padding: 15px;
		padding-left: 50px;
		padding-right: 50px;
		text-indent: -15px;
		position: relative;
		transition: 0.2s;
	}

	.submit-button button.pageback {
		text-indent: 15px !important;
		padding-right: 35px !important;
	}

	.submit-button button:hover {
		background-color: #4593ea;
		color: #ffffff;
		border: 1px solid #4593ea;
	}

	.submit-button button:before {
		width: 18px;
		height: 18px;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		background: #ffffff;
		content: "";
		position: absolute;
		transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
		right: 2px;
		top: 50%;
		transition: 0.2s;
	}

	.submit-button button:hover:before {
		background: #ffffff;
		right: 2px;
	}

	.submit-button button.pageback:before {
		right: inherit;
		left: 14px;
	}
	.submit-button button.pageback:hover:before {
		background: #ffffff;
			left: 10px;
	}

	.submit-button button:after {
		width: 5px;
		height: 5px;
		border-top: 1px solid #4593ea;
		border-right: 1px solid #4593ea;
		-webkit-transform: rotate(45deg) translate(-50%, -50%);
		transform: rotate(45deg) translate(-50%, -50%);
			content: "";
			position: absolute;
			right: 21px;
			top: calc(50% + 1px);
			transition: 0.2s;
	}
	.submit-button button:hover:after {
		right: 17px;
	}

	.submit-button button.pageback:after {
		right: inherit;
		left: 21px;
		-webkit-transform: rotate(225deg);
		transform: rotate(225deg);
	}
	.submit-button button.pageback:hover:after {
		right: inherit;
		left: 17px;
	}

	/* Design Template
	simple - 下線のみのシンプルなレイアウト
	table - テーブルタグで作成したようなレイアウト
	portable - タブレットスタイルでポップなレイアウト
	*/

	/* design - simple */
	#mailform-layout.simple .item {
		padding-bottom: 15px;
		margin-bottom: 15px;
		border-bottom: 1px dotted #cccccc;
	}


	/* design - table */

	#mailform-layout.table .item {
		position: relative;
		border: 1px solid #e0e0e0;
		margin-top: -1px;
	}

	#mailform-layout.table .item .name {
		position: absolute;
		left: 0;
		width: 180px;
		height: 100%;
		background-color: #f5f5f5;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: left;
	}

	#mailform-layout.table .item .answer {
		padding: 15px;
		padding-left: 200px;
		box-sizing: border-box;
	}

	@media screen and (max-width: 750px) {
		#mailform-layout.table .item .name {
			width: 100%;
			display: block;
			position: relative;
			top: inherit;
			left: inherit;
		}
		#mailform-layout.table .item .answer {
			padding-left: 15px;
		}
	}

	#mailform-layout.table .required {
		position: relative;
		top: inherit;
		right: inherit;
		margin-bottom: 5px;
	}

	@media screen and (max-width: 750px) {
		#mailform-layout.table .required {
			display: inline-block;
		}
	}


	/* design - portable */

	#mailform-layout.portable .item {
		position: relative;
		margin-bottom: 10px;
	}

	#mailform-layout.portable .item .name {
		position: absolute;
		left: 0;
		width: 250px;
		height: 100%;
		background-color: #ffe8be;
		border-radius: 5px;
		color: #333333;
		font-weight: bold;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: left;
	}

	#mailform-layout.portable .item .answer {
		padding: 15px;
		width: calc(100% - 260px);
		margin-left: 260px;
		box-sizing: border-box;
		border: 1px solid #eeeeee;
		border-radius: 5px;
		background-color: #ffffff;
	}

	#mailform-layout.portable .required {
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		background-color: #ffffff;
		box-sizing: border-box;
		color: #ff4545;
		border: 1px solid #ff4545;
	}