@charset "UTF-8";

/*===================================
　 下層　基本CSS　
===================================*//

/*===================================
　フォント
===================================*/
.kakko{
	letter-spacing: -8px;
}
.kerning{
	letter-spacing: .5em;
}
.min{
	font-family: 'Noto Serif JP', serif;
}
.eng{
	font-family: 'Roboto', sans-serif;
}
.lh{
	line-height: 2.0;
}
.lh-1x{
	line-height: 1.5;
}


/* TEL用フォント　---------------------------------- */
.fs-tel{
	font-size: 1.375em;
}

/*　セクションの大見出し　---------------------------- */
.section-title{
	font-size: 1.875em;
	padding-top: 2.5em;
	padding-left: 4.5rem;
	position: relative;
}
.section-title:before{
	position: absolute;
	top: calc(50% + 1.25em);
	left: 0;
	width: 3.75rem;
	height: 1px;
	background: #c7c7c7;
	content: "";
}
	@media (max-width:1112px) {
		.section-title{
			padding-left: 5%;
		}
		.section-title:before{
			width: 4.5%;
		}
	}

	@media (max-width:750px) {
		.section-title{
			font-size: 1.71428571429em;
			padding-left: 5.5%;
		}
		.section-title:before{
			width: 3.5%;
		}
	}



/* 横線　見出し　---------------------------- */
.midashi{
	font-size: 1.25em;
	font-weight: bold;
	color: #5e5b4a;
	line-height: 1.4;
	padding-left: 1em;
	border-left: .375em solid #87a300;
	margin-bottom: .75em;
}

/* 横線　小見出し ----------- （fontsize指定なし）*/

/* 緑 */
.komidashi{
	font-weight: bold;
	line-height: 1.4;
	padding-left: .75em;
	border-left: .375em solid #87a300;
	margin-bottom: .25em;
}
/* 茶　*/
.komidashi-brown{
	font-weight: bold;
	line-height: 1.4;
	padding-left: .75em;
	border-left: .375em solid #5e5b4a;
	margin-bottom: .25em;
}

/* 下線　小見出し ------------（fontsize指定なし）*/
.border-komidashi{
	font-weight: bold;
	color: #87a300;
	border-bottom: 1px solid #87a300;
	margin-bottom: .75em;
}

/*　線被せ装飾 ----------------（fontsize指定なし）*/
/* 緑 */
.line-green{
	color: #87a300;
	font-weight: bold;
	margin-bottom: .5em;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.line-green:after{
	content: "";
	-webkit-box-flex:1;
	-ms-flex-positive:1;
	flex-grow:1;
	height: 1px;
	background: #87a300;
	margin-left: 1em;
}
/* 灰色グレー  font-weight: boldなし　*/
.line-grey{
	margin-bottom: .5em;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.line-grey:after{
	content: "";
	-webkit-box-flex:1;
	-ms-flex-positive:1;
	flex-grow:1;
	height: 1px;
	background: #dadada;
	margin-left: 1em;
}

/*　両端ライン装飾 --------------（fontsize指定なし）*/

/* 緑 */
.sideline-green{
	color: #87a300;
	font-weight: bold;
	margin-bottom: .5em;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.sideline-green:before,
.sideline-green:after{
	content: "";
	-webkit-box-flex:1;
	-ms-flex-positive:1;
	flex-grow:1;
	height: 1px;
	background: #87a300;
}
.sideline-green:before{
	margin-right: .5em;
}
.sideline-green:after{
	margin-left: .5em;
}

/* 灰色グレー */
.sideline-grey{
	color: #dadada;
	font-weight: bold;
	margin-bottom: .5em;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.sideline-grey:before,
.sideline-grey:after{
	content: "";
	-webkit-box-flex:1;
	-ms-flex-positive:1;
	flex-grow:1;
	height: 1px;
	background: #dadada;
}
.sideline-grey:before{
	margin-right: 1em;
}
.sideline-grey:after{
	margin-left: 1em;
}

/*　丸ワンポイント------------------------*/
.onepoint{
	color: #5e5b4a;
	padding-left: 1em;
	position: relative;
}
.onepoint:before{
	position: absolute;
	top: 0;
	left: 0;
	margin-top: .625em;
	width: .75em;
	height: .75em;
	background: #87a300;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	content: "";
}
/*　＼　吹き出し　／------------------------*/

.speech{
	position: relative;
	padding: 0 1.875em .25em 1.875em;
	display: inline-block;
	line-height: 1.5;
}
.speech:before{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background: #5e5b4a;
	content: "";
	transform: rotate(-35deg);
}
.speech:after{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 1px;
	height: 80%;
	background: #5e5b4a;
	content: "";
	transform: rotate(35deg);
}
	@media (max-width:374px) {
		.speech{
			letter-spacing: -1px;
		}
	}

.speech-wrap .thumb{
	max-width: 180px;
	width: 50%;
	margin: 1em auto 0;
}
	@media (max-width:750px) {
		.first-last .xxx-large{
			font-size: 1.14em;
		}
	}


/*カラー------------------------*/
.brown{
	color: #5e5b4a;
}
.green{
	color: #87a300;
}
.orange{
	color: #df7503;
}
.green .link-tel a{
	color: #87a300;
}

/*配置------------------------*/
.txt-c{
	text-align: center;
}
.txt-r{
	text-align: right;
}
.txt-l{
	text-align: left;
}
.txt-c--spl{
	text-align: center;
}
	@media (max-width:750px) {
		.txt-c--spl{
			text-align: left;
		}
	}

/*===================================
　flex　カラムサイズ
===================================*/

/*　4　列　*/
.clm4,
.clm4-img{
	width: 24%;
}
/* 3列 */
.clm3-inline{
	width: 32%;
}


/*　2　列　*/
.clm2,
.clm2-inline{
	width: 48%;
}

/* 2列 幅違い */ 
.clm2-txt{
	width: 64%;
}
.clm2-thumb{
	width: 31%;
}
/* 2列 幅違い thumb 中くらい*/
 .clm2-txt-medium{
	width: 55%;
}
.clm2-thumb-medium{
	width: 40%;
}

/* 2列 幅違い thumb 小さめ*/ 
.clm2-txt-small{
	width: 78%;
}
.clm2-thumb-small{
	width: 18%;
}

	@media (max-width:750px) {
		/*　4　列　*/
		.clm4{
			width: 49%;
			margin-bottom: 1.25rem;
		}
		.clm4-img{
			width: 49%;
			margin-bottom: 2vw;
		}

		/*　2　列　*/
		.clm2{
			width: 100%;
			margin-bottom: 1.25rem;
		}
		.clm2:last-child{
			margin-bottom: .5rem;
		}
		
		/* 2列 幅違い */
		.clm2-txt,
		.clm2-thumb{
			width: 100%;
		}
		.clm2-thumb{
			margin: 1.25em 0;
		}
		/* 2列 幅違い thumb 中くらい*/
		 .clm2-txt-medium,
		 .clm2-thumb-medium{
		 	width: 100%;
		 }
		 .clm2-thumb-medium{
		 	margin: 1.25em 0;
		 }
		/* 2列 幅違い thumb 小さめ*/ 
		.clm2-thumb-small{
			width: 28%;
			margin: .5rem auto;
		}
		.clm2-txt-small{
			width: 100%;
		}
	}


/*===================================
　余白
===================================*/
/* 中央　*/
.section{
	padding: 2.75rem 8.5% 4rem 6rem;
}
/* 右寄せ　*/
.section-align-right{
	padding: 2.75rem 0 4rem 6rem;
}
/* 両端余白なし　*/
.section-align-justify{
	padding-bottom: 4rem;
}
/* 小さいボックス　*/
.inner-thumb-small{
	max-width: 540px;
	width: 85%;
	margin: 0 auto;
}
.inner-xxsmall{
	max-width: 700px;
	margin: 0 auto;
}
.inner-xsmall{
	max-width: 840px;
	margin: 0 auto;
}
.inner-small{
	max-width: 900px;
	margin: 0 auto;
}
/* 大きいボックス　*/
.inner-large{
	max-width: 1080px;
	margin: 0 auto;
}

/*　調整用　*/
.pb-0rem{
	padding-bottom: 0!important;
}
.pb-2rem{
	padding-bottom: 2rem!important;
}
.mb-0rem{
	margin-bottom: 0!important;
}
.pt-0rem{
	padding-top: 0!important;
}
.pt-3rem{
	padding-top: 3rem!important;
}

/* 上部水平線 */
.hr-lightgreen-inner{
	border-top: 1px solid #e4ecc6;
	padding-top: 1.75rem;
	margin-top: 1.75rem;
}


	@media (min-width:1536px) {
		.section{
			padding-right: 9rem;
			padding-left: 9rem;
		}
		.section-align-right{
			padding-left: 9rem;
		}
		.inner-xsmall{
			max-width: 940px;
		}
		.inner-small{
			max-width: 1000px;
		}
		.inner-large{
			max-width: 1200px;
		}
	}
	@media (max-width:1112px) {
		.section{
			padding: 2.75rem 5% 4rem;
		}
		.section-align-right{
			padding: 2.75rem 0 4rem 5%;
		}
		.section-align-justify{
			padding-bottom: 4rem;
		}
		.inner-small{
			max-width: 750px;
		}
	}
	@media (max-width:750px) {
		.section{
			padding: 2rem 3.5% 2rem 5.5%;
		}
		.section-align-right{
			padding: 2rem 0 2rem 5.5%;
		}
		.section-align-justify{
			padding-bottom: 2rem;
		}
	}

/* よく使う */
.mtxxl{
	margin-top: 5.25rem;
}
.mtxl{
	margin-top: 4.75rem;
}
.mtl{
	margin-top: 4rem;
}
.mt{
	margin-top: 3.25rem;
}
.mtm{
	margin-top: 2.25rem;
}
.mts{
	margin-top: 1.25rem;
}
.mtxs{
	margin-top: .625rem;
}

/*===================================
　装飾ボックス
===================================*/
.bgbox-green{
	position: relative;
	background: #edf1d3;
	padding: 1.25rem;
}
.bgbox-lightbrown{
	position: relative;
	background: #e9e8e6;
	padding: 1.25rem;
}
.bgbox-white{
	position: relative;
	background: #fff;
	padding: 1.25rem;
}
.borderbox-lightbrown{
	position: relative;
	border: 3px solid #e9e8e6;
	padding: 1.25rem;
}
.borderbox-lightbrown-s{
	position: relative;
	border: 2px solid #e9e8e6;
	padding: 1rem;
}
.borderbox-green{
	position: relative;
	border: 3px solid #eef2d6;
	padding: 2rem;
}


.kakumaru{
	border-radius: .75em;
	-moz-border-radius: .75em;
	-webkit-border-radius: .75em;
}
.kakumaru-large{
	border-radius: 5em;
	-moz-border-radius: 5em;
	-webkit-border-radius: 5em;
}


/* ボーダー囲いボックス　＋　中央見出し --------------*/

/* 緑 */
.linebox-green {
	position: relative;
}
.linebox-green .tit{
	color: #87a300;
	font-size: 1.375em;
	line-height: 1.5;
	position: absolute;
	top: -.75em;
	left: 50%;
	width: 75%;
	transform: translateX(-50%);
	-webkit- transform: translateX(-50%);
}
.linebox-green .tit > span{
	display: inline-block;
	background: #fff;
	font-weight: bold;
	text-align: center;
	letter-spacing: .125em;
	width: 100%;
}
.linebox-green .waku{
	border: 4px solid #eef2d6;
	padding: 2.5rem 2rem 2rem 2rem;
	border-radius: .75em;
	-moz-border-radius: .75em;
	-webkit-border-radius: .75em;
}
	@media (max-width:750px) {
		.linebox-green .waku{
			padding: 2rem 1rem 1.5rem 1rem;
		}
	}

/* 灰色グレー */
.linebox-grey {
	position: relative;
}
.linebox-grey .tit{
	line-height: 1.5;
	position: absolute;
	top: -.75em;
	left: 50%;
	width: 90%;
	transform: translateX(-50%);
	-webkit- transform: translateX(-50%);
}
.linebox-grey .tit > span{
	display: inline-block;
	background: #fff;
	font-weight: bold;
	text-align: center;
	letter-spacing: .125em;
	width: 100%;
}
.linebox-grey .waku{
	border: 4px solid #e9e8e6;
	padding: 2.5rem 2rem 2rem 2rem;
	border-radius: .75em;
	-moz-border-radius: .75em;
	-webkit-border-radius: .75em;
}
	@media (max-width:750px) {
		.linebox-grey .waku{
			padding: 1.75rem 1rem 1.25rem 1rem;
		}
	}


/* 角丸背景ボックス　＋　左見出し --------------*/

/* 緑　*/
.bgwaku-green {
	position: relative;
	background: #edf1d3;
	padding: 2.5rem 2rem 2.25rem 2rem;
	border-radius: .75em;
	-moz-border-radius: .75em;
	-webkit-border-radius: .75em;
}
.bgwaku-green .tit{
	position: absolute;
	top: -1em;
	left: .5rem;
	color: #87a300;
	font-size: 1.375em;
	font-weight: bold;
	letter-spacing: .125em;
}
	@media (max-width:750px) {
		.bgwaku-green{
			padding: 2rem 1.25rem 1.5rem 1.25rem;
		}
	}

/* 薄緑　*/
.bgwaku-lightgreen {
	position: relative;
	background: #f3f6e4;
	padding: 2.5rem 2rem 2.25rem 2rem;
	border-radius: .75em;
	-moz-border-radius: .75em;
	-webkit-border-radius: .75em;
}
.bgwaku-lightgreen .tit{
	position: absolute;
	top: -1.25rem;
	color: #87a300;
	font-size: 1.375em;
	font-weight: bold;
}
	@media (max-width:750px) {
		.bgwaku-lightgreen{
			padding: 2rem 1.25rem 1.5rem 1.25rem;
		}
	}

/* 右寄せ用（.section-align-right） 片方角丸ボックス　＋　左端タイトル　（※背景色は下↓）-----*/
.align-right-inner{
	position: relative;
	border-radius: .75em 0 0 .75rem;
	-moz-border-radius: .75em 0 0 .75rem;
	-webkit-border-radius: .75em 0 0 .75rem;
	padding: 4rem 8.5% 3.25rem 2.75rem;
}
.align-right-inner > .tit{
	position: absolute;
	top: -1.25rem;
	left: 0;
	color: #5e5b4a;
	font-size: 1.75em;
	letter-spacing: 2px;
}
.align-right-innerbox{
	position: relative;
	border-radius: .75em 0 0 .75rem;
	-moz-border-radius: .75em 0 0 .75rem;
	-webkit-border-radius: .75em 0 0 .75rem;
	padding: 3rem 8.5% 2rem 2.75rem;
}
	@media (max-width:1112px){
		.align-right-inner{
			margin-top: 1em;
			padding: 4rem 5% 3.25rem;
		}		
	}
	@media (max-width:750px) {
		.align-right-inner{
			padding: 2.5rem 1em 1.5rem 1.25em;
		}
		.align-right-innerbox{
			padding: 2rem 1em 1rem 1.25em;
		}
	}

/* 背景色 --------------------------------------------------------*/
.bg-lightgreen{
	background: #f3f6e4;
}
.bg-green{
	background: #edf4cc;
}


/*===================================
　dl/table
===================================*/
dl.dl-2clm{
	width: 100%;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	flex-wrap: wrap;
	border-top: 1px solid #d7e09e;
}
dl.dl-2clm dt{
	color: #87a300;
	font-weight: bold;
	width: 8.5em;
	padding: 1.25rem 1em 1.25rem 0;
	border-bottom: 1px solid #d7e09e;
}
dl.dl-2clm dd{
	width: calc(100% - 8.5em - 1em);
	padding: 1.25rem 0;
	border-bottom: 1px solid #d7e09e;
}
dl.dl-2clm-small{
	width: 100%;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	flex-wrap: wrap;
	border-top: 1px solid #d7e09e;
}
dl.dl-2clm-small dt{
	color: #87a300;
	font-weight: bold;
	width: 6em;
	padding: 1.25rem 1em 1.25rem 0;
	border-bottom: 1px solid #d7e09e;
}
dl.dl-2clm-small dd{
	width: calc(100% - 6em - 1em);
	padding: 1.25rem 0;
	border-bottom: 1px solid #d7e09e;
}


/* 料金３列 */
.table-price-3clm{
	width: 100%;
	font-size: .9375em;
}
.table-price-3clm tr:first-child th,
.table-price-3clm tr:first-child td{
	background: #e6ecc9;
	color: #87a300;
	font-weight: 500;
}
.table-price-3clm th,
.table-price-3clm td{
	padding: 1em;
	border-bottom: 1px solid #d7e09e;
	text-align: center;
}
.table-price-3clm th{
	background: #f3f6e4;
	color: #87a300;
	font-weight: 500;
	width: 42%;
}
.table-price-3clm td{
	width: 29%;
	font-family: 'Roboto', sans-serif;
}

/* 料金２列 */
.table-price-2clm{
	width: 100%;
	font-size: .9375em;
}
.table-price-2clm tr:first-child th,
.table-price-2clm tr:first-child td{
	background: #e6ecc9;
	color: #87a300;
	font-weight: 500;
}
.table-price-2clm th,
.table-price-2clm td{
	padding: 1em;
	border-bottom: 1px solid #d7e09e;
	text-align: center;
	width: 50%;
}
.table-price-2clm th{
	background: #f3f6e4;
	color: #87a300;
	font-weight: 500;
}
.table-price-2clm td{
	font-family: 'Roboto', sans-serif;
}

/* 料金カテゴリ別３列 */
.table-price-category{
	width: 100%;
	font-size: .9375em;
	border-top: 1px solid #d7e09e;
}
.table-price-category th,
.table-price-category td{
	width: 33.3333%;
	text-align: center;
	padding: 1rem 0;
	border-bottom: 1px solid #d7e09e;
}
.table-price-category th{
	background: #e6ecc9;
	color: #87a300;
	font-weight: 500;
	vertical-align: middle;
}
.table-price-category td{
	font-family: 'Roboto', sans-serif;
}
.table-price-category td.plan{
	background: #f3f7e5;
}

/* TABLE 2clm */
.table-2clm{
	width: 100%;
}
.table-2clm tr:first-child th,
.table-2clm tr:first-child td{
	background: #cbd88f;
	color: #87a300;
	font-weight: 500;
	text-align: center;
	padding: .5rem 1rem;
	vertical-align: middle;
}
.table-2clm th{
	width: 25%;
	background: #ebf0d4;
	padding: 1rem;
	border-bottom: 1px solid #cbd88f;
	font-weight: 500;
}
.table-2clm td{
	width: 75%;
	background: #fff;
	padding: .75rem 1rem;
	border-bottom: 1px solid #cbd88f;
}

/*===================================
　全体基本
===================================*/

#contents-wrap{
	background: #f5f5f5;
	position: relative;
	padding-bottom: 4rem;
}
#contents-body{
	position: relative;
	z-index: 1;
	margin-left: 8%;
	margin-top: -11rem;
	background: #fff;
}
	@media (min-width:1112px) {
		#contents-body{
			margin-left: 12%;
		}
	}
	@media (max-width:1112px) {
		#contents-body{
			margin-left: 6%;
		}
	}
	@media (max-width:750px) {
		#contents-body{
			margin-left: 3%;
			margin-top: -4.6rem;
		}
	}

/*===================================
　ページトップ背景
===================================*/
#page-bg{
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	position: relative;
	z-index: 0;
}
#page-bg-small{
	width: 100%;
	height: 0;
	padding-top: 25%;
	overflow: hidden;
	position: relative;
	z-index: 0;
}
	@media (max-width:1112px) {
		#page-bg-small{
			padding-top: 36.25%;
		}
	}

	@media (max-width:750px) {
		#page-bg{
			height: auto;
			padding-top: 0;
			position: static;
			overflow: visible;
		}
		#page-bg-small{
			padding-top: 0;
			height: 12rem;
		}
	}

/* 背景ビデオ　 */
#page-bg video{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	width: 100%;
	height: 100%;
	animation-name:fadevideo;
	animation-duration:1s;
	animation-fill-mode:forwards;
	animation-delay: 2.5s;
	opacity:0;
}
	@media (max-width:750px) {
		#page-bg video{
			position: relative;
			top: auto;
			left: auto;
			transform: none;
			-webkit-transform: none;
			width: 100%;
			height: auto;
		}
	}
@keyframes fadevideo{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* 背景画像　 */
.bg-pickup{
	background: url(../images/pickup/bg.jpg) center repeat;
	background-size: 300px auto;
	width: 100%;
	height: 100%;
}

/*===================================
　上部ページタイトル部分
===================================*/
/* 余白 */
.section-page-head{
	padding: 4em 0 0 3.75rem;
}
	@media (max-width:1112px) {
		.section-page-head{
			padding-left: 4%;
		}
	}
	@media (max-width:750px) {
		.section-page-head{
			padding: 3.25em 0 2.25em;
		}
	}

/* ページタイトル */
.pagetitle{
	font-size: 2rem;
	letter-spacing: -1px;
}
.tit-first{
	padding-left: 1.25em;
	background: url(../images/common/icon-first-cha.png) no-repeat left 65%;
	background-size: auto 1em;
}

	@media (max-width:750px) {
		.pagetitle,
		.pagetitle-icon{
			font-size: 1.7142857em;
			line-height: 1.2;
			letter-spacing: .0125rem;
			border-left: 4px solid #e1e1e1;
			padding-left: calc(5.5% - 4px);
		}
	}

/* ページコピー説明 */
.page-copy{
	font-family: 'Noto Serif JP', serif;
	font-size: 1.75em;
	line-height: 1.5;
	margin-bottom: 1em;
}
.page-copy-gothic{
	font-size: 1.25em;
	line-height: 1.5;
	margin-bottom: 1em;
}
.page-description{
	line-height: 2;
}
	@media (max-width:1112px) {
		.page-description{
			letter-spacing: -.04em;
		}
	}
	@media (max-width:750px) {
		.page-copy{
			font-size: 1.642857em;
		}

	}
	@media (max-width:374px) {
		.page-copy-gothic{
			font-size: 1.2142857em;
		}
		.page-description{
			font-size: .857em;
		}
	}
/*===================================
　ピックアップの基本
===================================*/
/* ページタイトル 画像ver */
.pickup-wrap{
	max-width: 890px;
	width: 90%;
	margin: 0 auto;
	padding: 7em 0;
}
	@media (max-width:1112px) {
		.pickup-wrap{
			padding: 3.75em 0 7em;
		}
	}
	@media (max-width:750px) {
		.pickup-wrap{
			width: 92%;
			padding: 1.5em 0 4em;
		}
	}
.pickup-title-img{
	margin-bottom: 2.75em;
}
.pickup-description{
	font-size: 1.25em;
	margin-bottom: 2.75em;
	border-bottom: 1px solid #dedede;
	padding-bottom: 2.75em;
}
	@media (max-width:750px) {
		.pickup-description{
			font-size:.928rem;
		}
	}