/*
 * 新そばセットページ専用の差分スタイル
 * 共通のレイアウト、余白、見出しは既存テーマのクラスを使用しています。
 */


#hero h2 {
    font-size: var(--f40px);
    background: #fff;
    width: fit-content;
    max-width: 90%;
    margin-top: -1.5em;
    position: relative;
    padding: 0.5em 1em 0 0;
}
#hero .disc {
    font-size: var(--f20px);
    padding-left: 5%;
    line-height: 2.5;
}
.ecclm {
    display: flex;
    justify-content: center;
    gap: min(30px,2%);
    text-align: center;
}
.ecclm__item {
    background: #FBF8F2;
    padding: 40px min(5%, 70px);
	width: max(30%,280px);
}
.ecclm__item .icon {
    margin-bottom: 20px;
	aspect-ratio: 160 / 100;
    width: 100%;
}
.ecclm__item .icon img{
    width: 100%;
	height: 100%;
	object-fit: contain;
}
.ecclm__item .txt span {
    color: #9B0707;
	font-weight: bold;
	font-size: 1.5em;
	line-height: 1;
	margin-top: 10px;
	display: inline-block;
}
.ecclm__item .txt span.small {
	font-size: 0.75em;
}

#aboutSet {
	padding: calc(var(--h_height) + 45px) var(--side) 45px;
	background: #FBF8F2;
}
h2{
	text-align: center;
	font-size: var(--f40px);
	margin-bottom: 0;
}
h2 + p{
	text-align: center;
	font-size: var(--f26px);
	margin-top: 0;
}
.set{
	background-color: #fff;
	padding: 50px min(45px,5%);
}
.set__item{
	display: flex;
	gap: 50px;
}
.set__item .img{
	width: min(390px,45%);
}
.set__item .img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.set__item .txt{
	display: flex;
	flex-direction: column;
}
.set__item h3{
	color:#87642C;
	font-size: var(--f32px);
	margin: 0;
	font-weight: bold;
	line-height: 1.3;
}
.set__item h3+p{
	color:#87642C;
	font-size: var(--f26px);
	margin: 0 0 30px;
}
.set__item ul{
	list-style-type: "●";
	flex-grow: 1;
	margin-bottom: 20px;
}
.set__item li{
	text-indent: 5px;
}
.set__item li::marker{
	color:#87642C;
}
.set__item .price{
	border-top:solid 1px #E3D1B3;
	border-bottom:solid 1px #E3D1B3;
	font-weight: bold;
	font-size: var(--f40px);
	text-align: right;
	padding: 10px 0;
	margin: 0;
	justify-self: end;
}
.set__item .price span.unit{
	font-size: 0.75em;
}
.set__item .price span{
	font-size: var(--f22px);
}
.set__cart{
	text-align: center;
}
input.btn01 {
    background: #87642C;
    font-size: var(--f22px);
    width: min(80%, 400px);
	cursor: pointer;
}
input.btn01:hover{
	background: #5b4014;
}
.attention{
	display: flex;
    justify-content: center;
	align-items: baseline;
    gap: 5px;
    margin: 30px 0;
}
.attention::before{
	content: "!";
	background: #4B4B4B;
	color: #fff;
	border-radius: 3em;
	font-size: 1.2em;
	width: 1.5em;
	height: 1.5em;
	margin-right: 5px;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.attention p{
	margin: 0;
}

#howto{
	padding: 45px 0;
}
#howto .wrap {
    width: min(100%, 700px);
    margin: 0 auto;
}
#howto .wrap > p{
	font-size: var(--f20px);
}
#howto .wrap h3{
	font-size: var(--f26px);
	margin: 0;
}
#howto hr{
	border: solid 1px #E3D1B3;
    border-width: 1px 0 0 0;
}
.howtoClm {
    display: flex;
    gap: 5%;
    margin: 30px 0;
}
.howtoClm .img {
    width: min(275px,40%);
	flex-shrink: 0;
}
.howtoClm .img img {
    width: 100%;
	height: 100%;
	object-fit: cover;
}

#order {
	padding: calc(var(--h_height) + 45px) var(--side) 45px;
	background: #FBF8F2;
}
#order .ecclm__item {
	background: #fff;
}
#order dl {
    display: flex;
    gap: 1em;
    border-bottom: solid 1px #E3D1B3;
    padding: 20px 1em;
	font-size: var(--f20px);
	margin: 0;
}
#order dl:first-of-type{
    border-top: solid 1px #E3D1B3;
}
#order dt {
    width: 8em;
	flex-shrink: 0;
}
#order dd {
    margin: 0;
}

#contact{
	padding: 45px 3%;
	border: solid 1px;
    margin: 70px 0;
}
#contact h2+p{
	font-size: var(--f20px);
}
#contact p.num {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1.2;
}
#contact p.num span.font_en {
    font-size: var(--f60px);
    font-weight: bold;
}
#contact p.num +p{
	text-align: center;
	font-size: var(--f20px);
}

@media (max-width:768px){
	#hero .disc,
	#howto .wrap > p,
	#order dl,
	#contact h2+p,
	#contact p.num +p {
		font-size: var(--f16px);
		padding-left: 0;
	}
	#howto .wrap h3,
	h2 + p {
		font-size: var(--f22px);
	}
	.set__item {
		gap: 30px;
		flex-direction: column;
	}
	.set__item h3+p {
		margin: 0;
	}
	.set__item .img {
		width: 100%;
	}
}
@media (max-width: 540px){
	#hero h2{
		font-size: var(--f26px);
	}
	.ecclm__item .icon {
		margin-bottom: 10px;
	}
	.ecclm .txt {
		font-size: var(--f10px);
	}
	.ecclm__item {
		padding: 20px 3px;
	}
	.ecclm__item .txt span {
		margin-top: 0;
	}
	#aboutSet,#howto,#order {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.howtoClm {
		gap: 10px;
		flex-direction: column;
	}
	.howtoClm .img {
		width: 100%;
	}
	#order dt {
		width: 6em;
	}


}