@charset "utf-8";
/* CSS Document */


.mainvisual {
	position: relative;
	background-image: url(../images/traffic/bg_traffic_02.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	height: calc(92vh - 120px);
	min-height: 729px;
}

.main_title {
	position: absolute;
	width: 100%;
	max-width: 1280px;
	height: calc(92vh - 120px);
	margin: 0 auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9;
	min-height: 734px;
}

.main_title .ttl {
	position: absolute;
	width: 70%;
	top: 48%;
	bottom: 0;
	left: 5%;
	transform: translate(0, -50%);
}

.mainvisual h2 {
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-style: normal;
	color: #fff;
	line-height: 1.3;
	font-size: clamp(26px, 0.278rem + 5.75vw, 78px);
}

.mainvisual img {
	max-width: 308.5px;
	margin: 0 0 0 1%;
}

.mainvisual p.shadow {
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	font-style: normal;
	color: #fff;
	font-size: clamp(16px, 0.871rem + 0.55vw, 21px);
	font-size: clamp(14px, 0.773vw + 0.694rem, 21px);
	padding: 0px 10px;
	display: inline-block;
	position: relative;
	margin: 0;
	background-color: rgba(255, 255, 255, 0.35);
	box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.35);
}

.mainvisual p.shadow.mt3 {
	margin-top: 3%;
}

.mainvisual p.shadow br.pc_non {
	display: none;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {
	.mainvisual {
		background-image: url(../images/traffic/bg_traffic_sp_02.png);
		height: calc(71vh - 80px);
		min-height: 483px;
	}

	.main_title {
		height: calc(71vh - 80px);
		min-height: 483px;
	}

	.main_title .ttl {
		width: 100%;
		top: 55%;
		left: 4%;
		transform: translate(0, -50%);
	}

	.mainvisual h2 {
		font-family: "Noto Serif JP", serif;
		font-weight: 600;
		font-style: normal;
		color: #fff;
		line-height: 1.3;
		font-size: clamp(26px, 0.278rem + 5.75vw, 78px);
	}

	.mainvisual img {
		max-width: 155px;
		margin: 0 0 0 1%;
	}

	.mainvisual p.shadow {
		width: auto;
		max-width: 92%;
		padding: 0;

	}

	.mainvisual p.shadow br.pc_non {
		display: block;
	}
}


main {}

.bg_01 {
	background-image: url(../images/traffic/bg_02.png);
	background-repeat: no-repeat;
	background-position: center 50%;
	background-size: 100vw auto;
}

.inner {
	width: 92%;
	max-width: 1030px;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
	.bg_01 {
		background-position: center 37%;
	}
}

@media screen and (max-width: 480px) {
	.bg_01 {
		background-position: center 22%;
	}

}


.example {
	text-align: center;
	margin: 8% auto;
}

.example h2 {
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	font-size: clamp(24px, 1.086rem + 1.77vw, 40px);
}

.example p.en {
	color: #231815;
	font-size: clamp(13px, 0.657rem + 0.66vw, 19px);
}

.example .bdr {
	height: 32px;
	width: 1px;
	border-left: 1px solid #231815;
	margin: 2% auto;
}

.example #slide {
	margin: 5% auto 3%;
	width: 100%;
	overflow-x: hidden;
}

.swiper-container {
	padding: 5% 0;
	border-top: 1px solid #cacaca;
	border-bottom: 1px solid #cacaca;
}

.swiper-container .swiper-slide {
	max-width: 342px;
}

.swiper-container .swiper-wrapper {
	transition-timing-function: linear;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {
	.example {
		text-align: center;
		margin: 15% auto 5%;
	}
	
	.example .bdr {
		height: 28px;
	}

	.swiper-container .swiper-slide {
		max-width: 232px;
	}
	
	.swiper-container {
		padding: 10% 0;
	}
}


.reason {
	text-align: center;
	margin: 8% auto 8%;
}

.reason h2 {
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	font-size: clamp(24px, 1.086rem + 1.77vw, 40px);
}

.reason p.en {
	color: #231815;
	font-size: clamp(13px, 0.657rem + 0.66vw, 19px);
}

.reason .bdr {
	height: 32px;
	width: 1px;
	border-left: 1px solid #231815;
	margin: 2% auto;
}

.reason dl {
	width: auto;
	max-width: 670px;
	margin: 3% auto;
	display: flex;
	align-items: center;
}

.reason dl dt {
	width: 18%;
	text-align: left;
}

.reason dl dd {
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	color: #4d2a10;
	font-size: 30px;
	font-size: clamp(15px, 1.657vw + 0.549rem, 30px);
	line-height: 1.2;
	text-align: left;
}

.reason dl dd small {
	font-size: 16px;
	font-size:clamp(8px, 0.884vw + 0.293rem, 16px);
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {
	.reason {
		margin: 15% auto 15%;
	}
	.reason h2 {
		font-size: 22px;
	}
	.reason .bdr {
		height: 28px;
	}
}


.type {
	text-align: center;
	margin: 15% auto;
}

.type .inner {
	width: 96%;
	max-width: 1068px;
}

.type .inner02 {
	width: 96%;
	max-width: 920px;
	margin: 0 auto;
}

.type h2 {
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	font-size: clamp(24px, 1.086rem + 1.77vw, 40px);
}

.type p.en {
	color: #231815;
	font-size: clamp(13px, 0.657rem + 0.66vw, 19px);
}

.type .bdr {
	height: 32px;
	width: 1px;
	border-left: 1px solid #231815;
	margin: 2% auto;
}

.type_flex {
	font-family: "Noto Serif JP", serif;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 5% auto;
}

.type_flex.flex_c {
	justify-content: center;
}

.type_flex .flex_box {
	position: relative;
	width: 340px;
	border: 1px solid #8a7261;
	padding: 40px 20px 20px;
	margin-top: 8%;
}

.type_flex img {
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
}

.type_flex p {
	font-size: 25px;
}

.type_flex ul {
	margin: 10px auto 20px;
	width: 130px;
}

.type_flex ul.w200 {
	width: 200px;
}

.type_flex ul.w275 {
	width: 275px;
}

.type_flex li {
	text-align: left;
}

.type_flex a {
	background: #4d2a10;
	text-align: center;
	display: block;
	width: 211px;
	font-size: 18px;
	color: #fff;
	padding: 5px;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {
	.type {
		margin: 25% auto;
	}
	
	.type .bdr {
		height: 28px;
	}
	
	.type_flex {
		margin: 15% auto;
	}
	
	.type_flex .flex_box {
		margin: 8% auto 8%;
	}
}



.choose {
	text-align: center;
	margin: 8% auto;
}

.choose .inner {
	width: 96%;
	max-width: 1068px;
}

.choose .inner02 {
	width: 96%;
	max-width: 920px;
	margin: 0 auto;
}

.choose h2 {
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	font-size: clamp(24px, 1.086rem + 1.77vw, 40px);
}

.choose p.en {
	color: #231815;
	font-size: clamp(13px, 0.657rem + 0.66vw, 19px);
}

.choose .bdr {
	height: 32px;
	width: 1px;
	border-left: 1px solid #231815;
	margin: 2% auto;
}

.choose_flex {
	font-family: "Noto Serif JP", serif;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 5% auto;
}

.choose_flex.flex_c {
	justify-content: center;
}

.choose_flex .flex_box {
	position: relative;
	width: 340px;
	padding: 20px;
	margin: 1% 0;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.choose_flex .flex_box h3{
	font-size: 25px;
	border-bottom: 1px solid #eadcac;
	padding-bottom: 5px;
}

.choose_flex .flex_box h3.bdr_non{
	border: none;
}

.choose_flex .flex_box.box02 {
	width: 100%;
}

.choose_flex .txt{
	position: relative;
	margin: 10px auto;
	height: 100px;
}

.choose_flex .txt p{
	position: relative;
	font-size: 16px;
	text-align: left;
	line-height: 1.5;
}

.choose_flex .img-box{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
	margin: 20px auto;
}

.choose_flex .img-box p{
	text-align: left;
}

.choose_btn a{
	display: block;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 23px;
	font-size: clamp(1.188rem, 0.442vw + 1.084rem, 1.438rem);
	width: 100%;
	max-width: 578px;
	background: #4d2a10;
	border-radius: 23px;
	color: #fff;
	padding: 5px;
	margin: 8% auto;
}

.choose_btn a img{
	vertical-align: middle;
}

@media screen and (max-width: 768px) {
	.choose_flex{
		justify-content: center;
	}
}

@media screen and (max-width: 480px) {
	.choose {
		margin: 15% auto;
	}
	
	.choose .bdr {
		height: 28px;
	}
	
	.choose_flex {
		margin: 15% auto;
	}
	
	.choose_flex .flex_box {
		margin: 8% auto 8%;
		width: 100%;
	}
	
	.choose_flex .flex_box h3.bdr_non{
		font-size: 23px;
	}
}

#ank01{
	padding-top: 100px;
	margin-top: -100px;
}