@charset "utf-8";
/* CSS Document */
.txt-vertical {
    letter-spacing: 0.4em;
}
.cate1{
	position: relative;
}
.cate1 .box_wrap1 .topbox {
	justify-content: space-between;
}
.cate1 .box_wrap1 .topbox .txtbox h2{
	padding: 40px 60px;
	border: #847D5F solid 1px;
	line-height: 2.5;
}
.cate1 .box_wrap1 .topbox .txtbox{
	margin-bottom: auto;
}
.cate1 .box_wrap1 .topbox .imgbox{
	margin-top: 100px;
	width: 50%;
}
.cate1 .box_wrap1 .bottombox {
	justify-content: space-around;
}
.cate1 .box_wrap1 .bottombox .txtbox{
	width: 55%;
	margin-bottom: auto;
	margin-top: 40px;
}
.cate1 .box_wrap1 .bottombox .imgbox{
	width: 20%;
	margin-bottom: auto;
}
.cate1 .box_wrap2{
	gap: 50px;
}
.cate1 .box_wrap2 .boxitem{
	width: calc(50% - 25px);
	gap: 30px;
}
.cate1 .box_wrap2 .boxitem .imgbox{
	width: calc(30% - 15px);
}
.cate1 .box_wrap2 .boxitem .imgbox img{
	border-radius: 50%;
}
.cate1 .box_wrap2 .boxitem .txtbox{
	width: calc(70% - 15px);
}
.cate1 .box_wrap3 .more{
	justify-content: flex-start;
}
.cate1 .box_wrap3 .boxitem{
	width: 100%;
	gap: 60px;
}
.cate1 .box_wrap3 .boxitem .imgbox{
	width: calc(40% - 30px);
}
.cate1 .box_wrap3 .boxitem .txtbox{
	width: calc(60% - 30px);
}
/* ---------- cate2 ---------- */
.cate2 .box_wrap .boxitem{
	justify-content: space-around;
	gap: 100px;
	border-bottom: 1px solid rgba(112, 94, 54, 0.5);
	padding-bottom: 20px;
	padding-top: 50px;
}
.cate2 .box_wrap .boxitem:nth-child(even) {
  display: flex;
  flex-direction: row-reverse;
}
.cate2 .box_wrap .boxitem .txtbox{
	width: calc(50% - 50px);
	justify-content: flex-start;
}
.cate2 .box_wrap .boxitem .imgbox{
	width: calc(40% - 50px);
}
.cate2 .box_wrap .boxitem .txtbox .number{
	font-family: "EB Garamond",  sans-serif;
	font-size: 38px;
	color: #847D5F;
	letter-spacing: 0.2em;
	font-weight:500;
	padding-right: 15px;
}
.cate2 .box_wrap .boxitem .txtbox .titlebox{
	justify-content: flex-start;
}
/* ---------- cate3 ---------- */
.cate3 .box_wrap{
	gap: 60px;
}
.cate3 .box_wrap .boxitem{
	gap: 50px;
}
.cate3 .box_wrap .boxitem .imgbox{
	width: calc(50% - 25px);
}
.cate3 .box_wrap .boxitem .txtbox{
	width: calc(50% - 25px);
	gap: 30px;
	flex-direction: column;
	align-items: flex-start;
}
.map-bt{
	justify-content: flex-start;
}
.map-bt a {
    --line: #857E60;
    --stroke: 1px;
    --inset: 8px;
    --tick: 42px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 48px;
    min-width: 260px;
    color: #FDF7E7;
    text-decoration: none;
    background:
        linear-gradient(var(--line), var(--line)) top center / calc(100% - 2*var(--inset)) var(--stroke) no-repeat,
        linear-gradient(var(--line), var(--line)) bottom center / calc(100% - 2*var(--inset)) var(--stroke) no-repeat,
        linear-gradient(var(--line), var(--line)) left  center / var(--stroke) var(--tick) no-repeat,
        linear-gradient(var(--line), var(--line)) right center / var(--stroke) var(--tick) no-repeat;
    border: none; 
    overflow: hidden;
    transition: background-size .35s ease, opacity .2s ease;
}
.map-bt a:hover {
    background-size:
        calc(100% - 2 * (var(--inset) + 8px)) var(--stroke),
        calc(100% - 2 * (var(--inset) + 8px)) var(--stroke),
        var(--stroke) calc(var(--tick) - 14px),
        var(--stroke) calc(var(--tick) - 14px);
}


/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){

}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.cate1 .box_wrap1 .topbox {
		flex-direction: column-reverse;
	}
	.cate1 .box_wrap1 .topbox .txtbox{
		margin-top: 30px;
	}
	.cate1 .box_wrap1 .topbox .imgbox{
		margin-top: 0px;
		width: 80%;
	}
	.cate1 .box_wrap1 .bottombox {
		flex-direction: column-reverse;
	}
	.cate1 .box_wrap1 .bottombox .txtbox{
		width: 100%;
	}
	.cate1 .box_wrap1 .bottombox .txtbox .more1 {
		justify-content: flex-start;
	}
	.cate1 .box_wrap1 .bottombox .imgbox{
		width: 40%;
		margin-left: auto;
	}
	.cate1 .box_wrap2 {
		flex-direction: column;
	}
	.cate1 .box_wrap2 .boxitem{
		width: 100%;
	}
	.cate1 .box_wrap1 .topbox .txtbox h2 {
		padding: 30px 30px;
	}
	.cate2 .box_wrap .boxitem{
		gap: 20px;
	}
	.cate2 .box_wrap .boxitem .txtbox{
		width: calc(70% - 10px);
		justify-content: flex-start;
	}
	.cate2 .box_wrap .boxitem .imgbox{
		width: calc(30% - 10px);
	}
	.cate2 .box_wrap .boxitem .txtbox .number {
		font-family: "EB Garamond", sans-serif;
		font-size: 26px;
		color: #847D5F;
		letter-spacing: 0.2em;
		font-weight: 500;
		padding-right: 15px;
	}
	.cate3 .box_wrap .boxitem {
		flex-direction: column;
	}
	.cate3 .box_wrap .boxitem .imgbox {
		width: 80%;
	}
	.cate3 .box_wrap .boxitem .txtbox {
		width: 100%;
	}
	.map-bt a {
		min-width: 180px;
		padding: 14px 30px;
	}

}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.cate1 .box_wrap3 .boxitem{
		flex-direction: column-reverse;
	}
	.cate1 .box_wrap3 .boxitem .txtbox {
		width: 100%;
	}
	.cate1 .box_wrap3 .boxitem .imgbox {
		width: 80%;
	}
	.map-bt {
		width: 100%;
		justify-content: center;
	}

}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
    .cate1 .box_wrap2 .boxitem {
        flex-direction: column;
    }
	.cate1 .box_wrap2 .boxitem .imgbox {
		width: 60%;
	}
	.cate1 .box_wrap2 .boxitem .txtbox {
		width: 100%;
	}
	.cate1 .box_wrap2 .boxitem .txtbox p,
	.cate1 .box_wrap2 .boxitem .txtbox h3{
		text-align:center; 
	}
	.cate1 .box_wrap2 .boxitem .txtbox p span{
		display: inline-block;
	}
	.cate1 .box_wrap1 .topbox .txtbox h2 {
		line-height: 1.5;
	}
    .cate1 .box_wrap1 .topbox .imgbox {
        width: 90%;
    }
	.cate1 .box_wrap3 .boxitem {
		gap: 30px;
	}
    .cate1 .box_wrap3 .boxitem .imgbox {
        width: 90%;
    }
    .cate2 .box_wrap .boxitem {
        flex-direction: column-reverse;
		padding-top: 30px;
    }
	.cate2 .box_wrap .boxitem:nth-child(even){
		flex-direction: column-reverse;
	}
	.cate2 .box_wrap .boxitem .txtbox{
		width: 100%;
		justify-content: flex-start;
	}
	.cate2 .box_wrap .boxitem .imgbox{
		width: 50%;
	}
	.cate3 .box_wrap .boxitem .imgbox {
		width: 90%;
	}
	.map-bt a {
        min-width: 180px;
        padding: 10px 22px;
    }
	.map-bt a {
		--inset: 9px;
		--tick: 36px;
	}

}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}