@charset "utf-8";
@import "reset.css";
@import "setup.css";

@font-face {
  font-family: 'curu';
  src: url('../font/curu.ttf') format('truetype');
}
.curu{  font-family: 'curu';}

/*基本設定*/
html {
height:100%;
margin:0;
}

body {
position: relative;
margin:0px auto;
padding:0px;
line-height: 1.5;
color:#555;
overflow:auto;
text-align:center;
}
a:link{
color:#C39953;
text-decoration:underline;
}
a:hover{
color:#926315;
text-decoration:none;
}
a:visited{
color:#C39953;
text-decoration:underline;

}
a:active{
outline:none;
}
a{
outline:none;
}

img { vertical-align: bottom; width: 100%;}
a img:hover {
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
	opacity: 0.7;	}

.dflex{display:flex;}
.jsb{justify-content:space-between;}
.pink{color: #F067A6;}

@media (min-width: 768px) {
/* tablet+PC用 */
    .for-tbpc { display: block;}
    .for-sp {display: none;} /*spだけ表示on*/
    .wpr {
        clear: both;
        margin:0 3%;}
.pc_fl{ float: left;}
.pc_fr{ float: right;}
.left{ float: left;}
.right{ float: right;}

}

@media (min-width: 768px) and (max-width: 1024px){
/* tablet用 */
    .for-pc { display: none !important;} /*PCだけ表示on*/
    img { max-width: 100%;}
}
@media (min-width: 1025px) {
/* PC用 */
    .for-tb {display: none;}
    .for-pc {display: block;} /*PCだけ表示on*/
    
    .wpr {
        width:1000px;
        margin:0 auto;
    }
}

@media (max-width: 767px) {
/* SP用 */
    .for-tbpc{ display: none !important;} /*tbとpcだけ表示on*/
    .for-sp{display: block;} /*spだけ表示on*/
    .for-tb{display: none !important;} /*tbだけ表示on*/
    .for-pc{display: none !important;} /*PCだけ表示on*/
    .spn{ display: none; }
    .wpr {
        clear: both;
        margin:0;
    }

    .smt30{ margin-top: 30px; }
    .smt50{ margin-top: 50px; }
    .smb10{ margin-bottom: 10px; }
    .smb30{ margin-bottom: 30px; }
    .sp_img img{ width: inherit; }

    .imga{ width: auto; }
    .img100{ width: 100%; }
    .spdn{ display: none; float: none !important; }
    .spfn{ float: none !important; }
    .sw10 img{ width: 10% !important; margin: auto; text-align: center; }
    .sw20 img{ width: 20% !important; margin: auto; text-align: center; }
    .sw30 img{ width: 30% !important; margin: auto; text-align: center; }
    .sw40 img{ width: 40% !important; margin: auto; text-align: center; }
    .sw50 img{ width: 50% !important; margin: auto; text-align: center; }
    .sw60 img{ width: 60% !important; margin: auto; text-align: center; }
    .sw70 img{ width: 70% !important; margin: auto; text-align: center; }
    .sw80 img{ width: 80% !important; margin: auto; text-align: center; }
    .spf14{ font-size: 14px !important; }
    .pd10{  padding: 10px;}
    .smb10{ margin-bottom: 10px; }
    .ttlh20{width: auto !important; height: 20px !important;}

}/* sp_end



/* css_start
--------------------------------------------------*/

/* header
-------------------------*/
#header{
    position: fixed;
    display: block;
    width: 100%;
    z-index: 9999;
 background-color:#FFF;
	opacity: 0.8;
} 
#header2{
	display: flex;
	justify-content: space-between;
 background-color:#FFF;
	width: 960px;
	margin: 0 auto;
 padding: 30px 0;
} 
#header h1{ width:200px; margin: 0 auto; text-align: center; padding: 30px 0;} 
#header2 h1{ width:200px; margin: 0; text-align:left;} 


@media (max-width: 767px) {	
#header h1{ width:30%; margin: 0 auto; text-align: center; padding: 20px 0;} 

#header2{width:94%; margin:3% auto; padding: 5px 0;}
#header2 h1{ width:200px; margin: 0; text-align:left;} 
}
/* gnav
-------------------------*/
@media (min-width: 767px) {
nav .menu{display: flex; font-family: 'curu';}
nav .menu li {
list-style: none;
}
nav .menu li a{
padding: 0px 10px;
text-decoration: none;
}

nav .menu li a:hover {
transition:all .5s ease-out;
	text-decoration: underline;
}
nav .menu li.dflex{justify-content: space-between;}
	nav .menu li.dflex a{padding: 0px 5px;}
nav .menu li img{ height:30px; margin-top: -5px;}
}

@media (max-width: 767px) {

nav.globalMenuSp {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background: #fff;
    color: #000;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;z-index: 10000000!important;
}

nav.globalMenuSp ul {
    background: #FFF;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0 0 0 10px;
    width: 100%;
	text-align: left;
	border-bottom: 1px dotted #CCC;
}

nav.globalMenuSp ul li a:hover {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
	opacity: 0.5;	}

/* 最後はラインを描かない */
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}




/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateY(0%);
}


.navToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 10px;
    top: 10px;
    width: 42px;
    height: 40px;
    cursor: pointer;
    z-index: 3;
    background: #C39953;
    text-align: center;z-index: 1000000000;
}

.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 26px;
    border-bottom: solid 3px #eee;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 8px;
}

.navToggle span:nth-child(1) {
    top: 9px;
}

.navToggle span:nth-child(2) {
    top: 18px;
}

.navToggle span:nth-child(3) {
    top: 27px;
}

.navToggle span:nth-child(4) {
    border: none;
    color: #FFF;
    font-size: 9px;
    font-weight: bold;
    top: 34px;
}


/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.globalMenuSp{ padding-top: 50px;}
nav .menu li {
list-style: none;
}
nav .menu li a{
display: table;
margin-top: 1px;
padding: 14px 10px;
width: 100%;
text-decoration: none;
text-align: left;
vertical-align: middle;
overflow: hidden;
transition:all .5s ease-out;
}

nav .menu li a:hover {
transition:all .5s ease-out;
}

	nav .menu li.dflex{text-align:center;margin: 0 auto; justify-content: center;}

	nav .menu li.dflex a{text-align:center; width: inherit;}
}
	nav .menu li img{ height:30px; width: 30px;;margin-top: -5px;}
}


/* main
-------------------------*/


#main{width:100vw; height: 100vh;  margin: 0 auto; text-align: center; background: url("../img/fairy2.jpeg") 50% 50% no-repeat;background-size: 100% auto;} 
#main_960{ width: 960px; margin: 0 auto; text-align: center; } 

@media (max-width: 767px) {	
#main{width:100%; height: auto;  margin: 0 auto; text-align: center; background: url("../img/fairy2.jpeg") 50% 0% no-repeat;background-size: 100% auto;} 
#main_960{ width: 100%; margin: 0 auto; text-align: center; } 

}










/* h2
-----------------*/
h2{font-size:30px;color: #C39953; margin:0 auto 50px;  font-family: 'curu';
	background: url("../img/h2_bg.png") 50% 100% no-repeat; padding-bottom: 30px; background-size: 180px auto;
}

@media (max-width: 767px) {

}

/* wrap
-------------------------*/
#wrap{
	padding-top: 100px;
width:960px;
margin:0 auto;
	font-size :15px;
}
@media (max-width: 767px) {
	#wrap{ width:94%; margin:3% auto;	padding-top: 50px;}
}

/* contents
-------------------------*/
.box{ margin-bottom: 80px;    padding-top: 150px;   margin-top:-150px;}
#about h3{ font-size: 24px; margin-bottom: 50px; font-family: 'curu';line-height: 1.5;} 
#about p{line-height: 2;}


@media (max-width: 767px) {
.box{ margin-bottom: 50px;}
#about h3{ font-size: 18px; margin-bottom: 30px; } 
}

/* list__box
-------------------------*/

.list_box ul li h3{text-align:center;font-size: 20px; margin: 15px auto 10px; font-family: 'curu'; color: #C39953;font-weight: bold;}
.list_box ul li h4{text-align:center;font-size: 14px; margin:0 auto 15px auto; color: #C39953;font-weight: bold;}
.list_box ul li p{font-size:12px;}
.list_box ul li .photo_area{
	position:relative;
display: inline-block;}

.list_box ul li .photo_area img:nth-of-type(2){
    position: absolute;
    left: 0%;
    top: 0%;
    height: auto;
	z-index: 100;
}

.list_box ul li .photo_area h3{
    position: absolute;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    bottom:5px ;
    height: auto;
	z-index: 1000;
	 font-family: 'curu';
	color: #FFF;
	font-size: 20px;
	text-shadow:  1px 2px 3px #333300; 
	white-space: nowrap;
}
	.list_box ul li .txt_area dl{display: flex; justify-content: space-between; text-align: left; font-size: 14px; margin-top: 10px;}
	.list_box ul li .txt_area dl dt{color: #C39953;font-weight: bold; width: 5em;}
	.list_box ul li .txt_area dl dd{width:calc(100% - 5em);}

@media (max-width: 767px) {
	.list_box ul li{ padding-bottom:	15px; border-bottom: 1px dotted #cccccc; margin-bottom: 15px;}
	.list_box ul li:last-child{  border-bottom: none; margin-bottom: 0px;}
	.list_box ul li .photo_area{display: block;pointer-events: all;cursor: pointer;}
	.list_box ul li .txt_area{display: none; margin-top: 10px;}
}

/* sns_area
-------------------------*/
#about .sns_area{ margin:50px auto; display: flex;justify-content: center;gap:30px;}
#about .sns_area a img{ height: 50px;width: 50px;}

.list_box .sns_area{ margin:30px auto 0; display: flex;justify-content: center;gap:30px;}
.list_box .sns_area a img{ height: 30px;width: 30px;}
@media (max-width: 767px) {
.list_box .sns_area{ margin:10px auto 0; }
.list_box .sns_area a img{ height: 20px; width: 20px;}
}

/* bnr_area
-------------------------*/
.bnr_area{
width:960px;
margin:0 auto;
text-align:left;
display: flex;
flex-wrap: wrap;
margin-bottom: 100px;
gap: 20px;}
.bnr_area.c3{gap: 30px;
	margin-bottom: 30px;
}
.bnr_area li{width: calc(25% - 15px);}
.bnr_area.c3 li{width: calc(33.333% - 20px);}

@media (max-width: 767px) {
.bnr_area{ width:94%; margin:2% auto;}
.list_box .bnr_area{ display: block;}
.list_box .bnr_area li{ display: flex; width: 100%;}
#marche_box.list_box .bnr_area.c3,#food_box.list_box .bnr_area.c3,#workshop_box.list_box .bnr_area.c3{ display: flex; width: 100%;flex-wrap: wrap;gap: 0; margin-bottom: 0px;justify-content: space-between;}
#marche_box.list_box .bnr_area li,#food_box.list_box .bnr_area li,#workshop_box.list_box .bnr_area li{ display: flex; width: 48%;flex-wrap: wrap;}

.list_box .bnr_area li h3{ font-size: 16px;margin: 0px auto 10px; }
.list_box .bnr_area.sp_db li{display:block;}
 }/* paetop
-------------------------*/

#pagetop{
	position: fixed;
	bottom:120px;
	right: 10px;
width: 80px;}

@media (max-width: 767px) {
#pagetop{display: none!important;}
#pagetop img{display: none!important;}
}

/* footer
-------------------------*/
#footer{
}


#copyright{
text-align: center;
font-size:93%;
color:#999;
padding:10px;
}
@media (max-width: 767px) {
#footer .inner{
width:94%; margin:3% auto;
}


#copyright{

}}



/* under
---------------------------------*/