@charset "utf-8";
/* CSS Document */
/*=============================
	header
================================================================*/
#header{
	border-top: 15px solid #FFCC00;
	height: 80px;
	width: 100%;
	position: fixed;
	z-index: 50;
	display: flex;
	justify-content:space-between;
	transition: .6s;
	top: 0;
	left: 0;
}
#header .hlogo{
	width: 25%;
	max-width: 280px;
	min-width: 180px;
	margin-top: -15px;
	transition: .6s;
}
#header .hlogo img{
	width: 100%;
	object-fit: contain;
	transition: .3s;
	object-position: left;
}

.m1{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
	padding-right: 20px;
}
.pcnav ul{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
}
.pcnav li{
	padding: 0 10px;
}
.pcnav li a{
	height: 100%;
	display: block;
	font-weight: 600;
	
}
.pcnav li a:hover{
	color: #c1272d;
}
.order{
	margin-left: 15px;
}


.order a{
    display:block;
    color:#fff;
    padding: 5px 20px;
    border-radius:30px;
    text-decoration: none;
    outline: none;
    background: linear-gradient(270deg, #c1272d 0%, #9b1b2b 25%, #e25a64 51%, #c1272d 100%);
    background-position: 1% 50%;
    background-size: 200% auto;
    transition: all 0.3s ease-out;
	height: clamp(2.5rem, -1.136rem + 5.68vw, 3.125rem);
	line-height: clamp(2.5rem, -1.136rem + 5.68vw, 3.125rem);
	max-width: 210px;
}
.order a:hover {
    color: #fff;
    background-position: 99% 50%;
}

#header.change{
	background: rgba(255,255,255,.6);
	transition: .6s;
}

#header.change .hlogo img{
	height: 120%;
	object-position: left;
	transition:all .6s  ease;
}

.sns-pc{
	position: fixed;
	top: 100px;
	right: 0;
	background: #ffc000; -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	z-index: 40;
	border-radius: 10px 0 0 10px;
	transition: .4s;
}
.sns-pc a{
	color: #fff;
	padding: 12px 5px;
	display: block;
	
}
.sns-pc:hover{
	background: #E78800;
	transition: .4s;
}

@media(max-width:1023px){
	.m1,
	.sns-pc{
		display: none;
	}
}
@media(max-width:499px){
	#header{
		height: 60px;
	}
}


/*=============================
	MobileNav
================================================================*/
.m2{
	display: flex;
	justify-content: flex-end;
	gap:15px;
}
@media(min-width:1024px){
	.m2{
		display: none;
	}
}
.sns{
	position: relative;
	width: 50px;
	height: 50px;
	background: #ffc000;
	border-radius: 50%;
	margin: 8px 0;
	margin-right: 2vw;
	z-index: 4;	
	font-size: 2rem;
	
}
.sns a{
	width: 100%;
	height: 100%;	
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.openbtn{
	position: relative;
	cursor: pointer;
    width: 50px;
    height:50px;
	border-radius: 50%;
	background: #ffc000;
	margin: 8px 0;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 25%;
    height: 2px;
    border-radius: 5px;
	background: #c1272d;
  	width: 50%;
  }


.openbtn span:nth-of-type(1) {
	top:15%;	
}

.openbtn span:nth-of-type(2) {
	top:30%;
}

.openbtn span:nth-of-type(3) {
	top:45%;
}

.openbtn span:nth-of-type(3)::after {
	content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
	position: absolute;
	top:5px;
	left:-4px;
	color: #c1272d;
	font-size: 0.7rem;
	text-transform: uppercase;
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/

.openbtn.active span:nth-of-type(1) {
    transform: translateY(6px) rotate(-45deg);
	top: 11px;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    transform: translateY(-6px) rotate(45deg);
}

.openbtn.active span:nth-of-type(3)::after {
	content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
	top:6px;
	left:9px;
}

.sp_order{
	position: relative;
	width: 50px;
	height: 50px;
	background: #c1272d;
	border-radius: 50%;
	margin: 8px 0;
	/*margin-right: 2vw;*/
	z-index: 4;
}
.sp_order a{
	display: block;
	width: 100%;
	height: 100%;	
}
.sp_order img{
	width: 65%;
	height: 65%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 4;
}



@media(max-width:499px){
	.openbtn{
    	width: 40px;
    	height:40px;
		margin: 3px 0;
	}
	.openbtn span:nth-of-type(3)::after {
		font-size: 0.5rem;
	}
	.sp_order{
		width: 40px;
		height: 40px;
		margin: 3px 0;
	}	
	.sns{
		position: relative;
		width: 40px;
		height: 40px;
		margin: 3px 0;
		font-size: 1.5rem;
		margin-right: 2vw;

	}	
	.openbtn.active span:nth-of-type(1) {
		transform: translateY(6px) rotate(-45deg);
		top: 8px;
	}


	.openbtn.active span:nth-of-type(3){
		top: 20px;
	}

	.openbtn.active span:nth-of-type(3)::after {
		content:"Close";/*3つ目の要素のafterにClose表示を指定*/
		transform: translateY(0) rotate(-45deg);
		top:6px;
		left:9px;
	}	
}


/*spnav list*/
#gnav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 40;
	top:-160%;
    left:0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	transition: all 0.6s;
	background: linear-gradient(to bottom,#f7931e,#ffc000);
}
#gnav::before{
	position: absolute;
	content: "";
	background: url("../img/bg_mask.png");
	 mix-blend-mode: overlay;
	opacity: .2;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 0
}


/*アクティブクラスがついたら位置を0に*/
#gnav.panelactive{
    top: 0;
}

/*ナビゲーションの縦スクロール*/
#gnav.panelactive #gnav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#gnav ul {
	width: 90%;
	max-width: 400px;
	margin: 100px auto 30px;
	background: #ffffff99;
	padding:30px 20px;
	border-radius: 20px;
	
}

/*リストのレイアウト設定*/

#gnav li{
	list-style: none;
    border-bottom: 1px dotted #333;
}

#gnav li a{
	color: #333;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
	padding-left: 2rem;
}
#gnav .order {
	text-align: center;
	margin-left: 0;
	margin-bottom: 15px;
}
#gnav .order a{
	margin: auto;
	width: 80%;
	max-width: 350px;
	height: 60px;
	text-align: center;
}

.sptel p a{
	display: block;
	border: 1px solid #fff;
	font-size: 1.5rem;
	padding: .5rem;
	width: 80%;
	max-width: 350px;
	margin: 0 auto 15px;
	text-align: center;
	border-radius: 30px;
	color: #fff;	
	background: #ffc000;
}


/*=============================
	Footer
================================================================*/
footer{
	padding: clamp(30px,3vw,40px) 0;
	background: #ffc000;
}

.flogo{
	width: 30%;
	max-width: 200px;
	margin: 0 auto 20px;
}
.f_info{
	width: 65%;
}

.copy{
	background: #c1272d;
	color: #fff;
	padding: 5px 0;
	font-size: 13px;
	text-align: center
}

@media(max-width:599px){
	.flogo{
		width: 90%;
	}
	.f_info{
		width: 90%;
	}
}

/*=============================
	FV
================================================================*/
#fv{
	width: 90vw;
	aspect-ratio: 4 / 3;
	max-height:100vh;
	padding-top: 85px;
	margin: auto;
	position: relative;
}

.fv_slider {
  	position:relative;
	z-index: 1;
	width: 90vw;
	aspect-ratio: 4 / 3;
	max-height: calc(100vh - 85px);
	bottom: 0;
	border-radius: 50px;
}
/*　背景画像設定　*/

.slider-item01 {
    background:url(../img/img_01.jpg);
}

.slider-item02 {
    background:url(../img/img_03.jpg);
}

.slider-item03 {
    background:url(../img/img_02.jpg);
}

.slider-item {
	width: 90vw;
	aspect-ratio: 4 / 3;
	max-height: calc(100vh - 85px);
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
	border-radius: 50px;
	
}
.slider-item02{
	background-position: center right;
}
.catch{
	position: absolute;
	width: 60%;
	max-width: 750px;
	height: 40vh;
	content: '';
	top: 50%;
	left: 3vw;
	transform: translateY(-50%);
	z-index: 3;
}
.foot_layout{
	display: flex;
	justify-content: flex-end;
	font-size: 14px;
}
.foot_layout a{
	padding: 20px 15px 0;
}

@media(max-width:499px){
	#fv{
		padding-top: 65px;
	}
	.fv_slider,
	.slider-item {
		max-height: calc(100vh - 65px);
		border-radius: 30px;
	}
}
@media(max-width:400px){
	.foot_layout{
		margin-top: 15px;
		flex-direction: column;
	}
	.foot_layout a{
		padding: 10px 15px 0;
	}	
}
/*=============================
	index
================================================================*/
#top-about::before{
	position: absolute;
	top: -20px;
	left: 5vw;
	content: "";
	width: 20vw;
	height: 35vw;
	background: url("../img/illust01.png")no-repeat left top/contain;
	z-index: 0;
}

.ta_ttl{
	font-size: clamp(1.8rem, 1.244rem + 2.34vw, 3rem);
	color: #ffc000;
	text-shadow: 2px 2px 4px #888;
}
#top-about h3{
	font-size: clamp(1.4rem, 1.215rem + 0.78vw, 1.8rem);
}
.ta_txt{
	text-align: center;
	font-size: clamp(18px,2.2vw,22px);
}

@media(max-width:629px){
	.ta_txt{
		text-align: left;
	}
	.ta_txt br{
		display: none;
	}
}


#amuleia{
	background: linear-gradient(to bottom,#f7931e,#ffc000);
}
#amuleia::before{
	position: absolute;
	content: "";
	background: url("../img/bg_mask.png");
	 mix-blend-mode: overlay;
	opacity: .2;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#amuleia .am_ttl{
	width: 80%;
	max-width: 600px;
	margin: 0 auto 30px;
}
.amuleia_wrap{
	position: relative;
	border-radius: 30px;
	padding: 3vw 5vw;
	background: rgba(255,255,255,.8);
}
.amu_mark{
	position: absolute;
	content: '';
	width:clamp(90px, 25vw, 200px);
	height:clamp(90px, 25vw, 200px);
	top: -3vw;
	right: -2vw;
	
}
.amu_txtbox{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 15px;
}

.amu_txtbox .txtwrap{
	width: 50%;
}
.amu_sbttl{
	margin-bottom: 20px;
}

.amu_txtbox .imgwrap{
	width: 40%;
}
.hr{
	padding: 15px;
	border-top: 3px dashed #ffc000;
		
}

@media(max-width:710px){
	.amuleia_wrap h3.t_center{
		text-align: left!important;
	}
	.amu_txtbox{
		flex-direction: column;
	}
	.amu_txtbox .txtwrap{
		width: 100%;
		margin-bottom: 30px;
	}
	.amu_txtbox .imgwrap{
		width: 80%;
		margin: 0 auto;
	}
}
@media(max-width:539px){
	.amu_mark{
		top: -16vw;

	}		
}

/*TOP item*/
#top-about,
#top_item{
	width: 100%;
	overflow: hidden;
}
#top-about::after,
#top_item::before,
#top_item::after{
	position: absolute;
	z-index: 0;
	content: '';
	width: 40vw;
	height: 30vw;
	background: url("../img/illust02.png")no-repeat;
	background-size: contain;
}
#top_item::before{
	top: 20%;
	left: -3vw;
}

#top-about::after,
#top_item::after{
	bottom: 0;
	right: -3vw;
	background-position: left bottom;	
	transform: scale(-1,1)
}
.t_item{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 960px;
	margin: auto;
	gap:15px;
}
.t_item li {
	aspect-ratio: 1 / 1;
	background: #ffc000;
	position: relative;
	z-index: 3;
	overflow: hidden;
}
.t_item li a{
	display: block;
	width: 100%;
	height: 100%;
}
.t_item li img{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	transition: .4s;
}
.t_item li.title::before,
.t_item li a::before{
	position: absolute;
	content: '';
	width: 98%;
	height: 98%;
	top: 1%;
	left: 1%;
	z-index: 3;
}
.t_item li.title::before{
	background:url("../img/btn/btn_frame02.png")no-repeat center/cover;
}

.t_item li.item a::before{
	background: url("../img/btn/btn_frame01.png")no-repeat center/cover;
}

.t_item li.title{
		  -ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	color: #c1272d;
	font-size: clamp(2rem, 0.818rem + 2.91vw, 3rem);
	text-align: center;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	order: 3
}
.item._01{ order: 1}
.item._02{ order: 2}
.item._03{ order: 4}
.item._04{ order: 5}
.item._05{ order: 6}


.t_item li.item:hover img{
	transform: scale(1.1);
	transition: .4s;
}
.obi{
	position: absolute;
	content: '';
	z-index: 1;
	height: 30%;
	width: 100%;
	background: #ffc00099;
	color: #c1272d;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 0;
	left: 0;
	font-size: clamp(1.4rem, 0.927rem + 1.16vw, 1.8rem);
	text-shadow: 0 0 2px #FF9600;
	font-weight: 600;
}

.link_wrap ul{
	display: flex;
	justify-content: space-between;
}
.link_wrap li{
	position: relative;
	width: 48%;
	aspect-ratio: 677 / 225;
	overflow: hidden;
}
.link_wrap li a{
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: clamp(1.6rem, 0.773rem + 2.04vw, 2.3rem);
	text-decoration: none;
	
}
.link_wrap li a::before,
.link_wrap li a::after{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
}
.link_wrap li a::before{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.4);
	transition: .4s;
	z-index: 3;
}
.link_wrap li a::after{
	width: 98%;
	height: 98%;
	top: 1%;
	left: 1%;
	background: url(../img/btn/btn_frame03.png)no-repeat center/cover;
	z-index: 4;
}

.link_wrap li img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: .4s;
	z-index: 2;
}
.link_wrap li:hover img{
	transform:translate(-50%,-50%) scale(1.1);
	transition: .4s;
}
.link_wrap li:hover::before{
	background: rgba(0,0,0,.2);
	transition: .4s;
}

@media(max-width:599px){
	.t_item{
		grid-template-columns: repeat(2, 1fr);
	}
	.t_item li.title{
		order: 1;
		font-size: clamp(1.5rem, 0.796rem + 2.96vw, 2rem);	
	}
	.item._01{ order: 2}
	.item._02{ order: 3}
	.obi{
		font-size: clamp(1.1rem, 0.678rem + 1.78vw, 1.4rem);
	}
}
@media(max-width:499px){
	.link_wrap ul{
		flex-direction: column;
		align-items: center;
	}
	.link_wrap li{
		width: 80%;
		margin-bottom: 15px;
	}	
}
/*=============================
	下層共通
================================================================*/
.subfv{
	margin-top:clamp(60px,4vw, 80px);
	padding: clamp(30px,4vw,80px) 0;
	position: relative;
	z-index: 0;
}
.subfv::before{
	position: absolute;
	content: '';
	width: 90%;
	height: 100%;
	background: url("../img/pagettl.jpg")no-repeat right 65%/cover;
	top: 0;
	left: 5%;
	z-index: -1;
	border-radius: 25px;
}
.pagettl{
	text-align: center;
	color: #fff;
	text-shadow: 1px 1px 3px #333;
	font-size:clamp(1.6rem, 0.951rem + 2.73vw, 3rem);
}





/*=============================
　特徴・こだわり
================================================================*/
.deco{
	position: absolute;
	top: -20px;
	right: 5vw;
	content: '';
	width: 18vw;
	height: 30vw;
	background: url("../img/illust01.png")no-repeat right top/contain;
	z-index: -1;
}
.st_ttl{
	width: 80%;
	margin: 0 auto 25px;
}

.strengbox{
	position: relative;
	padding-top: 50px;
	padding-bottom: 50px;
	z-index: 1;
}
.strengbox img{
	position: absolute;
	width: 55%;
	height: 100%;
	z-index: 2;
	top: 0;
	left: 0;
}
.st_txt{
	width: 55%;
	padding:clamp(15px,4vw,3rem) clamp(20px,5vw,5rem);
	margin-left: auto;
	background: #ffffff;
	z-index: 3;
}
.strengbox._rev img{
	left: auto;
	right: 0;
}
._rev .st_txt{
	margin-left: 0;
}


@media(max-width:610px){
.strengbox{
	padding-top: 0px;
}
.strengbox img,
.strengbox._rev img{
	position: relative;
	width: 100%;
	aspect-ratio: 7 / 5;
}
.st_txt,
._rev .st_txt{
	width: 95%;
	margin:-10vw auto 0;
}	
	
}

.shinchi{
	position: relative;
	z-index: 0;
}
.shinchi::before{
	position: absolute;
	content: '';
	width: 45%;
	height: 100%;
	background: url(../img/chinatown.jpg)no-repeat center top /cover;
	top: 0;
	left: 0;
	
}
.shi_txt{
	width: 50%;
	margin-left: auto;
	margin-right: 3%;
	padding: clamp(20px,5vw,80px);
}

@media(max-width:819px){
	.shinchi{
		padding-top: 35vh;
	}
	.shinchi::before{
		width: 80%;
		height: 60vh;
		background: url(../img/chinatown.jpg)no-repeat  left 30%/cover;
		left: 3vw;
	}
	.shi_txt{
		width: 75%;
	}
	
}
@media(max-width:500px){	
	.shinchi::before{
		width: 100%;
		height: 50vh;
		background: url(../img/chinatown.jpg)no-repeat  left 30%/cover;
		left: 0vw;
	}
	.shi_txt{
		width: 94%;
	}
	
}
/*=============================
　はじめての方へ
================================================================*/
.txt1,
.txt2{
	position: relative;
	width: 40%;
	z-index: 2;
}
.img{
	position: absolute;
    width: clamp(250px, 80vw, 1100px);
    aspect-ratio: 117 / 91;
    z-index: 0;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.txt2{
	width: 45%;
	padding-top: 150px;
	margin-left: 15vw;
}
@media(max-width:820px){
	.txt1{
		width: 50%;
		min-width: 450px;
	}
	.txt2{
		width: 50%;
		min-width: 450px;
		padding-top: 15vw;
		margin-left: 0;
	}
}
@media(max-width:600px){
	.txt1{
		width: 100%;
		min-width: auto;
	}
	.txt2{		
		width: 100%;
		min-width: auto;
		padding-top: 8vw;
	}
	.img{
		position: relative;
		width: 90%;
		margin: 10px auto 0;
    	transform: translateY(0);
	}
}
/*recipe*/
.recipebox{
	padding: clamp(10px,3vw,30px);
}
.recipe_contents1{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #c1272d;
	margin-bottom: 15px;
	padding: 10px;
	gap:20px;
}
.imgbox{
	width: 42%;
}
.ziryo{
	width: 55%;
}
.ziryo h3{
	margin-bottom: 15px;
}
.ingredients{
	max-width: 400px;
}
.ingredients tr{
	border-bottom: 1px dotted #666;	
}
.ingredients td{
	padding: .5rem 1rem;
}
.ingredients td:first-child{
	width: 83%;
}
.ingredients td:nth-child(2){
	white-space: nowrap
}
.t_end{
	text-align: end;
}
.recipe_contents2{
	padding: 10px;
}
@media(max-width:600px){
	.recipe_contents1{
		flex-direction: column;
	}
	.imgbox{
		width: 80%;
		margin: 0 auto 20px;
	}
	.imgbox img{
		aspect-ratio: 4 / 3;
	}
	.ziryo{
		width: 100%;
	}	
	.recipebox{
		padding: clamp(5px,2vw,30px);
	}
}
/*=============================
　会社概要
================================================================*/
.abotbox{
	position: relative;
	padding-top: 120px;
	z-index: 4;
}
.abotbox img{
	position: absolute;
	width: 55%;
	height: 80%;
	z-index: 0;
	top: 0;
	left: 0;
}
.ab_txt{
	width: 60%;
	padding:clamp(15px,4vw,3rem) clamp(20px,5vw,5rem);
	margin-left: auto;
	background: #ffffff;
}
.tablebox{
	width: 60%;
	margin-left: auto;
	position: relative;
    z-index: 2;
	padding: 2rem;
	background: #fff;
}
.a-table tr{
	border-bottom: 1px solid #999;
}
.a-table th{
	width: clamp(80px, 16vw, 120px);
	padding: .3rem 0;
}	
.a-table td{
	padding: .3rem 1rem;
}

.a_info{
	position: relative;
	padding-top: 120px;
	z-index: 0;	
}

.a_info img{
	position: absolute;
	width: 55%;
	height: 80%;
	z-index: 0;
	top: 0;
	left: 0;
	object-position: bottom center;
}
.map{
	width: 100%;
	height: 45vh;
}


@media(max-width:610px){
.abotbox,
.a_info{
	padding-top: 0px;
}
.abotbox img,
.a_info img{
	position: relative;
	width: 100%;
	height: 65%;
}
.ab_txt,
.tablebox{
	width: 95%;
	margin:-10vw auto 0;
}	
}

/*=============================
　商品紹介（注文）
================================================================*/

.sub-top-box{
	background: #fff;
	padding: clamp(1.5rem, -0.051rem + 4.07vw, 3rem);
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;	
	align-items: stretch;
}
.content-left,
.content-right{
	width: 50%;
}

.way-item{
	padding: 20px 10px;
	display: flex;
	flex-direction: column;
	gap:10px;
}

.way-item h3{
	position: relative;
	font-size: clamp(1.1rem, 0.7rem + 1.07vw, 1.5rem);
	color: #934123;
}

.tel-way{
	border-bottom: 1px solid #934123;
}

.order-way-tel a,
.order-way-web a,
.dl-way a{
	background: #653722;
	padding: 5px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border-radius: 50px;
    border: 2px solid #653722;
	text-decoration: none;
  	color: #fff;
  	padding-right:20px;
	line-height: 1.75;
    letter-spacing: 0.1rem;
	text-align: center;
	font-size: clamp(1rem, 0.838rem + 0.68vw, 1.35rem);
    max-width: 300px;
    width: 100%;
	transition: .4s;
}
.web-way{
	padding-left: 20px;
}
.content-right{
	border-left: 1px solid #934123;
	padding-left: 20px;
}
.faxnumb li {
	padding: 5px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 50px;
    border: 2px solid #934123;
	line-height: 1.75;
    letter-spacing: 0.1rem;
	text-align: center;
	font-size:  clamp(1rem, 0.838rem + 0.68vw, 1.35rem);
    max-width: 300px;
    width: 100%;
	color: #934123;
}
.order-way-web a:hover,
.dl-way a:hover{
	background: #fff;
	color: #653722;
	transition: .4s;
}

@media(max-width:599px){
	.sub-top-box {
		flex-direction: column;
	}
	.content-left,
	.content-right{
		width: 100%;
		text-align: center;
	}	
	.content-right{
		border-left: 0px solid #934123;
		border-top: 1px solid #934123;
		padding-left: 20px;
	}	
	.order-way-tel a,
	.order-way-web a,
	.dl-way a,	
	.faxnumb li {
		margin: 0 auto 10px;
	}
}



/*　orderForm部分は　item.css　*/

/*=============================
　特定商取引・プライバシーポリシー
================================================================*/
.p-table{
	margin: 20px 10px;
}

.p-table tr{
	border: 1px solid #999;
}

.p-table th{
	width: 160px;
	padding: .3rem 0;
	border-right: 1px solid #999;
}
.p-table td{
	padding: .3rem 1rem;
}

.policy_box{
	margin: 2rem 3rem;
	font-size: 16px;
}

.policy_box dl{
	margin-bottom: 10px;
}
.policy_box dt{
	font-weight: 600;
}
.policy_box li{
	position: relative;
	padding-left: 1rem;
}
.policy_box li::before{
	position: absolute;
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #ffc000;
	top: 12px;
	left: .3rem;
}

@media(max-width:610px){
.p-table,
.policy_box{
	margin: 10px 0px;
}	
.p-table th{
	width: 100%;
	display: block;
	background: #eee;
	padding: .3rem 0;
	border-right: 0px solid #999;
}
.p-table td{
	width: 100%;
	display: block;
	padding: .3rem .5rem;
}	
}