@charset "utf-8";
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* 81-LYX */
/* clearfix */	
.clearfix:after {content: "";display: block;clear: both;}
/* flex */	
.flex,.flexA,.flexB,.flexC {display: flex;flex-wrap: wrap;}
.flexA {justify-content: space-around;}
.flexB {justify-content: space-between;}
.flexC {justify-content: center;}
/*------------------------------------------------------------
	font
------------------------------------------------------------*/
.serif {
	font-weight: 500;
	font-family: "Noto Serif JP", serif;
}
.forum {
	font-family: "Forum", serif;
}
.noto {
	font-family: "Noto Sans JP", sans-serif;
}
/*------------------------------------------------------------
	content
------------------------------------------------------------*/
.content {
	margin: 0 auto;
	padding: 0 2rem;
	max-width: 109rem;
}
@media all and (max-width: 768px) {
	.content {
		padding: 0 3rem;
		max-width: 100%;
	}
}
/*------------------------------------------------------------
	comBg
------------------------------------------------------------*/
.comBg {
	background: url(../img/common/com_bg.png) repeat-y left top / 100% 105rem;
}
@media all and (max-width: 768px) {
}
/*------------------------------------------------------------
	headLine01
------------------------------------------------------------*/
.headLine01 {
	padding: 3.5rem 0 4rem;
	margin: 0 auto 2.2rem;
	width: 74.9rem;
	text-align: center;
	color: #AA2B40;
	font-size: 3.6rem;
	background: url(../img/common/h_img01.png) no-repeat center top / 75rem,url(../img/common/h_img02.png) no-repeat center bottom / 75rem;
}
.headLine01 .sml {
	font-size: 3rem;
}
@media all and (max-width: 768px) {
	.headLine01 {
		padding: 3rem 0;
		margin-bottom: 3.7rem;
		width: auto;
		font-size: 2.9rem;
		background-size: 60.5rem auto,60.5rem auto;
	}
	.headLine01 .sml {
		font-size: 2.6rem;
	}
}
/*------------------------------------------------------------
	comTtl
------------------------------------------------------------*/
.comTtl {
	width: 100%;
	padding: 0.2rem 0 0.4rem;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	text-align: center;
	font-size: 1.3rem;
	color: #8C6239;
	background: url(../img/common/bg01.png) repeat-y center top / 100% 2.5rem;
}
/*------------------------------------------------------------
	comInfo
------------------------------------------------------------*/
.comInfo .photo {
	width: 52%;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}
.comInfo .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
.comInfo .sub {
	margin: 0 -6.7rem 0 auto;
	position: relative;
	z-index: 3;
	width: 75rem;
}
.comInfo .sub h2 {
	margin: 0 auto 1.2rem;
	text-align: center;
	width: 75.6rem;
}
.comInfo .sub .imgtext {
	margin: 0 auto 5.2rem;
	width: 21rem;
}
.comInfo .sub .imgBox {
	margin: 0 auto 4.9rem;
	width: 61.5rem;
}
.comInfo .sub .imgBox .phoBox {
	margin-top: 1rem;
	width: 28.5rem;
	position: relative;
}
.comInfo .sub .imgBox .txtBox {
	width: calc(100% - 31rem);
}
.comInfo .sub .imgBox .txtBox p {
	margin-bottom: 3.5rem;
	color: #fff;
	line-height: 2.3;
	letter-spacing: 0.01em;
}
.comInfo .sub .imgBox .txtBox p:last-child {
	margin-bottom: 0;
}
.comInfo .sub .btn {
	margin: 0 5rem 0 auto;
	width: 35.3rem;
}
.comInfo .sub .btn a {
	display: block;
}
.comInfo .sub .btn a:hover {
	opacity: 0.7;
}
@media all and (min-width: 769px) {
	.comInfo .sub .imgBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
}
@media all and (max-width: 768px) {
	.comInfo .photo {
		margin: 0 -3rem 3.5rem;
		width: auto;
		position: relative;
	}
	.comInfo .photo img {
		width: 100%;
	}
	.comInfo .sub {
		margin: 0;
		width: auto;
	}
	.comInfo .sub h2 {
		margin: 0 -2rem -1.7rem;
		width: auto;
		text-align: center;
	}
	.comInfo .sub h2 img {
		width: 34.6rem;
	}
	.comInfo .sub .imgtext {
		margin-bottom: 2.2rem;
		width: 14.4rem;
	}
	.comInfo .sub .imgBox {
		margin: 0 1rem 3.5rem;
		width: auto;
	}
	.comInfo .sub .imgBox .phoBox {
		margin: 3.5rem 0 3.3rem;
		width: auto;
	}
	.comInfo .sub .imgBox .phoBox img {
		width: 100%;
	}
	.comInfo .sub .imgBox .txtBox {
		width: auto;
	}
	.comInfo .sub .imgBox .txtBox p {
		margin-bottom: 0;
		font-size: 1.5rem;
		letter-spacing: 0.05em;
	}
	.comInfo .sub .btn {
		padding-left: 0.5rem;
		margin: 0 auto;
		width: 32.2rem;
	}
}
/*------------------------------------------------------------
	comBtnList
------------------------------------------------------------*/
.comBtnList {
	margin-bottom: 5.2rem;
}
.comBtnList li {
	width: 49%;
}
.comBtnList .ttl {
	margin: 0 auto 1.4rem;
	width: 44.6rem;
}
.comBtnList .imgtxt {
	margin: 0 auto 3rem;
	width: 26.8rem;
}
.comBtnList .btn {
	padding-left: 1rem;
	margin: 0 auto;
	width: 36.3rem;
}
.comBtnList .li01 .btn {
	padding: 0 1rem 0 0;
}
.comBtnList .btn a {
	display: block;
}
.comBtnList .btn a:hover {
	opacity: 0.7;
}
@media all and (max-width: 768px) {
	.comBtnList {
		margin-bottom: 5.2rem;
		display: block;
	}
	.comBtnList li {
		margin-bottom: 1.5rem;
		width: auto;
	}
	.comBtnList li:last-child {
		margin-bottom: 0;
	}
	.comBtnList .ttl {
		margin-bottom: -1rem;
		width: 28rem;
	}
	.comBtnList .imgtxt {
		margin: 0 auto 1.3rem;
		width: 18.4rem;
	}
	.comBtnList .btn {
		width: 33rem;
	}
	.comBtnList .li01 .btn {
		padding: 0 0 0 1rem;
	}
	.comBtnList .li01 .ttl {
		width: 26.2rem;
	}
}
/*------------------------------------------------------------
	fadeInUp
------------------------------------------------------------*/
.fadeInUp {
	opacity: 0;
	transform: translate(0,4rem);
	-webkit-transition: all 1s;
	transition: all 1s;
}
.fadeInUp.on {
	opacity: 1;
	transform: translate(0,0);
}
@media all and (min-width: 769px) {
	.delay01 {
		transition-delay: .3s;
	}
}
/*------------------------------------------------------------
	fadeLeft
------------------------------------------------------------*/
.fadeLeft {
    opacity: 0;
    transform: translateX(-2rem);
    transition: all 1s ease-out;
}
.fadeLeft.on {
    opacity: 1;
    transform: translateX(0);
}
@media all and (max-width: 768px) {
}
/*------------------------------------------------------------
	fadeTxt
------------------------------------------------------------*/
.fadeTxt {
	opacity: 0;
    transition: all 1.5s;
}
.fadeTxt.on {
	opacity: 1;
}
@media all and (max-width: 768px) {
}