@charset "utf-8";
/* CSS Document */
/*共通*/
html
{
	font-size:100%;
}
body{
	/*ダミー画像*/
	/*background-image:url(../images/dummy_smartphone.png);
	background-position:center top;*/
	/*バック　色*/
	background-color:#fffeee;
	
	/*フォント*/
	font-family: "fot-tsukubrdgothic-std", sans-serif;
font-weight: 400;
font-style: normal;
	color:#3e2723;
	
}
a{
	text-decoration: none;
	color:#3e2723
	
}
img{
	max-width:100%;
}

/*ヘッダー*/
header{
	background-color:#FFFFFF;
	background-size:cover;
	position: fixed;
	top: 0;         
  left: 0;
  width: 100%;
  z-index: 1000; /*スライドより手前に移動*/
	
}
.header-flex {
  display: flex;      
  align-items: center;
  justify-content: space-between;
  position: relative;
padding:0 15px;
}
.collabo-logo {
  display: flex;          
  align-items: center;
}
.collabo-logo img
{
	width:150px;
	max-width: 100%;
	min-width: 100px;
	height: auto;     
    display: block;
}
.hamburger{
	width:20px;
	cursor: pointer;
	
}

.sp-nav {
  display: none; /*スマホ版で隠す作業*/
  background-color: #FFFFFF;
  text-align: center;
  position: absolute; /*ヘッダーの下に浮かせ
	て表示*/
  top: 100%;
  right: 0; /* 右端にぴったり合わせる */
  left: auto; /* 左側の固定を解除 */
  width: 200px; /* メニューの横幅　*/
  /*top: 80px;*/ /* ヘッダーの高さ分下に配置 */
  z-index: 100; /* 最前線に表示 */
}
.sp-nav li {
  padding: 10px 0;
  list-style: none;
 font-size: 16px;
}
.sp-nav a{
	color:#3e2723;
}
.sp-nav a:hover{
	color:#c3b4a7;
}

/*ヘッダー分の空き*/
main{
	padding-top:30px;}
/*トップ画像*/
.top-image {
   width: 100%;
    /* 画像の縦横比を指定（例: 横750px、縦1334pxの場合） */
    aspect-ratio: 768 / 584; 
    
    background-image: url(../images/top-phone2.png);
    background-repeat: no-repeat;
    background-position: center top; 
	background-size: contain;}
.top-image-text
{
	text-align: center;
	line-height: 1.4;
	margin-top:-10px;
	}
.date{
    font-size: clamp(15px, 3vw, 30px);
}
.copy{
	font-size: clamp(8px, 1.5vw, 14px);;
}
.cafe-about{
	font-size:14px;
	max-width:668px;
	padding:0 40px;
	margin:50px auto 0 auto;
	display:flex;
	justify-content: center;
}
/*「私に恋は難しい」について*/
.about-box{
	background-color: #FFFFFF;
	max-width: 600px;
	width:90%;
	margin:50px auto 0 auto;
	border-radius: 40px;
	
}
.about-h1{
	padding-top:20px;
	
}
.about-h1 img{
	display:block;
	margin: 0 auto;
	width:300px;
}
.about-text{
	max-width:668px;
	margin:0 auto;
	padding:10px 30px 20px;}

.about-text p{
	font-size:14px;
	line-height: 1.7;
	
}
/*メニュー*/
.menus-box {
  background-color: #FFFFFF;
  max-width: 600px;
	width:90%;
  margin: 50px auto 0 auto;
  border-radius: 40px;
  padding: 20px 0 25px;
  
}

.menu-h1 img{
	display: block;
	margin: 0 auto;
	width:60px;
}
/*スライダー*/
.menu-slider-container {
  width: 70%; /* 画像を表示する幅（お好みで調整してください） */
  margin: 0 auto;
  padding-top:20px;
}
/* --- Slickスライダーのドット（ページネーション）カスタマイズ --- */
.menus-box .slick-dots {
  display: flex !important;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
}

.menus-box .slick-dots li {
  margin: 0;
}

.menus-box .slick-dots li button {
  font-size: 0; 
  width: 7px;
  height: 7px;
  padding: 0;
  background-color: #d2b49c; 
  border: none;
  border-radius: 50%;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s;
}

.menus-box .slick-dots li.slick-active button {
  opacity: 1; /* 選択中のドットを濃くする */
}

/* 紹介文 */
.menu-desc {
	width: fit-content;
  text-align:left;
  font-size: 14px;
  color: #3e2723;
  margin: 10px auto 15px;
	padding:0 50px;

}

/* 詳細ボタン */
.btn-wrap {
  text-align: center;
}

.menu-btn {
  display: inline-block;
  width: 137px;
  padding: 5px 0;
  background-color: #594236; /* サンプル画像のブラウン */
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 30px;
}
.menu-btn:hover{
	background-color:#e0cfc0;
	scale:1.2;
	
}
/*グッズ*/
.goods-box{
background-color: #FFFFFF;
	max-width: 600px;
	width:90%;
  margin: 50px auto 0 auto;
  border-radius: 40px;
  padding: 20px 0 25px;
  text-align: center;
}
.goods-h1 {
  width:70px;
  margin: 0 auto;
}
.goods-slider-container {
 width: 70%; /* 画像を表示する幅（お好みで調整してください） */
  margin: 10px auto 0 auto;
}
/* --- Slickスライダーのドット（ページネーション）カスタマイズ --- */
.goods-box .slick-dots {
  display: flex !important;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
}

.goods-box .slick-dots li {
  margin: 0;
}

.goods-box .slick-dots li button {
  font-size: 0; 
  width: 7px;
  height: 7px;
  padding: 0;
  background-color: #d2b49c; 
  border: none;
  border-radius: 50%;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s;
}

.goods-box .slick-dots li.slick-active button {
  opacity: 1; /* 選択中のドットを濃くする */
}
/* 紹介文 */
.goods-desc {
  font-size: 14px;
  color: #3e2723;
  margin: 10px 0 15px;
}

/*アクセス*/
#access-box{
background-color: #FFFFFF;
  max-width: 600px;
	width:90%;
  margin: 50px auto 0 auto;
  border-radius: 40px;
  padding: 20px 0 25px;
	text-align: center;
 scroll-margin-top: 30px;
}
.access-h1 {
  width:75px;
  margin: 0 auto;
}
.map{
	margin: 10px auto 0 auto;
}
.map iframe{
	width:70%;
	height: auto;                  /* 高さを自動調整 */
  aspect-ratio: 4 / 3;
}
.access-table{
	
	font-size:12px;
	text-align:left;
	margin: 10px auto 15px auto;
	
	
}
.access-table th{
	font-weight: normal;
	vertical-align: top;
	padding-right: 0.5rem;
}
/*注意事項*/
.guide-box{
	 margin: 50px auto 50px auto;
	background-color: #FFFFFF;
   max-width: 600px;
	width:90%;
  border-radius: 40px;
  padding: 20px 0 25px;
	text-align: center;
}
.guide-top-text{
	font-size:20px;
	font-weight: bold;
}
.guide-box img{
	width:100px;
	padding:20px 0 20px;
}	
.guide-bottom-text{
	font-size:15px;
	font-weight:bold;
}
.guide-box:hover{
    filter: brightness(90%); 
	scale:1.1;
}
/*フッター*/
footer{
	background-color: #e0cfc0;
	padding:20px 0;
}
.cafe-logo{
	max-width:218px;
	margin:0 auto;
}
.sns{
	padding:10px 0;
	justify-content: center;
	align-items: center;
	display:flex;
	gap:25px;
}
.sns img{
	width:27px;
}
.footer-bottom{
	text-align: center;
	font-size:12px;
}
/*下層　メニュー*/
.menu {
  background-color: #FFFFFF;
   max-width: 600px;
	width:90%;
  margin: 20px auto 0 auto;
  border-radius: 40px;
  padding: 20px 0 20px;
}
.menu-topic img{
	width:70%;
	display: block;
	margin:0 auto ;
	padding-top:20px;
}

.menu-text{
	padding:20px 0 25px;
	font-size:14px;
	margin:0 auto;
	text-align:center;
	width: fit-content;
}
.menu-text-top{
	
	line-height: 1.7;
	font-weight: bold;
	margin-bottom: 0px;
}
.menu-text-bottom{
	
	font-size:10px;
	margin-top: 0;
	padding:0 50px;
}
/*ノベルティー*/
.swag{
	 margin: 50px auto 50px auto;
	background-color: #FFFFFF;
   max-width: 600px;
	width:90%;
  border-radius: 40px;
  padding: 20px 0 25px;
	text-align: center;
}
.swag-h1{
	width:108px;
	margin:0 auto;
}
.swag-topic img{
	width:70%;
}
.swag-text{
	padding:0 40px;
	text-align:left;
	font-size:14px;
}

/*グッズ　下層*/
.goods{
	background-color: #FFFFFF;
   max-width: 600px;
	width:90%;
  margin: 20px auto;
  border-radius: 40px;
  padding: 20px 0 20px;
}
.goods-topic img{
	width:70%;
	display: block;
	margin:0 auto ;
	padding-top:20px;
}
.goods-text{
	padding:20px 0 25px;
	font-size:14px;
	margin:0 auto;
	text-align:center;
	width: fit-content;
}
.goods-text-top{
	
	line-height: 1.7;
	font-weight: bold;
	margin-bottom: 0px;
}
.goods-text-bottom{
	
	font-size:10px;
	margin-top: 0;
	padding:0 50px;
}
/*予約ページ*/
.reserve{
	 margin: 50px auto 50px auto;
	background-color: #FFFFFF;
   max-width: 600px;
	width:90%;
  border-radius: 40px;
	padding: 20px 0 30px;
}
.reserve-h1 img{
	display: block;
	margin: 0 auto;
	width:36px;
	padding:20px 0;
	
}
.reserve-box{
	max-width: 668px;
	margin:0 auto;
	padding:0 30px;
}
.form-group {
  display: flex;
  flex-direction: column;
  padding-bottom:10px;
}
.form-group label{
  font-size: 14px;
  font-weight: bold;
}

.form-group select{
	width: 100%;
  padding: 15px 10px;
	border-radius: 4px;
	border: 1px solid #594236;
  background-color: #FFFFFF;
  font-size: 14px;
    box-sizing: border-box;
	
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #594236;
  border-radius: 4px;
  background-color: #FFFFFF;
  font-size: 14px;
    box-sizing: border-box;}


.form-submit {
  text-align: center;
  margin-top: 20px;
}
.form-submit input[type="submit"] {
   display: inline-block;
  width: 137px;
  padding: 5px 0;
  background-color: #594236; /* サンプル画像のブラウン */
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 30px;
}
.form-submit input[type="submit"]:hover {
  background-color:#e0cfc0;
	scale:1.2;
}
/*お問い合わせ　下層*/
.contact{
	 margin: 50px auto 50px auto;
	background-color: #FFFFFF;
   max-width: 600px;
	width:90%;
  border-radius: 40px;
	padding: 20px 0 30px;
}
.contact-h1 img{
	display: block;
	margin: 0 auto;
	width:108px;
	padding:20px 0;
	
}
.contact-box{
	max-width: 668px;
	margin:0 auto;
	padding:0 30px;
}
.radio-option {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 5px;
}
.radio-option label {
  font-weight: normal;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.radio-option input[type="radio"] {
  accent-color: #594236;
}
/*ガイド　下層*/
.guide{
	 margin: 50px auto 50px auto;
	background-color: #FFFFFF;
   max-width: 600px;
	width:90%;
  border-radius: 40px;
	padding: 20px 0 30px;
}
.guide-h1 img{
	display: block;
	margin: 0 auto;
	width:180px;
	padding:20px 0;
	
}
.guide-pages-textbox{
	max-width:668px;
	margin:0 auto;
	padding:10px 30px 20px;}
.guide-pages-textbox h2{
	font-size:18px;
}
.guide-pages-textbox h3{
	font-size:16px;
}
.guide-pages-textbox p{
	font-size:14px;
}
.guide-pages-textbox-2{
	padding-top:20px;
	
}






@media (min-width: 768px) {
	/*ダミー画像*/
	body{
		/*background-image:url(../images/dummy-desk-top.png);
		background-size:cover;*/
	}
	/*ヘッダー*/
	.header-flex {
		padding: 20px 30px;
	}
	.collabo-logo img
{
	width: clamp(220px, 25vw, 380px);
	max-width: 100%;
	height:auto;
}
	.hamburger {
    display: none;
  }
  .sp-nav {
    display: block !important; /*display noneの上書き*/
    position: static;
    width: auto;
    background-color: transparent;
	top: auto;
	right: auto;
	margin-left: 30px;
  }
 .sp-nav ul {
    display: flex;
    gap: clamp(20px, 4vw, 60px);
	 align-items: center;
	}
	.sp-nav li{
		font-size: 16px;
		white-space: nowrap;
	}
/*ヘッダー分の空き*/
main{
	padding-top:100px;}

/*トップ画像*/

  .top-image {
    background-image: url(../images/top_dsk.png);
	aspect-ratio: 1920 / 1081;
	}
	.top-image-text{
		margin-top: clamp(-100px, -8vw, -20px);
	
	}

.date{
    font-size: clamp(20px, 2.2vw, 30px);
}
.copy{
    font-size: clamp(10px, 1.1vw, 14px);
}
.cafe-about{
	font-size: 20px;
	max-width: 1200px;
	margin:100px auto 0 auto;
	padding:0 100px;
	display:flex;
	justify-content: center;
}
/*「私に恋は難しいについて」*/
	.about-box{
	/*background-color: #FFFF00;*/
	max-width: clamp(600px, 80vw, 1000px);
	margin:100px auto 0;
	
}
.about-h1{
	padding-top: 50px;
	margin: 0 auto;
	
}
	.about-h1 img{
		width:509px;
	}
.about-text{
	max-width:820px;
	padding:20px 50px 50px;
}
.about-text p{
	font-size: 20px;
	/*line-height: 1.7;*/
	
}
/*メニュー*/
.menus-box {
  /*background-color: #FFFF00;*/
  max-width: clamp(600px, 80vw, 1000px);
  margin:100px auto 0 auto;
  padding-bottom:50px;
}
.menu-h1{
  margin-top:30px;
		
	}
	.menu-h1 img{
		width:106px;
	}
.menu-slider-container {
  width: 500px;
  margin: 30px auto 0 auto;
}
.menus-box .slick-dots{
		gap:40px;
	padding:20px 0;
	}
.menus-box .slick-dots li button{
		width:14px;
		height:14px;
	}
	.menu-desc {
  font-size: 20px;
  color: #3e2723;
  margin: 10px auto 30px;
}
	.menu-btn {
  display: inline-block;
  width: 280px;
  padding: 10px 0;
  font-size: 24px;
  
	}
/*goods*/
.goods-box{
/*background-color: #FFFF00;*/
  max-width: clamp(600px, 80vw, 1000px);
  margin: 100px auto 0 auto;
  padding-bottom:50px;
}
.goods-h1 {
  width:  127px;
	margin-top:30px;}
.goods-slider-container {
  width: 500px;
  margin: 30px auto 0 auto;
}
.goods-box .slick-dots{
		gap:40px;
	padding:20px 0;
	}
.goods-box .slick-dots li button{
		width:14px;
		height:14px;
	}
.goods-desc {
  font-size: 20px;
  color: #3e2723;
  margin: 10px 0 30px;
}
/*アクセス*/
#access-box{
/*background-color: #FFFF00;*/
  max-width: clamp(350px, 80vw, 1000px);
  margin: 100px auto 0 auto;
  padding-bottom:50px;
  scroll-margin-top: 100px;
}
.access-h1 {
  width:  132px;
	margin-top:30px;}
	.map{
	margin: 30px auto 0 auto;
}
.map iframe{
	width:500px;
	height:375px;
}
.access-table{
	
	font-size:20px;
	text-align:left;
	margin: 20px auto 25px auto;
	
	
}
.access-table th{
	font-weight: normal;
	vertical-align: top;
	padding-right: 1rem;
}
/*注意事項*/
.guide-box{
	 margin: 100px auto 100px auto;
	/*background-color: #FFFF0F;*/
  max-width: clamp(350px, 80vw, 1000px);
  padding: 30px 0 40px;
}
.guide-top-text{
	font-size:40px;
}
.guide-box img{
	width:201px;
	padding:20px 0 20px;
}	
.guide-bottom-text{
	font-size:30px;
}
/*フッター*/
footer{
	padding:30px 0;
}
.cafe-logo{
	max-width:446px;
}
.sns{
	padding:20px 0;
	gap:50px;
}
.sns img{
	width:59px;
}
.footer-bottom{
	text-align: center;
	font-size:25px;
}
	/*下層　メニュー*/
	.menu{
	 margin: 50px auto 0 auto;
	/*background-color: #FFFF0F;*/
  max-width: clamp(350px, 80vw, 1000px);
  padding: 20px 40px 40px;
}
	.menu-flex{
		padding-top:20px;
		display:grid;
		gap:20px;
		grid-template-columns: repeat(2,1fr);
	}
	.menu-topic img{
		width: 100%; /* 親要素に合わせて拡大縮小 */
    max-width: 400px; /* 大きくなりすぎないように制限 */
    height: auto;
		
	}
	.menu-text{
	font-size:20px;
}
	

.menu-text-bottom{
	
	font-size:12px;
	padding:0 10px;
	
}
	/*ノベルティー*/
	.swag{
/*background-color: #FFFF00;*/
  max-width: clamp(600px, 80vw, 1000px);
  margin: 100px auto ;
  padding:50px 0;
}
	.swag-h1{
		width:182px;
	}
	.swag-text{
		max-width:820px;
		margin:0 auto;
		font-size: 20px;
	}
	/*グッズ　下層*/
	.goods{
	 margin: 50px auto;
	/*background-color: #FFFF0F;*/
  max-width: clamp(350px, 80vw, 1000px);
  padding: 20px 40px 40px;
}
	.goods-flex{
		padding-top:20px;
		display:grid;
		gap:20px;
		grid-template-columns: repeat(2,1fr);
	}
	.goods-topic img{
		width: 100%; /* 親要素に合わせて拡大縮小 */
    max-width: 400px; /* 大きくなりすぎないように制限 */
    height: auto;
		
	}
	.goods-text{
	font-size:20px;
}
	

.goods-text-bottom{
	
	font-size:12px;
	padding:0 10px;
	
}
	/*予約　下層*/
	.reserve{
		 margin: 50px auto;
	/*background-color: #FFFF0F;*/
  max-width: clamp(350px, 80vw, 1000px);
  padding: 20px 40px 50px;
		
	}
	.reserve-h1 img{
		width:65px;
		padding:30px 0 40px;
	}
	.reserve-box{
		max-width:820px;
		
	}
	.form-group {
		 display: grid;
    grid-template-columns: 160px 1fr;
    row-gap: 30px;
    column-gap: 30px;
    align-items: start;
	padding-bottom: 30px;
  
}
	.form-group label{
  font-size: 20px;
  font-weight: bold;
    padding-top: 14px;
  }


.form-group select{

  font-size: 20px;
  
	
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {

  font-size: 20px;
   }




.form-submit input[type="submit"] {
 
  display: inline-block;
  width: 280px;
  padding: 10px 0;
  font-size: 24px;
  
	}
	/*お問い合わせ　下層*/
	.contact{
		 margin: 50px auto;
	/*background-color: #FFFF0F;*/
  max-width: clamp(350px, 80vw, 1000px);
  padding: 20px 40px 50px;
		
	}
	.contact-box{
		max-width:820px;

}

    .radio-option label {
    font-size: 20px;
	padding-top: 8px;
	font-weight: normal;
  }
	.contact-h1 img{
		width:180px;
		padding:30px 0 40px;
	}
	/*ガイド　下層*/
	.guide{
	 margin: 50px auto;
	/*background-color: #FFFF0F;*/
  max-width: clamp(350px, 80vw, 1000px);
  padding: 20px 40px 40px;
}
	.guide-h1 img{
		width:300px;
		padding:30px 0 40px;
	}
	.guide-pages-textbox{
	max-width:820px;
	padding:20px 50px 50px;
}
	.guide-pages-textbox h2{
	font-size:30px;
}
.guide-pages-textbox h3{
	font-size:25px;
}
.guide-pages-textbox p{
	font-size:20px;
}
.guide-pages-textbox-2{
	padding-top:50px;
	
}

	
	
}