@charset "utf-8";
/* CSS Document */

html {
	font-size: 62.5%;
}
body {
	font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
	font-size: 1.6rem;
	margin: 0;
	/*background-color: #797572;
	background-image: -webkit-linear-gradient(263deg, rgba(255, 255, 255, 0.2) 0%, #0b0b0d 100%), -webkit-linear-gradient(18deg, rgba(255, 255, 255, 0.25) 25%, rgba(0, 0, 0, 0.25) 100%), -webkit-radial-gradient(47% 102%, rgba(255, 255, 255, 0.5) 0%, rgba(21, 24, 32, 0.6) 120%);
	background-image: linear-gradient(-173deg, rgba(255, 255, 255, 0.2) 0%, #0b0b0d 100%), linear-gradient(72deg, rgba(255, 255, 255, 0.25) 25%, rgba(0, 0, 0, 0.25) 100%), radial-gradient(47% 102%, rgba(255, 255, 255, 0.5) 0%, rgba(21, 24, 32, 0.6) 120%);
	background-blend-mode: multiply;*/
	background-color: #0b0b0d;
	background-repeat: no-repeat;
	background-attachment: fixed;
    background-position: right bottom;
	overflow-x: hidden;
}
h1, figure {
	margin: 0;
}
h2, h3, h4, p, table, dl {
	color: #fff;
}
h2 {
	margin: 160px 0 24px;
	font-family: serif;
	font-size: 1.8em;
	line-height: 1.8;
}
h3 {
	margin: 48px 0 8px;
	font-family: serif;
	line-height: 2.0;
}
p,tr,.tab_wrap{
	font-family: serif;
}
img {
	vertical-align:bottom;
}
img, video {
	width: 100%;
}
p, td {
	line-height: 2.2;
}
a {
	text-decoration: none;
}
table, th, td {
	border-collapse: collapse;
    /* border: 1px solid #555; */
	border-top: 1px solid #555;
    border-bottom: 1px solid #555;
}
	th {
		text-align: left;
		background-color: rgba( 255, 255, 255, 0.1 );
		font-weight: normal;
	}
	th, td {
		padding: 32px;
	}

footer {
	width: 100%;
}
    footer p.footer-link {
        padding: 120px 0;
		text-align: center;
	}
    footer p.footer-link a {
		color: #eee;
        text-decoration: underline;
	}
	footer p.footer-copy {
		color: #888;
		text-align: center;
		margin: 0;
		padding: 120px 0;
		font-size: .7em;
	}

.fixed-item {
	position: fixed;
	width: 120px;
	bottom: 4px;
	left: 4px;
	z-index: 2;
}

/* 上部分 start*/

	/* 共通 start */
	.firstview {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #0b0b0d;
		z-index: 100;
		display: grid;
		place-items: center;
		pointer-events: none;
	}
	.firstview-image {
        width: 64px;
		opacity: 0;
    }

	.top-logo{
		text-align: center;
		background-color: #0b0b0d;
		z-index: 2;
		padding: 8px 0;
	}
	.top-logo img{
		width: 40px;
	}

	.shari-box{
		display: flex;
	}

	.shop-name{
		text-shadow: 0 0 5px #0b0b0d,0 0 5px #0b0b0d,0 0 5px #0b0b0d,0 0 5px #0b0b0d;
		margin: 1em 0 2em;
	}

	.linkbutton {
		position: relative;
		display: block;
		padding: 1.6rem 2rem 1.6rem 4rem;
		font-size: 1.6rem;
		line-height: 1.5;
		color: #fff;
		width: 26rem;
		margin: 3rem auto;
		box-sizing: border-box;
		transition: all .3s linear;
		text-align: left;
		background-color: #0b0b0d;
	}
	.linkbutton::before{
		content: '';
		position: absolute;
		bottom: 2.2rem;
		right: 3.2rem;
		width: 5.2rem;
		height: 1px;
		background: #fff;
		transition: all .3s;
	}
	.linkbutton::after{
		content: '';
	  	position: absolute;
		bottom: 2.6rem;
		right:3rem;
		width: 15px;
		height:1px;
	  	background:#fff;
		transform: rotate(35deg);
		transition: all .3s;
	}

	.linkbutton:hover {
		background: #fff;
		color: #0b0b0d!important;
		/* border-radius: 26px; */
	}
	.linkbutton:hover::before{
		right:2.4rem;
		background: #0b0b0d!important;
	}
	.linkbutton:hover::after{
		right:2.2rem;
		background: #0b0b0d;
	}

	.sp { display: none; }
	/* 共通 end */



	/* 菌 start*/
	.kin-box {
		background: #222;
		padding: 56px 0 40px;
	}
	.kin-box-image {
		text-align: center;
		height: 560px;
		width: 93.5%;
		max-width: 1000px;
		margin: auto;
		background-image: url(../img/kinshari_image.jpg);
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.kin-box-logo {
		max-width: 280px;
		width: 48%;
	}
	.kin-box .linkbutton {
		margin: 0 auto;
		top: -24px
	}
	/* 菌 end*/



	/* カフェ start*/
	.cafe-box {
		background: #efeae6;
		padding: 56px 0 40px;
	}
	.cafe-box-logo {
		width: 480px;
		margin: 0 auto 8px;
		position: relative;
		z-index: 1;
	}
	.cafe-box-image {
		text-align: center;
	}
	.cafe-box-image img {
		object-fit: cover;
		height: 560px;
		width: 93.5%;
		max-width: 1000px;
		margin: auto;
	}
	.cafe-box .linkbutton {
		margin: 0 auto;
		top: -24px
	}
	/* カフェ end*/



	/* 黒しゃり start*/
	.kuroshari-box{
		position: relative;
		width: 50%;
		height: 760px;
		background: url("../img/kuroshari_bg.jpg");
		background-size: cover;
		background-attachment: fixed;
	}

	.kuroshari-box .kuroshari-box-contents{
		position: absolute;
		top: 184px;
		right: 18%;
		text-align: center;
	}


	.kuroshari-box .kuroshari-box-contents a{
		color: #fff;
		margin-bottom: 0;
	}

	.kuroshari-box .kuroshari-box-contents img{
		width: 224px;
		filter: drop-shadow(5px 5px 5px #0b0b0d);
	}
	/* 黒しゃり end*/



	/* 肉しゃり start*/
	.nikushari-box{
		position: relative;
		width: 50%;
		height: 760px;
		background: url("../img/nikushari_bg.jpg");
		background-size: cover;
		background-attachment: fixed;
	}

	.nikushari-box .nikushari-box-contents{
		position: absolute;
		top: 184px;
		left: 18%;
		text-align: center;
	}

	.nikushari-box .nikushari-box-contents a{
		color: #fff;
		margin-bottom: 0;
	}

	.nikushari-box .nikushari-box-contents img{
		width: 224px;
		filter: drop-shadow(5px 5px 5px #0b0b0d);
	}
	/* 肉しゃり end*/



	/* バナー start*/
	.bnr-box {
		background: #222;
		padding: 40px 0;
	}
	.bnr-box-inner {
		max-width: 1000px;
		width: 93.5%;
		margin: auto;
	}
	/* バナー end*/

/* 上部分 end*/


/* 下部分 start*/
	.part-bottom{
		margin-bottom: 120px;
	}
	.part-bottom.mB0{
		margin-bottom: 0;
	}

	.part-bottom .logo{
		margin-top: 120px;
		text-align: center;
	}

	.part-bottom img{
		width: 103px;
	}

	.part-bottom .part-bottom-title{
		text-align: center;
		margin: 40px auto 50px;
		width: 200px;
		border-bottom: solid 1px white;
		font-size: 1.3em;
		font-weight: normal;
	}

	.part-bottom table{
		margin:0 auto;
		width: 93.5%;
		max-width: 1000px;
	}

	table tr td:first-child{
		background-color: #292929;
		text-align: center;
	}

	.tab_wrap {
		width: 93.5%;
		max-width: 1000px;
		margin: 0 auto;
	}
	input[type="radio"] { display: none; }
	.tab_area { font-size: 0; margin: 0 10px; text-align: center; }
	.tab_area label { width: 31%; margin: 0 5px; display: inline-block; padding: 12px 0; color: #fff; background:#292929; text-align: center; font-size: 16px; cursor: pointer; transition: ease 0.2s opacity; }
	.tab_area label:hover { opacity: 0.5; }
	.panel_area { background: #fff; }
	.panel_area p,.panel_area h3,.panel_area h4 { color: #0b0b0d; }
	.tab_panel { width: 100%; padding: 64px; display: none; box-sizing: border-box; }
	.tab_panel h3 {
		padding: 1em 0;
		margin: 3em 0 1em;
		border-top: solid 3px #0b0b0d;
		border-bottom: solid 1px #0b0b0d;
	}
	.tab_panel h4 {
		padding: 0.25em 0.5em;
		margin: 2em 0 1em;
		border-left: solid 3px #0b0b0d;
	}
	.tab_panel a.link_underline {
		text-decoration: underline;
		color: #0b0b0d;
	}
	.tab_panel img {
		width: 100%;
	}
	.tab_panel table {
		margin: 2em 0 0;
		border-top: 1px solid rgba(78, 122, 154, 0.5);
		color: #0b0b0d;
		font-size: 15px;
		line-height: 2;
		width: 100%;
	}
	.tab_panel table tr {
		border-bottom: 1px solid rgba(78, 122, 154, 0.5);
	}
	.tab_panel table tr > :first-child {
		background: none;
		width: 25%;
    	font-weight: 500;
		vertical-align: top;
	}
	.tab_panel .tab_panel_flex {
		display: flex;
		justify-content: space-between;
	}
	.tab_panel .tab_panel_flex.tab_panel_flex--center {
		justify-content: center;
	}
	.tab_panel .tab_panel_flex .tab_panel_flex_half {
		width: 49.8%;
	}
	.tab_panel .tab_panel_flex.tab_panel_flex--center .tab_panel_flex_half {
		width: 60%;
	}

	#tab1:checked ~ .tab_area .tab1_label { background: #fff; color: #0b0b0d; }
	#tab1:checked ~ .panel_area #panel1 { display: block; }
	#tab2:checked ~ .tab_area .tab2_label { background: #fff; color: #0b0b0d; }
	#tab2:checked ~ .panel_area #panel2 { display: block; }
	#tab3:checked ~ .tab_area .tab3_label { background: #fff; color: #0b0b0d; }
	#tab3:checked ~ .panel_area #panel3 { display: block; }

	.btn-appli {
		display: block;
		background: #0b0b0d;
		color: #fff;
		padding: 1em;
		margin: 2em auto;
		width: 90%;
		text-align: center;
		transition: .3s;
	}
	.btn-appli:hover {
		background: #444;
	}

	.sp-br{
		display: none;
	}
/* 下部分 end*/


/* スマホ版 start*/
@media screen and (max-width: 767px) {
	.pc { display: none; }
	.sp { display: inherit; }
	html {
		overflow-x: hidden;
	}
	h2 {
		font-size: 1.5em;
	}
	p, a, td {
		font-size: 14px;
	}
	td {
		padding: 16px;
	}

	.fixed-item {
		width: 80px;
	}

	.sp-br {
		display: inherit;
	}


/* 上部分 start*/
	/* 共通 start */

	.firstview-image {
        width: 16vw;
    }

	.top-logo{
		padding: 0;
	}

	.top-logo img{
		top: 10px;
		left: 3.25%;
		width: 10vw;
		position: absolute;
	}

	.shari-box{

		flex-direction: column;
	}

	.shop-name{
		font-size: 20px;
		margin: 0 0 -1em;
	}

	.linkbutton:hover::before{
		right: 1.4rem;
	}

	.linkbutton:hover::after{
		right: 1.2rem;
	}
	/* 共通 end */

	/* 菌 start*/
	.kin-box {
		transform: rotate(-9.5deg) translate3d(0, 0, 0);
		width: 150%;
		margin: 13%  auto -7.5% -25%;
		padding: 80px 0 40px;
	}
	.kin-box-inner {
		transform: rotate(9.5deg) translate3d(0, 0, 0);
	}
	.kin-box-image {
		width: 62%;
		height: 56vh;
		margin: auto;
	}
	/* 菌 end*/

	/* カフェ start*/
	.cafe-box {
		transform: rotate(-9.5deg) translate3d(0, 0, 0);
		width: 150%;
		margin: 9.5%  auto -7.5% -25%;
	}
	.cafe-box-inner {
		transform: rotate(9.5deg) translate3d(0, 0, 0);
	}
	.cafe-box-logo {
		width: 48%;
	}
	.cafe-box-image {
		width: 62%;
		margin: auto;
	}
	.cafe-box-image img {
		height: 56vh;
		width: 100%;
	}
	/* カフェ end*/

	/* 黒しゃり start*/
	.kuroshari-box {
		width: 100%;
		height: 330px;
		position: relative;
		background:none;
	}

	.kuroshari-box::after{
		content: '';
		position: absolute;
		left:0;
		top: 0;
  
		/*四角形を傾ける*/
		transform: skewY(170deg);
		transform-origin: top right;
		background-image: url("../img/kuroshari_bg.jpg");
		background-size: cover;
		z-index: 1;
		width:100%;
		height:100%;
	}

	.kuroshari-box .kuroshari-box-contents{
		z-index: 2;
		display: flex;
		align-items: center;
		width: 80%;
		margin: 140px auto;
		position: relative;
		top:0;
		left:0;
	}

	.kuroshari-box .kuroshari-box-contents img{
		width: 90%;
		margin-right: 20%;
	}

	.kuroshari-box .kuroshari-box-contents > p{
		width: 50%;
		height: 50%;
		margin: auto;
	}

	.kuroshari-box .kuroshari-box-contents > div{
		width: 50%;
	}	
	/* 黒しゃり end*/

	/* 肉しゃり start*/
	.nikushari-box{
		width: 100%;
		height: 330px;
		position: relative;
		background: none;
	}

	.nikushari-box::after{
		content: '';
		position: absolute;
		left:0;
		top: 0;
  
		/*四角形を傾ける*/
		transform: skewY(170deg);
		transform-origin: top right;
		background-image: url("../img/nikushari_bg.jpg");
		background-size: cover;
		z-index: 1;
		width:100%;
		height:100%;
	}

	.nikushari-box .nikushari-box-contents{
		z-index: 2;
		display: flex;
		align-items: center;
		width: 80%;
		margin: 140px auto;
		position: relative;
		top:0;
		left:0;
	}

	.nikushari-box .nikushari-box-contents img{
		width: 90%;
		margin-right: 20%;
	}

	.nikushari-box .nikushari-box-contents > p{
		width: 50%;
		height: 50%;
		margin: auto;
	}

	.nikushari-box .nikushari-box-contents > div{
		width: 50%;
	}
	/* 肉しゃり end*/

	/* バナー start*/
	.bnr-box {
		transform: rotate(-9.5deg) translate3d(0, 0, 0);
		width: 150%;
		margin: 9.5%  auto -7.5% -25%;
	}
	.bnr-box-inner {
		transform: rotate(9.5deg) translate3d(0, 0, 0);
		width: 63.5%;
	}
	/* バナー end*/
/* 上部分 end*/


/* 下部分 start*/

	.part-bottom .logo{
		margin-top: 136px;
	}

	.part-bottom img{
		width: 15vw;
	}

	table tr td:first-child{
		width: 32%;
	}

	table tr td a {
		color: #fff;
    	text-decoration: none;
	}

	.tab_area label {
		width: 100%;
		margin: 0;
		border-bottom: 1px solid #555;
	}
	.tab_area label:last-child {
		border-bottom: 0;
	}
	.tab_area label:hover { opacity: 1; }
	.tab_panel { padding: 16px; }
	.tab_panel img {
		width: 100%;
	}
/* 下部分 end*/

}


@media screen and (max-width: 540px) {
	.linkbutton{
		width: 15rem;
		padding: 1rem 1.8rem;
		font-size: 1.4rem;;
	}

	.linkbutton::before{
		bottom: 1.6rem;
		right: 2rem;
		width: 3rem;
	}

	.linkbutton::after{
		bottom: 1.9rem;
		right: 1.9rem;
		width: 11px;
	}
}


@media screen and (max-width: 360px) {
	.shop-name{
		font-size: 17px;
	}

	.linkbutton{
		width: 13rem;
		padding: 1rem 1.4rem;
		font-size: 1.2rem;;
	}

	.linkbutton::before{
		right: 1.5rem;
		width: 2.5rem;
	}

	.linkbutton::after{
		bottom: 1.8rem;
		right: 1.4rem;
		width: 8px;
	}

	.linkbutton:hover::before{
		right:0.9rem;
		width: 2.5rem;
	}

	.linkbutton:hover::after{
		right:0.7rem;
	}
}


@media screen and (max-width: 280px) {
	.linkbutton{
		width: 11rem;
		padding: 1rem 1rem;
		font-size: 1.2rem;
	}
	
	.linkbutton::before{
		right: 1.3rem;
		width: 2rem;
	}
	
	.linkbutton::after{
		bottom: 1.8rem;
		right: 1.1rem;
		width: 8px;
	}

	.linkbutton:hover::before{
		right:0.9rem;
		width: 2rem;
	}
	
	.linkbutton:hover::after{
		right:0.7rem;
	}
}
/* スマホ版 end*/

/* javascript用 start*/
.sa {
	opacity: 0;
	transition: all .5s ease;
}
.sa.show {
	opacity: 1;
	transform: none;
}
.sa--lr {
	transform: translate(-50px, 0);
}
.sa--rl {
	transform: translate(50px, 0);
}
.sa--up {
	transform: translate(0, 50px);
}
.sa--down {
	transform: translate(0, -50px);
}
.sa--scaleUp {
	transform: scale(.8);
}
.sa--scaleDown {
	transform: scale(1.2);
}
.sa--rotateL {
	transform: rotate(180deg);
}
.sa--rotateR {
	transform: rotate(-180deg);
}
/* javascript用 end*/