@charset "utf-8";
@import url("hamburger.css");
@import url("root.css");


html{
	height:100%;
}
body{
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-style: normal;
	height:100%;
	background-color: #fff;
}
#wrapper{
	overflow: hidden;
}
a.btn{
	padding:1rem 4rem 1.1rem;
	border-radius:8px;
	color:#231815;
	font-size:var(--font-small);
	letter-spacing:2px;
	display: inline-flex;
	align-items: center;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    
    background-color:#c9bc9c;

}
a.btn:hover{
	background-color: #ffffff8c;
	box-shadow: none;
}
.btn-arrow,
.btn-arrow-left{
	font-size:var(--font-vsmall);
	color:var(--primary-font-color-h1);
	letter-spacing: 1px;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.btn-arrow:hover,
.btn-arrow-left:hover{
    text-shadow: 0 2px 2px #00000025;	
}
.btn-arrow:after{
    content: "\f061";
    font-family: fontawesome;
    color: #fff;
    text-shadow: 0 2px 2px #00000025;
    /*background: var(--primary-gradient);*/
	background:#231815;
    padding: .6rem;
    border-radius: 50px;
    margin-left: 1rem;
}
.btn-arrow-left:before{
    content: "\f060";
    font-family: fontawesome;
    color: #fff;
    text-shadow: 0 2px 2px #00000025;
    /*background: var(--primary-gradient);*/
	background:#231815;
    padding: .6rem;
    border-radius: 50px;
    margin-right: 1rem;
}
.btn-arrow:hover:after,
.btn-arrow-left:hover:before{
	background:#a0c53d;
}
.disabled {
	opacity: 0.3;
	cursor: not-allowed;
}
.aligncenter{
	text-align: center;
}

a.totop{
	position:fixed;
	bottom:1rem;
	right:1rem;
	background:#000;
	color:#fff;
	font-weight: bold;
	border-radius: 50px;
	z-index: 20;
	text-align: center;
	padding: 2rem 2.5rem;
	box-shadow: 0 1px 10px #00000030;
	box-sizing: border-box;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
a.totop:before{
	content:"\f106";
	font-family: FontAwesome;
	display: block;
}
a.totop:hover{
	background:#a0c53d;
}
a.map::before{
	content:"\f5a0";
	display: inline-block;
	font-family: 'FontAwesome';
    font-size: var(--font-small);
	margin-left:1rem;
	color:#f93515;
}
.pc_br{
	display: none;
}
.pc_view{
	display: none;
}
.pc_inline-view{
	display: none;
}
p.errormess {
    color: red;
    font-size: smaller;
    margin-bottom: .5rem;
}
.lb{
	position: relative;
}
.lb:before{
	content:"";
	position: absolute;
	width:46px;
	height:46px;
	top:calc((100% - 46px)/2);
	left:calc((100% - 46px)/2);
	background-image:url(../img/lightbox-play.png);
	background-size: cover;
}
/* pagenation */
.pagenation {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 3rem auto 6rem;
}
.pagenation .page-numbers {
	width: 45px;
	height: 45px;
	font-size: var(--font-vsmall);
	font-weight: 400;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #acacac;
	transition: background-color ease .3s;
	border-radius: 30px;
}
.pagenation .page-numbers.current {
	color: #fff;
	background-color: #a0c53d;
	border: 1px solid #a0c53d;
}



/* inview */
.fadeIn_up {
	opacity: 0;
	transform: translate(0, 20%);
	transition: 0.5s;
}
.fadeIn_up.is-show {
	transform: translate(0, 0);
	opacity: 1;
}

header{
    position: relative;
    z-index: 10;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#header{
    width: 100%;
	margin:0 auto;
    position: relative;
	/*height:480px;*/
    background-image: url(../img/bg_mainvisual.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

#header.company{
    background-image: url(../img/bg_mainvisual-company-sp.jpg);
}
#header.nurture{
    background-image: url(../img/bg_mainvisual-nurture.jpg);
}
#header.hikozaemon{
    background-image: url(../img/bg_mainvisual-hikozaemon-sp.jpg);
}
#header.landing{
    background-image: url(../img/bg_mainvisual-landing.jpg);
}
#header.buy{
    background-image: url(../img/bg_mainvisual-buy.jpg);
}
#header.eat{
    background-image: url(../img/bg_mainvisual-eat.jpg);
}
#header.recipe{
    background-image: url(../img/bg_mainvisual-recipe.jpg);
}
#header.topics{
    background-image: url(../img/bg_mainvisual-topics.jpg);
}
#header.contact{
    background-image: url(../img/bg_mainvisual-contact-sp.jpg);
}
#header.top{
	background-color:transparent;
	box-shadow: unset;
	background-size:170%;
}
#header div.wrap{
	height:100%;
}
#header div.wrap img.agro {
    width: 80px;
    position: absolute;
    left: calc((100% / 2) - 40px);
    top: 30px;
}
#navi-sp{
	width:100%;
	height:40px;
	position: fixed;
	top: 1rem;
	z-index: 10;
}
#navi-pc{
	display: none;
}
#mainvisual{
	height: 280px;
	box-sizing: border-box;
	background-image: url(../img/bg-hokkaido.png);
	background-repeat: no-repeat;
    background-position: center top 55px;
    background-size: 110px;
}
#mainvisual.no-bg{
	background-image: url("");
}
#mainvisual.boo{
	background-image: url(../img/bg-boo.png);
	background-size:38%;
}
#mainvisual h1{
	color:#fff;
	text-shadow: var(--primary-text-shadow);
	text-align: center;
	font-weight: 500;
	font-size:var(--font-middle);
	padding-top: 110px;

}
#mainvisual h1 span{
	display: block;
	font-size:var(--font-small);
	margin-top:1rem;
	color:#fff;
	text-shadow: var(--primary-text-shadow);
	font-family: "Cinzel", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 1px;
}
#mainvisual img{
	width:80%;
}
#header.company #mainvisual h1,
#header.nurture #mainvisual h1{
	font-family: "Cinzel", serif;
	font-size:var(--font-large);
}
#header.nurture #mainvisual h1 span{
	font-size:var(--font-middle);
}
.privacy{
	background-image: url(/assets/img/footer-logo.png) !important;
	background-position: center center !important;
	background-size: 300px !important;
}
.privacy #mainvisual{
	background-image: url() !important;
}

#logo{
	background: #fff;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	/*height: 220px;*/
	margin-left: -100px;
	margin-right: -100px;
	padding-left: 100px;
	padding-right: 100px;
	z-index: 6;
	text-align: center;
	padding-top:3rem;
	bottom:0;
}
#logo img{
	width: 75%;
	max-width: 380px;
}
#header .pc_navi{
	display: none;
}

#header div.wrap{
	overflow:hidden;
}
#sideNavi{

}
#sideNavi a{
	position: fixed;
	right:0;
	top:1rem;
	display: block;
	width: 20px;
	background: #23181586;
	color: #fff;
	font-size: var(--font-small);
	padding: 2rem .7rem 2rem .8rem;
	border-radius: 10px 0 0 10px;
	line-height: 1;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	writing-mode: vertical-lr;
}
#sideNavi a.trans{
	top:220px;
}
#sideNavi a:hover{
	padding: 2rem 2rem 2rem .8rem;
}
/* __common__ */
.container{
	padding:2.5rem 3rem;
}
h1.index{
	background-image:url(../img/bg-menu-border-top.png);
	background-repeat: repeat-x;
	background-position: top;
    padding-top: 1rem;
	text-align: center;
	margin-bottom:2rem;
}
h1.index div{
	background-image:url(../img/bg-menu-border-bottom.png);
	background-repeat: repeat-x;
	background-position: bottom;
    padding-bottom: 1rem;
	font-size:1.9rem;
}
h1.index div span{
	display: flex;
    justify-content: center;
    align-items: center;
	font-weight: 600;
	padding-bottom:3px;
}
h1.index div span::after,
h1.index div span::before,
.container h2.index::before{
	content:"";
	background-color: #231815;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 62%;
	display: inline-block;
	height:22px;
	width:22px;
	border-radius: 22px;
	margin-top:2px;
}
h1.index div span::before,
.container h2.index::before{
	background-image:url(../img/icon-pork-left.png);
	margin-right:1.5rem;
}
h1.index div span::after{
	background-image:url(../img/icon-pork-right.png);
	margin-left:1.5rem;
}
h1.index.noRight div span::after{
	display: none;
}
.container h2.index{
    padding-top: 1rem;
	text-align: center;
	margin-bottom:1rem;
	font-size:var(--font-middle);
	display: flex;
	justify-content: center;
	align-items: center;
}

/* __purposes__ */
#purposes{
    background-image: url(../img/bg-menu-border-bottom.png);
    background-position: center top;
    background-repeat: repeat-x;
    background-size: 100% 8px;
    padding-top: 2rem;
    margin-top: 1rem;
}
#purposes ul{
	list-style-type: none;
}
#purposes .container>a{
	display: block;
	margin-bottom:2rem;
}
#purposes .container>a img{
	width:100%;
}
#purposes ul li{
	margin-bottom:1rem;
	padding:1rem;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-size:100%;
	background-position:left center;
}
#purposes ul li div{
	border:1px solid #fff;
	padding: 2rem 4rem 2rem 2rem;
	background: linear-gradient(to right,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	position: relative;
		transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
#purposes ul li div:hover{
	background: linear-gradient(to right,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#purposes ul li div:after{
content: '\f04b';
    font-family: 'FontAwesome';
    display: block;
    color: #956134;
    background-color: #fff;
    border-radius: 30px;
    width: 26px;
    height: 26px;
    font-size: var(--font-small);
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    position: absolute;
    right: .5rem;
    top: calc((100% - 26px) / 2);
}
#purposes ul li div:hover:after{
    color: #a0c53d;
}
#purposes ul li a{
	display: block;
	width:100%;
	text-align: left;
}
#purposes ul li a h2{
	font-weight: 500;
	font-size:var(--font-middle);
	color:#fff;
	text-shadow: var(--primary-text-shadow);
}
#purposes ul li a p{
	margin-top:1rem;
	font-size:var(--font-vsmall);
	font-weight: normal;
	color:#fff;
	text-shadow: var(--primary-text-shadow);
}
#purposes ul li.purposes-01{
	background-image: url(../img/bg-purposes-01.jpg);
}
#purposes ul li.purposes-02{
	background-image: url(../img/bg-purposes-02.jpg);
}
#purposes ul li.purposes-03{
	background-image: url(../img/bg-purposes-03.jpg);
}
#purposes ul li.purposes-04{
	background-image: url(../img/bg-purposes-04.jpg);
}
#purposes ul li.purposes-05{
	background-image: url(../img/bg-purposes-05.jpg);
}


/* news/media */
#news ul,
#media ul{
	list-style-type: none;
}
#news  ul li,
#media ul li{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding:1rem;
	background-color: #fff;
	font-size:var(--font-vsmall);
}
#news  ul li:nth-child(odd),
#media ul li:nth-child(odd){
	background-color:#FFF9F3;
}
#news  ul li:first-child,
#media ul li:first-child{
	border-radius: 10px 10px 0 0;
}
#news  ul li:last-child,
#media ul li:last-child{
	border-radius: 0 0 10px 10px;
}
#news  ul p.date,
#media ul p.date{
	padding-right:5rem;
	position: relative;
}
#news  ul p.date.new::after,
#media ul p.date.new::after,
#topics-detail .container h2.new::before{
    content: "NEW";
    background-color: #E4007F;
    color: #fff;
    display: inline-block;
    font-size: 10px;
    border-radius: 4px;
    padding: 0 3px 2px;
    font-weight: bold;
    position: absolute;
    right: 12px;
	top:2px;
}
#news  ul a,
#media ul a{
	text-decoration: underline;
}
#news  .container div.btn-box,
#media .container div.btn-box,
#recipe-info .container div.btn-box{
	margin-top:2rem;
	text-align: right;
}
#topics-detail  div.btn-box{
	text-align: center;
	margin-bottom:6rem;
}
#topics-detail .container{
	display: block !important;

}
#topics-detail .container h2{
	position: relative;
	font-size: var(--font-middle);
	font-weight: normal;
}
#topics-detail .container h2.new{
	padding-left:3.5rem;
}
#topics-detail .container h2.new::before{
    left: 0;
	top:11px;
	right:auto;
}
#topics-detail .container p.date{
	font-size: var(--font-small);
	margin: 0;
}

#topics-detail .container div.topics-photo{
	
}
#topics-detail .container p img{
	max-width:100%;
	width:auto;
}
#topics-detail .container video{
	width:100%;
}
#topics-detail .container div.topics-photo img{
	max-width:100%;
}

#topics-detail .container p.note{
	text-align: left;
	width: 100% !important;

}
/* sns */
#sns .container{
	padding:3rem 0 0;
}
#sns ul{
	list-style-type: none;
	display: flex;
	justify-content: center;
}
#sns ul li.fb{
	margin-right:3rem;
}
#sns ul li.insta{
	background: linear-gradient(to right,
		rgba(247, 207, 0, 0.7),
		rgba(246, 37, 2, 0.7) 45%,
		rgba(182, 47, 82, 0.7) 75%,
		rgba(113, 58, 166, 0.7));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#sns ul li:first-child{
	margin-right:3rem;
}
#sns ul li a{
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
#sns ul li a::before{
	display: block;
	font-family: 'FontAwesome';
    font-size: 5rem;
}
#sns ul li.fb a::before{
	content:"\f082";
	color:#1877f2;
}
#sns ul li.insta a::before{
	content:"\f16d";
}
#sns ul li:hover{
	opacity: .6;
}

/* contents-lineup */
#contents-lineup .container{
	background-color:#FFF9F3;
	padding: 2rem 3rem;
}
#contents-lineup .container ul{
	margin:3rem auto 1rem;
	list-style-type: none;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#contents-lineup .container ul li{
	width:50%;
	box-sizing: border-box;
	padding:0 .5rem;
	text-align: center;
}
#contents-lineup .container ul li h2{
	background-image:url(../img/bg-foot-menu-border-top.png);
	background-repeat: repeat-x;
	background-position: top;
    padding-top: 1rem;
	text-align: center;
	margin-bottom:4rem;
	margin-top:2rem;
}
#contents-lineup .container ul li h2 div{
	background-image:url(../img/bg-foot-menu-border-bottom.png);
	background-repeat: repeat-x;
	background-position: bottom;
    padding-bottom: 1rem;
	font-size:var(--font-vsmall);
}
#contents-lineup .container ul li h2 div span{
	display: flex;
    justify-content: center;
    align-items: center;
	letter-spacing: -1px;;
}
#contents-lineup .container ul li h2 div span::after,
#contents-lineup .container ul li h2 div span::before{
	content:"";
	background-color: #231815;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 80%;;
	display: inline-block;
	height:14px;
	width:14px;
	border-radius: 10px;
}
#contents-lineup .container ul li h2 div span::before{
	background-image:url(../img/icon-pork-left.png);
	margin-right:.4rem;
}
#contents-lineup .container ul li h2 div span::after{
	background-image:url(../img/icon-pork-right.png);
	margin-left:.4rem;
}
#contents-lineup .container ul li h2 a:hover{
	text-decoration: underline;
}
#contents-lineup .container ul li img{
	max-width: 100%;
	width:145px;
	height:145px;
	object-fit: cover;
	border-radius: 100px;;
}
#contents-lineup .container ul li img:hover{
	opacity: .6;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}





#environment .container>p,
#sustainable .container>p,
#sixth .container>p,
#order .container>p,
#buy-lead .container>p,
#eat-lead .container>p,
#eat-body .container>p,
#recipe-lead .container>p,
#recipe-body .container>p,
#contact-lead .container>p,
#contact-body .container>p,
#topics-detail .container>p
 {
	margin-top:2rem;
	margin-bottom:5rem;
}
#environment .container{
	padding-bottom:0;
}
#environment .container>div a,
#certification .container>div a{
	text-decoration: underline;
}
#environment .container>p{
	display: flex;
	justify-content: space-between;
	margin-bottom:5.5rem !important;
}
#environment .container>p a.jcredit{
	width:66.2%;
	text-align: center;
	font-size: var(--font-small);
	text-decoration: underline;
}
#environment .container>p a.sdgs{
	width:27%;
	text-align: center;
	font-size: var(--font-small);
	text-decoration: underline;
}
#environment .container>p a img{
	width: 100%;
}
#order .container{
	padding-bottom:0;
}
#order .container>p.w100p {
	width:100%;
	font-size: var(--font-small);
	margin-bottom:3rem;
	text-align: left;
}
#order .container>ul{
margin-left: 2.5rem;
}
#order .container>ul li{
	font-size:var(--font-small);
}
#buy-lead .container p a img{
	width:100%;
}

/* footer */
#footer{
	text-align:center;
	padding:1rem 0 0;
}
#footer img.footlogo{
	width:75%;
}

#footer ul.footer-menu {
	list-style-type: none;
	display: flex;
	justify-content: space-between;
	width: 88%;
    margin: 4rem auto 0;
}
#footer ul.footer-menu li{
	border-left: 0 none;
    padding: 0;
}
#footer ul.footer-menu li a img{
	width:100%;
}
#footer .copyright{
	background:#000000;
	color:#fff;
	text-align: center;
	font-size:var(--font-vsmall);
	margin-top: 3rem;
	padding: 3rem 0 2rem;
}




/* Individual Pages */
/* company */
#company{
	/*background-color:#efefef;*/
}
#company-message .container{
	text-align: center;
	padding:5rem 0;
}
#company-message .container h1.mincho img{
	width:80%;
}
#company-message .container p.mincho,
#company-rinen   .container p.mincho,
#company-vision  .container p.mincho{
	font-size:var(--font-small);
}
#company-rinen .container{
/*	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	margin-left: -100px;
	margin-right: -100px;
	padding-left: 100px;
	padding-right: 100px;*/
	text-align: center;
}
#company-vision  .container div.vision{
	margin:0 auto 4rem;
}
#company-vision  .container div.vision img{
	width:100%;
}
#company-profile .container{

}
#company-profile .container .profile{
	border-top:1px solid #7e7e7e;
	margin-top:2rem;
	padding-top:2rem;
}
#company-profile .container .profile h3{
	margin:2rem 0 .5rem;
	font-size:var(--font-small);
}
#company-profile .container .profile table,
#order .container table{
	width:100%;
	border-top:1px solid #7e7e7e;
	border-bottom:1px solid #7e7e7e;
}
#company-profile .container .profile table.dounan{
		border-top:1px solid #7e7e7e;
}
#company-profile .container .profile table tr th,
#company-profile .container .profile table tr td,
#order .container table tr th,
#order .container table tr td{
	font-size: var(--font-small);
	box-sizing: border-box;
}
#company-profile .container .profile table tr th,
#order .container table tr th{
	border-right:1px solid #7e7e7e;
	padding:.5rem 2rem .5rem 0;
	white-space: nowrap;
	text-align: center;
	vertical-align: top;
	width:118px;
}
#company-profile .container .profile table tr td,
#order .container table tr td{
	padding:.5rem 0 .5rem 2rem;
}
#company-profile .container .profile table tr:last-child td,
#order .container table tr:last-child td{
	padding:.5rem 0 2rem 2rem;
}
#company-profile .container .profile table tr:first-child th,
#order .container table tr:first-child th{
	padding:2rem 2rem .5rem 0;
}
#company-profile .container .profile table tr:first-child td,
#order .container table tr:first-child td{
	padding:2rem 0 .5rem 2rem;
}
#company-profile .container .profile table tr td>ul,
#order .container table tr td>ul{
	margin-left:2.5rem;
}

#shop-info .container ul{
	list-style-type: none;
	border-top:1px solid #7f7f7f;
}
#shop-info .container ul li{
	padding-bottom:3rem;
	border-bottom:1px solid #7f7f7f;
}
#shop-info .container ul li div.info h3{
	margin-top:4rem;
}

#shop-info .container ul li div.info h3 img,
#shop-info .container ul li div.photo img{
	width:100%;
}
#shop-info .container ul li div.info{
	margin-bottom:2rem;
}
#shop-info .container ul li div.info div.address{
	font-size:var(--font-small);
	margin-top:2rem;
}
#shop-info .container ul li div.info div.address p{
	margin-bottom:.5rem;
}
#shop-info .container ul li div.info div.address p.flex{
	display: flex;
	justify-content: flex-start;
}
#shop-info .container ul li div.info div.address p.flex span:first-child{
    white-space: nowrap;
    margin-right: .5rem;
    min-width: 110px;
}


/* nurture */
#farm{
	margin-top:2rem;
}
.container .text{
	font-size:var(--font-small);
}
.container .text p{
	margin:2rem 0 4rem;
}
.container>p>img{
	width: 100%;
}
.container .farm-image{
	margin-top:3rem;
}
.container .text ul,
.container .farm-image ul,
.container .border-box ul{
	list-style-type: none;
}
.container .text ul li,
.container .farm-image ul li,
.container .border-box ul li{
	margin-bottom :2rem;
} 
.container .text ul{
	margin:4rem 0 4rem;
}
.container .text ul li{
	text-align: center;
}
.container .farm-image ul li:last-child,
.container .border-box ul li:last-child{
	margin-bottom :0rem;
} 
.container .border-box ul li p a{
	display: inline-block;
	margin-top:10px;
	font-size:var(--font-small);
}
.container .farm-image ul li img,
.container .border-box ul li img{
	width:90%;
}
#farm .container .farm-image ul{
	display: flex;
	justify-content: space-between;
}
#farm .container .farm-image ul li{
	width:31%;
}

#farm_new{
	margin-top:2rem;
}
#farm_new .container .box-single,
#farm_new .container .box-double{
	font-size:var(--font-small);
	margin-top:3rem;
}
#farm_new .container .box-single img,
#farm_new .container .box-double img{
	display: block;
	width: 100%;
	margin-bottom:1rem;
}
#farm_new .container .box-double ul {
	list-style-type: none;
}
#farm_new .container .box-double ul li{
	margin-bottom:3rem;
}


.container .text ul li img{
	width:55%;
}
.container .border-box{
	margin-top:3rem;
	margin-bottom:3rem;
	border:1px solid #B5B5B6;
	padding:1.5rem;
	text-align:center;
}
.container .border-box>img{
	width:100%;
}
.container a.link-spf{
	display: flex;
	justify-content: center;
	align-items: center;
	gap:1rem;
	font-size:var(--font-small);
	margin:2rem 0 4rem;
	text-decoration: underline;
}
.container h3.mincho{
	font-size: var(--font-normal);
	color:#a48b78;
	width:100%;
	font-weight: 500;
	margin-bottom:1.5rem;
}

/* プライバシーポリシー */
#privacy-policy .container .text ul{
	list-style-type: disc;
	margin: 2rem 0 4rem 2rem;
}
#privacy-policy .container .text ul li {
	text-align: left;
	margin-bottom:0;
}
/* ランディング */
#landing-head  .container img{
	width:100%;
}
#landing-head  .container p.mincho{
	font-size:var(--font-small);
	margin-top:2rem;
	margin-bottom:4rem;
}
#premium  .container .text ul {
	display: flex;
	justify-content: space-between;
	margin-bottom:1rem;
}
#premium  .container .text ul li{
	width:32%;
	margin-bottom:0;
}
#premium  .container .text ul li img{
	width:100%;
}
div.banner{
	padding: 0 4rem 6rem;
}
div.banner a img{
	width:100%;
}

#voice .container ul{
	list-style-type: none;
}
#voice .container ul li{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom:2.5rem;
}
#voice .container ul li i{
	font-size:4rem;
	margin-right:2rem;
	width:35px;
}
#voice .container ul li p{
	font-size: var(--font-small);
	background-color: #fff;
	background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
					linear-gradient(180deg, #ccc 1px, transparent 1px);
	background-size: 8px 100%,100% 2.5em;
	line-height: 2.5em;
	padding-bottom: 1px;
	text-align: left;
	width: calc(100% - 35px);
}
#topics-detail .container>p{
	font-size: var(--font-small);
	background-color: #fff;
	background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
					linear-gradient(180deg, #ccc 1px, transparent 1px);
	background-size: 8px 100%,100% 2.5em;
	background-repeat: repeat-x;
	line-height: 1.2em;
	padding: 16px 0;
	text-align: left;
	/*width: calc(100% - 35px);*/
	margin:0 !important;
}
/* buy */

#buy-info .container ul{
	list-style-type: none;
	flex-wrap: wrap;
}
#buy-info .container ul li{
	padding-bottom:3rem;
	/*border-bottom:1px solid #7f7f7f;*/
}
#buy-info .container ul li:last-child{
	border-bottom:none;
}
#buy-info .container ul li div.info h3{
	margin-top:4rem;
}
#buy-info .container ul li div.photo-block ul{
	width:100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#buy-info .container ul li div.photo-block ul li{
	width:48%;
	padding:0 0 2rem;
	margin-bottom:0;
}
#buy-info .container ul li div.info h3 img,
#buy-info .container ul li div.photo-block img{
	width:100%;
}
#buy-info .container ul li div.info{
	margin-bottom:2rem;
}
#buy-info .container ul li div.info div.address{
	font-size:var(--font-small);
	margin-top:2rem;
}
#buy-info .container ul li div.info div.address p{
	margin-bottom:.5rem;
}
#buy-info .container ul li div.info div.address p.flex{
	display: flex;
	justify-content: flex-start;
}
#buy-info .container ul li div.info div.address p.flex span:first-child{
    white-space: nowrap;
    margin-right: .5rem;
    min-width: 110px;
}
#buy-info .container ul li div.map iframe{
	width:100%;
	height:230px;
}

/* eat */
#eat-body .container ul{
	list-style-type: none;
}
#eat-body .container ul li{
	padding-bottom:3rem;
	/*border-bottom:1px solid #7f7f7f;*/
	font-size: var(--font-small);
}
#eat-body .container ul li:last-child{
	border-bottom:none;
}
#eat-body .container ul li div.info h3{
	margin-top:4rem;
}

#eat-body .container ul li div.info h3 img,
#eat-body .container ul li div.photo img{
	width:100%;
}
#eat-body .container ul li div.info{
	margin-bottom:2rem;
}
#eat-body .container ul li div.info div.address{
	font-size:var(--font-small);
	margin-top:2rem;
}
#eat-body .container ul li div.info div.address p{
	margin-bottom:.5rem;
}
#eat-body .container ul li div.info div.address p.flex{
	display: flex;
	justify-content: flex-start;
}
#eat-body .container ul li div.info div.address p.flex span:first-child{
    white-space: nowrap;
    margin-right: .5rem;
    min-width: 110px;
}
#eat-body .container ul li div.map iframe{
	width:100%;
	height:230px;
}

/* recipe */
#recipe-lead{
    background-image: url(../img/bg-menu-border-bottom.png);
    background-repeat: repeat-x;
    background-position: bottom;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
}

#recipe-lead h4{
	padding: 0 3rem 0 1rem;
	background-image: url(../img/bg-menu-border-bottom.png);
	background-repeat: no-repeat;
	background-position: left 140px center;
}
#recipe-lead h4 div{
	padding: .3rem 1rem;
	font-size: var(--font-vsmall);
	background-color: #c9bc9c;
	display: inline-block;
	margin-top: 1.5rem;
	color: #fff;
	border-radius: 10px;
	font-weight: normal;
}
#recipe-lead .container ul{
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	gap:2rem;
}
#recipe-lead .container ul li{
	display: flex;
	align-items: center;
}
#recipe-lead .container ul li::before{
	content:"";
	background-color: #231815;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 62%;
	display: inline-block;
	height:22px;
	width:22px;
	border-radius: 22px;
	margin-top:2px;
	background-image:url(../img/icon-pork-left.png);
	margin-right:.5rem;
}
#recipe-lead .container ul li a{
	font-size:var(--font-vsmall);
	text-decoration: underline;
}
#recipe-body .container{
	background-color: #fff9f3;
	padding: 2.5rem 0rem;
}
#recipe-body .container ul{
	margin:0;
	padding:0;
	list-style-type: none;
}
#recipe-body .container>ul>li{
	border-bottom: 2px dotted #23181557;;
	padding-bottom: 3rem;
	margin-bottom: 3rem;
}
#recipe-body .container ul li h2{
	background-color: #fff;
	color:#a48b78;
	padding:1rem 0 1rem 3rem;
	width:100%;
	font-size: var(--font-normal);
}
#recipe-body .container ul li div.info{
	font-size: var(--font-small);
}
#recipe-body .container ul li div.info>p{
	width:100%;
	padding:2rem 3rem;
}
#recipe-body .container ul li div.info div.category,
#recipe-info .container div.category{
	display: flex;
	align-items: baseline;
	margin-bottom:1.5rem;
	padding:0 3rem
}
#recipe-info .container div.category{
	margin-bottom:2rem;
	padding:0;
}
#recipe-body .container ul li div.info div.category h3,
#recipe-info .container div.category h3{
	padding: .3rem 1rem;
	font-size: var(--font-vsmall);
	background-color: #c9bc9c;
	display: inline-block;
	margin-top: 1.5rem;
	color: #fff;
	border-radius: 10px;
	font-weight: normal;
}
#recipe-body .container ul li div.info div.category ul,
#recipe-info .container div.category ul{
	margin-left:1rem;
	display: flex;
	gap: 1rem;
}
#recipe-body .container ul li div.info div.category ul li,
#recipe-info .container div.category ul li{
}
#recipe-body .container ul li div.info div.category ul li a,
#recipe-info .container div.category ul li a{
	text-decoration: underline;
	font-size: var(--font-vsmall);
}
#recipe-body .container ul li div.info a.view{
	font-size: var(--font-vsmall);
	text-decoration: underline;
	padding: 0 3rem;
}
#recipe-body .container ul li div.image{
	padding:2rem 3rem 0;
}
#recipe-body .container ul li div.image img{
	width:100%;
}


#recipe-info .container{
	background-color: #fff9f3;
	padding: 2.5rem 3rem;
	font-size: var(--font-small);
	margin-bottom:2rem;
}
#recipe-info .container .recipe-image{
	margin-top:2rem;
}
#recipe-info .container .recipe-image img{
	width:100%;
}
#recipe-info .container .servings{
	font-weight:bold;
	margin-bottom:1rem;
}
#recipe-info .container ul{
	list-style-type: none;
}

.main-ingredients h3,
.sub1-ingredients h3,
.sub2-ingredients h3,
.recipe-procedure h3{
  font-size:15px;
  font-weight: bold;
  color:#000;
  letter-spacing: 3px;
  margin-top:15px;
  padding-bottom:5px;
  border-bottom:1px solid #d2c8be;
}
.sub1-ingredients h3,
.sub2-ingredients h3{
  margin-top:20px;
}
.main-ingredients dl,
.sub1-ingredients dl,
.sub2-ingredients dl{
  display: flex;
  flex-wrap: wrap;
}
.main-ingredients dl dt,
.main-ingredients dl dd,
.sub1-ingredients dl dt,
.sub1-ingredients dl dd,
.sub2-ingredients dl dt,
.sub2-ingredients dl dd,
.recipe-procedure ol li{
  margin-top:8px;
  font-size:14px;
  padding-bottom:12px;
  border-bottom:1px dotted #d2c8be;
}

.main-ingredients dl dt,
.sub1-ingredients dl dt,
.sub2-ingredients dl dt{
  width:62%;
  text-indent: 2px;
}
.main-ingredients dl dd,
.sub1-ingredients dl dd,
.sub2-ingredients dl dd{
  width:38%;
  text-align: right;
}
.recipe-procedure{
	background-color:#fff;
	padding: 1rem 1.5rem;
	margin: 3rem 0;
	border-radius: 6px;
}
.recipe-procedure ol{
  list-style-type: none;
}
.recipe-procedure ol li{
  position: relative;
  margin-left:30px;
	font-size: var(--font-small); 
}
.recipe-procedure ol li:before{
  color:#c8bb99;
  position: absolute;
  font-size:17px;
  left:-27px;
  top:-2px;
}
.recipe-procedure ol li.num1:before{
  content:"❶";
}
.recipe-procedure ol li.num2:before{
  content:"❷";
}
.recipe-procedure ol li.num3:before{
  content:"❸";
}
.recipe-procedure ol li.num4:before{
  content:"❹";
}
.recipe-procedure ol li.num5:before{
  content:"❺";
}
.recipe-procedure ol li.num6:before{
  content:"❻";
}
.recipe-procedure ol li.num7:before{
  content:"❼";
}
.recipe-procedure ol li.num8:before{
  content:"❽";
}
.recipe-procedure ol li.num9:before{
  content:"❾";
}
.recipe-procedure ol li.num10:before{
  content:"❿";
}
#recipe-info .container .note{
	
}
#recipe-info .container .note .advice{
	background-color:#fff;
	padding: 2rem;
	font-size: var(--font-small); 
	border-radius: 6px;
}
#recipe-info .container .note .advice h4{
	padding: .3rem 1rem;
	font-size: var(--font-vsmall);
	background-color: #814e21 ;
	display: inline-block;
	color: #fff;
	border-radius: 10px;
	font-weight: normal;
	margin-bottom:1rem;
}
#recipe-info .container .note .advice p{
	font-size: var(--font-small);
	font-weight: bold;
}
#recipe-info .container .note .buy-btn{
	text-align: center;
	margin-top:2rem;
}
#recipe-info .btn-back{
	text-align: center;
	margin-bottom:6rem;
}
#recipe-info .btn-back a{
	font-size:var(--font-small);
	text-decoration: underline;
}
#recipe-info  div.btn-box{
	text-align: center;
	margin-bottom:6rem;
}


/* form */
#contact-lead h3{
	margin-top:3rem;
	margin-bottom:1rem;
	text-align: center;
}
#contact-lead h4{
	text-align: center;
	font-size:var(--font-middle);
	font-style:italic;
	width:100%;
}

#contact{
	overflow: hidden;
	position: relative;
	text-align: left;
	box-sizing: border-box;
	padding: 0 3rem 6rem;
}
#contact p.text{
	margin-top:2rem;
	font-size:1.4rem;
}
#contact table{
	width:100%;
	margin-top:3rem;
	border-bottom:2px dotted #23181549;
}
#contact table tr{
	margin-bottom:15px;
	display: block;
}
#contact table th,
#contact table td{
    display: block;
    width: 100%;
    font-size: 1.5rem;
    font-weight: normal;
	position: relative;
}
#contact table th{
	padding: 0 0 5px 0;
	color:#393939;
}
#contact table th.require::before{
    content: "必須";
    background-color: #E4007F;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    border-radius: 4px;
    padding: 3px 9px 5px;
    font-weight: bold;
    position: absolute;
    right: 22px;
    top: 0;
}

#contact table td{
	padding: 0 0 15px 0;
}
#contact table td a{
	text-decoration: underline;
}
#contact table td.radio{
}
#contact table td.radio div{
	margin-top:2rem;
}
#contact table td div.form-gray{
/*	background-color: #F6F5F7;
    box-sizing: border-box;
    padding: 10px 20px;
    border-radius: 30px;
    position: relative;
    display: flex;
    align-items: center;
	min-height:50px;*/
}

#contact table td div.form-gray input[type='text']{
	font-size:var(--font-small);
	width:95%;
    padding: 10px 20px;
}
#contact table td div.form-gray select,
#contact table td div.form-gray textarea{
	font-size:var(--font-small);
	width:95%;
    padding: 10px 20px;
}
#contact table td div.form-gray textarea{
	height:200px;
}
#contact table td div.form-gray.require:after{
	content:"必須";
	color:red;
	font-size:1.2rem;
	white-space: nowrap;
}
#contact span.required{
	color:red;
	font-size:1.2rem;
	white-space: nowrap;
}
#contact table td label {
	position: relative;
	cursor: pointer;
	padding-left: 50px;
}
.design::before,
.design::after {
	content: "";
	display: block; 
	border-radius: 50%;
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
}
.design::before {
	background-color: #F6F5F7;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    left: 5px;
}
.design::after {
	background-color: #b3e5c7;
    border-radius: 50%;
    opacity: 0;
    width: 16px;
    height: 16px;
    left: 15px;
}
input:checked + .design::after {
	opacity: 1;
}
.sq{
	display: block;
}
.sq::before {
	border-radius: 5px;
}
.sq::after {
	content:"\f00c";
	background-color:transparent;
	font-family: FontAwesome;
	font-size:2rem;
	top:36%;
}