@charset "utf-8";

/* =======================================================
共通
======================================================= */
body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 16px;
    width: 100%;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h2 {
    font-size: 30px;
    font-weight: bold;
}

h3 {
    font-size: 20px;
    color: #333;
}

main {
    margin: 0 auto;
    padding: 70px 0 0;
    box-sizing: border-box;
}

.wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.wrap div img {
    display: block;
    margin: 20px auto;
}

a:hover {
    color: rgba(236, 181, 236, 0.822);
    border-bottom: 10px solid rgba(247, 202, 247, 0.7);
    transition: all .5s  ease;
}


/* =======================================================
ヘッダー
======================================================= */
header {
    height: 70px;
    width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    position: fixed;
    background:rgba(100,100,100,0.7);
    z-index: 999;
}

#header{
    line-height: 1.0;
    height: 70px;
    width: 212px;;
    top: 0;
    left: 0;
    line-height: 1.0;
	display: flex;
}

#header ul li {
    top: 0;
    left: 0;
}

.menubtn {
    display: none;
}

.menubar {
    display: block;
    /* display: flex; */
	width:80vw;
    height: 70px;
    top: 0;
    right: 0;
    padding: 20px 10px;
}

/* .menubar nav {
    display: block;
} */

.menubar nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
}

.menubar nav a {
    display: block;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    padding: 0 20px;
}    

.menubar a:hover {
    color: rgba(246, 195, 246, 0.822);
}    


/* =======================================================
スライダー（スライドショー）
======================================================= */
#slide {
    position:relative;
}
#slide li {
    position: absolute;
}    
/* イメージ画像（１） */
.slider-item01 {
    background:url(../img/img1.jpg);
}    
/* イメージ画像（２）   */
.slider-item02 {
    background:url(../img/img2.jpg);
}    
/* イメージ画像（３）   */
.slider-item03 {
    background:url(../img/img3.jpg);
}    
.slider-item {
    width: 100%;
    height:100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}    
/* イメージ画像上のコメント */
#area-0 {
    /* スライダー用画像に重ねる */
    position: absolute;
    top: 70px;
    padding: 15% 5% 50%;
    /*z-indexの値を大きくしてイメージ画像より手前に表示する*/
    z-index: 9;
}
#area-0 p {
    color: #fff;
    font-size: 20px;
    line-height: 2.0;
}    


/* =======================================================
コンテンツエリア
======================================================= */
#content {
    background: #F2F0ED;
    /* 左に余白を作る */
    margin-left: 25%;
    /* #area-0がposition: absoluteのため次のコンテンツの位置が詰まらないようにするための余白 */
    padding-top: 100vh;
    /* 配置の調整 */
    padding-right: 15%;

}    
/* コンテンツ項目 */
section {
    display: flex;
    /* 左に10％はみ出させる */
    margin-left: -10%;
    padding: 5% 0 10%;
    border-bottom: 1px solid #aaa;
}    
/* コンテンツの内容エリア */
section div:nth-child(2) {
    /* font-size: 20px; */
    margin: 0 auto;
}    

/* リンク項目のスタイル */
span a {
    display: inline-block;
    text-align: center;
    padding: 20px;
    margin: 50px 0 50px 50px;
    background-color: rgba(100,100,100,0.1) ;
    font-size: 20px;
    border: 1px solid #333;
}            

span a:hover {
    color: rgba(255, 0, 255, 0.7);
    background-color: #ccc ;
}            


/* =======================================================
フッター
======================================================= */
#f-navi li {
    padding-bottom: 10px;
}

footer {
    width: 100%;
    padding-top: 20px;
    background-color: rgba(65, 64, 64, 0.9) ;
    color: #fff;
    margin: 2px auto 0;
}

#footer {
    display: flex;
    justify-content: space-evenly;
}

#footer div,
#footer nav {
    padding: 10px;
}

footer p {
    width: 200px;
    margin: 0 auto;
    padding: 10px;
}

body footer div:last-child p {
    text-align: center;
}

#top-icon {
    position: fixed;
    bottom: 5px;
    right: 5px;
    z-index: 999;
    transition: 1s;
}


/*=======================================================
フォーム
=======================================================*/
.h-adr {
    width: 70%;
    margin: 10px auto;
    background: #fff;
}
    
.h-adr h2,
.h-adr h3,
.h-adr p {
    text-align: center;
}

.h-adr dl dt {
    margin-top: 20px;
}

.h-adr dl dd {
    padding: 10px;
    background-color: #F2F0ED;
}

.p-region {
   display: inline-block;
   width: 90%;
   padding: 10px;
}

form p:last-child input {
    width: 100px;
    padding: 10px;
    margin: 30px;
    font-weight: bold;
    background-color: rgba(100,100,100,0.1) ;
    font-size: 20px;
    border: 1px solid #333;
}

form p:last-child input:hover {
    color: rgba(255, 0, 255, 0.822);
    background-color: #ccc;
}

.hover label:hover {
    border-bottom: 5px solid #ccc;
}

.alert {
    color: #f00;
    font-weight: bold;
}

.guests {
    color: #00f;
    font-size: 18px;
    font-weight: bold;
}

textarea {
    width: 90%;
}


/*=======================================================
ショップ
=======================================================*/
.wrap_2 {
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: rgba(65, 64, 64, 0.925) ;
    color: #fff;
}

.wrap_2 div img {
    display: block;
    margin: 25px auto 1px;
}

div.bg {
    padding: 0;    
}


/*=======================================================
カフェ
=======================================================*/
.wrap_3 {
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 30px;
    border-bottom: 1px solid #aaa;
}

.wrap_3 div img {
    display: block;
    margin: 30px auto 5px;
}

.bg h3 {
    margin-bottom: 20px;
    font-weight: 700;
}

p a {
    color: #00f;
    font-weight: bold;
}


/*=======================================================
マップ
=======================================================*/
#maps {
    width: 100%;
    margin: 10px auto;
}

#maps div p {
    text-align: center;
}
   
    
/*=======================================================
プライバシーポリシー
=======================================================*/
.pp {
    width: 60%;
    margin: 0 auto 20px;
    padding-bottom: 10vh;
}

.pp h2 {
    margin: 0 auto 20px;
    text-align: center;
}

.pp h3 {
    font-weight: bold;
    margin-top: 20px;
}


/*=======================================================
レスポンシブ対応
=======================================================*/
@media screen and (max-width: 560px){

.menubar {
    display: block;
}

/* ハンバーガーメニュー */
.menubar nav {
    display: block;
    width: 212px;
    height: 100vh;
    padding: 20px;
    position: fixed;
    top: 70px;
    left: -300px;
    /* bottom: 0; */
    background:rgba(90,90,90,0.9);
	/* color:#fff; */
    z-index: 999;
    opacity: 0;
    transition: all .5s;
}

.menubar.open nav {
    display: block;
    left: 0;
    opacity: .9;
    transition: all .5s;
}

.menubar.open nav a {
    display: block;
    font-size: 2em;
    /* height: 50px; */
    padding: 10px 0;
    margin: 0;
    text-align: left;
}

/* メニューボタン */
.menubar .menubtn {
    display: block;
	position: fixed;
    top: 20px;
    right: 50px;
    width: 30px;
    height:30px;
    z-index: 999;
	cursor: pointer;
}        
.menubar .menubtn span {
    position: absolute;
    display: block;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: #fff;
    transition: all .5s;
    border-radius: 4px;
}        
.menubar .menubtn span:nth-child(1) {
    top: 4px;
}
.menubar .menubtn span:nth-child(2) {
    top: 14px;
}
.menubar .menubtn span:nth-child(3) {
    bottom: 4px;
}

.menubar.open .menubtn span:nth-child(1) {
    transform: translateY(10px) rotate(-400deg);
}
.menubar.open .menubtn span:nth-child(2) {
    opacity: 0;
}
.menubar.open .menubtn span:nth-child(3) {
    transform: translateY(-10px) rotate(400deg);
}

/* ハンバーガーメニューここまで */


footer {
    margin-left: 0;
}

body {
    font-size: 0.8rem;
  }

.bg,
.wrap,
.wrap_2,
.wrap_3,
.h-adr {
    width: 100%;
    margin: 0 auto;
    padding: 2%;
}

#content {
    margin-left: 0;
    padding-right: 0;
}

#slide {
    position:relative;
    z-index: 1;
}    

#slide li {
    position: absolute;
    width: 100%;
}    

.slider-item01 {
    background:url(../img/img1_s.jpg);
}    

.slider-item02 {
    background:url(../img/img2_s.jpg);
}    

.slider-item03 {
    background:url(../img/img3_s.jpg);
}    

.slider-item {
    width: 100%;
    height:100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}    

#area-0 {
    position: absolute;
    margin-left: 5%;
    top: 0;
    padding: 50vh 0 0;
    z-index: 99;
}    

#area-0 p {
    color: #fff;
    font-size: 1.3em;
    line-height: 1.5;
}    

#maps iframe {
    width: 100vw;
}

main h2,
main h3,
main span a,
main p,
main img {
    text-align: center;
}

main {
    padding-bottom: 0;
}

.pp h3,
.pp p,
.wrap_3 p:first-child {
    text-align: left;
}

span a {
    margin: 50px;
}

#area-0 p {
    text-align: left;
}

.pp {
    width: 90vw;
    margin: 10px auto;
}

}  /* media screen end */