html,body { margin:0; padding:0; font-family: "Kaisei Decol", serif; font-weight: 400; font-style: normal; background-color:#aa7d75; }
img { vertical-align:middle; }
body * { box-sizing: border-box; margin:0; padding:0; }


h2 { text-align:center; margin:0 auto; }

.frmBox  { width:90%; max-width:1200px; margin:0 auto; }
.flexBox { display:flex; justify-content: space-between; }

/* header */
header { /* position:fixed; top:0; left:0; */width:100%; height:245px; background:url("images/header_bk.jpg") no-repeat center 31px;  }
header div#hcopy { background-color:#533833; color:#FFF; text-align:center; height:32px; line-height:32px; }
header .flexBox {  justify-content: flex-end; align-items: center; margin-top:28px; height:150px; }
header ul#menu { list-style-type:none; display:flex; justify-content: space-between; align-items: center;  }
header ul#menu li { padding:0 12px; }
header ul#menu li:nth-child(5) { border-left:1px solid #FFF; padding-left:28px; margin-left:28px; }
header ul#menu li:last-child { padding-right:0; }
header a  { color:#FFF; text-decoration:none; }
header a:hover { color:#533833; }  
/* */
footer { background-color:#533833; color:#FFF; text-align:center; padding:16px 0; }
footer a { color:#FFF; text-decoration:none; }
footer ul { display:flex; justify-content: center; list-style-type:none; margin:0 0 16px 0; padding:0; }
footer li { margin:0; padding:0 12px; border-right:1px solid #FFF; }
footer li:first-child { border-left:1px solid #FFF; }
footer img { margin-bottom:16px; }


/* section */
section { 
  padding:48px 0;
  line-height:180%; 
}
section h2 { text-align:center; width:90%; margin:0 auto;   }
section h2 img { max-width:100%; height:auto; }
section h3 { text-align:center; font-size:28px; font-weight: 900; padding:24px 0; line-height:180%; }

/* 初期表示用*/
div#action { 
  background-color:#533833; display:flex; justify-content: center; text-align:center; align-items: center; flex-wrap:wrap;
  position: absolute;
  left: 0;
  top: 0;
  z-index:0;
  width: 100%;
  height: 100vh;
  margin: 0;
  color:#FFF;

}
div#action img { width:120px; }
#enterIcon { cursor:pointer; }

/* main */
section#main { 
	width:100%; height:100vh; 
	display:flex; text-align:center; align-items: center;
	background-image:url("images/tp_main.jpg"),url("images/tp_main2.jpg"); background-repeat:repeat-x; background-position: center 0; background-size: auto 100%;


	padding:0;
	clip-path: circle(0px at center);
        /* animation: clipPath 10s cubic-bezier(.220, .60, .350, 1) 0s 1 forwards; */
}
section#main.active { animation: clipPath 10s cubic-bezier(.220, .60, .350, 1) 0s 1 forwards,image_anime 4s ease 5s forwards; }
@keyframes clipPath {
0% {
  clip-path: circle(0 at 50% 50%);
  }
  100% {
  clip-path: circle(100% at 50% 50%);
  }
}

section#main.bkactive { 
  ; 
  animation-fill-mode: forwards;
  animation-delay: 10s;
}

@keyframes image_anime {
  100% {
    /* 切り替え後の画像 */
    background-image: url(images/tp_main2.jpg); 
  }
}


section#main h1 { margin:0 auto; color:#FFF; font-size:42px; background: linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); line-height:64px;  animation: fadeIn 14.0s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* about */
section#about p  { margin:24px; text-align:center; }
section#about ul { list-style-type:none; display:flex; justify-content: space-between; flex-wrap:wrap; width:90%; max-width:1200px; margin:0 auto; }
section#about li { width:33%; margin:4px 0; position:relative; }
section#about li:first-child { width:100%; margin-bottom:24px; }
section#about li img { width:100%; height:auto; }
section#about li img.imgFrame { position:absolute; top:-12px; left:-12px; width:1224px; }

@media screen and (max-width: 548px) {
	section#about li img.imgFrame { width:95vw; top:-2.0vw; left:-2.5vw;}
}
/* menu */
section#menu p  { margin:0 auto 24px; text-align:center; }
section#menu ul { list-style-type:none; display:flex; justify-content: space-between; flex-wrap:wrap; width:90%; max-width:1200px; margin:0 auto; }
section#menu li { width:33%;}
section#menu li img { width:100%; height:auto; }

section#menu h3 { border-bottom:1px solid #000; width:90%; max-width:1200px; margin:0 auto; }
section#menu h4 { text-align:center; margin:24px 0; }

section#menu ul#mPage li { width:49%; margin-bottom:24px; }
section#menu ul#mPage li:nth-child(n+3) { width:32%;}

section#menu ul.mList { width:90%; max-width:680px; position:relative; left:32px;}
section#menu ul.mList li { width:50%; }

/* information */
section#info { background-color:#dddabe; }
section#info h2 { font-size:16px; }
section#info ul { list-style-type:none; width:90%; max-width:1200px; margin:24px auto; padding:0; }
section#info li {  width:100%; margin:0 0 8px 0; }
section#info li a  { display:flex; justify-content: start;  color:#000; text-decoration:none; padding:8px; background-color:#FFF;  }
section#info li a:hover { background-color:rgba(255,255,255,0.6); }
section#info li div:first-child { margin-right:24px; }

/* access */
section#access { background:url("images/acc_bk.jpg") no-repeat center 0; color:#FFF; }
section#access .flexBox div { width:50%; }
section#access .frmFrm div img { width:100%; }
section#access h2 { margin-top:48px; }
section#access h3  { border-bottom:1px solid #FFF; width:90%; max-width:1200px; margin:0 auto 16px; padding:16px 0; }
div#shopInfo { width:90%; max-width:840px; margin:0 auto; display:flex; justify-content: space-between; font-size:12px; line-height:160%; }


a.btn { width:240px; display:block; margin:0 auto; background-color:#533833; color:#FFF; text-decoration:none; text-align:center; border-radius:16px; }
a.btn:hover { background-color:rgba(83,56,51,0.6); }


.hamburger-menu { display:none; }


/* contact */
section#contact { }
#FormBox { width:90%; max-width:640px; margin:0 auto; }
#FormBox dl { }
#FormBox dd { margin-bottom:8px; }
#FormBox input { padding:4px; width:100%; }
#FormBox textarea { padding:4px; width:100%; height:100px; }
.btnBox { text-align:center; }
.btnBox button { padding:6px; border:1px solid #533833; background-color:#533833; border-radius:16px; color:#FFF; }
.mgbox { text-align:center; color:#533833; background-color:#dddabe; margin-top:8px; }


@media screen and (max-width: 548px) {

	header ul#menu { display:none; }
	.hamburger-menu { display:block; }

	section { overflow:hidden; }
	section p { font-size:3.2vw; width:90%; margin:0 auto; }
	section h2 img { width:auto; max-width:100%; }
	section#main h1 { font-size:4.2vw; }

	header { text-align:center; overflow:hidden; height:96px;  }
	header .flexBox { margin-top:2px; }
	header h1 img { width:56px; height:auto;  }

	section#menu h3 { font-size:3.8vw; }

	section#menu ul.mList { position:relative; left:0;}
	section#menu li { font-size:3.0vw; }


	section#info li a  { display:block; }

	section#access { background-size:auto 100%; }
	section#access .flexBox { display:block; }
	section#access .flexBox div { width:100%; overflow:hidden; }

	section#access h3  { font-size:4.2vw; }
	div#shopInfo { display:block; font-size:2.2vw; line-height:160%; }




/* */
	.hamburger-menu { display:block; }
	.menu-btn {
	    position: fixed;
	    top: 10px;
	    right: 10px;
	    display: flex;
	    height: 26px;
	    width: 26px;
	    justify-content: center;
	    align-items: center;
	    z-index: 90;
	    background-color: #000;
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
	    content: '';
	    display: block;
	    height: 3px;
	    width: 22px;
	    border-radius: 3px;
	    background-color: #ffffff;
	    position: absolute;
	}
	.menu-btn span:before {
	    bottom: 8px;
	}
	.menu-btn span:after {
	    top: 8px;
	}

	#menu-btn-check:checked ~ .menu-btn span {
	    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	}
	#menu-btn-check:checked ~ .menu-btn span::before {
	    bottom: 0;
	    transform: rotate(45deg);
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
	    top: 0;
	    transform: rotate(-45deg);
	}
	#menu-btn-check {
	    display: none;
	}


	.menu-content ul {
	    padding: 40px 10px 0;
	}
	.menu-content ul li {
	    border-bottom: solid 1px #999;
	    list-style: none;
	}
	.menu-content ul li a {
	    display: block;
	    width: 100%;
	    font-size: 15px;
	    box-sizing: border-box;
	    color:#FFF;
	    text-decoration: none;
	    padding: 9px 15px 10px 0;
	    position: relative;
	}
	.menu-content ul li a::before {
	    content: "";
	    width: 7px;
	    height: 7px;
	    border-top: solid 2px #999;
	    border-right: solid 2px #999;
	    transform: rotate(45deg);
	    position: absolute;
	    right: 11px;
	    top: 16px;
	}

	.menu-content {
	    width: 100%;
	    height: 100vh;
	    position: fixed;
	    top: 0;
	    left: 100%;
	    z-index: 80;
	    background-color: rgba(83,56,51,0.9);
	    transition: all 0.5s;
	}

	#menu-btn-check:checked ~ .menu-content {
	    left: 0;/*メニューを画面内へ*/
	}

/* ********* */


}