@charset "utf-8";

body { text-align: center; }
.cautionUl li {
	text-indent: -1em;
	margin-left: 1em;
}
.pageTitleBox h2 {
	padding: 0.5em 0 0.25em 0;
	margin-bottom: 0;
	line-height: 120%;
}
.pageTitleBox::after {
	content: attr(data-subtext)'';
	display: inline-block;
	font-size: 1.2rem;
	font-weight: bold;
	color: rgba(121, 147, 148, 1);
}
h2.leadH {
	margin: 2em 0;
	font-size: 3.8rem;
	line-height: 150%;
	color: rgba(0, 0, 0, 1);
}
h2.leadH sup{
	font-size:1rem;
	vertical-align:bottom;
}
h2.subCopy {
	position: relative;
	margin: 2em 0;
	font-size: 2.4rem;
	line-height: 150%;
	color: rgba(0, 0, 0, 1);
}
	h2.subCopy::after {
		content: attr(data-subtext)'';
		position: absolute;
		width: 100%;
		left: 0;
		bottom: -2em;
		color: rgba(229, 0, 18, 1);
		font-style: italic;
		font-size: 1.4rem;
	}
h3 {
	font-size: 2.4rem;
	padding: 2em 0;
	line-height: 150%;
	color: rgba(24, 51, 68, 1);
}

h4 {
	font-size: 1.8rem;
	font-weight: normal;
	padding: 1em 0;
	margin: 2em 0;
	position: relative;
}
	h4::after {
		content: '';
		position: absolute;
		bottom: -4px;
		left: calc( (100% - 4em) / 2 );
		width: 4em;
		border-bottom: 4px solid rgba(0, 115, 170, 1);
		z-index: -2;
	}
time {
	display: block;
	text-align: right;
}
.contentBtnBox {
	margin: 2em 0;
}
	.contentBtnBox a {
		display: inline-block;
		text-decoration: none;
		background: rgba(154, 123, 94, 1);
		color: rgba(255, 255, 255, 1);
		width: 30vw;
		padding: 1.5em 0;
		border-radius: 3px;
	}
	.contentBtnBox a:hover { background: rgba(0, 149, 69, 1); }

	#subMenuBox a, 
	.myBtn {
		position: relative;
		flex: 1 1 auto;
		text-transform: uppercase;
		overflow: hidden;
		transition: .3s;
	}
		#subMenuBox a::after, 
		.myBtn::after {
		  content: '';
		  position: absolute;
		  transition: .3s;
		  width: 0;
		  height: 120%;
		  left: -10%;
		  bottom: 0;
		  transform: skewX(15deg);
		  z-index: -1;
		}
		#subMenuBox a:hover, 
		.myBtn:hover { color: rgba(255, 255, 255, 1); }
			#subMenuBox a:hover::after, 
			.myBtn:hover::after {
				left: -10%;
				width: 120%;
				background: rgba(27, 57, 76, 1);
			}

.newsContentBox {
	padding: 2em 0;
}
.centerText { text-align: center; }


#homeImgBox {
	margin-top: 2vh;
	height: 80vh;
	position: relative;
	background: url(../img/home/mainimage.jpg) no-repeat 50% 50%;
	background-size: cover;
}
	#homeImgBox h1 {
		position: absolute;
		top: 30vh;
		left: 0;
		width: 100%;
		height: 20vh;
		background: url(../img/home/logo.png) no-repeat 50% 50%;
		background-size: contain;
		text-indent: -2000em;
	}
	#homeImgBox p {
		position: absolute;
		top: -2vh;
		left: 0;
		width: 100%;
		background: rgba(27, 57, 76, 1);
		color: rgba(255, 255, 255, 1);
		padding: 1em 0;
		font-size: 1.2rem;
	}
#homeCopyBox {
	padding: 2.5em 0;
	line-height: 150%;
	background: rgba(237, 243, 250, 1);
	color: rgba(68, 84, 82, 1);
}

#homeNewsBox { padding: 2em 0; }
	#homeNewsBox h3 {
		width: 25%;
		padding-bottom: 0;
		border-bottom: none;
		border-right: 1px solid rgba(100, 100, 100, 0.5);
		margin-bottom: 0;
	}
	#homeNewsBox ul {
		width: 70%;
	}
	#homeNewsBox h3::before, 
	#homeNewsBox h3::after { content: none; }
	#homeNewsBox li { padding: 0.25em 0; }
	#homeNewsBox li:not(:nth-last-child(-n+2)) { border-bottom: 1px dotted rgba(154, 123, 94, 1); }
		#homeNewsBox li .newsdate {
			color: rgba(154, 123, 94, 1);
			width: 22%;
			font-size: 1.2rem;
		}
		#homeNewsBox li .newstitle {
			width: 75%;
		}

#homeCopyBox ul li { line-height: 140%; font-weight: bold;  }

#homeCopyDl {}
	#homeCopyDl dt {
		width: 25%;
		height: 100%;
		line-height: 5em;
		background: rgba(0, 115, 170, 1);
		color: rgba(255, 255, 255, 1);
		font-weight: bold;
		position: relative;
	}
		#homeCopyDl dt::after {
			content: '';
			border: 1em solid transparent;
			border-left-color: rgba(0, 115, 170, 1);
			position: absolute;
			top: calc( (100% - 1.5em) / 2 );
			right: -1.9em;
		}
	#homeCopyDl dd {
		width: 75%;
		padding: 0 2em;
	}

.pageTitleBox {
	background: rgba(239, 242, 249, 1);
	padding: 3vh 0;
	position: relative;
	display: block;
	color: rgba(27, 57, 76, 1);
	z-index: -2;
	font-size: 2.4rem;
}

#newsBody table {
	border-collapse: collapse;
/*	width: 100%;*/
	border-top: 1px solid rgba(100, 100, 100, 0.5);
	border-left: 1px solid rgba(100, 100, 100, 0.5);
}
	#newsBody table td {
		padding: 0.5em;
		border-right: 1px solid rgba(100, 100, 100, 0.5);
		border-bottom: 1px solid rgba(100, 100, 100, 0.5);
	}

.subheadingDl {
	margin-bottom: 1em;
}
	.subheadingDl dt {
		font-weight: bold;
		color: rgba(0, 149, 69, 0.5);
		border-bottom: 1px dotted rgba(0, 149, 69, 1);
	}
	.subheadingDl dd {
		padding: 0.5em 0 0 1em;
	}

.datetimeUl {}
	.datetimeUl li {
		background: rgba(100, 100, 100, 0.1);
		padding: 0.25em;
		font-size: 1.4rem;
		border-radius: 3px;
		margin-bottom: 0.25em;
	}

/* [news] ============================================ */
.newslistDl:not(:last-child) {
	padding-bottom: 1em;
	border-bottom: 1px dotted rgba(0, 149, 69, 1);
	margin-bottom: 1em;
}
	.newslistDl dt { font-weight: bold; }
	.newslistDl dd {
		font-size: small;
	}
		.newslistDl dd .newsDateBox {
			display: inline-block;
			color: rgba(0, 149, 69, 0.5);
			margin-right: 1em;
		}
		.newslistDl dd .newsCategoryUl { display: inline-block; }
			.newslistDl dd .newsCategoryUl li {
				float: left;
				width: 80px;
				font-size: 1.0rem;
				border-radius: 3px;
				line-height: 2em;
			}
			.categorynewsLi { background: rgba(0, 149, 69, 1); color: rgba(255, 255, 255, 1); }
		.newslistDl dd p {
			padding-left: 2em;
			color: rgba(102, 102, 102, 0.75);
		}
		#homeNewsBox li.alllistBtnLi a, 
		.newslistDl dd .more-link {
			border: 1px solid rgba(154, 123, 94, 1);
			text-decoration: none;
			padding: 0.25em 1em;
			display: inline-block;
			margin-left: 2em;
		}
		#homeNewsBox li.alllistBtnLi {
			font-size: small;
			text-align: right;
		}
			#homeNewsBox li.alllistBtnLi a:hover, 
			.newslistDl dd .more-link:hover {
				background: rgba(154, 123, 94, 1);
				color: rgba(255, 255, 255, 1);
			}

/* [about] ============================================ */
#aboutBody {}
	#aboutBody #mainContentsBox .priceBox { position: relative; margin-top: 2em; }
	#aboutBody #mainContentsBox .priceBox p {
			position: absolute;
			left: calc( 50% - 5.5em );
			top: -1em;
			padding: 0 1em;
			background: rgba(255, 255, 255, 1);
			color: rgba(60, 138, 200, 1);
			display: inline;
			width: auto;
		}
		#aboutBody #mainContentsBox .priceBox ul {
			border: 2px solid rgba(60, 138, 200, 1);
			padding: 1.5em;
		}
		#aboutBody #mainContentsBox .priceBox ul li {
			background: rgba(242, 242, 242, 1);
			padding: 0.5em 0;
			border-radius: 5px;
			position: relative;
		}
			#aboutBody #mainContentsBox .priceBox ul li:not(:last-child)::after {
				content: '＋';
				position: absolute;
				top: 0.5em;
				right: -1.5em;
			}
		#aboutBody #mainContentsBox .priceBox dt {
			font-size: 2rem;
			font-weight: bold;
			background: rgba(60, 138, 200, 1);
			color: rgba(255, 255, 0, 1);
			width: 15em;
			margin-left: calc((100% - 15em) / 2);
			padding: 0.75em 0 0 0;
			position: relative;
		}
			#aboutBody #mainContentsBox .priceBox dt::after {
				content: '';
				border: 7.5em solid transparent;
				position: absolute;
				left: calc((100% - 15em) / 2);
				bottom: -8.5em;
				border-top: 1em solid rgba(60, 138, 200, 1);
			}
		#aboutBody #mainContentsBox .priceBox dd { padding-top: 3em; }
			#aboutBody #mainContentsBox .priceBox dd .largerText, 
			#aboutAfterBox h5 .largerText {
				color: rgba(229, 0, 18, 1);
				font-weight: bold;
				font-size: 6rem;
				padding: 0 0.25em;
			}
#aboutBody #mainContentsBox .priceBox, 
#aboutDoitBox, 
#aboutAfterBox, 
#aboutNopriceBox {
	margin-bottom: 3em;
}
#aboutPointBox { margin-bottom: 1em; }
	.pointDl {
		margin-bottom: 2em;
		padding: 3em 1em 1em 1em;
	/*	box-shadow: 1px 1px 4px rgba(0, 115, 170, 0.25);*/
	}
		.pointDl dt {
			width: 13vw;
			height: 13vw;
			border: 1px solid rgba(0, 0, 0, 1);
			border-radius: 50%;
			position: relative;
			padding-top: 40%;
			line-height: 125%;
		}
			.pointDl dt::after {
				content: '';
				width: 12vw;
				height: 12vw;
				border-radius: 50%;
				position: absolute;
				top: calc(0.5vw - 1px );
				left: calc(0.5vw - 1px );
				background: rgba(60, 138, 200, 0.1);
			}
			.pointDl dd {
				padding-top: 1em;
				text-align: left;
			}
	.point2Dl {
		padding: 0;
		background: rgba(247, 247, 247, 1);
	}
		.point2Dl dt {
			padding: 1em 0;
			background: rgba(27, 57, 76, 1);
			color: rgba(255, 255, 255, 1);
			font-style: italic;
			line-height: 125%;
			font-size: 2.0rem;
			font-weight: bold;
		}
		.point2Dl dd {
			padding: 1em;
			background: rgba(247, 247, 247, 1);
			text-align: left;
		}
		.point3Dl dt {
			background: rgba(27, 57, 76, 1);
			color: rgba(255, 255, 255, 1);
			padding: 0.5em 0;
		}
		.point3Dl dd {
			padding-top: 1em;
			text-align: left;
		}
	#aboutAfterBox h5, 
	#aboutAfterBox p { width: 100%; }
	#aboutAfterBox h5 { color: rgba(24, 51, 68, 1); }
		#aboutAfterBox h5 .largerText {
			font-size: 4rem;
		}
	
	.iconBox::before {
		content: '';
		width: 100%;
		height: 6vh;
		margin-bottom: 0.5em;
		background-size: contain;
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}
	.iconNewBox::before { background-image: url(../img/about/icon_new.png); }
	.iconCalendarBox::before { background-image: url(../img/about/icon_calendar.png); }
	.iconGoodsBox::before { background-image: url(../img/about/icon_goods.png); }


#aboutNopriceBox {
	background: rgba(0, 0, 0, 0.1);
	padding: 1.5em;
}
	#aboutNopriceBox h5 { font-size: 1.6rem; color: rgba(24, 51, 68, 1);  }
	#aboutNopriceBox li { text-align: left; }
		#aboutNopriceBox li::before { content: '●'; color: rgba(24, 51, 68, 1); padding-right: 0.25em; }

/* [flow] ============================================ */
#flowBody {}
	#flowBody #flowBox { counter-reset: number; width:840px; margin: 0 auto; }
	#flowBody .flowDl {
		position: relative;
		margin-left: 100px;
		counter-increment: number;
		margin-bottom: 4em;
	}
	#flowBody .flowDl::before {
		content: 'step\A'counter(number);
		white-space: pre;
		position: absolute;
		top: 0;
		left: -100px;
		width: 70px;
		height: 70px;
		border-radius: 50%;
		background-color: #1A394C;
		color: #fff;
		font-weight:bold;
		line-height:1.3;
		padding-top:1em;
		box-sizing:border-box;
		font-size: 1.5rem;
	}
	#flowBody #siteopen::before {
		background-color: #E50012;
	}
		#flowBody .flowDl::after {
			content: '';
			position: absolute;
			top: -3px;
			left: -103px;
			width: 74px;
			height: 74px;
			border: 1px solid rgba(24, 51, 68, 1);
			border-radius: 50%;
		}
		#flowBody #siteopen::after { border-color: #E50012; }
	#flowBody .flowDl dt {
		font-size: 2.4rem;
		font-weight: bold;
		padding-bottom: 0.3em;
		text-align: left;
		color: #1F3133;
	}
	#flowBody #siteopen dt {
		color: #E50012;
	}
	#flowBody .flowDl dd {
		text-align: left;
		font-size: 1.6rem;
	}
	.optionFlow {
	}
	.optionFlow dt a {
		display: inline-block;
		border-radius: 5px;
		background-color:#3C8BC8;
		color: #fff;
		margin-left: 10px;
		font-size: 0.6em;
		line-height: 2;
		padding: 0 10px;
		text-decoration:none;
	}
	/* .optionFlow::after {
		display: block;
		content: 'オプション';
		margin-top: 0.5em;
		padding: 0.5em;
		background: rgba(0, 0, 0, 0.1);
		font-size: 1.2rem;
	}*/

/* [option] ============================================ */
#optionBody {}
	#optionBox .point2Dl {
		margin-bottom: 3em;
	}
		#optionBox .point2Dl dd .costBox {
			font-size: 2rem;
			padding: 0.5em 0;
			color: rgba(0, 0, 0, 1);
		}
		.iconRunningBox::before { background-image: url(../img/option/icon_running.png); }
		.iconTextBox::before { background-image: url(../img/option/icon_text.png); }
		.iconPictureBox::before { background-image: url(../img/option/icon_picture.png); }
		.iconMovieBox::before { background-image: url(../img/option/icon_movie.png); }

/* [contact] ============================================ */
#contactBody {}
	#contactBody .error {
		margin-left: 0.5em;
		padding: 0.25em 1em;
		border-radius: 3px;
		color: rgba(255, 255, 255, 1);
		background: rgba(0, 149, 69, 1);
		display: inline-block;
	}
#contactBody .vertical-item { display: block; }
	#contactBody form { text-align: left; margin-top: 2em; }

		#contactBody form .backBtn { margin-bottom: 1em; }
	

#footercontactBox {
	background: url(../img/common/footercontact.jpg) no-repeat 50% 50%;
	background-size: cover;
	padding: 3em 0;
	color: rgba(27, 57, 76, 1);
	font-style: italic;
}
	#footercontactBox h5 {
		font-size: 1.6rem;
		font-family: 'Reem Kufi', sans-serif;
		font-style: normal;
	}
		#footercontactBox h5::after {
			display: block;
			content: attr(data-subtext)'';
			font-size: 5.4rem;
			padding: 0.5em 0;
		}
	#footercontactBox p { padding-bottom: 2em; }
	#footercontactBox .flexBox { justify-content: center; }
		#footercontactBox .telLi {
			font-size: 4.3rem;
			font-family: 'Oswald', sans-serif;
			font-weight: bold;
			padding: 0.25em 0.5em 0 0;
			text-align: right;
			width: 50%;
		}
			#footercontactBox .telLi a {
				text-decoration: none;
				color: rgba(27, 57, 76, 1);
			}
			#footercontactBox .telLi span { font-size: 50%; }
		#footercontactBox .contactBtnLi {
			padding-left: 0.5em;
			text-align: left;
			width: 50%;
		}
			#footercontactBox .contactBtnLi a {
				text-decoration: none;
				width: 30vw;
				line-height: 4.3rem;
				background: rgba(27, 57, 76, 1);
				color: rgba(255, 255, 255, 1);
				border-radius: 3vw;
				display: block;
				text-align: center;
			}

/* [sp] ============================================ */
@media only screen and (max-width: 780px) {
	h2.leadH {
		font-size: 2.8rem;
	}
	h2.leadH .smallText { line-height: 1.5em; display: inline-block; }

	.leadP { text-align: left; }
	.flex4 > * { width: 48%; }
	.spTable td:first-child {
		background: rgba(154, 123, 94, 0.1);
	}

	#footercontactBox p {
		padding-right: 1em;
		padding-left: 1em;
		text-align: left;
	}
	#footercontactBox .flexBox { display: block; }
		#footercontactBox .flexBox li {
			width: 100%;
		}
		#footercontactBox .flexBox li.telLi {
			margin: 0 0 0.25em 0.5em;
		}
			#footercontactBox .flexBox li a {
				width: 80%;
				margin: 0 auto;
				padding: 1em;
			}
			#footercontactBox .flexBox li.telLi a { padding: 0 0.25em; }

	#homeNewsBox li .newsdate,  
	#homeNewsBox li .newstitle, 
	#homeNewsBox h3, 
	#homeNewsBox ul, 
	.contentBtnBox a { width: 100%; }
	#homeNewsBox h3, 
	#homeNewsBox ul { margin-bottom: 1em; }

	#homeCopyBox {
		padding: 1em;
		text-align: left;
	}
	#homeImgBox p { top: auto; bottom: 0; }
	
	#aboutBody #mainContentsBox .priceBox ul li { margin-bottom: 0.5em; }
		#aboutBody #mainContentsBox .priceBox ul li:not(:last-child)::after { content: none; }
	#aboutBody #mainContentsBox p { width: 100%; }

	#aboutDoitBox dl, 
	#aboutAfterBox dl { margin-bottom: 2em; }

	#flowBody #flowBox { width: 100%; }

	#optionBox .optionUl li div { width: calc( 100% - 10vw ); }
	#optionBox .optionUl li .costBox { width: 100%; text-align: right; padding-top: 0; }

	.pointDl dt { padding-top: 0; border: none; }
	.pointDl dd { text-align: left; }
}