@charset "UTF-8";
body{
  background-color: #f7f7f7;
  font-family: ryo-gothic-plusn, sans-serif;
	color: #514439;
	font-size:1rem;
	aline-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	word-wrap: break-word;
    letter-spacing: 0.2em;
    height: auto;
    width: 100%;
    overflow: hidden;
}

/*========= モーダルのCSS ===============*/
/*infoエリアをはじめは非表示*/
#info{
	display: none;
}
#info_inner{
	background: #fff;
}
.modaal-container{
	text-align: center;
	max-width: 600px;
	background-image: url("../img/info_bg.jpg");
}
.modaal-container img{
	width: 100px;
	margin-bottom: 20px;
}
.modaal-container h2{
	margin-bottom: 20px;
}
.modaal-container h2,
.modaal-container p{
	color: #514439;
}
.modaal-container h2 span{
	font-size: 1.4rem;
	font-family: ryo-gothic-plusn, sans-serif;
}
.modaal-container p span
{
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: italic;
	font-size: 4rem;
}
.modaal-container p span.year{
	font-size: 2rem;
}
.modaal-close{
    background-color:#f3b3cf!important;
}
.modaal-close:after, 
.modaal-close:before{
	background:#fff;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#ccc;
}
@media screen and (min-width: 769px){
	.modaal-container h2{
	/*background: url("../img/gelato_color.png") no-repeat center;
    background-size: 100px 100px;*/
    padding: 10px 60px;
    white-space: nowrap;
}
}

/*========= 背景動画設定のCSS ===============*/

/*header設定*/
#header{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    height: 100vh;/*高さを全画面にあわせる*/
} 

#video-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0%;
    right:0%;
    left:0%;
    bottom:0%;
    overflow: hidden;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}


/*見出し設定*/
h1{
    /*要素の配置*/
    position: fixed;
    top: 30px;
    left:30px;
    /*見た目の調整*/
	z-index: 1;
}

h1 a img{
	width: 50%;
	filter: drop-shadow(5px 5px 5px #aaa);
}

@media screen and (max-width: 768px){
	h1{
    position: fixed;
    top: 10px;
    left:10px;
    }
	h1 a img{
	width: 60%;
	}
	#instagram{
	background-color: #EEC600;
	padding: 10px;
	text-align: center;
	color: #fff;
	position: fixed;
	 bottom: 0;
	z-index: 2;
	width: 100%;
	height: 50px;
    }
}

/*========= レイアウトのためのCSS ===============*/
a{
	text-decoration: none;
	color: inherit;
}

h2{
	  font-family: "Allura", cursive;
	  font-weight: bold;
	  font-style: normal;
	  font-size: 55px;
}

h3{
	margin-bottom: 30px;
}

.flex{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 30px;
	border-bottom: 1px dotted rgb(79,58,46);
    margin-bottom: 30px;
	align-items: center;
}

#container{
  background-color: #f7f7f7;
  height: auto;
}
#section1,
#access{
	padding: 50px;
}

#about{
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 50px;
	margin-bottom: 30px;
}

#about h2,
#goods h2{
	border-bottom: 1px dotted rgb(79,58,46);
    margin-bottom: 30px;
	padding-bottom: 10px;
}

#cafe h2{
	padding-bottom: 10px;
}

#about img{
	width: 300px;
}

#gelato,
#gelato section a,
#goods section a,
#book section a,
#book,
#goods,
#cafe,
#access section{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 30px;
}

#gelato img.icon,
#book img.icon,
#cafe img.icon{
	width: 80px;
	margin-bottom: 10px;
}

#book{
	align-items: flex-start;
}

#gelato img,
#book img,
#goods img,
#cafe img{
	width: 35%;
}

#about section,
#gelato section,
#book section,
#cafe section,
#goods section{
	width: 50%;
}

#gelato section p,
#book section p,
#goods section p{
	margin-bottom: 30px;
}
#book section a.button2{
	width: 300px;
}

.button1{
	border: 1px solid #514439;
	padding: 10px 20px;
	width: 300px;
	color: #514439;
}

.button1:hover{
	color: #fff;
	background-color: #514439;
}

.button2{
	background-color: #514439;
	padding: 10px 20px;
	width: 300px;
	color: #fff;
	margin-bottom: 30px;
}

.button2:hover{
	color: #514439;
	background-color: transparent;
	border: 1px solid #514439;
}

#book,
#cafe{
	padding-bottom: 30px;
}

#gelato section a.button1{
	margin-top: 30px;
}

#message{
	background-color: #ebe5db;
}

#message h2,
#access h2{
	margin-bottom: 50px;
}

#slider-area{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 30px;
}

#slider-area p{
  font-family: "Zen Kurenaido", sans-serif;
  font-weight: 400;
  font-weight: bold;
  line-height: 2;
  text-align: left;
}

#slider-area p span.tx_right{
	text-align: right;
	display: block;
}

#access img{
	width: 40%;
}

h4{
	font-size: 20px;
}

#access h2{
	text-align: center;
}

.button3{
	display: block;
	margin-top: 30px;
	background-color: #EEC600;
	padding: 10px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	max-width: 350px;
}

footer{
	text-align: center;
	color: #fff;
}

footer img{
	width: 10%;
	margin-bottom: 10px;
}

footer p{
	margin-bottom: 15px;
}

footer p span{
	font-size: 1.2rem;
	font-family: "ab-quadra", sans-serif;
	font-weight: 400;
}


@media screen and (max-width: 768px){
	.pc{
		display: none;
	}
	#section1,
	#message,
	#access{
	padding: 30px;
	}
	#access section{
		padding: 0;
	}
	#about section,
	#about img,
	#gelato section,
	#gelato img,
	#book section,
	#book img,
	#cafe section,
	#cafe img,
	#goods section,
	#goods img,
	#slider-area p,
	#access section,
	#access img{
		width: 100%;
	}
	.button1,
	.button2{
		margin: 0 auto;
	}
	#slider {
    width: 90%;
	height: 30vh;
    }
	#slider-area{
		padding: 0;
	}
	footer{
		padding-bottom: 60px;
		padding-top: 20px;
		background-image: url("../img/footer_bg_sp.jpg");
		background-size: cover;
		background-position: bottom;
	}
	footer img{
		with: 15%;
	}
	#copyright{
		font-size: 10px;
		font-weight: lighter;
		line-height: 1;
	}
	
}

@media screen and (min-width: 769px){
	.sp{
		display: none;
	}
	#gelato section a.button1{
	margin: 30px 0;
}
	#message,
	#access{
		padding: 80px;
	}
	#slider {
    width: 30%;
	min-width: 500px;
	height: 60vh;
    }
	#slider-area{
		padding: 50px;
	}
	#slider-area p{
		width: 40%;
	}
	footer{
		padding-top: 30px;
		padding-bottom: 10px;
		background-image: url("../img/footer_bg.jpg");
		background-size: cover;
		background-position: bottom;
	}
}

#message{
	text-align: center;
}

#message section p{
	margin-top: 40px;
}


/*===========================================================*/
/*ふわっとその場で現れる */
/*===========================================================*/

.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*==================================================
ページトップリンク
===================================*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#f7f7f7;
	border-radius: 5px;
	width: 60px;
	height: 60px;
	color: #EEC600;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	font-size:1rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: #777;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

#page-top a span{
  font-weight: bold;
  font-size: 20px;
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

/*==================================================
　ハンバーガーメニュー
===================================*/
/*==================================================s
機能編　5-1-25 クリックしたらナビ背景コンテンツがぼかされる※IE11非対応
===================================*/

/*========= ぼかしのためのCSS ===============*/

.mainblur{
	filter: blur(8px);
}


/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
	z-index: -1;
	opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
	top:0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background-color: #EEC600;
    /*動き*/
	transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
	opacity: 1;
	z-index:999;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    display: none;/*はじめは非表示*/
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#g-nav.panelactive ul {
    display: block;
}
/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center;
}

#g-nav li a{
	color: #514439;
	text-decoration: none;
	padding:30px;
	display: block;
	text-transform: uppercase;
	font-family: "DM Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: 18px;
}

/*==================================================
機能編　5-2-2 ボタン：2本線が×に
===================================*/

/*ボタン外側*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 70px;
    height:70px;
}

/*ボタン内側*/

.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 13px;
    height: 3px;
	background-color: #514439;
  }


.openbtn span:nth-of-type(1) {
	top:22px;
  	width: 50%;
}

.openbtn span:nth-of-type(2) {
	top:29px;
  	width:30%;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.active span:nth-of-type(1) {
    top: 20px;
    left: 16px;
    transform: translateY(6px) rotate(-45deg);
    width: 35%;
}

.openbtn.active span:nth-of-type(2) {
    top: 32px;
    left: 16px;
    transform: translateY(-6px) rotate(45deg);
    width: 35%;
}