@charset "utf-8";
.odekake_hd {
		text-align: center;
		font-family: "Roboto Flex", "Noto Sans JP", sans-serif;
		font-size: 28px;
		line-height: 1.6;
		font-weight: 600;
		margin: 0 0
}
.odekake_figure {
		max-width: 890px;
		margin: 0 auto 80px;
		padding: 0 20px;
}
.mt25 {
		margin-top: 25px !important;
}
.reverse .product_figure.extra {
		width: 310px;
		margin-left: 60px;
		margin-right: 0;
}
@media(max-width: 767px) {
		.reverse .product_figure.extra {
				width: 80%;
				margin: 0 auto;
		}
}
.travel_section {
		position: relative;
		background: #faf6ec;
		max-width: 1920px;
		margin: 500px auto 200px;
}
.travel_section::before, .travel_section::after {
		content: '';
		display: block;
		height: 310px;
		width: 1920px;
		background-repeat: no-repeat;
		background-size: 1920px;
}
.travel_section::before {
		background-image: url("../images/travel_bg-1_pc.png");
		position: absolute;
		top: -310px;
		left: 0;
		background-position: center top;
}
.travel_section::after {
		background-image: url("../images/travel_bg-2_pc.png");
		background-position: center bottom;
		position: absolute;
		bottom: -100px;
		left: 0;
		background-color: #fff
}
@media(max-width: 1920px) {
		.travel_section::before, .travel_section::after {
				left: calc(calc(100vw - 1920px) * 0.5)
		}
}
@media(max-width: 767px) {
		.travel_section::before, .travel_section::after {
				height: 19vw;
				width: 100%;
				background-size: 100%;
		}
		.travel_section::before {
				background-image: url("../images/travel_bg-1_sp.png");
				top: -18.5vw;
		}
		.travel_section::after {
				background-image: url("../images/travel_bg-2_sp.png");
				bottom: -18.5vw;
		}
		.travel_section::before, .travel_section::after {
				left: 0
		}
}
.travel_figure {
		max-width: 945px;
		margin: 0 auto 20px;
}
.travel_section .wrap940 {
		position: relative;
		z-index: 5;
		top: -150px;
}
.tri_flex {
		max-width: 760px;
		margin: 0 auto 40px;
		display: flex;
		align-items: center;
}
.tri_figure {
		width: 325px;
		margin-right: 30px;
}
.tri_caption {
		flex: 1
}
.tri_hd {
		font-size: 28px;
		font-weight: 600;
		margin: 0 0 20px;
}
.tri_caption p {
		text-align: justify;
		line-height: 1.8;
		margin: 0 0 1em
}
@media(max-width: 767px) {
		.travel_section {
				margin: 0 auto 120px;
				margin-top: calc(19vw + 80px);
		}
		.odekake_hd {
				font-size: 20px;
				margin: 0 0 30px;
		}
		.tri_flex {
				display: flex;
				flex-direction: column-reverse;
		}
		.tri_caption {
				margin: 0 0 30px;
		}
		.tri_hd {
				font-size: 20px;
				text-align: center;
		}
		.tri_figure {
				width: 80%;
				margin: 0 auto;
		}
		.travel_section .wrap940 {
				top: -3vw;
		}
}