/* CSS Document */

* {
	padding:0;
	margin:0px;
	outline:none;
	}
html, body {
	-webkit-text-size-adjust:100%;
	
}
html {
	font-family: 'Noto Serif JP', YuMincho, "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	font-weight: 600;
	font-style: normal;
	overflow: auto;
}
.en {
	font-family: 'Libre Caslon Text', "Times New Roman", serif;
	font-weight: 500;
}	
body {
	overflow: hidden;
	text-align:center;
	color: #040000;
	line-height: 1.6;
}
img {
	vertical-align:top;
	border:0;
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
	}
a {
	text-decoration: none;
}

li {
	list-style-type: none;
}
p,a,li,div {
	max-height: 100%;
}

/* --- class and other set --- */


.clearfix:after {
    content:"";
    display:block;
    clear:both;
}
@media only screen and (min-width: 768px) {
.left {
	float: left;
}
.right {
	float: right;
}
}

.shadow {
	box-shadow:rgba(0, 0, 0, 0.2) 2px 2px 3px 3px;
}
.just {
	text-align: justify;
	text-justify: inter-ideograph;
}
@media only screen and (max-width: 767px) {
	html { font-size: 3.125vw;}
	#wrap {
		margin: 0 auto;
	}
	.contents {
		margin: 0 1.5rem;
	}
	.pc {
		display: none;
	}
	img{
    	-webkit-touch-callout:none;
    	-webkit-user-select:none;
    	-moz-touch-callout:none;
    	-moz-user-select:none;
    	user-select:none;
	}
}
@media only screen and (min-width: 768px) {
	html { font-size: 2vw;}
	#wrap {
		width: 100%;
	}
	.contents {
		margin: 0 auto;
		width: 100%;
	}
	.sp {
		display: none;
	}
	img {
		pointer-events:none;
	}
}
@media only screen and (min-width: 1000px) {
	html { font-size: 20px;}
	.contents {
		width: 1000px;
	}
}



/* --- orginal set --- */

/* --- titleArea --- */
#mainTitle {
}
#mainTitle .borders .left {
	background-repeat: no-repeat;
	background-image: url(../images/main.jpg);	
}
#menu { background-color: #fae0c9; }
#mainTitle .borders .right .box div a { display: inline-block;}





@media only screen and (min-width: 768px) {
 .borders::after { content:""; display: block; clear: both; }
 .borders .left { width: calc(50% - 0.925rem); }
 .borders .right { width: calc(50% + 0.925rem); position: relative;}
 .borders .right::before { content: ""; display: block; position: absolute; background-color: #df032e; width: 1.85rem; left: 0; }
 .borders .right::after { content: ""; display: block; position: absolute; background-color: #f4cc69; width: 1.15rem; left: 1.85rem; }

#mainTitle { height: 100vh;}
#mainTitle .borders { height: calc(100vh - 2.85rem); width: 100%;}
#mainTitle .borders > div { height: 100%; }
#mainTitle .borders .left { background-position: right top; background-size: auto 100%; }
#mainTitle .borders .right { text-align: left; display: flex; align-items: center; }
#mainTitle .borders .right::before { bottom: 0; height: 25%; }
#mainTitle .borders .right::after { bottom: 0; height: 78.76%; }
#mainTitle .borders .right .box { margin-left: 5.3rem; }
#mainTitle .borders .right .box h1 img { width: 64.5%; padding-bottom: 7.6%; }
#mainTitle .borders .right .box p { padding-bottom: 3.5%; }
#mainTitle .borders .right .box p:nth-child(2) img { width: 63%; }
#mainTitle .borders .right .box p:nth-child(3) img { width: 36.4%;}
#mainTitle .borders .right .box p:nth-child(4) img { width: 62.3%;}
#mainTitle .borders .right .box p:nth-child(4) {font-size: 0.75rem; padding-bottom: 5.7%;}
#mainTitle .borders .right .box div img { vertical-algin: middle; }
#mainTitle .borders .right .box div a:nth-child(1) { margin-left: 24.7%; margin-right: 1.3rem; width:6.825rem;}
#mainTitle .borders .right .box div a:nth-child(2) { width:3.85rem;}

#menu.float { position: fixed; left:0; top: 0; width: 100%; z-index: 1;}
#menu ul{ display: block; text-align: left;}
#menu ul li { display: inline-block; margin: 0 2.5rem 0 0; height: 2.85rem;}
#menu ul li a { font-size: 1rem; line-height: 2.85rem; color:#040000; vertical-align: middle;}
#menu ul li a:hover { text-decoration: underline; }
}
@media only screen and (max-width: 1430px) {
#mainTitle .borders .left { background-position: center top; }
#mainTitle .borders .right .box { margin-right: -20%;}
}

@media only screen and (max-width: 767px) {
.menubtn {  width: 3rem; height: 3rem; top: 1.5rem; display: flex; align-items: center; justify-content: center;}
.menubtn img { width: 70%; }
#menuopen { background-color: rgba(0,0,0,.2); position: fixed; right: 1rem; z-index: 1;}
#menuclose { position: absolute; right: 2rem;}
#menu { position: fixed; left: 200vw; top: 0;  width: 100vw; height: 100vh; transition: all ease .4s; z-index: 1;}
#menu.open { left: 0; }
#menu ul { width: 90%; height: 100%; margin: 10vh 5%;}
#menu ul li { border-bottom: 1px solid #040000; }
#menu ul li:first-child { border-top: 1px solid #040000; }
#menu ul li a { display: block; line-height: 10vh; font-size: 2.2rem; color: #040000; text-align: left;}

#mainTitle .borders .left { background-position: center bottom; background-size: 100% auto; padding-bottom: 128%;}
#mainTitle .borders .right .box { margin: 0 6%; padding: 2rem 0; text-align: left;}
#mainTitle .borders .right .box p:nth-child(2) img { width: 95%; margin: 2rem 0 1.5rem 0; }
#mainTitle .borders .right .box p:nth-child(3) img { width: 70%;}
#mainTitle .borders .right .box p:nth-child(4) img { width: 80%; margin: 1.75rem 0 2.5rem}
#mainTitle .borders .right .box > div { text-align: center; }
#mainTitle .borders .right .box div a { display: block; margin: 0 auto;}
#mainTitle .borders .right .box div a:nth-child(1) { width: 52%; margin-bottom: 2.5rem;}
#mainTitle .borders .right .box div a:nth-child(2) { width: 29.4%;}

}


/* --- main --- */
section .borders { text-align: left;}


/* --- #section1 --- */
#section1 .borders .clearfix:nth-child(2) .right,
#section1 .borders .clearfix:nth-child(3) .left {
	background-repeat: no-repeat;
}
#section1 .borders .clearfix:nth-child(2) .right {
	background-image: url(../images/img01_2.jpg);
}
#section1 .borders .clearfix:nth-child(3) .left {
	background-image: url(../images/img01_1.jpg);
}
#section1 .borders .clearfix:nth-child(2) .left p:nth-child(2) a { color: #018eb5; text-decoration: underline; }

@media only screen and (min-width: 768px) {

#section1 .borders .clearfix .right::before,
#section1 .borders .clearfix .right::after { top: 0; height: 100%; }
#section1 .borders .clearfix:nth-child(1) .right { min-height: 7.8rem; }
#section1 .borders .clearfix:nth-child(1) .left { padding: 1.3rem 0 0;}
#section1 .borders .clearfix:nth-child(1) .left p { font-size: .6rem; margin-bottom: 0.25em; }
#section1 .borders .clearfix:nth-child(1) .left p:nth-child(1) { font-size: .65rem; margin-bottom: 1em;}

#section1 .borders .clearfix:nth-child(2) .left p { margin-left: 2rem;}
#section1 .borders .clearfix:nth-child(2) .left p:nth-child(1) { font-size: .95rem; padding-top: 3.2rem; margin-bottom: 0.75em;}
#section1 .borders .clearfix:nth-child(2) .left p:nth-child(2) a { font-size: .8rem; }
#section1 .borders .clearfix:nth-child(2) .left p:nth-child(3) { font-size: .65rem; margin-top: 1rem; }
#section1 .borders .clearfix:nth-child(2) .right::before,
#section1 .borders .clearfix:nth-child(2) .right::after { content: none;}

#section1 .borders .clearfix:nth-child(2) .right,
#section1 .borders .clearfix:nth-child(3) .left  { min-height: 18.5rem; background-size: auto 100%;}
#section1 .borders .clearfix:nth-child(3) .left { margin-left: -4rem; width: calc(50% - 0.925rem + 4rem); background-position: right top;}
#section1 .borders .clearfix:nth-child(3) .right p { margin-left: 4.1rem; margin-right: 6rem;}
#section1 .borders .clearfix:nth-child(3) .right p:nth-child(1) { font-size: .95rem; padding-top: 1.6rem; margin-bottom: 0.75em;}
#section1 .borders .clearfix:nth-child(3) .right p:nth-child(2) { font-size: .65rem; padding-bottom: 5rem;}
#section1 .borders .clearfix:nth-child(3) .right::after { height: 3.9rem;}
}
@media only screen and (max-width: 1056px) {
#menu ul,
#section1 .borders .clearfix:nth-child(1) .left p { margin-left: 1rem;}
}
@media only screen and (max-width: 767px) {
.borders.contents { margin: 0;}
section p { font-size: 1.1rem;}
#section1 .borders .clearfix {  }
#section1 .borders .clearfix:nth-child(1) .left p { margin-left: 0; line-height: 1.5; font-size: 1rem;}
#section1 .borders .clearfix:nth-child(1) .left p:nth-child(1) { font-size: 1.2rem; margin-bottom:.75rem; }
#section1 .borders .imgarea { margin: 0 -9.6%; padding-bottom: 72%; background-size: cover; }
#section1 .borders .clearfix .txtarea { position: relative; overflow: hidden; padding: 0 8%; padding-bottom: 2.5rem;}
#section1 .borders .clearfix .txtarea::before { content: ""; display: block; position: absolute; background-color: #df032e; width: 1.5%; left: 0;; bottom: 0; height: 200vh;}
#section1 .borders .clearfix .txtarea::after { content: ""; display: block; position: absolute; background-color: #f4cc69; width: 1.5%; left: 1.5%;  bottom: 0; height: 200vh;}
#section1 .borders .clearfix:nth-child(1) .txtarea::before { height: 5.3rem;}
#section1 .borders .clearfix:nth-child(3) .txtarea::after { content: none;}

#section1 .borders p.sub { font-size: 1.6rem; margin: 1em 0 0.75em;}
#section1 .borders p.link { font-size: 1.4rem; margin-bottom: 1em;}

}



/* --- #section2 --- */
#section2 {
	background-color: #4d4d4d;
	color: #fff; }
#section2 .bg {
	background-image: url(../images/img02.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center bottom;
	
}
section h2 { font-weight: 600; }

#section2 .shelf .center {
	background-repeat: no-repeat;
	background-position: center top;
	
}
#section2 .shelf#dish01 .center { background-image: url(../images/img02_1.jpg);}
#section2 .shelf#dish02 .center { background-image: url(../images/img02_2.jpg);}
#section2 .shelf#dish03 .center { background-image: url(../images/img02_3.jpg);}
#section2 .shelf#dish04 .center { background-image: url(../images/img02_4.jpg);}
#section2 .shelf#dish05 .center { background-image: url(../images/img02_5.jpg);}
#section2 .shelf#dish06 .center { background-image: url(../images/img02_6.jpg);}
#section2 .shelf#dish07 .center {
	background-image: url(../images/img02_7.jpg), url(../images/img02_8.jpg);
	background-position: left top, right top;
	background-size: auto 100%, auto 100%;
}


@media only screen and (min-width: 768px) {
#section2 { padding: 0 0 2.8rem;;}
#section2 .bg { padding-top: 51%;}
#section2 h2 { font-size: 2.2rem; padding: 2.5rem 0 2.5rem 0; border-bottom: 1px solid #999; }
#section2 h2 span { display: block; font-size: 43%; margin-top: 0.5em; }
#section2 .shelf { height: 10rem; margin-top: 2rem; text-align: left;}
#section2 .shelf ::after { display: block; content: ""; clear: both; }
#section2 .shelf .left {width: 37.4%; margin-left: 6%; height: 100%; display: flex; align-items: center;}
#section2 .shelf .center {width: 13.2%; height: 100%; float: left; background-size: 100% auto;}
#section2 .shelf .right {width: 40.4%; margin-left: 3%; height: 100%; display: flex; align-items: center;}
#section2 .shelf#dish07 .left {width: 33.8%;  margin-left: 1.5%;}
#section2 .shelf#dish07 .center {width: 30.4%; }
#section2 .shelf#dish07 .right {width: 30.8%; margin-left: 2%; float: left;}
#section2 .shelf .left p.ttl { font-size: 0.95rem;}
#section2 .shelf .left p.en { font-size: 0.65rem; margin-top: 1em;}
#section2 .shelf .right p.ttl { font-size: 0.8rem;}
#section2 .shelf p.sub { font-size: 0.65rem; margin-top: .5em;}
#section2 .shelf .right p.en { font-size: 0.65rem; margin-top: 1em;}
#section2 .shelf#dish07 {
	margin-top: 2.8rem;
	padding-top: 2.8rem;
	border-top: 1px solid #999;
}


}
@media only screen and (max-width: 767px) {
#section2 { text-align: left; }
#section2 .bg { padding-top: 65%;}
#section2 h2 { font-size: 2.5rem; line-height: 1.4; padding: 2rem 0 2.5rem; }
#section2 h2 span { display: block; font-size: 1.2rem; margin-top: .75em; }
#section2 .shelf {padding-bottom: 3rem; border-bottom: 1px solid #999;}
#section2 .shelf:last-child { border-bottom: none;}
#section2 .shelf .left p.ttl { font-size: 1.5rem; margin: 3rem 0 .5em;}
#section2 .shelf .center { margin: 3rem 0 2.25rem 0; padding-bottom: 70%; background-position: center top; background-size: auto 100%;}
#section2 .shelf .right p.ttl { font-size: 1.4rem; margin-bottom: .75em;}
#section2 .shelf p.sub { }
#section2 .shelf p.en { font-size: 1.1rem; margin-top: 1em;}
}


/* --- #section3 --- */
#section3 .container {
	padding-bottom: 56.25%;
	position: relative;
}
#section3 .container iframe { width: 100%; height: 100%; background-color: #999; position: absolute; left: 0; top: 0;}


@media only screen and (min-width: 768px) {
#section3 .borders .left, #section3 .borders .right { height: 6rem;}
#section3 .borders .left { position: relative;}
#section3 .borders .left::after {content: ""; display: block; position: absolute; background-color: #439bb1; width: 1.15rem; right: 0;}
#section3 .borders .right::before { height: 100%; top: 0;}
#section3 .borders .right::after { content: none;}
#section3 .borders.upper .left::after { height: 100%; top: 0;}
#section3 .borders.below .left::after { height: 2.7rem; top: 0;}
}
@media only screen and (max-width: 767px) {
#section3 .contents { margin: 0;}
#section3 .container { margin: 3.5rem 0 3rem;}
}



/* --- bottom --- */
section#contact { padding: 2rem 0; }
section#contact p.link a {
 display: block;
 background-color: #040000;
 color: #fff;
}
section#contact p.link a span.small { font-size: 70%; display: block;}

.links.contents a {
	display: inline-block;
	color: #4d4d4d;
	margin: 0 4em;
}

.links.contents a:hover { text-decoration: underline; }

.pagetop a {
	display: block;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 0.85rem;
	position: fixed;
	right: 2rem;
	bottom: 2rem;
}
.pagetop a:hover { background-color: #999;}




@media only screen and (min-width: 768px) {
section#caution p { font-size: 0.55rem; margin: 1.4rem 4.2rem;}
section#footer { padding-bottom: 2rem;}

section#contact p:nth-child(1) { font-size: 0.85rem;}
section#contact p.link { display: flex; justify-content: space-between; margin: 2rem 10%;}
section#contact p.link a { font-size: 1.3rem; line-height: 1.5rem; width: 47%; transition: all ease .3s; }
section#contact p.link a:nth-child(1) { line-height: 3.5rem;}
section#contact p.link a:nth-child(2) { padding: 0.3rem 0 0.2rem; }
section#contact p.link a:hover { opacity: 0.6; }
section#contact p:nth-child(3) { font-size: 0.85rem; }
section#contact p:nth-child(3) strong { font-size: 1.25rem; line-height: 1.3; font-weight: 600;}
section#contact p:nth-child(4) { font-size: 0.95rem; margin-top: 2em; line-height: 1.3;}
section#contact p:nth-child(4) span { font-size: 0.6rem;}

.links.contents {
	border-top: 1px solid #4d4d4d;
	border-bottom: 1px solid #4d4d4d;
}
.links.contents a { font-size: 0.7rem; line-height: 3;}

}
@media only screen and (max-width: 767px) {
section#caution p { font-size: 1rem; }
section#contact { padding: 3rem 0;}
section#contact p:nth-child(1) { font-size: 1.8rem;}
section#contact p.link a { font-size: 2.7rem; line-height: 2.8rem; margin: .75em 0; padding: 0.4rem 0}
section#contact p.link a:nth-child(1) { line-height: 5.6rem;}
section#contact p.link a:nth-child(2) { padding: 0.5rem 0 0.2rem; }
section#contact p.link a span.small { font-size: 50%;}
section#contact p:nth-child(3) { font-size: 1.5rem; }
section#contact p:nth-child(3) strong { font-size: 2rem; line-height: 1.3; font-weight: 600;}
section#contact p:nth-child(4) { font-size: 1.8rem; margin-top: 2em; line-height: 1.3;}
section#contact p:nth-child(4) span { font-size: 1.2rem;}
.links.contents { padding: 1rem 0 6rem; }
.links.contents a { display: block; font-size: 1.4rem; margin:0; line-height: 3; border-top: 1px solid #4d4d4d;}
.links.contents a:last-child { border-bottom: 1px solid #4d4d4d;}
.pagetop a {
	width: 3rem;
	height: 3rem;
	border-radius: 1.5rem;
	position: fixed;
	right: 1rem;
	bottom: 2rem;
	display: none;
}
}

















/* --- bottom area --- */

@media only screen and (min-width: 768px) {
}
@media only screen and (max-width: 767px) {
}