@charset "UTF-8";


* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 10px; }
body { color: #42210b; background-color: #fff8e5; font-family: YakuHanRP, "Zen Maru Gothic", YuGothic, YuGothicM, メイリオ, Meiryo, 'ＭＳ ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; font-size: 1.6rem; font-weight: 500; line-height: 1.8; -webkit-text-size-adjust: 100%; }
img { border: 0; vertical-align: top; -ms-interpolation-mode: bicubic; }
a { outline: none; }
a:link { color: #0000ee; text-decoration: none; }
a:visited { color: #; text-decoration: none; }
a:hover { color: #; text-decoration: underline; transition: all 0.3s ease; }
a:hover img { opacity: 0.8; transition: all 0.3s ease; }
button { background: transparent; border: none; appearance: none; cursor: pointer; outline: none; }
.clearfix::after { content: ''; display: block; clear: both; }

body {
	overflow-x: hidden;
}
.body-wrap {
	overflow-x: hidden;
}
main {
	padding-top: 120px;
}
.inner {
	margin: 0 auto;
	padding: 0 20px;
	width: 100%;
	max-width: 1040px;
}

.en{
	font-family: "Darumadrop One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.pc{
	display: block;
}
.sp {
	display: none;
}
@media screen and (max-width: 1000px) {
	body.on {
		height: 100%;
		overflow: hidden;
	}
	main {
		padding-top: 90px;
	}
}
@media screen and (max-width: 767px) {

.pc{
	display: none;
}
.sp {
	display: block;
}
}


/* --------------------------------------------------
	globalHeader
-------------------------------------------------- */
#globalHeader {
	padding: 0;
	width: 100%;
	height: 120px;
	background: url(/meshimaru/img/common/header-bg.svg) no-repeat center/cover;
	position: fixed;
	z-index: 999;
}
#globalHeader>.inner {
	padding: 0 10px 35px;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
#globalHeader h1 {
  line-height: 1;
}
#globalNavi {
	padding-bottom: 30px;
	height: 120px;
	position: fixed;
	top: 0;
	right: calc((100vw - 1040px)/2);
	z-index: 1000;
}
#globalNavi .main-li {
	height: 100%;
	padding-bottom: 18px;
	display: flex;
	gap: 30px;
	justify-content: flex-end;
	align-items: flex-end;
	list-style: none;
	font-size: 1.4rem;
	letter-spacing: 0.22em;
}
#globalNavi .main-li li {
	position: relative;
}
#globalNavi .main-li li.current > a {
	color: #ffff00;
	text-decoration: none;
}
#globalNavi .main-li a {
	color: #fff;
	transition: color 0.3s;
}
#globalNavi .main-li a:hover {
	color: #ffff00;
	text-decoration: none;
}
#globalNavi .sub-li {
	display: none;
	position: absolute;
	padding-top: 13px;
	top: calc(100% + 16px);
	left: 50%;
	translate: -50%;
} 
#globalNavi .sub-li.on {
	display: block;
}
#globalNavi .sub-li ul {
	padding: 20px 16px;
	background: #fff;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	list-style: none;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
	position: relative;
}
#globalNavi .sub-li ul::before {
	content: '';
	display: block;
	width: 30px;
	height: 40px;
	background: url(/meshimaru/img/common/fukidashi.svg) no-repeat center/contain;
	position: absolute;
	top: -13px;
	left: calc(50% - 15px);
}
#globalNavi .has-sub>a {
	padding: 16px 0;
	display: block;
	margin-bottom: -16px;
}
#globalNavi .has-sub:hover > a {
	color: #ffff00;
}
#globalNavi .sub-li ul a {
	display: flex;
	align-items: center;
	color: #42210b;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.14em;
	white-space: nowrap;
	transition: opacity 0.3s;
}
#globalNavi .sub-li ul a:hover {
	opacity: 0.7;
	color: inherit;
}
#globalNavi .sub-li ul a::before {
	content: '';
	width: 20px;
	height: 20px;
	margin-right: 5px;
	display: inline-block;
	background: url(/meshimaru/img/common/il-kome.svg) no-repeat center/60%;
	rotate: -60deg;
	flex-shrink: 0;
}
#globalNavi .sub-li ul li:first-of-type a::before {
	background-image: url(/meshimaru/img/common/il-onigiri.svg);
	background-size: contain;
	rotate: 35deg;
	transform: translate(1px,-1px);
}

@media screen and (max-width: 1000px) {
	#globalHeader {
		height: 90px;
		background-size: auto 120px;
		background-position: center;
	}
	#globalHeader > .inner {
		padding-bottom: 0;
		align-items: center;
	}
	#globalNavi {
		display: none;
		padding-top: 90px;
		position: fixed;
		width: 100vw;
		height: 100vh;
		background: #fff;
		top: 0;
		left: 0;
		z-index: 998;
	}
	#globalNavi .main-li {
		padding: 15px 36px 50px;
		margin: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 0;
		font-size: 2.1rem;
		font-weight: bold;
		overflow: auto;
	}
	#globalNavi .main-li>li {
		width: 100%;
		padding: 16px 0 20px;
		position: relative;
	}
	#globalNavi .main-li>li::after {
		content: '';
		display: block;
		width: 100%;
		height: 4px;
		background-image: url(/meshimaru/img/common/wave.svg);
		background-repeat: repeat-x;
		background-size: auto 4px;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	#globalNavi .main-li>li:last-of-type:after {
		content: none;
	}
	
	#globalNavi .main-li>li>a {
		padding: 0;
		color: #42210b;
		display: flex;
		align-items: center;
		margin-bottom: 0;
	}
	#globalNavi .main-li li.current > a {
		color: #42210b;
	}
	#globalNavi .main-li a:hover {
		color: inherit;
	}
	#globalNavi .has-sub:hover > a {
		color: inherit;
	}
	#globalNavi .main-li>li>a::before {
		content: '';
		width: 30px;
		height: 30px;
		display: inline-block;
		margin-right: 10px;
		background-image: url(/meshimaru/img/common/il-onigiri.svg);
		background-size: contain;
		background-repeat: no-repeat;
		rotate: 35deg;
		transform: translateX(3px);
	}
	#globalNavi .sub-li {
		padding-top: 16px;
		display: block;
		position: static;
		translate: 0;
	}
	#globalNavi .sub-li ul {
		padding: 0;
		background: transparent;
		gap: 12px;
		filter: none;
	}
	#globalNavi .sub-li ul::before {
		content: none;
	}
	#globalNavi .sub-li li:first-of-type {
		display: none;
	}
	#globalNavi .sub-li ul a {
		font-size: 1.6rem;
		white-space: inherit;
	}
	#globalNavi .sub-li ul a::before {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}
}
@media screen and (max-width: 767px) {
	#globalHeader {
		background: url(/meshimaru/img/common/header-bg-sp.svg) no-repeat center/100% 90px;
	}
}

/* --------------------------------------------------
	globalFooter
-------------------------------------------------- */
#globalFooter { 
	padding: 70px 0;
	background: #79b825;
	position: relative;
	z-index: 10;
}
#globalFooter::before {
	content: '';
	background: #79b825;
	display: block;
	width: 100%;
	height: 36px;
	clip-path: ellipse(50% 50% at 50% 50%);
	position: absolute;
	top: -18px;
	left: 0;
	margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
}
#globalFooter .logo-li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
}
#globalFooter .logo-li li {
	list-style: none;
}
#globalFooter .ft-menu {
	margin: 50px 0;
	display: grid;
	grid-auto-flow: column;
	gap: 30px;
	list-style: none;
}
#globalFooter .ft-menu li {
	text-align: center;
}
#globalFooter .ft-menu li a {
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: 0.22em;
	transition: color 0.3s;
}
#globalFooter .ft-menu li a:hover {
	color: #ffff00;
	text-decoration: none;
}
#globalFooter .copyright { 
	color: #fff;
	font-size: 1.0rem;
	letter-spacing: 0.17em;
	text-align: center;
}
#globalFooter .ft-msmr {
	position: absolute;
	right: calc(50% + 330px);
	top: -50px;
	height: 145px;
	width: auto;
}
@media screen and (max-width: 1000px) { 
	#globalFooter .ft-menu {
		margin: 30px 0 40px;
		grid-template-rows: repeat(3, auto);
		justify-content: center;
		gap: 60px;
		row-gap: 10px;
	}
	#globalFooter .ft-msmr {
		right: calc(50% + 290px);
		height: 124px;
	}
}
@media screen and (max-width: 767px) {
	#globalFooter {
		padding: 40px 0;
	}
	#globalFooter .inner {
		padding: 0 30px;
	}
	#globalFooter .logo-li {
		flex-wrap: wrap;
		gap: 6%;
		row-gap: 24px;
	}
	#globalFooter .logo-li li:nth-child(1){
		order: 2;
		width: 47%;
		max-width: 197px;
	}
	#globalFooter .logo-li li:nth-child(2){
		order: 3;
		width: 47%;
		max-width: 197px;
	}
	#globalFooter .logo-li li img {
		width: 100%;
		height: auto;
	}
	#globalFooter .logo-li li.msmr {
		order: 1;
		width: 100%;
	}
	#globalFooter .logo-li li.msmr img {
		width: 96px;
		height: auto;
	}
	#globalFooter .ft-menu {
		margin: 30px auto 40px;
		max-width: 340px;
		justify-content: space-between;
		gap: 10px;
		row-gap: 6px;
	}
	#globalFooter .ft-menu li {
		text-align: left;
	}
	#globalFooter .ft-menu li a {
		letter-spacing: 0.18em;
	}
	#globalFooter .ft-msmr{
		height: 124px;
		right: 20px;
		top: -60px;
	}
}
@media screen and (max-width: 374px) {
  #globalFooter .ft-menu li a {
		font-size: 3.7vw;
	}
}



/* --------------------------------------------------
	オーバーレイ + スマートフォンメニュー
-------------------------------------------------- */
a#sp-menu {
	display: none;
}

@media screen and (max-width: 1000px) {
a#sp-menu {
	width: 30px;
	color: #fff;
	font-size: 1.0rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	line-height: 1;
	letter-spacing: 0.22em;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	position: fixed;
	top: 22px;
	right: 22px;
	z-index: 1000;
}
a#sp-menu span {
	margin: 0 auto;
	width: 30px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	display: block;
	transition: transform .3s;
}
a#sp-menu::after {
	content: 'MENU';
}
a#sp-menu.open span:nth-of-type(1) {
	transform: translate(0px,10px) rotate(-45deg);
}
a#sp-menu.open span:nth-of-type(2) {
	opacity: 0;
}
a#sp-menu.open span:nth-of-type(3) {
	transform: translate(0px,-10px) rotate(45deg);
}
a#sp-menu.open::after {
	content: 'CLOSE';
}
}


/* --------------------------------------------------
	ボタン
-------------------------------------------------- */
.btn_cm a {
	min-width: 180px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: #86c03f;
	border-radius: 100vmax;
	box-shadow: 0 4px 0 #006837;
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: 0.22em;
	transition: all .2s;
	text-decoration: none;
}
.btn_cm a::after {
	content: '';
	width: 14px;
	height: 14px;
	background: url(/meshimaru/img/common/arrow.svg) no-repeat center/contain;
}
.btn_cm a:hover {
	text-decoration: none;
	box-shadow: none;
	transform: translateY(4px);
}


/* --------------------------------------------------
	背景イラスト positionを各要素で指定
-------------------------------------------------- */
.bg-onigiri, .bg-gohan, .bg-kome, .bg-hashi {
	position: relative;
	z-index: 0;
}
.img-onigiri {
	display: block;
	width: 418px;
	height: 410px;
	background: url(/meshimaru/img/common/bg-onigiri.svg) no-repeat center/contain;
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.img-gohan {
	display: block;
	width: 433px;
	height: 503px;
	background: url(/meshimaru/img/common/bg-gohan.svg) no-repeat center/contain;
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.img-kome {
	display: block;
	width: 269px;
	height: 330px;
	background: url(/meshimaru/img/common/bg-kome.svg) no-repeat center/contain;
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.img-hashi {
	display: block;
	width: 329px;
	height: 309px;
	background: url(/meshimaru/img/common/bg-hashi.svg) no-repeat center/contain;
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.img-onigiri.active, .img-gohan.active, .img-kome.active, .img-hashi.active {
	animation-name: zoomIn;
	animation-duration: 1s;
	animation-fill-mode: both;
}
@keyframes zoomIn {
  0% {
    opacity: 0;
  	transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 1;
		transform: scale3d(1, 1, 1);
  }
}

@media screen and (max-width: 767px) {
	.img-onigiri{
		width: 230px;
		height: 225px;
	}
	.img-gohan {
		width: 230px;
		height: 267px;
	}
	.img-kome {
		width: 167px;
		height: 205px;
	}
	.img-hashi {
		width: 240px;
		height: 226px;
	}
}

/* --------------------------------------------------
	アニメーション
-------------------------------------------------- */
.is-fadeIn {
	opacity: 0;
}
.is-fadeIn.active {
	animation: fadeIn 920ms ease forwards;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* fadeInUp */
.is-fadeInUp {
  opacity: 0;
  transform: translate3d(0, 15px, 0);
  transition: 920ms ease;
  transition-property: opacity, transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.is-fadeInUp.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* scaleIn */
.is-scaleIn {
	opacity: 0;
  transform: scale(0);
  transition: transform 0.7s cubic-bezier(0.64, -0.12, 0.4, 1.24), opacity 0.7s cubic-bezier(0.64, -0.12, 0.4, 1.24);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.is-scaleIn.active {
	opacity: 1;
  transform: scale(1);
}

/* bounceIn */
.bounceIn {
	opacity: 0;
	animation-duration: .75s;
	animation-fill-mode: both;
	visibility: visible;
}
.bounceIn.active {
  -webkit-animation-name: bounceIn;
          animation-name: bounceIn;
}
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
            transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
/* slideRight */
.slideRight {
	opacity: 0;
}
.slideRight.active {
	animation: slideIn 0.8s cubic-bezier(0.25,1,0.5,1) forwards;
}
@keyframes slideIn {
	0% {
		transform: translateX(180px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
	}
	40%,100% {
		opacity: 1;
	}
}

/* fadeInWrap */
.fadeInWrap .fadeIn {
  opacity: 0;
  transform: translate3d(0, 15px, 0);
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-property: opacity, transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.fadeInWrap.active .fadeIn {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.delay01 {
  transition-delay: 0s;
}
.delay02 {
  transition-delay: 0.4s;
}
.delay03 {
  transition-delay: 0.8s;
}
.delay04 {
  transition-delay: 1.2s;
}

/* テキスト１行ずつ */
.textfadeIn p {
	opacity: 0;
	transform: translateY(14px);
	transition: all 1s ease-in-out;
}
.textfadeIn.visible p {
	opacity: 1;
	transform: translateY(0);
}