@charset "utf-8";
/*********************************
#gnav
*********************************/
#gnav h1 {
	top: 3rem;
	left: 5%;
	z-index: 1030;
}
#gnav h1 img { width: 100%; height: auto; }
#gnav > * { transition: all 1s ease!important; }
#gnav .nav-b {
	top: 0;
	right: 5%;
	z-index: 1030;
}
#gnav .nav-b a {
	writing-mode: vertical-rl;
	display: inline-block;
	color: #fff!important;
	padding-bottom: 1rem;
}
#gnav .nav-b a span {
	display: inline-block;
	width: .1rem;
	height: 2rem;
	border-left: .1rem solid #fff;
}
#gnav a:hover {
	transform: translateY(.25rem);
	padding-bottom: .5rem;
	opacity: 1!important;
}
#gnav span {
	display: inline-block;
	width: .1rem;
	height: 2rem;
	border-left: 1px solid #fff;
}
#gnav a:hover span {
	transform: translateY(-.25rem);
	height: 2.5rem;
}
#gnav .bg-box {
	display: block;
	background-color: rgba(255,255,255,.9);
}
#gnav .bg-box a { color: #383838!important; }
#gnav .bg-box div a span { border-left: 1px solid #383838; }
@media (max-width: 576.98px) {
	#gnav h1 {
		top: 0;
		left: 0;
		padding: 1rem 0 1rem 2.5%;
		background-color: rgba(255,255,255,1);
	}
	#gnav h1.logo-b { opacity: 1!important; }
	#gnav h1.logo-w { opacity: 0!important; }
	#gnav h1 img { width: 55%; }
	#gnav .nav-b {
		height: 10.798rem;
		left: 10rem;
		right: 0;
		text-align: right;
		background-color: rgba(255,255,255,1);
	}
	#gnav .nav-b a {
		writing-mode: horizontal-tb;
		padding-top: .5rem;
		padding-bottom: .5rem;
		color: #383838!important;
	}
	#gnav .nav-b a span { display: none; }
}



/*********************************
#top-copy
*********************************/
#top-copy {
	width: 36rem;
	top: 50vh;
	left: 15%;
	color: #fff;
	z-index: 1030;
	transform-origin: top left;
	transition: color 1s ease, opacity 1s ease, visibility 1s ease, scale 1s ease!important;
}
#top-copy p:nth-child(2) { padding-left: 50%; }
#top-copy p:nth-child(3) { padding-left: 75%; }
@media (max-width: 576.98px) {
	#top-copy {
		width: 80%;
		left: 10%;
	}
	#top-copy p:nth-child(2) { padding-left: 30%; }
	#top-copy p:nth-child(3) { padding-left: 45%; }
}



/*********************************
#top-background
*********************************/
#top-background {
	position: relative;
	width: 100vw;
	min-height: 120vh;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#top-background::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.25);
}



/*********************************
#concept
*********************************/
#concept {
	top: 150vh;
	left: 0;
	width: 100%;
	z-index: 1029;
}
#concept .tategaki { height: 62rem; }
.bg-paper {
	background-image: url('img/body-back-paper.jpg');
	background-position: center;
	background-repeat: repeat;
}
@media (max-width: 576.98px) {
	#concept .tategaki { height: 22rem; }
	#concept .tategaki h2 { line-height: 1.5; }
}



/*********************************
#ichidagaki / #shikuramen / #etc共通
*********************************/
.title-area {
	width: 30%;
	height: 40rem;
}
.title-area .tategaki.number { text-combine-upright: all; }
.con-area { width: 70%; }
.con-area .img-area {
	margin-top: -54rem;
	max-height: 80vh;
}
.con-area .img-area img {
	max-height: 80vh!important;
	object-fit: cover;
}
@media (max-width: 767.98px) {
	.con-area .img-area { margin-top: -65%; }
}
@media (max-width: 575.98px) {
	.con-area .img-area { margin-top: -50%; }
}



/*********************************
#ichidagaki / #shikuramen / #etc共通
slick
*********************************/
.slick-list {
	position: relative;
	z-index: 1;
	padding-top: 4rem!important;
	padding-bottom: 4rem!important;
}
.slick-prev { left: 0!important; }
.slick-next { right: 0!important; }
.slick-prev,
.slick-next {
	position: relative;
	z-index: 2;
	width: 25vw!important;
	transition: cursor 1s ease!important;
}
.slick-prev:before,
.slick-next:before { display: none!important; }
.slick-prev.slick-disabled,
.slick-next.slick-disabled { display: none!important; }
.slick-prev:hover,
.slick-prev:focus { cursor: url(img/prev.svg),auto; }
.slick-next:hover,
.slick-next:focus { cursor: url(img/next.svg),auto; }
.slick-dots li { margin: 0!important; }
.slick-list .slider_item {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.slick-list .slider_item img {
    height: 25vw;
    object-fit: cover;
}
.slick-list .slider_item:hover,
.slick-list .slider_item:focus { cursor: grab; }
@media (max-width: 1199.98px) {
	.slick-list .slider_item img { height: 40vw; }
}
@media (max-width: 767.98px) {
	.slick-list .slider_item {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.slick-list .slider_item img { height: 50vw; }
}
@media (max-width: 575.98px) {
	.slick-list .slider_item {
		padding-left: .5rem;
		padding-right: .5rem;
	}
	.slick-list .slider_item img { height: 60vw; }
	.slick-dots { bottom: 0!important; }
}



/*********************************
#ichidagaki / #shikuramen / #etc共通
.store-link
*********************************/
.store-link {
	transition: all 0s ease!important;
	transition: transform 1s ease!important;
}
.store-link:hover,
.store-link:focus {
	border-color: #004A06!important;
	background: #004A06!important;
	opacity: 1!important;
	color: #fff!important;
	transform: translateX(1rem);
}
.store-link:hover > *,
.store-link:focus > * { 
	opacity: 1!important;
	color: #fff!important;
}
.store-link span { transition: transform 1s ease, border-color 1s ease!important; }
.store-link:hover span.border-bottom,
.store-link:focus span.border-bottom { border-color: #fff!important; }
.store-link:hover span.yajirushi,
.store-link:focus span.yajirushi { transform: translateX(1rem); }



/*********************************
#about
*********************************/
#about .img-area { margin-top: -54rem; }
#about .text-area { margin-top: -10%; }



#about .text-area .tategaki { height: 62rem; }
@media (max-width: 767.98px) {
	#about .text-area .tategaki { height: 20rem; }
	#about .text-area .tategaki h2 {
		height: 20rem;
		line-height: 1.5;
	}
}
@media (max-width: 699.98px) {
	#about .text-area .tategaki h2 { height: 18rem; }
}
@media (max-width: 599.98px) {
	#about .text-area .tategaki h2 { height: 17rem; }
}
@media (max-width: 575.98px) {
	#about .text-area .tategaki h2 { height: 16rem; }
}
@media (max-width: 419.98px) {
	#about .text-area .tategaki h2 { height: 15rem; }
}
@media (max-width: 344.98px) {
	#about .text-area .tategaki h2 { height: 14rem; }
}
@media (max-width: 319.98px) {
	#about .text-area .tategaki h2 { height: 13rem; }
}



#about .title-area {
	width: 30%;
	height: auto;
}
#about .con-area {
	width: 70%;
	height: auto;
}
#about table th {
	width: 15rem;
	line-height: 1.5;
	padding-bottom: 2rem;
	vertical-align: top;
	font-weight: normal;
}
#about table td {
	width: calc(100% - 20rem);
	line-height: 1.5;
	padding-bottom: 2rem;
	vertical-align: top;
}
@media (max-width: 1399.98px) {
	#about .text-area {
		margin-top: 10%;
		margin-bottom: 10%;
		margin-left: auto;
		margin-right: 10%;
	}
}
@media (max-width: 767.98px) {
	#about .img-area { margin-top: -55%; }
	#about .text-area { margin-right: auto; }
	#about .title-area,
	#about .con-area { width: 100%; }
}
@media (max-width: 575.98px) {
	#about table th {
		width: 12rem;
		padding-bottom: 1rem;
	}
	#about table td {
		width: calc(100% - 17rem);
		padding-bottom: 1rem;
	}
}



/*********************************
#contact
*********************************/
#contact a.ig:hover,
#contact a.ig:focus {
	transform: translateX(1rem);
	opacity: 1!important;
}
#contact a.ig span.yajirushi { transition: transform 1s ease; }
#contact a.ig:hover span.yajirushi,
#contact a.ig:focus span.yajirushi { transform: translateX(1rem); }
#contact .slash .border-top { transform: rotate(-60deg); }


@media (max-width: 991.98px) {
	#contact .slash .border-top { transform: rotate(-70deg); }
}
@media (max-width: 767.98px) {
	#contact .slash .border-top { transform: rotate(10deg); }
}