@charset "utf-8";
/* CSS Document */

/*↓home↓*/
.mainvisual{
  position: relative;
  width: 100%;
  height: 100vh; /* 全画面にしたい場合 */
  overflow: hidden;
  text-align: center;
}


.mainvisual .image{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	background-size: cover;
	background-position: center center;
	
	animation: image-switch-animation 25s infinite;
	z-index: 0;
}

.overlay{
	position: absolute;
  	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
  	background-color: rgba(0, 0, 0, 0.3); /* 黒＋50%透過 */
	z-index: 1;
}

.mainvisual span{
	color: #fff;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 26px;/*字の大きさ*/
  	font-weight: 500;/*medium*/
  	font-style: normal;
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.src1{
	background-image: url("../imgs/first_view1.jpg")
}

.src2{
	background-image: url("../imgs/first_view2.jpg")
}

.src3{
	background-image: url("../imgs/first_view3.jpg")
}

.src4{
	background-image: url("../imgs/first_view4.jpg")
}

.src5{
	background-image: url("../imgs/first_view5.jpg")
}

@keyframes image-switch-animation{
	0%{opacity: 0;}
	5%{opacity: 1;}/*0.5秒　フェードイン*/
	25%{opacity: 1;}/*2.5秒　表示*/
	30%{opacity: 0;}/*3秒　フェードアウト*/
	100%{opacity: 0;}/*10秒*/
}

.image:nth-of-type(1){
	animation-delay: 0s;
}

.image:nth-of-type(2){
	animation-delay: 5s;
}

.image:nth-of-type(3){
	animation-delay: 10s;
}

.image:nth-of-type(4){
	animation-delay: 15s;
}

.image:nth-of-type(5){
	animation-delay: 20s;
}


/*ロゴ単体で設定したい場合に設定する*/
/*positionの場合は○○から○○pxといった形で動くので注意*/



body{
	background-color: #FAF7F2;
}

#contents,header,footer{
	width: auto;
	margin-left: auto;
	margin-right: auto;
}

#header-area{
	position: relative;
}

#header-area .header_logo{
	position: absolute;
}

#header_navi ul{
	/*border: solid 1px red;*/
	text-align: center;
}

#header_navi ul li{
	/*border: solid 1px red;*/
	display: inline-block;
	padding: 0 50px 0px 50px;
	font-size: 44px;
	font-weight: normal;/*500pxくらい*/
	font-family: "M PLUS Rounded 1c", sans-serif;
	text-shadow: 0px 4px 3.5px #aaaaaa;/*: 横のずれ 縦のずれ ぼかしの距離 色;*/
}

#header_navi ul li a{
	color: #6B4226;
	text-decoration: none;
}

#header_navi ul li a:hover{
	color: #C97D60;
	font-weight: bold;
}

#header-area h1{
	text-align: center;
	color: #C97D60;
	text-shadow: 4px 4px 3px #6B4226;/*: 横のずれ 縦のずれ ぼかしの距離 色;*/
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 96px;/*字の大きさ*/
  	font-weight: bold;
  	font-style: normal;
}

#header-area h1 a{
	color: #C97D60;
	text-decoration: none;
}

h2{
	font-family: "M PLUS Rounded 1c", sans-serif;
	color: #6B4226;
	font-size: 64px;
	font-weight: 500;/*medium*/
}


#breadcrumb ul {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 34px;
	list-style-type: none;
	padding: 0;
	text-align: left;
	margin: 0 0 0 10px;
}
#breadcrumb ul li {
	display: inline;
}

#breadcrumb ul li a {
	padding-right: 15px;
	background-image: url("../imgs/breadcrumb_arrow.png");
	background-repeat: no-repeat;
	background-position: right center;
}

p{
	margin: 0 0 12px 0; /* 下だけ余白を残す（上を消す） */
	line-height: 1.2;   /* 行間も調整 */ 
	font-size: 18px;
}

#concept{
	text-align: center;
	margin: 100px 0 100px 0;
	/*displayプロパティは親要素に設定する*/
	display: flex;              /* 横並びにする */
  	align-items: flex-start;    /* 上端揃え */
  	justify-content: space-between; /* 横方向の配置 */
}

.concept_box{
	border: dotted #6B4226;
	border-radius: 50px;
	padding: 0 70px 0 100px;
	text-align: left;
	width: 50%;
	margin-left: 30px;
}

.concept_img{
	width: 50%;
	filter: drop-shadow(10px 10px 4px #C97D60);
}

.concept_box span a{
	display: inline-block;
	/*padding-top: 38px;*//*内側の上部分が広がってしまい背景色がうまくかからない*/
	margin-top: 30px; /*view moreの位置調整*/
	margin-bottom: 45px; /*view moreの位置調整*/
	font-size: 26px;
	color: #ffffff;
	text-decoration: none;
	background-color: #6B4226;
	border-radius: 15px;
}

.concept_box span a:hover{
	background-color: #C97D60;
}

#menu{
	text-align: center;
}

.menu_box{
	display: flex;
	justify-content: center;
	gap: 10px;/*↑で設定した場合これで間の感覚を空ける*/
	padding-bottom: 10px;	
}

.menu_box figure img{
	display: block;
	border-radius: 70px;
	filter: drop-shadow(10px 10px 4px #C97D60);
}

#menu span a{
	display: inline-block;
	/*padding-top: 38px;*//*内側の上部分が広がってしまい背景色がうまくかからない*/
	margin-top: 40px;
	font-size: 26px;
	color: #ffffff;
	text-decoration: none;
	background-color: #6B4226;
	border-radius: 15px;
}

#menu span a:hover{
	background-color: #C97D60;
}

.slider{
	margin: 50px 0 50px 0;
}

#access{
	/*border: solid 1px red;*/
	text-align: left;
	display: flex; /* 横並びにする */
	align-items: flex-start; /* 上端揃え */
	justify-content: center; /* 横方向の配置 */
	gap: 150px;
	margin: 50px 0;
}

.access_title li{
	font-size: 22px;
	color: #6B4226;
}

.access_list ul li{
	/*border: solid 1px red;*/
	list-style-type: none;
}

.google_map{
	margin-top: 50px;
}

.business_hours,
.adress,
.access,
.email{
	margin-bottom: 10px;
}

.access_title{
	margin-bottom: 0px;
}

.access_list span a{
	display: inline-block;
	/*padding-top: 38px;*//*内側の上部分が広がってしまい背景色がうまくかからない*/
	margin-top: 40px;
	margin-bottom: 20px;
	font-size: 26px;
	color: #ffffff;
	text-decoration: none;
	background-color: #6B4226;
	border-radius: 15px;
}

.access_list span a:hover{
	background-color: #C97D60;
}


#footer_area{
	text-align: center;
}

.footer_logo{
	/*border: solid 1px red;*/
	margin: 10px 0 0 0;
	display: inline-block;
}

#footer_navi ul{
	/*border: solid 1px red;*/
	text-align: center;
}

#footer_navi ul li{
	/*border: solid 1px red;*/
	display: inline-block;
	padding: 0 50px 0px 50px;
	font-size: 44px;
	font-weight: normal;
	font-family: "M PLUS Rounded 1c", sans-serif;
	text-shadow: 0px 4px 3.5px #aaaaaa;/*: 横のずれ 縦のずれ ぼかしの距離 色;*/
}

#footer_navi ul li a{
	color: #6B4226;
	text-decoration: none;
}

#footer_navi ul li a:hover{
	color: #C97D60;
	font-weight: bold;
}

#sns_icon{
	display: flex;
	justify-content: center;
	gap: 50px;
	margin: 100px 0;
}

.x_icon img,.instagram_icon img,#header-area img,#footer_navi img{
	transition: transform 0.3s ease; /* ← これがないと拡大がカクッとなる */
}

.x_icon img:hover,
.instagram_icon img:hover,
#header-area img:hover,
#footer_navi img:hover{
	transform: scale(1.2); /* 拡大 */
}

footer{
	background-color: #6B4226;
	color: #fff;
	padding: 35px 0;
}

/*------------------------------以下、CSSシグネチャの記述------------------------------*/
#home_body #header_navi ul li:first-child a,
#home_body #footer_navi ul li:first-child a{
	color: #C97D60;
	font-weight: bold;
}

#concept_body #header_navi ul li:nth-child(2) a,
#concept_body #footer_navi ul li:nth-child(2) a{
	color: #C97D60;
	font-weight: bold;
}

#menu_body #header_navi ul li:nth-child(3) a,
#menu_body #footer_navi ul li:nth-child(3) a{
	color: #C97D60;
	font-weight: bold;
}

#about_body #header_navi ul li:nth-child(4) a,
#about_body #footer_navi ul li:nth-child(4) a{
	color: #C97D60;
	font-weight: bold;
}

#contact_body #header_navi ul li:nth-child(5) a,
#contact_body #footer_navi ul li:nth-child(5) a{
	color: #C97D60;
	font-weight: bold;
}
/*↑home↑*/

/*↓menu*/
#menu2 h2{
	text-align: center;
}

#menu2 h3{
	font-size: 38px;
	color: #6B4226;
	margin: 15px;
}

.menu_coffe{
	margin: 100px 0 100px 80px;
	/*displayプロパティは親要素に設定する*/
	display: flex;              /* 横並びにする */
  	align-items: flex-start;    /* 上端揃え */
  	gap: 80px;
}


.menu_coffe_explanation{
	border: dotted 3px #6B4226;
	padding: 20px 20px 20px 20px;
	border-radius: 20px;
}

.menu_coffe_imge img{
	border-radius: 50px;
}

.menu_food_parent{
	text-align: center;
}

.menu_set_drink{
	margin-bottom: 200px;
}

.menu_food{
	display: flex;
	justify-content: center;
}

.menu_food img{
	border-radius: 50px;
	transition: transform 0.4s ease; /* ← これがないと拡大がカクッとなる */
}

.menu_food img:hover{
	cursor: pointer;
	transform: rotate(5deg);
}

.drink_kinds_type{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28px;
	gap: 30px;
}

.drink_type{
	list-style-type: none;
}

.menu_set_drink_imgs{
	margin-left: 100px;
	position: relative;/*この要素（.menu_set_drink_imgs_childの親要素）の左上を基準としている。*/
}

.menu_set_drink img{
	border-radius: 100px;
}

.menu_set_drink_imgs_child{
	position: absolute;
	left: 75%;
	top: 80%;
	z-index: 1;
}

/*↑menu↑*/
/*↓concept↓*/

.concept_page h2{
	text-align: center;
}

.wrapper-1300{
	max-width: 1340px;
	padding: 0 20px;
	margin: 0 auto;
}

.concept_page{
	margin-bottom: 80px;
}

.concept_page img{
	border-radius: 30px;
}

.concept_page p{
	line-height: 2;
	margin-bottom: 40px;
	text-align: justify;
}

.content-top{
	display: flex;
	justify-content: space-between;
}

.content-top .img-left{
	max-width: 380px;
	margin-top: 180px;
}

.content-top .text{
	max-width: 300px;
	margin: 90px 20px 0;/*↑90　右左20　↓0*/
}

.content-top .img-right{
	max-width: 470px;
}

.content-middle{
	max-width: 830px;
	width: 70vw;
	margin: -40px -80px 0 auto;
}

.content-bottom{
	display: flex;
	margin-top: -30px;
}

.content-bottom .img-left{
	max-width: 220px;
	margin-left: 13%;
}

.content-bottom .img-right{
	max-width: 280px;
	margin: 250px 220px 0;
}

.content-bottom .text{
	max-width: 280px;
	margin-top: 380px;
	margin-left: -55px;
}

/*↑concept↑*/

/*↓contact↓*/
.contact_page h2{
	text-align: center;
}

.contact_page table{
	margin: 0 auto;
}

.contact_page caption{
	font-size: 28px;
}

.contact_page table thead,
.contact_page table tbody tr,
.contact_page table tbody tr th{
	border:double #6B4226;
	font-size: 20px;
}

.contact_page table{
	margin-bottom: 150px;
}

.contact_form p,
.contact_form ul li{
	text-align: center;
	list-style-type: none;
}

.contact_form{
	max-width: 1280px;
	padding: 0 20px;
	margin: 0 auto 120px;
}

.contact_form .item{
	padding: 20px;
}

.contact_form p{
	margin-top: 20px;
	font-size: 18px;
}

.contact_form dl p{
	font-size: 28px;
}

.contact_form dl dt,
.contact_form dl dd{
	margin: 0 auto;
	font-size: 18px;
}

.item_botun{
	text-align: center;
	margin-top: 20px;
}

.item dd input[type="text"],
.item dd input[type="email"],
.item dd input[type="number"]{
	width: 450px;
	height: auto;
}

/* 共通スタイル */
.item_botun input[type="submit"],
.item_botun input[type="reset"]{
  display: inline-block;
  width: 160px;           /* ボタン幅 */
  padding: 12px 0;        /* 高さ感 */
  margin: 0 10px;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;       /* ホバー時のアニメーション */
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* 送信ボタン（メインカラー） */
.item_botun input[type="submit"]{
  background-color: #6B4226;   /* メインカラー使用 */
  color: #fff;
}

.item_botun input[type="submit"]:hover {
  background-color: #8C5A35; /* 少し明るめに */
}

/* クリアボタン（サブカラー） */
.item_botun input[type="reset"]{
  background-color: #FAF7F2; /*ベースカラー使用*/
  color: #333;
}

.item_botun input[type="reset"]:hover {
  background-color: #E8E2DA;  /* やや濃くして押した感 */
}

.item dt label{
  font-weight: 600;
}

.item dd .require{
  display: inline-block;
  background: #fff;
  border: 1px solid red;
  color: red;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1;
  align-self: center;
}

.item dt{
  width: 500px;
}

.item dd{
  width: 500px;
}

.contact_form dl{
	background-color: #C8B199;
	color: #fff;
	padding-bottom: 30px;
	border-radius: 30px;
}


/*↑contact↑*/


/*ここまでpc用のcssを記述する*/

@media screen and (max-width: 767px){
	/*ここからスマートフォン用のcssを追加、上書きする*/
	
	/* style.css */
body {
  font-family: sans-serif;
}

/* 画像は親要素の幅に合わせて縮小する */
img {
  max-width: 100%;
  height: auto;
}
	

/* --- ヘッダー --- */
  #header-area h1 {
    font-size: 48px; /* PCだと96pxなので小さめに */
  }

/*　↓ヘッダーハンバーガー↓　*/
	
	/*茶色の部分*/
	#header-area header .hamburger{
		width: 50px;
		height: 50px;
		background-color: #6B4226;
		border-radius: 10px;
		cursor: pointer;
		position: fixed;
		top: 20px;
		right: 20px;
		z-index: 20;
	}
	
	/*白い三本線*/
	#header-area header .hamburger span{
		width: 30px;
		height: 2px;
		background-color: #fff;
		border-radius: 1px;
		display: inline-block;
		position: absolute;
		left: 10px;
		transition: all 0.4s;/*0.4sかけて全てのプロパティが変形*/
	}
	
	/*白い線上*/
	#header-area header .hamburger span:nth-of-type(1){
		top: 16px;
	}
	
	/*白い線中*/
	#header-area header .hamburger span:nth-of-type(2){
		top: 25px;
	}
	
	/*白い線下*/
	#header-area header .hamburger span:nth-of-type(3){
		top: 34px;
	}
	
	/*ハンバーガー開いた時に出てくるやつの背景*/
	#header-area #header_navi {
		width: 100%;
		height: 100vh;
		background-color: #FAF7F2;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		opacity: 0;
		visibility: hidden;/*visibility は CSS のプロパティで、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。このプロパティは <table> の行や列を隠すこともできます。*/
	}
	
	/*ハンバーガー開いた時に出てくるナビゲーション*/
	#header-area #header_navi .nav_menu{
		width: 100%;
		height: 100vh;
		padding: 80px 0;
		overflow: auto;/*縦のスクロールバー*/
	}
	
	/*ハンバーガーメニューが表示される*/
	#header-area #header_navi.active {
    opacity: 1;/*1→みえる、0→みえない*/
    visibility: visible;/*visibility は CSS のプロパティで、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。このプロパティは <table> の行や列を隠すこともできます。なぜvisibilityじゃないといけないのか？→transitionが効かなくなるため*/
    transition: all 0.6s;
}
	
	#header-area #header_navi ul li a{
		padding: 15px 0; 
	}
	
	
	#header-area .hamburger.active span:nth-of-type(1){
		top: 24px;
		transform: rotate(-45deg);
	}
	
	#header-area .hamburger.active span:nth-of-type(2){
		opacity: 0;
	}

	#header-area .hamburger.active span:nth-of-type(3){
		top: 24px;
		transform: rotate(45deg);
	}

	
	
/*　↑ヘッダーハンバーガー↑　*/
	

  #header_navi ul li {
    display: block; /* 横並びを縦並びに */
    padding: 20px 0;
    font-size: 28px;
  }
	
	.header_logo{
		display: none !important;
	}

  /* --- メインビジュアル --- */
  .mainvisual {
    height: 60vh; /* スマホは全画面だと縦に長すぎるので調整 */
  }

  .mainvisual span {
    font-size: 16px; /* テキスト小さめ */
    text-align: center;
    padding: 0 20px; /* 端にくっつかないように余白 */
  }

  /* --- concept --- */
  #concept {
    flex-direction: column; /* 縦並びにする */
    align-items: center;
  }

  .concept_box, .concept_img {
    width: 90%; /* 横幅いっぱいに近づける */
    margin: 20px 0;
    padding: 20px;
  }

  /* --- menu --- */
  .menu_box {
    flex-direction: column; /* 縦並び */
    gap: 20px;
  }

  .menu_box figure img {
    width: 100%; /* 画面幅に合わせる */
    border-radius: 20px;
  }

  /* --- access --- */
  #access {
    flex-direction: column; 
    gap: 50px;
  }

  .google_map iframe {
    width: 100%;
    height: 300px; /* スマホに収める */
  }

  /* --- footer --- */
  #footer_navi ul li {
    display: block; /* 縦並び */
    padding: 10px 0;
    font-size: 20px;
	 display: none;/*完全に消える*/
  }
	
/*補足
	opacity...要素が透明になるが触ることができる
	visibility...幅、高さは残るが触ることができない
	display: none;...完全になくなる
	*/
	
	.footer_logo{
		width: 50%;
		height: auto;
	}

  #sns_icon {
    gap: 30px;
    margin: 50px 0;
  }

/*margin,padding: 上 右 下 左（時計回り）;
	単純に長さを表している*/
/*flex: flex-grow flex-shrink flex-basis;
	伸びる/縮む/基本サイズを表している。
	なので、flex: 0 0 50pxとなる。*/
	.x_icon, .instagram_icon {
    flex: 0 0 50px; /* 幅を固定 */
  }

  .x_icon img, .instagram_icon img {
    width: 100%; /* 親の幅に合わせる */
    height: auto;
  }
	
	
	
}


@media screen and (min-width: 1025px){
	/*pc用のcssを追加、上書きする*/
}