@charset "UTF-8";

/* ========BASIC======== */
html {
   overflow-y:scroll;
}

body {
   margin:0;
   padding:0;
   line-height:1.6;
   letter-spacing:1px;
   font-family:Verdana, Helvetica, sans-serif;
   font-size:16px;
   background:url(../images/wall2.png) ;  
}

br {
   letter-spacing:normal;
}

a {
   color:#98534B;
   text-decoration:none;
}

a:hover {
   text-decoration:underline;
}

img {
   border:0;
   vertical-align:bottom;
}

h1,h2,h3,h4,h5,h6 {
   margin:0;
}


/* ========MAIN======== */

#main {
   width: 87%;
   margin:0 auto;
   background-color:rgba(255,255,255,0.4);
}

#main h2 {
    font-family: 'Courgette' ;
    font-size: 26px ;
    color:#831c10;
}
 
#main h3 {
    font-family: 'Courgette' ;
    font-size: 20px ;
    color:#831c10;
}



/* ========HEADER CUSTOMIZE======== */

#header {
   position:relative;    
   background-color:;
   width:100%;
   margin:0 auto;
}

#header #pr  {
   background-color:;
   margin:;
}

#header #pr p {
   background-color:;
   padding:20px;
}

#header h1 {
   background-color:;    
   margin:0 auto;
   padding:10px;
   text-align:center;
}

@media screen and (max-width: 479px) {
#header h1 img {
   width:150px;
}
}

@media screen and (max-width: 768px) {
#header h1 img {
   width:200px;
}
}

#gnavi {
   background-color:;
   position:absolute;
   top: 130px;
   right: 30px;   
   margin:0;
   width:380px;
}


@media screen and (max-width: 479px) {
#gnavi {
   display: none;
}
}

@media screen and (max-width: 768px) {
#gnavi img{
   position:absolute;
   top: 20px;
   right: 5px;
   width:200px;
}
}

/* ========CONTENTS======== */

#contents {
   background-color:;    
   width:100%;
   margin:0 auto;
}

/* ========PHOTO-SHOW CUSTOMIZE======== */


#photo-show {
    background-color:; 
    height: 480px; /*表示したい大きさ 縦 */
    width: 640px; /*表示したい大きさ 幅 */
    margin: 0px auto; /*縦余白30pxは任意*/
    max-width: 100%;
    position: relative;
}

@media screen and (max-width: 479px) {
#photo-show {
    background-color:; 
    height: 300px; /*表示したい大きさ 縦 */
    width: 640px; /*表示したい大きさ 幅 */
    margin: 0px auto; /*縦余白30pxは任意*/
    max-width: 100%;
    position: relative;
}
}

#photo-show img {   
    animation: show 24s infinite;
    -webkit-animation: show 27s infinite;
    height: auto;
    max-width: 100%;
    opacity: 0;
    position: absolute; /*画像を全て重ねる*/
}

/*アニメーション*/

@keyframes show {
    0% {opacity:0}
    5% {opacity:2}
    10% {opacity:2}
    20% {opacity:0}
 }

@-webkit-keyframes show {
    0% {opacity:0}
    5% {opacity:2}
    10% {opacity:2}
    20% {opacity:0}
}

/*各画像のアニメーションの開始時間をずらす*/

#photo-show img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

#photo-show img:nth-of-type(2) {
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
}

#photo-show img:nth-of-type(3) {
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
}

#photo-show img:nth-of-type(4) {
    animation-delay: 9s;
    -webkit-animation-delay: 9s;
}

#photo-show img:nth-of-type(5) {
    animation-delay: 12s;
    -webkit-animation-delay: 12s
}

#photo-show img:nth-of-type(6) {
    animation-delay: 15s;
    -webkit-animation-delay: 15s;
}

#photo-show img:nth-of-type(7) {
    animation-delay: 18s;
    -webkit-animation-delay: 18s;
} 
#photo-show img:nth-of-type(8) {
    animation-delay: 21s;
    -webkit-animation-delay: 21s;
}
#photo-show img:nth-of-type(9) {
    animation-delay: 24s;
    -webkit-animation-delay: 24s;
}


/* ========MENU CUSTOMIZE======== */

@media screen and (max-width: 768px) {
.menu {
   display: none;  
}

.menu_1 {
  text-align:center;
  display:block;
}

.menu_1 ul {
   margin:5px;
   padding:0;
}

.menu_1 li {
   margin:0;
   padding:0;   
   font-size:14px;
   color:#fff;
   text-align:center;
   list-style-type:none;
}

.menu_1 li a {
   display:block;
   width:100%;   
   padding:10px 0;
   color:#fff;
   background:#e35e01;
}

.menu_1 li a:hover {
   text-decoration:none;
   background:#FFD204;
}
}

@media screen and (min-width: 769px) {
.menu_1 {
   display: none;
} 
 
.menu {
   display:block;
   height: 50px; /*表示したい大きさ 縦 */
   width: 760px; /*表示したい大きさ 幅 */
   margin: 0px auto; /*縦余白30pxは任意*/
   background-color:; 
   margin-bottom:20px;
   font-size:14px;   
}

.menu:after, .menu:before {
    margin-top:0.5em;
    content: "";
    float:left;
    border:1.5em solid #e35e01;
}
  
.menu:after {
    border-right-color:transparent;
}
  
.menu:before {
    border-left-color:transparent;
}

.menu a:link, .menu a:visited { 
    color:#fff;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}

.menu span {
    background:#e35e01;
    display:inline-block;    
    line-height:3em;
    padding:0 0.9em;
    margin-top:0.5em;
    position:relative;
  
    -webkit-transition: background, margin 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background, margin 0.2s;  /* FF4+ */
    -ms-transition: background, margin 0.2s;  /* IE10 */
    -o-transition: background-color, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background, margin 0.2s;
}
  
.menu a:hover span {
    background:#FFD204;
    margin-top:0;
}
  
.menu span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #ff9900;
    border-bottom:0.5em solid #e35e01;
}
  
.menu span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #ff9900;
    border-bottom:0.5em solid #e35e01;
}
}




/* ========STORY======== */

#story {
   margin:50px;   
}



/* ========INFO CUSTOMIZE======== */

#info {
   background-color:;  
   padding:10px;  
   margin-right:10px;
   float:left;
   width:45%;   
}

@media screen and (max-width: 479px) {
#info  {
   margin-right:5px;
   width:90%;
}
}



/* ========CALENDAR CUSTOMIZE======== */

#calendar {
   background-color:; 
　 margin-left:5px;   
   float:left;
   width:45%;
}

@media screen and (max-width: 479px) {
#calendar  {
   margin-right:50px;
   width:95%;
}
}

/* ========CAKE======== */

.notice{
   margin-top:10px;
   margin-left:50px;
   width:100%;
   height:auto;
　 background-color:;    
   clear:both;
}

@media screen and (max-width: 479px) {
.notice{
   margin-top:10px;
   margin-left:20px;
   width:100%;
   height:auto;
　 background-color:;    
   clear:both;
}
}

.category{   
   width:45%;
   background-color:; 
   margin-right:5px;
   padding:8px;
   float:left; 
}

@media screen and (max-width: 479px) {
.category{   
   width:200px;
   background-color:; 
   margin-right:5px;
   padding:8px;
   float:left; 
}
}

.category2{   
   width:31%;
   background-color:; 
   margin-right:5px;
   padding:8px;
   float:left; 
}

/* ========ACCESS======== */

#access{ 
    margin:50px;
    clear:both;    
    }

@media screen and (max-width: 479px) {
#access  img{
   width:100%;
}
}

/* ========PAN======== */

.pan{
    margin:50px;
    }

/* ========TOP－PHOTO======== */

.top-photo{
   text-align: center;
   width:100%;
   }

@media screen and (max-width: 768px) {
.top-photo img{
   width:100%;
}
}

@media screen and (min-width: 769px) {
.top-photo img{
   width:650px;
}
}



/* ========SHOP======== */

#shop{
   margin:20px 50px;
   }

#shop table {         
   width:100%;
   border-collapse:collapse;
}

#shop table th {
   padding:8px 50px;
   font-size:14px;
   color:#fff;
   text-align:center;
   border:1px solid #ddd;
   background:#e35e01;
}

#shop table td {
   padding:8px 80px;
   font-size:14px;
   text-align:left;
   border:1px solid #ddd;
}

@media screen and (max-width: 768px) {
#shop table th {
   padding:5px 5px;
   font-size:12px;
   color:#fff;
   text-align:center;
   border:1px solid #ddd;
   background:#e35e01;
}
#shop table td {
   padding:5px 5px;
   font-size:12px;
   text-align:left;
   border:1px solid #ddd;
}
#shop img{
   width:100%;
}
}
/* ========BLOCK======== */



.block1{
   margin:10px;
   float:left;
   width:100%;
}


@media only screen and (max-width: 425px){
.block{
  margin: 5%;
  width: 90%;
}
.block img{
  margin-bottom: 5px;
}
}
@media only screen and (min-width: 426px){
.block{
  margin: 5%;
  width: 90%;
}
.block img{
  margin-bottom: 5px;
}
}
@media only screen and (min-width: 768px){
.block{
  margin: 5%;
  width: 90%;
}
.block img{
  margin-bottom: 5px;
}
}


/* ========PETIT GATEAU======== */

#petitgateau{
    margin:50px;
}

/* ========PAGETOP CUSTOMIZE======== */
#pagetop {
   clear:both;
}

#pagetop {
   margin:10px;
   padding:10px 0;
   text-align:right;
}

#pagetop a {
   padding:0 0 0 12px;
   background:url(images/bg_pagetop.gif) 0 60% no-repeat;
}

/* ========FOOTER CUSTOMIZE======== */
#footer {
   width:100%;
   clear:both;
   padding:10px 0;
}

#footer {
   text-align:center;
   padding:20px 0;
}

.copyright {
   font-size:11px;
   margin:5;
}

/* ========FOOTMENU CUSTOMIZE========= */
#footmenu {
   background-color:; 
   width:90%;
   margin: 5%;
   clear:both;
   overflow:hidden;
   padding:;
}

#footmenu {
   position:relative;
   padding:20px 0 0 0;
   border-top:1px solid #CECFCE;
}

#footmenu ul {
   position:relative;
   left:50%;
   float:left;
   margin:0;
   padding:0;
   list-style:none;
}

#footmenu li {
   position:relative;
   left:-50%;
   float:left;
   margin:0 20px 0 0;
   padding:0;
   font-size:12px;
}