@charset "utf-8";

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

全サイズ

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



/*
--------------------------------*/
.lower_ttl02.-color02 {
	background: #e7dcd5;
}
.lower_ttl03_h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 20px;
}
.lower_ttl03_h3_icon01,
.lower_ttl03_h3_icon02 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	padding-bottom: 0.02em;
	border-radius: 50%;
	font-size: 22px;
	color: #fff;
}
.lower_ttl03_h3_icon01 {
	background: #bb7f20;
}
.lower_ttl03_h3_icon02 {
	background: #bf5746;
}

.lower_flex01.-type02 {
	flex-direction: row;
	flex-wrap: nowrap;
}
.lower_flex01_txt.-bg01 {
	width: 100%;
	padding: 30px;
	background: #fff;
}

.mouthpiece_table01 {
	width: 100%;
}
.mouthpiece_table01 th {
	padding: 4px 0;
	font-size: clamp(19px, 20 / 524 * 100vw, 22px);
	color: #39a1db;
	font-weight: 600;
	text-align: left;
	line-height: 2;
	vertical-align: middle;
}
.mouthpiece_table01 td {
	padding: 4px 0;
	font-size: clamp(16px, 20 / 1024 * 100vw, 18px);
	color: #5a2d00;
	font-weight: 600;
	text-align: right;
	line-height: 2;
	vertical-align: middle;
}

.mouthpiece_text01 {
	padding: 6px 10px;
	background: #e7dcd5;
	font-size: 16px;
	text-align: center;
	line-height: 2;
	font-weight: 500;
	color: #5a2d00;
}
.mouthpiece_text02 {
	font-size: clamp(22px, 20 / 1024 * 100vw, 26px);
	font-weight: bold;
}
.mouthpiece_text03 {
	font-size: clamp(19px, 20 / 1024 * 100vw, 22px);
	font-weight: bold;
	line-height: 1.66;
}

/*flex box
--------------------------------*/
.mouthpiece_flex01 {
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 30px;
	max-width: 94%;
	margin: auto;
}
.mouthpiece_flex01_item {
	width: calc(100%/3 - 30px*2/3);
	border: 1px solid #5a2d00;
	background-color: #fff;
}
.mouthpiece_flex01_item .brown_ttl {
	padding: 20px 0;
}
.mouthpiece_flex01_item img {
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 1900px) {}
@media (min-width: 897px) {}

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

TABLET〜PC表示(897px〜1660pxまで)

================================*/
@media screen and (max-width: 1660px) {}
@media screen and (max-width: 1440px) {}
@media screen and (max-width: 1200px) {
	.mouthpiece_flex01 {
		gap: 30px 10px;
	}
	.mouthpiece_flex01_item {
		width: calc(100%/3 - 10px*2/3);
	}
}
@media screen and (max-width: 1023px) {}

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

SP〜TABLET表示(〜896pxまで)

================================*/
@media (max-width: 896px) {



	/*
	--------------------------------*/
	.lower_ttl02.-color02 {}
	.lower_ttl03_h3 {}
	.lower_ttl03_h3_icon01,
	.lower_ttl03_h3_icon02 {}
	.lower_ttl03_h3_icon01 {}
	.lower_ttl03_h3_icon02 {}

	.lower_flex01_txt.-bg01 {}

	.mouthpiece_table01 {}
	.mouthpiece_table01 th {}
	.mouthpiece_table01 td {}

	.mouthpiece_text01 {}
	.mouthpiece_text02 {}
	.mouthpiece_text03 {}

	/*flex box
	--------------------------------*/
	.mouthpiece_flex01 {}
	.mouthpiece_flex01_item {}
	.mouthpiece_flex01_item .brown_ttl {}
	.mouthpiece_flex01_item img {}
	
}

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

TABLET表示のみ(481px〜1385pxまで)

================================*/
@media (min-width: 481px) and (max-width: 1385px) {}

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

TABLET表示のみ(481px〜880pxまで)

================================*/
@media (min-width: 481px) and (max-width: 880px) {}

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

TABLET表示のみ(481px〜768pxまで)

================================ */
@media (min-width: 481px) and (max-width: 768px) {}


/*=======================
スマホ縦表示（0〜480pxまで）
=======================*/
@media (max-width: 480px) {

	/*
	--------------------------------*/
	.lower_ttl02.-color02 {}
	.lower_ttl03_h3 {}
	.lower_ttl03_h3_icon01,
	.lower_ttl03_h3_icon02 {
		width: 44px;
		height: 44px;
		font-size: 16px;
	}
	.lower_ttl03_h3_icon01 {}
	.lower_ttl03_h3_icon02 {}


	.lower_flex01.-type02 {
		flex-direction: column;
		flex-wrap: wrap;
	}
	.lower_flex01_txt.-bg01 {
		padding: 16px;
	}

	.mouthpiece_table01 {}
	.mouthpiece_table01 th {
		display: block;
		width: 100%;
	}
	.mouthpiece_table01 td {
		display: block;
		width: 100%;
	}

	.mouthpiece_text01 {}
	.mouthpiece_text02 {}
	.mouthpiece_text03 {}

	/*flex box
	--------------------------------*/
	.mouthpiece_flex01 {}
	.mouthpiece_flex01_item {
		width: 100%;
	}
	.mouthpiece_flex01_item .brown_ttl {}
	.mouthpiece_flex01_item img {}
	
	
}


@media (max-width: 374px) {}