@charset "utf-8";

.clearfix:after { height:0; visibility:hidden; content:"."; display:block; clear:both;}
.clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/}

.menu-trigger,
.menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger { position: relative; width: 30px; height: 21px;}
.menu-trigger span { position: absolute; left: 0; width: 100%; height:1px; background-color: #fff; border-radius: 0;}
.menu-trigger span:nth-of-type(1) { top: 0;}
.menu-trigger span:nth-of-type(2) { top: 10px;}
.menu-trigger span:nth-of-type(3) { bottom: 0;}
.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) { opacity: 0;}
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg);}

* { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body { text-align: center; font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; line-height:1.7; color:#000; letter-spacing:0.1em;}
body.us-bg{ background:#fff791;font-family:"ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif;}
body,html{ height:100%;}
img{ border:none; vertical-align:middle; max-width:100%;}
img{ width:auto\9; height:auto\9;}
a{ text-decoration: none; color:#333;}
a:hover{ text-decoration: none;}
header, footer, nav, section, article, aside, h1, h2, h3, h4, h5, h6, div, p, dl, dt, dd, table, th, td, a,li { box-sizing: border-box;}

.mt1rem{ margin-top:1rem;}




.umamiBeefHeaderWrapper{ position:fixed; top:0; left:0; width:100%; background:rgba(0, 0, 0, 0.82); z-index:9999;}
.umamiBeefNav li{ display:inline-block; padding:10px 1rem;}
.umamiBeefNav li img{ height:0.9rem; width:auto;}

@media screen and (max-width : 800px) {
	.umamiBeefHeaderWrapper{ padding:2rem 0; transform:translate(120%,0); transition: all .5s;}
	.umamiBeefHeaderWrapper.on{ transform:translate(0,0);}
	.umamiBeefNav li{ display:block;}
}


.umamiSweetHeaderWrapper{ position:fixed; top:0; left:0; width:100%; background:rgba(216, 189, 82, 0.9); z-index:9999;}
.umamiSweetNav li{ display:inline-block; padding:6px 1rem 10px;}
.umamiSweetNav li img{ height:1.2rem; width:auto;}

@media screen and (max-width : 800px) {
	.umamiSweetHeaderWrapper{ padding:2rem 0; transform:translate(120%,0); transition: all .5s;}
	.umamiSweetHeaderWrapper.on{ transform:translate(0,0);}
	.umamiSweetNav li{ display:block;}
}




.umamiIndex{ height:100vh; width:100%; background:#000 url(img/top_bg.jpg) center center no-repeat; background-size:cover; position:relative; min-height:640px;}
.umamiIndexContent{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:100%;}
.umamiIndexContent h1 img{ height:4rem; width:auto;}
.umamiIndexNav{ margin:4rem auto 0;}
.umamiIndexNav li{ display:inline-block; padding:0 2rem; vertical-align:top;}
.usIndexBtn{ display:block; background:rgba(255, 255, 255, 0.7); padding:2rem; width:280px;}
.usIndexBtn img{ height:200px; width:auto;}
.usIndexBtn p{ font-size:0.8rem; margin-top:2rem; color:#000; letter-spacing:0; font-family:"ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif;}
.usIndexBtn:hover{ background:rgba(255, 255, 255, 0.5);}
.ubIndexBtn{ display:block; background:rgba(0, 0, 0, 0.7); padding:2rem; width:280px;}
.ubIndexBtn img{ height:200px; width:auto;}
.ubIndexBtn p{ font-size:0.8rem; margin-top:2rem; color:#fff; letter-spacing:0;}
.ubIndexBtn:hover{ background:rgba(0, 0, 0, 0.5);}

@media screen and (max-width : 800px) {
	.umamiIndex{ background:#000 url(img/top_bg.jpg) 55% center no-repeat; background-size:cover;}
	.umamiIndexContent h1 img{ height:2.4rem; width:auto;}
	.umamiIndexNav{ margin:1rem auto 0;}
	.umamiIndexNav li{ display:block; padding:0 1rem;}
	.usIndexBtn{ padding:1rem; width:240px; margin:0 auto 1rem;}
	.usIndexBtn img{ height:120px;}
	.usIndexBtn p{ margin-top:1rem;}
	.ubIndexBtn{ padding:1rem; width:240px; margin:0 auto;}
	.ubIndexBtn img{ height:120px;}
	.ubIndexBtn p{ margin-top:1rem;}
}




.umamiBeef{ height:680px; width:100%; background:#000 url(img/ub_main.jpg) center center no-repeat; background-size:cover; position:relative;}
.umamiBeef h1{ position:absolute; top:45%; left:50%; transform:translate(-50%,-50%);}
.umamiBeef h1 img{ max-width:190px;}
.umamiBeefSubTitle{ position:absolute; bottom:0; left:0; width:100%; background:rgba(0, 0, 0, 0.62);}
.umamiBeefSubTitle h2{ display:inline-block; text-align:left; color:#fff; padding:1rem 0 1rem 84px; background:url(img/ub_sublogo.png) 0 center no-repeat; background-size:56px 74px; font-size:1.4rem; line-height:1.4;}
.umamiBeefHead{ margin:2rem auto 4rem;}
.umamiBeefHead dt img{ height:1.2rem; width:auto;}
.umamiBeefHead dt{ margin-bottom:1rem;}
.umamiBeefHead dd img{ height:3rem; width:auto;}


.umamiSweet{ height:680px; width:100%; background:#fff url(img/us_main.jpg) center center no-repeat; background-size:cover; position:relative;}
.umamiSweetTitleWrapper{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.umamiSweetTitleWrapper h1 img{ max-width:260px;}
.umamiSweetTitleWrapper h2{ margin-top:4rem;}
.umamiSweetTitleWrapper h2 img{ height:64px; width:auto;}

@media screen and (max-width : 800px) {
	.umamiBeef{ height:380px;}
	.umamiBeef h1 img{ max-width:100px;}
	.umamiBeefSubTitle h2{ padding:10px 0 10px 60px; background-size:40px 53px; font-size:1rem;}
	.umamiBeefHead{ padding:0 10px;}
	.umamiBeefHead dt img{ height:1rem;}
	.umamiBeefHead dd img{ height:2rem;}

	.umamiSweet{ height:380px;}
	.umamiSweetTitleWrapper{ width:100%;}
	.umamiSweetTitleWrapper h1 img{ max-width:160px;}
	.umamiSweetTitleWrapper h2{ margin-top:2rem;}
	.umamiSweetTitleWrapper h2 img{ height:42px; width:auto;}
}




.title img{ height:1.4rem; width:auto;}
.subtitle{ font-size:1.4rem;}

.whiteBgWrapper{ max-width:1080px; background:#fff; margin:0 auto; padding:2rem 0;}
.contentWrapper{ padding:2rem 0;}
.bg-container1{ background:url(img/ub_bg1.jpg) center 0 no-repeat,url(img/ub_bg2.jpg) center 88% no-repeat; background-size:100% auto,100% auto; max-width:1680px; width:100%; margin-left:auto; margin-right:auto;}
.bg-container2{ background:url(img/ub_bg3.jpg) center 100px no-repeat; background-size:100% auto; max-width:1680px; width:100%; margin-left:auto; margin-right:auto;}

.flex-container{ display:flex; flex-direction:row; justify-content:space-between; align-items:stretch; align-content:stretch; max-width:1000px; margin:2rem auto;}
.flex-primary{flex-basis:50%; text-align:left; padding:1rem;}
.flex-secondary{flex-basis:50%; text-align:left; padding:1rem;}

dl.details{ margin:1rem 0 0;}
dl.details.mt2rem{ margin:2rem 0 0;}
dl.details > dt{ margin-bottom:1rem; letter-spacing:0; font-weight:normal;}
dl.details > dt.mb2rem{ margin-bottom:2rem;}
dl.details > dd.color-yellow{ color:#d0b046;}

.instaList{ max-width:1000px; margin:2rem auto;}
.instaList > li{ display:inline-block; padding:1rem; width:25%;}
.instaList > li img{}

.linkList{ max-width:1000px; margin:2rem auto;}
.linkList > li{ display:inline-block; padding:1rem; vertical-align:top;}
.linkList > li img{ height:140px; width:auto;}
.linkList > li p{ font-size:0.8rem; margin-top:1rem; letter-spacing:0;}
.linkList > li.umamiBeefBanner{ padding:1rem 3rem;}

.btnWrapper{ padding-bottom:4rem;}
.btnWrapper a{ display:inline-block; border:1px solid #777777; padding:0.8rem 2rem 1rem;}
.btnWrapper a.color-yellow{ background:#d0b046; border:none;}
.btnWrapper p{ font-size:0.8rem; margin-top:1rem;}
.text-gray{ color:#b5b5b5;}
.text-yellow{ color:#d8bd52;}

.sweetList{ padding:0 2rem; text-align:left;}
.sweetList > li{ display:inline-block; padding:1rem; width:25%; vertical-align:top; text-align:center;}
.sweetList > li h3{ color:#b5b5b5; font-size:0.8rem;}
.sweetList > li dl dt{ color:#000; font-size:0.8rem; font-weight:normal; letter-spacing:0;}
.sweetList > li dl dd{ color:#d8bd52; font-size:0.8rem; letter-spacing:0;}

@media screen and (max-width : 800px) {
	.title img{ height:1rem;}
	.subtitle{ font-size:1.2rem;}
	.contentWrapper{ padding:1rem 0;}

	.flex-container{ flex-direction:column; margin:1rem auto;}
	.flex-primary{order:1;flex-basis:100%; padding:1rem 1rem 0;}
	.flex-secondary{order:2;flex-basis:100%; padding:1rem;}

	dl.details{ font-size:0.8rem}
	dl.details.ph1rem-sp{ padding:0 1rem 2rem;}

	.instaList{ padding:0 5px;}
	.instaList > li{ padding:5px; width:50%;}

	.linkList > li{ padding:10px;}
	.linkList > li img{ height:90px;}
	.linkList > li.umamiBeefBanner{ padding:1rem 2rem;}

	.sweetList{ padding:0 5px 2rem;}
	.sweetList > li{ padding:0 5px 10px; width:50%;}
}




#toTopBtn{ position:fixed; bottom:2rem; right:2rem;}
#toTopBtn img{ height:2.4rem; width:auto; cursor:pointer;}
#hamburger{display:none;}

footer{ background:#000; padding:1rem 0;}
footer.color-yellow{ background:#d0b046;}
.copyright{ font-size:0.75rem; letter-spacing:0; color:#fff; margin-top:2rem;}

@media screen and (max-width : 800px) {
	#hamburger{display:block; position:fixed; top:0; right:0; background:rgba(0, 0, 0, 0.82); z-index:10000; padding:12px 10px 6px;}
	#toTopBtn{ bottom:10px; right:5px;}
	#toTopBtn img{ height:2rem;}

	footer .umamiBeefNav li img{ height:0.8rem; width:auto;}
	footer .umamiSweetNav li{ display:inline-block;}
	footer .umamiSweetNav li img{ height:0.8rem; width:auto;}
}




#umami-asia{ max-width:960px; width:100%; background:#fff; text-align:center; padding:0;}
#umami-asia h2{ background:rgba(90, 106, 131, 1); color:#fff; padding:0; font-size:1.4rem; margin:0 0 2rem;}
#umami-asia h3{ font-size:1.2rem; margin-bottom:1rem;}
.bg-umami-asia{background:#fff url(img/umami_asia_bg.jpg) center center no-repeat; background-size:contain;}
.bg-umami-asia > dl{ padding:0 4rem 2rem;}
.bg-umami-asia > dl > dt{ padding:0 2rem 2rem; font-weight:normal;letter-spacing: 0;}
.bg-umami-asia > dl > dd p{ margin-bottom:1rem;}
.sign{ margin-top:1rem;}
#umami-asia > ul{ font-size:0.8rem; padding:0 0 2rem; display:inline-block; text-align:left;}
#umami-asia > ul > li{ padding:1px 0 1px 2rem;}
#umami-asia > ul > li.flag-jp{ background:url(img/flag_jp.png) 0 center no-repeat; background-size:1.4rem;}
#umami-asia > ul > li.flag-vt{ background:url(img/flag_vt.png) 0 center no-repeat; background-size:1.4rem;}
#umami-asia > ul > li.flag-la{ background:url(img/flag_la.png) 0 center no-repeat; background-size:1.4rem;}
#umami-asia > ul > li.flag-ch{ background:url(img/flag_ch.png) 0 center no-repeat; background-size:1.4rem;}
#umami-asia > ul > li.flag-tw{ background:url(img/flag_tw.png) 0 center no-repeat; background-size:1.4rem;}
#umami-asia > ul > li.flag-th{ background:url(img/flag_th.png) 0 center no-repeat; background-size:1.4rem;}
#umami-asia > ul > li.flag-ca{ background:url(img/flag_ca.png) 0 center no-repeat; background-size:1.4rem;}

@media screen and (max-width : 800px) {
	#umami-asia h2{ font-size:1rem; margin:0 0 1rem;}
	#umami-asia h3{ font-size:1rem;}
	.bg-umami-asia > dl{ padding:0 10px 2rem;}
	.bg-umami-asia > dl > dt{ padding:0 0 2rem; font-size:0.8rem;}
	.bg-umami-asia > dl > dd p{ font-size:0.8rem;}
	#umami-asia > ul{ padding:0 10px;}
}




#product.ub{ margin-top:-20px; padding-top:20px;}
#news.ub{ margin-top:-40px; padding-top:40px;}

#concept.us{ margin-top:-40px; padding-top:40px;}
#product.us{ margin-top:-40px; padding-top:40px;}
#news.us{ margin-top:0; padding-top:0;}

@media screen and (max-width : 800px) {
	#product.ub{ margin-top:0; padding-top:0;}
	#news.ub{ margin-top:0; padding-top:0;}

	#concept.us{ margin-top:0; padding-top:0;}
	#product.us{ margin-top:0; padding-top:0;}
	#news.us{ margin-top:0; padding-top:0;}
}




.contact-ub{ background:#000;}
.contact-us{ background:#d0b046;}
.contactWrapper{ margin:0 auto 0; background:#fff; padding-top:6rem;}
.formWrapper{ margin:4rem auto 0;}

@media screen and (max-width : 800px) {
	.contactWrapper{ margin:0 auto 0; padding-top:2rem;}
	.formWrapper{ margin:2rem auto 0;}
}




.formList dt{ margin-bottom:1rem; font-weight:normal;}
.formList dd{ margin-bottom:2rem;}
.submitWrapper{ margin:2rem auto; text-align:center;}
.submitWrapper > a{ display:inline-block; margin:0 0 0 1rem; vertical-align:top;}

@media screen and (max-width : 800px) {
	.formList{ margin-top:1rem;}
	.submitWrapper > a{ display:block; margin:0 auto 0; width:12rem;}
}


input[type=text] {
-webkit-appearance: none;
appearance: none;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
font-size: 1em;
padding: 0.4em 0.8em;
max-width:480px;
width:100%;
border-radius:0;
}
input[type=text]:focus {
border: 1px solid rgba(0, 0, 0, 0.32);
box-shadow: none;
outline: none;
}
textarea {
-webkit-appearance: none;
appearance: none;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
font-size: 1em;
height: 120px;
padding: 0.4em 0.8em;
max-width:480px;
width: 100%;
border-radius:0;
}
textarea:focus {
border: 1px solid rgba(0, 0, 0, 0.32);
box-shadow: none;
outline: none;
}
input[type=submit] {
-webkit-appearance: none;
background-color: rgba(0, 0, 0, 1);
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1em;
margin: 0 0 1em;
padding: 0.6em 2em;
text-decoration: none;
border-radius:0;
}
input[type=submit]:hover,
input[type=submit]:focus {
background-color: rgba(0, 0, 0, 0.5);
}
input[type=radio]{ display:none;}
.radio{ position: relative; display: inline-block; padding:0 0 0 1.4em; cursor: pointer; font-size:1em; line-height:1;}
.radio:after{ position:absolute; top:50%; left:0; display:block; margin-top:-0.5em; width:16px; height:16px; border: 2px solid #999; content:''; border-radius:32px;}
.radio:before { position: absolute; top:50%; left:2px; display:block; margin-top:-0.38em; width:12px; height:12px; background-color:#000; content:''; opacity:0; border-radius:24px;}
input[type=radio]:checked + .radio:before { opacity:1;}
input[type=radio]:checked + .radio:after { border: 2px solid #000;}
.radioList li{ display:inline-block; padding:0 0 0.5rem 1rem;}
.radioList li:first-child{ padding:0 0 0.5rem 0;}

.sendCheckText{ margin:0 auto 2rem;}
.checkAnser{ background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.16); padding: 0.4em 0.8em; max-width:480px; width:100%; margin:0 auto;}
.submitBtn.sizeS{ vertical-align:bottom;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  margin:0 0 1rem 1rem;
  padding: 0.6em 2em;
  text-decoration:none; width:auto;
}
.submitBtn.sizeS:hover{ background-color: rgba(0, 0, 0, 0.32);}

.backWrapper{ margin:2rem auto;}
.backWrapper a{ text-decoration:underline;}
.backWrapper a:hover{ text-decoration:none;}

.sendCompWrapper{ text-align:center; padding:0 0 2rem;}

@media screen and (max-width : 800px) {
	input[type=text] { margin-left:1rem; margin-right:1rem; width:calc(100% - 2rem);}
	textarea{ margin-left:1rem; margin-right:1rem; width:calc(100% - 2rem);}
	.checkAnser{ margin-left:1rem; margin-right:1rem; width:calc(100% - 2rem);}
	.sendCompWrapper{ font-size:0.8rem;}
}