/* 
+++++++++++++++++++++++++++++++

下層 基本スタイル

+++++++++++++++++++++++++++++++*/


/*===========================

concrete bg

===========================*/

.concrete-ptn1{
	background: #cfcfcd url(../images/common/ptn-01.jpg) repeat center;
}
.concrete-ptn2{
	background: #cfcfcd url(../images/common/ptn-02.jpg) repeat center;
}

/*===========================

section/配置/inner

===========================*/

/* 中央配置 ------------------*/
.wrap-center{
	padding: 2.25em 7%;
}
/* 右寄せ配置 ------------------*/
.wrap-right{
	padding: 2.25em 0 2.25em 7%;
}
.wrap-right-txt{
	padding-right: 7%;
}
	@media screen and (max-width: 979px) {
		.wrap-center{
			padding: 2em 7%;
		}
		.wrap-right{
			padding: 2em 0 2em 7%;
		}
	}
	@media screen and (max-width: 767px) {
		.wrap-center{
			padding: 1.25em 5%;
		}
		.wrap-right{
			padding: 1.25em 0 1.25em 5%;
		}
		.wrap-right-txt{
			padding: 1.25em 5%;
		}
	}

.wrap-txt930{
	max-width: 930px;
	margin: 0 auto;
}
.wrap-txt830{
	max-width: 830px;
	margin: 0 auto;
}



/* サイドメニュー有り ------------------*/
.wrap-sidenavi-section{
	position: relative;
	padding: 1em 0 2.25% 3.5%;
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.sidenavi{
	position: sticky;
	top: 3em;
	width: 150px;
	height: 100%;
	font-size: .9375em;
	font-weight: 300;
	padding-top: 3em;
	z-index: 50;
}
.sidenavi-section{
	width: calc(100% - 150px);
	border-left: 1px solid #dedede;
}
	@media screen and (max-width: 979px) {
		.wrap-sidenavi-section{
			padding-left: 3%;
		}
		.sidenavi{
			width: 120px;
			font-size: 12px;
		}
		.sidenavi-section{
			width: calc(100% - 120px);
		}
	}
	@media screen and (max-width: 767px) {
		.wrap-sidenavi-section{
			padding:0;
			display: block;
		}
		.sidenavi{
			font-size: 13px;
			background: #fff;
			width: 95%;
			margin-left: auto;
			top: 0;
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, .1);
			padding-top: 0;
		}
		.sidenavi::-webkit-scrollbar{
			display: none;
		}
		.sidenavi-section{
			width: 100%;
			border-left: none;
			margin-top: 2.5em;
		}
	}

/* サイドナビ有 インナー（中央）----------------*/

.sn-section--innner{
	border-bottom: 1px solid #dedede;
	padding:5.5em 6% 4.75em;
	min-height: 450px;
}
.sn-section--innner:first-child{
	padding-top: 3.75em;
}
.sn-section--innner:last-child{
	border-bottom: none;
	padding-bottom: 2em;
}
	@media screen and (max-width: 767px) {
		.sn-section--innner{
			padding-top:4.25em;
			padding-bottom:4.25em;
			min-height: auto;
		}
		.sn-section--innner:first-child{
			padding-top: 3em;
		}
	}

/* サイドナビ有 インナー（右寄り）----------------*/

.sn-section--innner-right{
	border-bottom: 1px solid #dedede;
	padding:5.5em 0 4.75em 6%;
	min-height: 450px;
}
.sn-section--innner-right:first-child{
	padding-top: 3.75em;
}

.sn-section--innner-right--txt{
	padding-right: 6%;
}


/* サイドナビ　装飾----------------*/

.sidenavi .category{
	color: #443424;
	font-size: 1rem;
	font-weight: 500;
	font-family: 'Zen Maru Gothic', serif;
	padding-bottom: 1em;
	margin-bottom: 1.25em;
	border-bottom: 1px solid #dedede;
}
.sidenavi ul li a{
	position: relative;
	display: block;
	transition: color .5s;
}
.sidenavi ul li a:hover{
	color: #6e301d;
}
.sidenavi ul li a:before{
	position: absolute;
	top: .625em;
	left: -1em;
	width: .5em;
	height: .5em;
	content: "";
	background: transparent;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	transition: all .5s;
}
.sidenavi ul li a:hover:before{
	background: #6e301d;
}

	@media screen and (max-width: 979px) {
		.sidenavi .category{
			font-size: 13px;
		}
	}
	@media screen and (max-width: 767px) {
		.sidenavi .category{
			display: none;
		}
		.sn-sp-style{
			display: flex;
			width: 767px;
		}
		.long-scroll-width{
			width: 817px;
		}
		.sn-sp-style ul{
			display: flex;
		}
		.sn-sp-style li{
			background: #fff;
			border-right: 1px solid #dedede;
		}
		.sn-sp-style li a{
			padding: 1.25em 1.75em;
		}
		.sidenavi ul li a:hover{
			background: #eceae8;
		}
		.sidenavi ul li a:before{
			position: relative;
			top: 0;
			left: 0;
			width: none;
			height: none;
			background: transparent;
			border-radius: none;
			transition: none;
		}
	}


/*===========================

冒頭 page head

===========================*/

.pagehead{
	padding: 2.5em 7% 0 7%;
}
	@media screen and (max-width: 767px) {
		.pagehead{
			padding-top: 0;
			padding-left: 5%;
			padding-right: 5%;
		}

	}

/* 横幅全体 角丸------------------*/
.pagehead-overall{
	position: relative;
}
.pagehead-overall .txt{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-50%);
	padding-left: 7%;
}
.pagehead-overall .thumb{
	line-height: 0;
}
.pagehead-overall .thumb img{
	width: 100%;
	display: block;
	margin-left: auto;
	border-radius: 0 0 62px 62px;
	-moz-border-radius: 0 0 62px 62px;
	-webkit-border-radius: 0 0 62px 62px;
}
	@media screen and (min-width: 1600px) {
		.pagehead-overall .thumb img{
			aspect-ratio: 2 / .8;
			object-fit: cover;
			object-position: 100% 100%; 
		}
	}
	@media screen and (max-width: 979px) {
		.pagehead-overall .txt{
			padding-left: 2.5em;
		}
	}
	@media screen and (max-width: 767px) {
		.pagehead-overall{
			margin-left: 5%;
			padding-top: 1.75em;
		}
		.pagehead-overall .txt{
			position: relative;
			top: auto;
			left: auto;
			transform: none;
			padding-left: 0;
			text-align: center;
			margin-right: 5%;
		}
		.pagehead-overall .thumb{
			margin-top: 2em;
		}
		.pagehead-overall .thumb img{
			border-radius: 1em 0 0 1em;
			-moz-border-radius: 1em 0 0 1em;
			-webkit-border-radius: 1em 0 0 1em;
			aspect-ratio: 2 / 1.4;
			object-fit: cover;
			object-position: 100% 100%; 
		}

	}


/* 右寄せ ------------------*/
.pagehead-right{
	position: relative;
	padding-left: 5%;
	line-height: .5;
}
.pagehead-right .txt{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-50%);
	padding-left: 10%;
	line-height: 1.0;
}
.pagehead-right .thumb{
	line-height: 0;
}
	@media screen and (max-width: 767px) {
		.pagehead-right .thumb{
			height: 195px;
		}
		.pagehead-right .thumb img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		/*予防*/
		.headimg-prevention .txt{
			top: 15%;
			transform: translate(0,0);
			z-index: 1;
		}
		.headimg-prevention .thumb{
			background: #fff;
			border-bottom: 1px solid #dedede;
			overflow: hidden;
		}
		.headimg-prevention .thumb img{
			width: 100%;
			height: 100%;
			object-fit: contain;
			object-position: -1.5em 90%;
			transform: scale(1.1);
			position: relative;
			z-index: 0;
		}
	}

.pagehead-slider{
	position: relative;
}
.pagehead-logomark{
	position: absolute;
	top: 5%;
	left: calc(5% + 2.5%);
	z-index: 1;
	width: 130px;
	height: auto;
}
.pagehead-junkan{
	position: absolute;
	top: 10%;
	left: calc(5% + 5%);
	z-index: 1;
	width: 86%;
	height: auto;
	color: #942530;
	font-size: 3vw;
	font-weight: 500;
	font-family: 'Zen Maru Gothic', serif;
	line-height: 1.35;
}
	@media screen and (max-width: 979px) {
		.pagehead-logomark{
			width: 100px;
		}
	}
	@media screen and (max-width: 767px) {
		.pagehead-logomark{
			width: 62px;
		}
		.pagehead-junkan{
			font-size: 25px;
		}
	}
	@media screen and (max-width: 666px) {
		.pagehead-junkan span{
			display: block;
		}
	}


/* ページヘッド装飾 ------------------*/

.pagehead-midashi{
	font-size: 2.5em;
	font-weight: 500;
	font-family: 'Zen Maru Gothic', serif;
	line-height: 1.3;
	text-align: left;
	letter-spacing: -3px;
}
.pagehead-midashi div.small{
	font-size: .45em;
	letter-spacing: 0;
}

.pagehead-body{
	color: #443424;
	font-size: 1.125em;
	font-weight: 600;
	letter-spacing: 1px;
	margin-top: 2em;
}
.pagehead-body span{
	display: inline-block;
	position: relative;
	margin-bottom: .5em;
	padding: 0 1em .75em 1em;
}
.pagehead-body span:after{
	position: absolute;
	left: 0;
	bottom: 0;
	content: "";
	width: 100%;
	height: 1px;
	background: #443424;
	transform-origin: left top;
	transform: scale(1,1);
}


	@media screen and (max-width: 767px) {
		.pagehead-midashi{
			font-size: 26px;
		}
		.pagehead-midashi span.block{
			display: block;
		}
		.pagehead-body{
			font-size: 16px;
		}
		.pagehead-body span{
			padding: 0 .25em .75em .25em;
		}

	}
	@media screen and (max-width: 374px) {
		.pagehead-body{
			font-size: 14px;
		}

	}

/*===========================

font style/ font size

===========================*/

.midashi{
	font-size: 2.125em;
	letter-spacing: 3px;
	font-weight: 500;
	line-height: 1.2;
}
.komidashi{
	font-size: 1.75em;
	font-weight: 500;
	line-height: 1.2;
}
.komidashi-small{
	font-size: 1.5625em;
	font-weight: 500;
	line-height: 1.2;
}
.bodycopy{
	font-size: 1.25em;
}
.section-copy{
	font-size: 1.125em;
}
.section-copy-small{
	font-size: 1.0625em;
}
.description{
	font-size: 1.125em;
	line-height: 2;
	text-align: center;
}
	@media screen and (max-width: 767px) {
		.midashi{
			font-size: 1.85714285714em;
			/* 26 */
		}
		.komidashi{
			font-size: 1.57142857143em;
			/* 22 */
		}
		.komidashi-small{
			font-size: 1.42857142857em;
			/* 20  */
		}
		.bodycopy{
			font-size: 1.14285714286em;
			/* 16 */
		}
		.section-copy{
			font-size: 1.07142857143em;
			/* 15 */
		}
		.section-copy-small{
			font-size: 1.03571428571em;
			/* 14.5 */
		}
		.description{
			text-align: left;
			font-size: 1rem;
		}

	}

/*囲い小見出し*/
.bgc-komidashi-brown{
	font-size: 1.25em;
	font-weight: 500;
	line-height: 1.4;
	color: #443424;
	background: #e1dfdc;
	padding: .75em 1em;
	margin-bottom: 1em;
}
.bgc-komidashi-grey{
	font-size: 1.25em;
	font-weight: 500;
	line-height: 1.4;
	background: #dcdcda;
	padding: .75em 1em;
	margin-bottom: 1em;
}
.bgc-large-brown{
	font-size: 1.125em;
	line-height: 1.4;
	color: #443424;
	background: #e1dfdc;
	padding: .5em .75em;
	margin-bottom: 1.25em;
}

/*左サイド下ボーダー 線*/
.komidashi-sideline{
	font-size: 1.25em;
	font-weight: 500;
	line-height: 1.4;
	color: #443424;
	padding: .25em 0 .5em 1em;
	border-left: 6px solid #443424;
	border-bottom: 1px solid #443424;
	margin-bottom: 1em;
}
.komidashi-sideline-ao{
	font-size: 1.25em;
	font-weight: 500;
	line-height: 1.4;
	color: #1d538f;
	padding: .25em 0 .5em 1em;
	border-left: 6px solid #1d538f;
	border-bottom: 1px solid #1d538f;
	margin-bottom: 1em;
}
.large-sideline-aka{
	font-size: 1.125em;
	font-weight: 500;
	line-height: 1.4;
	color: #94253f;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #94253f;
	border-bottom: 1px solid #94253f;
	margin-bottom: 1em;
}

/*左サイド　線*/
.komidashi-side-ao{
	font-size: 1.25em;
	font-weight: 500;
	line-height: 1.4;
	color: #1d538f;
	border-left: 6px solid #1d538f;
	margin-bottom: 1em;
	padding-left: 1.25em;
}
.komidashi-side-brown{
	font-size: 1.25em;
	font-weight: 500;
	line-height: 1.4;
	color: #443424;
	border-left: 6px solid;
	margin-bottom: 1em;
	padding-left: 1.25em;
}


.komidashi-em-border{
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.4;
	color: #443424;
	border-bottom: 1px solid;
	padding-bottom: .25em;
	margin-bottom: 1em;
}

	@media screen and (max-width: 767px) {
		.bgc-komidashi-brown{
			font-size: 1.14285714286em;
			padding: .75em;
			/* 16 */
		}
		.komidashi-sideline,
		.komidashi-sideline-ao{
			font-size: 1.14285714286em;
			/* 16 */
		}
	}

.xxx-large{
	font-size: 1.4375em;
}
.xx-large{
	font-size: 1.375em;
}
.x-large{
	font-size: 1.25em;
}
.large{
	font-size: 1.125em;
}
.medium{
	font-size: .9375em;
}
.small{
	font-size: .875em;
}
.xsmall{
	font-size: .75em;
}
	@media screen and (max-width: 767px) {
		.xx-large{
			font-size: 1.35714285714em;
			/*19*/
		}
		.x-large{
			font-size: 1.21428571429em;
			/*17*/
		}
		.large{
			font-size: 1.10714285714em;
			/*15.5*/
		}
		.small{
			font-size: 0.85714285714em;
		}
		.xsmall{
			font-size: 0.78571428571em;
		}

	}

/*===========================

box

===========================*/
.bgbox-white{
	background: #fff;
	padding: 2.5em;
}
.bgbox-white-small{
	background: #fff;
	padding: 1.75em;
}

.bgbox-grey{
	background: #dcdcda;
	padding: 2.5em;
}
.bgbox-grey-small{
	background: #dcdcda;
	padding: 1.75em;
}

.bgbox-aka{
	background: #ecd9dd;
	padding: 2.5em;
}
.bgbox-small-aka{
	background: #ecd9dd;
	padding: 1.75em;
}

.borderbox-small{
	border: 1px solid #b2b4b3;
	padding: 1.75em;
}
.borderbox-small-ao{
	border: 1px solid #1d538f;
	padding: 1.75em;
}
.borderbox-small-aka{
	border: 1px solid #94253f;
	padding: 1.75em;
}
.borderbox-small-brown{
	border: 1px solid #443424;
	padding: 1.75em;
}

.kakumaru{
	border-radius: .5em;
	-moz-border-radius: .5em;
	-webkit-border-radius: .5em;
}
.kakumaru-left{
	border-radius: 1em 0 0 1em;
	-moz-border-radius: 1em 0 0 1em;
	-webkit-border-radius: 1em 0 0 1em;
}
/*===========================

dl

===========================*/
.dl-clm2-txt{
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
}
.dl-clm2-txt dt{
	width: 35%;
}.dl-clm2-txt dd{
	width: 65%;
}
	@media screen and (orientation: portrait) and (max-width: 767px) {
		.dl-clm2-txt dt{
			width: 100%;
		}.dl-clm2-txt dd{
			width: 100%;
		}

	}

/*===========================

link-btn

===========================*/
.linkbtn-black-small{
	display: inline-block;
	text-align: center;
	color: #fff;
	background: #373c39;
	padding: .5em 2.75em;
	border-radius: .5em;
	-moz-border-radius: .5em;
	-webkit-border-radius: .5em;
}
.linkbtn-black-small-arw{
	display: inline-block;
	text-align: center;
	color: #fff;
	background: #373c39;
	padding: .5em 3.25em;
	border-radius: .5em;
	-moz-border-radius: .5em;
	-webkit-border-radius: .5em;
	position: relative;
}
.linkbtn-black-small-arw:after{
	position: absolute;
	top: calc(50% - 1em);
	right: .5em;
	width: 1em;
	height: 1em;
	content: ">";
	font-weight: 500;
	font-family: "M PLUS 1p", sans-serif;
}

/*===========================

サムネイル（ SPスクロール etc... ）

===========================*/
.sp-img-scroll{
	position: relative;
}
.sp-img-scroll .tit{
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	font-size: 1.125em;
	font-weight: bold;
	line-height: 1.2;
	background: #1d538f;
	padding: .5em 1.5em;
	border-radius: 0 10em 10em 0;
}
	@media screen and (orientation: portrait) and (max-width: 767px) {
		.sp-img-scroll{
			overflow-y: hidden;
			border: 1px solid #dedede;
			background: #efefef;
			width: 105.5%;
			line-height: 0;
		}
		.sp-img-scroll-inner{
			min-width: 620px;
			overflow: scroll;
			-webkit-overflow-scrolling: touch;
		}
	}
.img-center-470{
	max-width: 470px;
	width: 100%;
	margin: 0 auto;
}
.img-center-600{
	max-width: 600px;
	width: 100%;
	margin: 0 auto;
}
.img-center-1100{
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
}