@charset "UTF-8";
:root{
	--body : #423604;
	--link : #423604;
	--primary : #5da126;
}
/*--------------------------------------------
HTML
---------------------------------------------*/
@media screen and (max-width: 768px){
	html{
		font-size : calc( 10 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1485px){
	html{
		font-size : calc( 10 * 100vw / 1160 );
	}
}
@media print,screen and (min-width: 1486px){
	html{
		font-size : 10px;
	}
}
/*--------------------------------------------
BODY
---------------------------------------------*/
body{
	background-color : #efece4;
}
@media screen and (max-width: 768px){
	body{
		font-size : 2.4rem;
		padding-top : calc( 150 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	body{
		font-size : 1.6rem;
	}
}
/*--------------------------------------------
WRAPPER
---------------------------------------------*/
@media screen and (max-width: 768px){
	.wrap{
		padding-left : calc( 48 * 100% / 768 );
		padding-right : calc( 48 * 100% / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1485px){
	.wrap{
		padding-left : calc( 50 * 100% / 1160 );
		padding-right : calc( 50 * 100% / 1160 );
	}
}
@media print,screen and (min-width: 1486px){
	.wrap{
		margin-left : auto;
		margin-right : auto;
		max-width : 1360px;
		padding-left : 15px;
		padding-right : 15px;
	}
}
/*--------------------------------------------
HEADER
---------------------------------------------*/
#header{
	background : url("../images/ui/bg/pattern01.jpg") repeat;
}
@media screen and (max-width: 768px){
	#header{
		position : fixed;
		top : 0;
		left : 0;
		width : 100%;
		z-index : 10;
	}
	#header .wrap{
		padding-left : calc( 26 * 100% / 768 );
		padding-right : 0;
		padding-top : calc( 38 * 100vw / 768 );
		height : calc( 150 * 100vw / 768 );
	}
	#header .logo img{
		height : calc( 77 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1485px){
	#header{
		position : relative;
	}
	#header .wrap{
		padding-top : calc( 23 * 100vw / 1160 );
		height : calc( 150 * 100vw / 1160 );
		height : calc( 150 * 100vw / 1160 );
	}
	#header .logo img{
		height : calc( 50 * 100vw / 1160 );
	}
}
@media print,screen and (min-width: 1486px){
	#header .wrap{
		max-width : 1600px;
		padding-left : 6px;
		padding-right : 6px;
		display : flex;
		align-items : flex-start;
		justify-content : space-between;
		height : 150px;
		padding-top : 46px;
	}
	#header .logo img{
		height : 50px;
	}
}
/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/
body:not(.is-open) #menuBtn{
	background-image : url("../images/header/menu.png");
	background-position : left 50% bottom calc( 21 * 100vw / 768 );
	background-size : auto calc( 11 * 100vw / 768 );
	background-repeat : no-repeat;
}
@media screen and (max-width: 768px){
	body.is-open{
		overflow : hidden;
	}
	body.is-open #menuBtn > span:nth-of-type(1) span{
		top : calc( 12 * 100vw / 768 );
	}
	body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
		transform : rotate(-45deg);
	}
	body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
		transform : rotate(45deg);
	}
}
@media screen and (max-width: 768px){
	#menuBtn{
		z-index : 11;
		position : absolute;
		top : calc( 30 * 100vw / 768 );
		right : calc( 25 * 100% / 768 );
		width : calc( 90 * 100% / 768 );
		height : calc( 90 * 100vw / 768 );
		padding-left : calc( 17 * 100% / 768 );
		padding-right : calc( 17 * 100% / 768 );
		padding-top : calc( 30 * 100vw / 768 );
		padding-bottom : calc( 30 * 100vw / 768 );
		border-radius : 50%;
		background-color : #fff;
	}
	#menuBtn span{
		font-size : 0;
	}
	#menuBtn > span:nth-of-type(1){
		width : 100%;
		height : 100%;
		position : relative;
		display : block;
	}
	#menuBtn span span{
		display : block;
		position : absolute;
		left : 0;
		transition : all .4s;
		width : 100%;
		background-color : #401000;
		height : calc( 6 * 100vw / 768 );
		border-radius : calc( 3 * 100vw / 768 );
	}
	#menuBtn span span:nth-of-type(1){
		top : 0;
	}
	#menuBtn span span:nth-of-type(2){
		bottom : calc( 10 * 100vw / 768 );
	}
}
/*--------------------------------------------
NAV
---------------------------------------------*/
@media screen and (max-width: 768px){
	body.is-open #nav{
		max-height : 100vh;
	}
}
@media screen and (max-width: 768px){
	#nav{
		background-color : rgba(66,54,4,.9);
		position : fixed;
		left : 0;
		width : 100%;
		z-index : 10;
		transition : max-height .5s ease-in;
		max-height : 0;
		overflow : hidden;
		overflow-y : scroll;
		top : 0;
		height : 100vh;
	}
	#nav .scroll{
		padding-top : calc( 160 * 100vw / 768 );
		padding-bottom : calc( 344 * 100vw / 768 );
		padding-left : calc( 84 * 100% / 768 );
		padding-right : calc( 84 * 100% / 768 );
	}
	#nav #btnClose{
		display : block;
		width : calc( 41 * 100% / 600 );
		margin-left : auto;
		margin-right : auto;
		margin-top : calc( 75 * 100vw / 768 );
	}
	#nav #btnClose img{
		width : 100%;
		height : auto;
	}
}
@media print,screen and (min-width: 1486px){
	#nav{
		padding-top : 6px;
	}
	#nav .scroll{
		display : flex;
		align-items : center;
	}
}
@media screen and (max-width: 768px){
	#navGlobal li + li{
		margin-top : calc( 40 * 100vw / 768 );
	}
	#navGlobal a{
		display : block;
		text-align : center;
	}
	#navGlobal .home img , #navGlobal .feature img{
		height : calc( 36 * 100vw / 768 );
	}
	#navGlobal .news img{
		height : calc( 35 * 100vw / 768 );
	}
	#navGlobal .activity img , #navGlobal .map img , #navGlobal .sponsor img{
		height : calc( 38 * 100vw / 768 );
	}
	#navGlobal .bakery img , #navGlobal .aboutus img{
		height : calc( 37 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#navGlobal{
		display : flex;
	}
}
@media screen and (min-width: 769px) and (max-width:1485px){
	#navGlobal{
		margin-top : calc( 34 * 100vw / 1160 );
	}
	#navGlobal > li{
		flex-grow : 1;
	}
	#navGlobal a{
		display : block;
		text-align : center;
		width : 100%;
	}
	#navGlobal img{
		height : calc( 15 * 100vw / 1160 );
	}
	#navGlobal .sponsor img{
		height : calc( 16 * 100vw / 1160 );
	}
}
@media print,screen and (min-width: 1486px){
	#navGlobal li + li{
		margin-left : 8px;
	}
	#navGlobal img{
		height : 15px;
	}
	#navGlobal .sponsor img{
		height : 16px;
	}
}
@media screen and (max-width: 768px){
	#navSub{
		margin-top : calc( 74 * 100vw / 768 );
	}
	#navSub li + li{
		margin-top : calc( 37 * 100vw / 768 );
	}
	#navSub img{
		height : calc( 80 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#navSub{
		display : flex;
	}
}
@media screen and (min-width: 769px) and (max-width:1485px){
	#navSub{
		position : absolute;
		top : calc( 28 * 100vw / 1160 );
		right : calc( 50 * 100% / 1160 );
	}
	#navSub li + li{
		margin-left : calc( 4 * 100vw / 1160 );
	}
	#navSub img{
		height : calc( 40 * 100vw / 1160 );
	}
}
@media print,screen and (min-width: 1486px){
	#navSub{
		margin-left : 9px;
	}
	#navSub li + li{
		margin-left : 5px;
	}
	#navSub img{
		height : 40px;
	}
}
/*--------------------------------------------
TITLE
---------------------------------------------*/
#title{
	background : url("../images/ui/bg/pattern01.jpg") repeat;
}
#title h1{
	text-align : center;
	font-weight : 700;
	letter-spacing : .1em;
	text-indent : .1em;
}
#title h1[data-en]:after{
	content : attr(data-en);
	display : block;
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
}
@media screen and (max-width: 768px){
	#title .wrap{
		padding-top : calc( 62 * 100vw / 768 );
		height : calc( 270 * 100vw / 768 );
	}
	#title h1{
		font-size : 4.6rem;
	}
	#title h1[data-en]:after{
		margin-top : calc( 30 * 100vw / 768 );
		font-size : 2.6rem;
	}
}
@media print,screen and (min-width: 769px){
	#title{
		position : relative;
	}
	#title .wrap{
		position : relative;
	}
	#title .wrap:before , #title .wrap:after{
		content : "";
		display : block;
		position : absolute;
		background-repeat : no-repeat;
		background-position : 0;
		background-size : contain;
		z-index : 1;
	}
	#title .wrap:before{
		background-image : url("../images/ui/bread/bread01.png");
	}
	#title h1{
		font-size : 3.4rem;
		line-height : 1.0588;
	}
	#title h1[data-en]:after{
		font-size : 2.4rem;
		line-height : 1.5;
	}
}
@media screen and (min-width: 769px) and (max-width:1485px){
	#title .wrap{
		padding-top : calc( ( 49 - 1 ) * 100vw / 1160 );
		height : calc( 200 * 100vw / 1160 );
	}
	#title .wrap:before{
		width : calc( 263 * 100% / 1160 );
		height : calc( 166 * 100vw / 1160 );
		top : calc( 22 * 100vw / 1160 );
		left : calc( -189 * 100% / 1160 );
	}
	#title .wrap:after{
		background-image : url("../images/ui/bread/bread02.png");
		width : calc( 145 * 100% / 1160 );
		height : calc( 132 * 100vw / 1160 );
		top : calc( 45 * 100vw / 1160 );
		left : calc( 1065 * 100% / 1160 );
	}
}
@media print,screen and (min-width: 1486px){
	#title .wrap{
		padding-top : calc( 49px - 1px );
		height : 200px;
	}
	#title .wrap:before{
		width : 263px;
		height : 166px;
		top : 22px;
		left : -89px;
	}
	#title .wrap:after{
		background-image : url("../images/ui/bread/breads01.png");
		width : 284px;
		height : 191px;
		top : 40px;
		left : 1165px;
	}
}
/*--------------------------------------------
BREADCRUMBS
---------------------------------------------*/
#breadcrumbs{
	display : flex;
	flex-wrap : wrap;
}
#breadcrumbs a:after{
	content : " ／ ";
	margin-left : .5em;
	margin-right : .5em;
}
@media screen and (max-width: 768px){
	#breadcrumbs{
		min-height : calc( 112 * 100vw / 768 );
		padding-top : calc( ( 16 - 4 ) * 100vw / 768 );
		padding-bottom : calc( ( 38 - 4 ) * 100vw / 768 );
	}
	#breadcrumbs li , #breadcrumbs a{
		font-size : 2.6rem;
		line-height : 1.3077;
	}
}
@media print,screen and (min-width: 769px){
	#breadcrumbs li , #breadcrumbs a{
		font-size : 1.8rem;
		line-height : 1.5;
	}
}
@media screen and (min-width: 769px) and (max-width:1485px){
	#breadcrumbs{
		padding-top : calc( ( 22 - 4.5 ) * 100vw / 1160 );
		padding-bottom : calc( ( 32 - 4.5 ) * 100vw / 1160 );
	}
}
@media print,screen and (min-width: 1486px){
	#breadcrumbs{
		padding-top : calc( 22px - 4.5px );
		padding-bottom : calc( 34px - 4.5px );
	}
}
/*--------------------------------------------
COLUMN
---------------------------------------------*/
@media screen and (min-width: 769px) and (max-width:1485px){
	#column #sidebar{
		display : flex;
		justify-content : center;
		align-items : flex-start;
	}
}
@media print,screen and (min-width: 1486px){
	#column{
		display : flex;
		align-items : flex-start;
		justify-content : space-between;
	}
	#column #article{
		width : 1060px;
	}
	#column #sidebar{
		width : 250px;
	}
}
/*--------------------------------------------
PICKUP
---------------------------------------------*/
#pickup{
	background : url("../images/ui/bg/pattern01.jpg") repeat;
}
#pickup h5{
	text-align : center;
}
#pickup ul{
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
}
#pickup a{
	display : block;
}
@media screen and (max-width: 768px){
	#pickup .wrap{
		padding-top : calc( 70 * 100vw / 768 );
		padding-bottom : calc( 60 * 100vw / 768 );
		padding-left: calc( 10 * 100vw / 768 );
		padding-right: calc( 10 * 100vw / 768 );
	}
	#pickup h5 img{
		height : calc( 50 * 100vw / 768 );
	}
	#pickup ul{
		margin-top : calc( 76 * 100vw / 768 );
	}
	#pickup li:nth-child(even){
		margin-left : calc( 26 * 100% / 672 );
	}
	#pickup li:nth-child(n+3){
		margin-top : calc( 23 * 100vw / 768 );
	}
	#pickup li img{
		height : calc( 323 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1485px){
	#pickup .wrap{
		padding-top : calc( 52 * 100vw / 1160 );
		padding-bottom : calc( 70 * 100vw / 1160 );
	}
	#pickup h5 img{
		height : calc( 30 * 100vw / 1160 );
	}
	#pickup ul{
		margin-top : calc( ( 38 - 20 ) * 100vw / 1160 );
		margin-left : calc( -20 * 100% / 1060 );
	}
	#pickup li{
		margin-top : calc( 20 * 100vw / 1160 );
		margin-left : calc( 20 * 100% / 1080 );
	}
	#pickup li img{
		height : calc( 250 * 100vw / 1160 );
	}
}
@media print,screen and (min-width: 1486px){
	#pickup .wrap{
		padding-top : 52px;
		padding-bottom : 55px;
	}
	#pickup h5 img{
		height : 30px;
	}
	#pickup ul{
		margin-top : calc( 38px - 20px );
		margin-left : -20px;
	}
	#pickup li{
		margin-top : 20px;
		margin-left : 20px;
	}
	#pickup li img{
		height : 250px;
	}
}
/*--------------------------------------------
FOOTER
---------------------------------------------*/
#footer{
	background-color : #250d05;
}
#footer .copyright{
	text-align : center;
}
@media screen and (max-width: 768px){
	#footer .wrap{
		padding-top : calc( 50 * 100vw / 768 );
		padding-bottom : calc( 208 * 100vw / 768 );
	}
	#footer .copyright img{
		height : calc( 24 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#footer .box{
		display : flex;
		align-items : flex-start;
	}
	#footer .nav01{
		display : flex;
		flex-wrap : wrap;
	}
	#footer .nav01 li:nth-child(-n+4){
		order : 1;
	}
	#footer .nav01:before{
		content : "";
		width : 100%;
		height : 0;
		order : 2;
	}
	#footer .nav01 li:nth-child(n+5){
		order : 2;
	}
	#footer .nav01 a{
		display : block;
	}
	#footer .nav02{
		display : flex;
		flex-wrap : wrap;
		justify-content : flex-end;
	}
	#footer .nav02 li:nth-child(1){
		order : 1;
		width : 100%;
	}
	#footer .nav02 li:nth-child(2){
		order : 3;
	}
	#footer .nav02 li:nth-child(n+3){
		order : 2;
	}
	#footer .nav02 a{
		display : block;
	}
}
@media screen and (min-width: 769px) and (max-width:1485px){
	#footer .wrap{
		padding-top : calc( 44 * 100vw / 1160 );
	}
	#footer h5{
		flex-shrink : 0;
		padding-top : calc( 8 * 100vw / 1160 );
		margin-right : calc( 47 * 100% / 1060 );
	}
	#footer h5 img{
		height : calc( 41 * 100vw / 1160 );
	}
	#footer .nav01{
		padding-top : calc( 8 * 100vw / 1160 );
	}
	#footer .nav01 li:not(:nth-child(1)):not(:nth-child(5)){
		margin-left : calc( 16 * 100vw / 1160 );
	}
	#footer .nav01 li:nth-child(n+5){
		margin-top : calc( 24 * 100vw / 1160 );
	}
	#footer .nav01 img{
		height : calc( 18 * 100vw / 1160 );
	}
	#footer .nav01 .news img{
		height : calc( 14 * 100vw / 1160 );
	}
	#footer .nav01 .sponsor img{
		height : calc( 16 * 100vw / 1160 );
	}
	#footer .nav02{
		width : calc( 220 * 100% / 1060 );
		margin-left : calc( 45 * 100% / 1060 );
		flex-shrink : 0;
	}
	#footer .nav02 li:nth-child(1){
		margin-bottom : calc( 14 * 100vw / 1160 );
	}
	#footer .nav02 li:nth-child(2){
		margin-left : calc( 6 * 100vw / 1160 );
	}
	#footer .nav02 li:nth-child(4){
		margin-left : calc( 4 * 100vw / 1160 );
	}
	#footer .nav02 img{
		height : calc( 40 * 100vw / 1160 );
	}
	#footer .copyright{
		margin-top : calc( 24 * 100vw / 1160 );
	}
	#footer .copyright img{
		height : calc( 11 * 100vw / 1160 );
	}
}
@media print,screen and (min-width: 1486px){
	#footer .wrap{
		padding-top : 44px;
		padding-bottom : 57px;
	}
	#footer .box{
		justify-content : flex-end;
	}
	#footer h5{
		flex-shrink : 0;
		padding-top : 8px;
		margin-right : 47px;
	}
	#footer h5 img{
		height : 41px;
	}
	#footer .nav01{
		padding-top : 8px;
	}
	#footer .nav01 li:not(:nth-child(1)):not(:nth-child(5)){
		margin-left : 16px;
	}
	#footer .nav01 li:nth-child(n+5){
		margin-top : 24px;
	}
	#footer .nav01 img{
		height : 15px;
	}
	#footer .nav01 .news img{
		height : 14px;
	}
	#footer .nav01 .sponsor img{
		height : 16px;
	}
	#footer .nav02{
		width : 220px;
		margin-left : 45px;
		flex-shrink : 0;
	}
	#footer .nav02 li:nth-child(1){
		margin-bottom : 14px;
	}
	#footer .nav02 li:nth-child(2){
		margin-left : 6px;
	}
	#footer .nav02 li:nth-child(4){
		margin-left : 4px;
	}
	#footer .nav02 img{
		height : 40px;
	}
	#footer .copyright{
		margin-top : 24px;
	}
	#footer .copyright img{
		height : 11px;
	}
}
html{
  scroll-behavior: smooth;
}


#page_top{
  width: 60px;
  height: 60px;
  position: fixed;
  opacity: 0.8;
}
#page_top a{
  width: 60px;
  height: 60px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f139';
  font-size: 50px;
  color: #ffd00e;
}

@media screen and (max-width: 768px){
	#page_top{
	  right: 5px;
	  bottom: 5px;
	}
	#page_top a{
		display: block;
	}	
}
@media screen and (min-width: 769px) and (max-width:1485px){
}
@media print,screen and (min-width: 1486px){
}